/* ============================================================================
   AIQuorix — aqx-2026.css
   ----------------------------------------------------------------------------
   Loaded on EVERY page, after app.css / animations.css / theme.css.

   It adds four things and changes nothing that already works:

     1. The pointer.  The system cursor is hidden and replaced by one blade.
     2. The backdrop. A corridor on public pages, a slow aurora on the panels.
     3. Motion.       Cascading table rows, drawing sparklines, one-shot flashes.
     4. Settings.     Turns the existing settings form into tabs — no field is
                      moved, renamed or removed, so the POST is untouched.

   WHAT IT DELIBERATELY DOES NOT DO
   --------------------------------
   · It never sets a root font-size. That shifted Bootstrap's whole rem
     scale once and broke the footer.
   · It never changes control padding, heights, z-index or position on any
     existing page element.
   · It contains no licence, order or heartbeat logic. Nothing in this file
     can affect the EA or the licence server.

   Everything is on the existing --aqx-* custom properties, so there is no
   second palette to keep in sync.
   ========================================================================== */


/* ============================================================================
   1. THE POINTER
   ==========================================================================*/
/* The system arrow is gone, so this blade has to answer both questions an
   arrow answers: where am I, and what am I over.

   The SVG's tip sits at the origin, which makes the TIP the hotspot. An
   arrow whose hotspot is its centre feels a few pixels wrong forever and
   nobody can ever say why.

   Only on a fine pointer — a touch device has no cursor to replace, and
   hiding one there would just remove nothing and break :hover. */
@media (hover: hover) and (pointer: fine) {
  html.aq26-blade, html.aq26-blade *, html.aq26-blade *::before, html.aq26-blade *::after {
    cursor: none !important;
  }
}

#aq26-blade {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 2147483000;
  opacity: 0; transition: opacity .25s;
  will-change: transform;
}
#aq26-blade.on { opacity: 1; }
#aq26-blade svg { display: block; overflow: visible; }
#aq26-blade path {
  fill: rgba(8, 12, 21, .55);
  stroke: var(--aqx-text, #e6eaf4);
  stroke-width: 1.6; stroke-linejoin: round;
  transition: stroke .25s, fill .25s;
}
/* Over anything clickable the arrow itself goes teal and fills in. The
   cursor IS the hover state, so no second element is needed to signal one. */
#aq26-blade.hot path {
  stroke: var(--aqx-accent, #22d3ae);
  fill: rgba(34, 211, 174, .30);
}
@media (hover: none), (pointer: coarse) { #aq26-blade { display: none; } }


/* ============================================================================
   2. THE BACKDROP
   ==========================================================================*/
/* body must not paint a background of its own, or it covers a z-index:-2
   canvas completely. html carries the base colour instead. This exact bug
   cost an hour: the canvas was drawing perfectly and was simply behind an
   opaque box. */
html { background: var(--aqx-bg, #080c15); }
body.aq26-bg-on { background: transparent; }

#aq26-corridor, #aq26-aurora {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
}
#aq26-scrim {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
}

/* --- public pages: a corridor you fly through ---------------------------- */
/* Legibility comes from POSITION and a SCRIM, never from turning the effect
   down until it is gone. So the corridor is real and bright, its points are
   pushed out of the middle where the words are, and this sits between. */
body.aq26-site #aq26-scrim {
  background:
    radial-gradient(105% 68% at 50% 50%,
      rgba(8,12,21,.88) 0%, rgba(8,12,21,.55) 38%, rgba(8,12,21,.06) 72%, transparent 100%),
    linear-gradient(180deg,
      rgba(8,12,21,.72) 0%, transparent 22%, transparent 78%, rgba(8,12,21,.82) 100%);
}
/* A little air in the corridor. The dots alone read as a starfield; the haze
   is what makes it read as depth you are inside of. */
body.aq26-site::before {
  content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(60% 46% at 50% 46%, rgba(79,124,255,.16), transparent 70%),
    radial-gradient(46% 38% at 78% 62%, rgba(34,211,174,.10), transparent 72%),
    var(--aqx-bg, #080c15);
}
/* Any section carrying body copy gets its own floor. A paragraph should
   never be asked to compete with a moving star. */
body.aq26-site .section,
body.aq26-site section.py-5 {
  position: relative;
}

/* --- panels: a slow aurora, and a grid ----------------------------------- */
/* Deliberately NOT the corridor. A marketing page is looked at once; a panel
   is worked in for an hour, and a background that reacts to your scrolling
   becomes nausea by the third support ticket. Same palette, a tenth of the
   speed, and it never reads scrollY at all. */
body.aq26-panel #aq26-scrim {
  opacity: .5;
  background-image:
    linear-gradient(rgba(79,124,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,124,255,.055) 1px, transparent 1px);
  background-size: 58px 58px;
  /* Faded at the edges so it reads as depth, not as graph paper. */
  -webkit-mask-image: radial-gradient(120% 100% at 30% 0%, #000 20%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 30% 0%, #000 20%, transparent 78%);
}


/* ============================================================================
   3. MOTION
   ----------------------------------------------------------------------------
   One rule holds all of it: motion may report state, and may guide the eye
   through an order. It may not simply decorate. A panel is worked in for an
   hour, and a moving thing you cannot act on is a tax on the person using it.
   ==========================================================================*/

/* Rows cascade in rather than appearing as a block, so a table reads
   top-to-bottom the way you are about to read it anyway. */
body.aq26-panel .aq26-cascade tbody tr { opacity: 0; transform: translateY(6px); }
body.aq26-panel .aq26-cascade tbody tr.in {
  opacity: 1; transform: none;
  transition: opacity .4s, transform .5s var(--aqx-ease, cubic-bezier(.16,1,.3,1));
}

/* The smallest possible confirmation that a sidebar item is hoverable. */
body.aq26-panel .nav-link > span:first-child {
  display: inline-block;
  transition: transform .3s var(--aqx-ease, cubic-bezier(.16,1,.3,1));
}
body.aq26-panel .nav-link:hover > span:first-child { transform: translateX(2px) scale(1.08); }

/* A row that just changed flashes ONCE. A permanent glow is decoration; a
   single flash is a report. */
@keyframes aq26-freshrow {
  0%   { background: rgba(34,211,174,.14); }
  100% { background: transparent; }
}
body.aq26-panel tr.aq26-fresh > td { animation: aq26-freshrow 1.6s ease-out; }

/* A line that draws itself is read as a trend. A line that is simply there
   is read as an icon. */
.aq26-spark { display: block; }
.aq26-spark polyline { stroke-dasharray: 240; stroke-dashoffset: 240; }
.aq26-spark.in polyline {
  animation: aq26-drawline 1.5s var(--aqx-ease, cubic-bezier(.16,1,.3,1)) .25s forwards;
}
@keyframes aq26-drawline { to { stroke-dashoffset: 0; } }


/* ============================================================================
   4. SETTINGS — the same fields, in tabs
   ----------------------------------------------------------------------------
   The settings page is one <form> wrapping eleven stacked cards and about
   fifty inputs. Nothing there is wrong; there is simply no way to find
   anything in a single column that long.

   The fix keeps every input in the DOM and every name identical — the tabs
   only control which card is VISIBLE. The browser still submits all of them,
   so the controller does not change by a single line. That is the whole
   reason this is safe to put on a live site.
   ==========================================================================*/
.aq26-set { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 900px) { .aq26-set { grid-template-columns: 1fr; gap: 16px; } }

.aq26-set-rail { position: sticky; top: 84px; display: grid; gap: 3px; }
@media (max-width: 900px) {
  .aq26-set-rail {
    position: static; grid-auto-flow: column; grid-auto-columns: max-content;
    overflow-x: auto; padding-bottom: 6px;
  }
}
.aq26-set-tab {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 9px; border: 0; width: 100%;
  background: none; color: var(--aqx-muted, #8b94ad); text-align: left;
  font: 500 13px/1.3 inherit; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s;
}
.aq26-set-tab:hover { background: rgba(255,255,255,.035); color: var(--aqx-text, #e6eaf4); }
.aq26-set-tab.on { background: rgba(79,124,255,.10); color: var(--aqx-text, #e6eaf4); }
/* An edge, not a filled block — a solid pill on every item turns the whole
   column into a field of colour. */
.aq26-set-tab.on::before {
  content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 17px; border-radius: 0 3px 3px 0;
  background: var(--aqx-primary, #4f7cff);
}
@media (max-width: 900px) { .aq26-set-tab.on::before { display: none; } }
.aq26-set-tab .n {
  margin-left: auto; font-size: 10.5px; color: var(--aqx-dim, #5e6b85);
  font-family: ui-monospace, monospace;
}

/* Panels are hidden with [hidden], which the browser still submits. Using
   display:none via a class would be identical here, but [hidden] says out
   loud that this is visibility only. */
.aq26-set-pane[hidden] { display: none; }

/* A save bar that follows you down. Fifty fields and one Save button at the
   very bottom means every small change costs a scroll to the end. */
.aq26-set-save {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding: 13px 16px;
  border: 1px solid var(--aqx-border, #1b2440);
  border-radius: var(--aqx-radius, 16px);
  background: rgba(11, 16, 28, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.aq26-set-save .msg { font-size: 12.5px; color: var(--aqx-dim, #5e6b85); }
.aq26-set-save .msg.dirty { color: var(--aqx-warning, #ffc555); }


/* ============================================================================
   RESPECTING THE SETTING
   ----------------------------------------------------------------------------
   Someone who has asked their operating system for less motion has asked
   everyone, not just the sites that remember. Backdrops stop, cascades stop,
   the blade stays because it is a cursor, not an animation.
   ==========================================================================*/
@media (prefers-reduced-motion: reduce) {
  #aq26-corridor, #aq26-aurora { display: none; }
  body.aq26-panel .aq26-cascade tbody tr { opacity: 1; transform: none; }
  .aq26-spark polyline { stroke-dashoffset: 0; animation: none; }
  body.aq26-panel tr.aq26-fresh > td { animation: none; }
}


/* ============================================================================
   5. PANEL COMPONENTS
   ----------------------------------------------------------------------------
   Used by the new admin/dashboard.php and dashboard/index.php. Every class is
   prefixed aqx- and none of them override a Bootstrap or app.css selector, so
   any page still using the old markup is completely unaffected.
   ==========================================================================*/

/* ------------------------------- alarms ---------------------------------- */
/* Two levels only. "Something is broken" and "something needs a person" are
   different; a third level would just be a colour nobody can rank. */
.aq26-alarm {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; margin-bottom: 18px;
  border: 1px solid var(--aqx-border, #1b2440);
  border-radius: var(--aqx-radius, 16px);
  color: inherit;
}
.aq26-alarm .ic  { font-size: 1.3rem; line-height: 1; }
.aq26-alarm .ttl { font-weight: 700; }
.aq26-alarm .txt { font-size: .82rem; color: var(--aqx-muted, #8b94ad); margin-top: 4px; line-height: 1.6; }
.aq26-alarm.crit { border-color: var(--aqx-danger, #ff5d6c);  background: rgba(255, 93, 108, .07); }
.aq26-alarm.warn { border-color: var(--aqx-warning, #ffc555); background: rgba(255, 197, 85, .07); }
.aq26-alarm.crit .ttl { color: var(--aqx-danger, #ff5d6c); }
.aq26-alarm.warn .ttl { color: var(--aqx-warning, #ffc555); }

/* -------------------------------- queue ---------------------------------- */
/* The reason the panel gets opened, so it goes above the numbers. */
.aq26-queue {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 18px;
  border-radius: var(--aqx-radius, 16px);
  border: 1px solid rgba(255, 197, 85, .32);
  background: rgba(255, 197, 85, .07);
}
.aq26-queue .n  { font-size: 1.3rem; font-weight: 800; color: var(--aqx-warning, #ffc555); line-height: 1; }
.aq26-queue p   { margin: 0; font-size: .86rem; color: var(--aqx-muted, #8b94ad); }
.aq26-queue p b { color: var(--aqx-text, #e6eaf4); font-weight: 600; }
.aq26-queue .sp { flex: 1; }
/* At zero it must go completely still and completely grey. A panel that
   celebrates an empty queue in colour is crying wolf for the next one. */
.aq26-queue.calm {
  border-color: var(--aqx-border, #1b2440);
  background: rgba(255, 255, 255, .02);
}
.aq26-queue.calm .n { color: var(--aqx-accent, #22d3ae); font-size: 1.05rem; }
/* Breathing is reserved for a queue that actually has money sitting in it. */
.aq26-queue.live { animation: aq26-breathe 3.4s ease-in-out infinite; }
@keyframes aq26-breathe {
  0%, 100% { border-color: rgba(255, 197, 85, .32); }
  50%      { border-color: rgba(255, 197, 85, .62); }
}

/* -------------------------------- tiles ---------------------------------- */
.aq26-tiles {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1240px) { .aq26-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .aq26-tiles { grid-template-columns: 1fr; } }

.aq26-tile {
  position: relative; overflow: hidden;
  background: var(--aqx-card, #111828);
  border: 1px solid var(--aqx-border, #1b2440);
  border-radius: var(--aqx-radius, 16px);
  padding: 16px 18px;
  transition: transform .45s var(--aqx-ease, cubic-bezier(.16,1,.3,1)), border-color .3s, background .3s;
}
.aq26-tile:hover {
  transform: translateY(-3px);
  border-color: var(--aqx-border-2, #2b3860);
  background: var(--aqx-card-2, #17203a);
}
/* The tint says what KIND of number this is before you read the label —
   money teal, a queue amber, a failure red. A tile with no tint is a plain
   count, which is itself information. */
.aq26-tile::after {
  content: ''; position: absolute; right: -30px; top: -40px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--tint, transparent), transparent);
  pointer-events: none;
}
.aq26-tile.ok   { --tint: rgba(34, 211, 174, .18); }
.aq26-tile.warn { --tint: rgba(255, 197, 85, .18); }
.aq26-tile.bad  { --tint: rgba(255, 93, 108, .16); }

.aq26-tile .hd  { display: flex; align-items: center; gap: 10px; }
.aq26-tile .lab { font-size: .76rem; color: var(--aqx-dim, #5e6b85); }

/* The sparkline sits in the bottom-right corner, under the tint, so it never
   competes with the number for the eye — you read the figure, then notice
   the shape. */
.aq26-tile .sk {
  position: absolute; right: 16px; bottom: 14px;
  width: 76px; height: 26px; pointer-events: none;
}
.aq26-tile .sk svg { width: 100%; height: 100%; }
@media (max-width: 1400px) { .aq26-tile .sk { display: none; } }
.aq26-tile .val {
  font-weight: 700; letter-spacing: -.045em; font-size: 1.95rem; line-height: 1.05;
  margin-top: 8px; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis;
}
.aq26-tile.ok   .val { color: var(--aqx-accent, #22d3ae); }
/* z-index so the value always sits above the corner tint glow. */
.aq26-tile .val, .aq26-tile .hd, .aq26-tile .sub { position: relative; z-index: 1; }
.aq26-tile.warn .val { color: var(--aqx-warning, #ffc555); }
.aq26-tile.bad  .val { color: var(--aqx-danger, #ff5d6c); }
.aq26-tile .sub { font-size: .7rem; color: var(--aqx-dim, #5e6b85); margin-top: 7px; padding-right: 84px; }
@media (max-width: 1400px) { .aq26-tile .sub { padding-right: 0; } }

/* ------------------------------ card header ------------------------------ */
.aq26-cardh {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--aqx-border, #1b2440);
  font-weight: 600; font-size: .88rem;
}
.aq26-cardh a { font-size: .75rem; font-weight: 500; color: var(--aqx-primary-2, #6a8dff); }
.aq26-panelcard { overflow: hidden; }

/* A button whose icon is a drawing needs the two put on one baseline —
   an inline SVG and a run of text do not align by themselves. */
.aq26-act { display: inline-flex; align-items: center; gap: .6rem; }
.aq26-act svg { flex: none; width: 16px; height: 16px; opacity: .8; }

/* --------------------------------- keys ---------------------------------- */
.aq26-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; color: var(--aqx-primary-2, #6a8dff); text-decoration: none;
}
a.aq26-key:hover { text-decoration: underline; }

.aq26-keybox {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 15px; border: 1px dashed var(--aqx-border-2, #2b3860);
  border-radius: 12px; background: rgba(8, 12, 21, .5);
}
.aq26-keybox .k {
  flex: 1; min-width: 0; font-size: .95rem; letter-spacing: .05em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* -------------------------------- meter ---------------------------------- */
/* A number like "164" means nothing on its own. A bar says how much of the
   whole is left without anybody doing arithmetic. */
.aq26-meter {
  height: 6px; border-radius: 999px; margin-top: 14px;
  background: rgba(255, 255, 255, .06); overflow: hidden;
}
.aq26-meter i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--aqx-accent, #22d3ae), var(--aqx-primary, #4f7cff));
  transition: width 1.4s var(--aqx-ease, cubic-bezier(.16,1,.3,1));
}
.aq26-meter.warn i {
  background: linear-gradient(90deg, var(--aqx-warning, #ffc555), var(--aqx-danger, #ff5d6c));
}

/* --------------------------------- dot ----------------------------------- */
/* It pulses only where the template decided the thing is genuinely live. A
   dot that always pulses is decoration; this one is a status. */
.aq26-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-right: 5px; vertical-align: middle;
}
.aq26-dot.live { animation: aq26-pulse 2.2s infinite; }
@keyframes aq26-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 211, 174, .45); }
  70%  { box-shadow: 0 0 0 7px rgba(34, 211, 174, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 211, 174, 0); }
}

/* ----------------------------- notifications ----------------------------- */
/* Unread carries a left edge as well as a tint — colour alone is not a signal
   everybody can see. */
.aq26-note { padding: 11px 15px; border-bottom: 1px solid var(--aqx-border, #1b2440); }
.aq26-note:last-child { border-bottom: 0; }
.aq26-note.unread {
  background: rgba(79, 124, 255, .05);
  box-shadow: inset 3px 0 0 var(--aqx-primary, #4f7cff);
}

@media (prefers-reduced-motion: reduce) {
  .aq26-queue.live { animation: none; }
  .aq26-dot.live   { animation: none; }
  .aq26-meter i    { transition: none; }
}


/* ============================================================================
   6. "BEING BUILT" — the app and the stream
   ----------------------------------------------------------------------------
   Used by app/Views/partials/being-built.php only. All aqxbb- prefixed.
   ==========================================================================*/
.aqxbb { padding: 4.5rem 0; position: relative; }
.aqxbb-head { text-align: center; max-width: 580px; margin: 0 auto 2.6rem; }
.aqxbb-head p { font-size: .92rem; line-height: 1.7; }

/* Two bays in a rack. The framing does the arguing: a thing with a state
   light and a status line reads as a machine somebody is working on, which
   is exactly what these two are. */
.aqxbb-bay {
  border: 1px solid var(--aqx-border, #1b2440);
  border-radius: var(--aqx-radius, 16px);
  background: rgba(13, 19, 33, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  overflow: hidden; margin-bottom: 1.25rem;
}
.aqxbb-h {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-bottom: 1px solid var(--aqx-border, #1b2440);
  background: rgba(8, 12, 21, .6);
  font-family: ui-monospace, monospace; font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--aqx-dim, #5e6b85);
}
.aqxbb-h .sp { flex: 1; }
.aqxbb-h .st { color: var(--aqx-primary-2, #6a8dff); }
.aqxbb-h .st.red { color: #ff6b6b; }
.aqxbb-led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--aqx-primary, #4f7cff); animation: aqxbb-led 2.4s infinite;
}
.aqxbb-led.red { background: #ff3b3b; }
@keyframes aqxbb-led { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.aqxbb-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 2rem; padding: 1.75rem; align-items: start; }
.aqxbb-body.yt { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
@media (max-width: 900px) {
  .aqxbb-body, .aqxbb-body.yt { grid-template-columns: 1fr; gap: 1.6rem; }
}

.aqxbb-copy h3 { font-size: 1.3rem; margin: 0 0 .6rem; }
.aqxbb-copy > p { color: var(--aqx-muted, #8b94ad); font-size: .88rem; line-height: 1.65; margin: 0 0 1.25rem; max-width: 46ch; }
.aqxbb-risk { font-size: .72rem; color: var(--aqx-dim, #5e6b85); line-height: 1.6; margin: 1.1rem 0 0; max-width: 46ch; }

.aqxbb-list { display: grid; gap: 9px; margin-bottom: 1.35rem; }
.aqxbb-list div { display: flex; gap: 9px; align-items: flex-start; font-size: .82rem; color: var(--aqx-muted, #8b94ad); }
.aqxbb-list svg { flex: none; margin-top: 3px; color: var(--aqx-accent, #22d3ae); }
.aqxbb-bay.yt .aqxbb-list svg { color: #ff6b6b; }
.aqxbb-list b { color: var(--aqx-text, #e6eaf4); font-weight: 600; }

.aqxbb-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.aqxbb-badge {
  display: flex; align-items: center; gap: 10px; position: relative;
  border: 1px solid var(--aqx-border, #1b2440); border-radius: 12px; padding: 9px 16px;
  background: rgba(255, 255, 255, .03); color: var(--aqx-text, #e6eaf4); text-decoration: none;
  transition: border-color .3s;
}
.aqxbb-badge:hover { color: var(--aqx-text, #e6eaf4); border-color: rgba(79, 124, 255, .45); }
.aqxbb-badge .t span { display: block; font-size: .6rem; color: var(--aqx-dim, #5e6b85); }
.aqxbb-badge .t b { display: block; font-size: .82rem; font-weight: 700; }
/* The pill is what stops somebody tapping a badge and finding nothing — and
   it is why both stores can be shown before either one is live. */
.aqxbb-badge.is-soon::after {
  content: 'SOON'; position: absolute; top: -8px; right: -8px;
  font-size: .53rem; font-weight: 800; letter-spacing: .1em;
  background: var(--aqx-primary, #4f7cff); color: #fff; border-radius: 999px; padding: 3px 7px;
}
.aqxbb-form { display: flex; gap: 9px; flex-wrap: wrap; }
.aqxbb-form input {
  background: rgba(255, 255, 255, .04); border: 1px solid var(--aqx-border, #1b2440);
  color: var(--aqx-text, #e6eaf4); border-radius: 11px; padding: 11px 14px;
  font: inherit; font-size: .85rem; min-width: 190px; flex: 1 1 190px; max-width: 280px; outline: none;
}
.aqxbb-form input:focus { border-color: var(--aqx-primary, #4f7cff); }
.aqxbb-hint { font-size: .7rem; color: var(--aqx-dim, #5e6b85); margin-top: 9px; }
.aqxbb-done {
  display: inline-flex; align-items: center; gap: 8px; font-size: .84rem;
  color: var(--aqx-accent, #22d3ae); border: 1px solid rgba(34, 211, 174, .3);
  background: rgba(34, 211, 174, .07); border-radius: 11px; padding: 10px 14px;
}

/* ------------------------------- the device ------------------------------ */
.aqxbb-device {
  position: relative; border-radius: 30px; padding: 12px 10px 10px;
  border: 1px solid var(--aqx-border-2, #2b3860);
  background: linear-gradient(160deg, #131c31, #080d19);
  box-shadow: var(--aqx-shadow, 0 22px 52px rgba(0,0,0,.45)), inset 0 1px 0 rgba(255,255,255,.06);
}
.aqxbb-notch { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 60px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.13); }
.aqxbb-screen { border-radius: 22px; background: #070b14; padding: 18px 12px 10px; }
.aqxbb-dh { display: flex; align-items: center; justify-content: space-between; }
.aqxbb-dh .lg { font-weight: 700; font-size: .8rem; }
.aqxbb-dh .lg i { font-style: normal; color: var(--aqx-primary-2, #6a8dff); }
.aqxbb-dh .bell { position: relative; font-size: .68rem; }
.aqxbb-dh .bell b { position: absolute; top: -4px; right: -7px; background: var(--aqx-danger, #ff5d6c); color: #fff; font-size: .48rem; border-radius: 99px; padding: 1px 4px; }
.aqxbb-dsub { font-size: .58rem; color: var(--aqx-dim, #5e6b85); margin: 3px 0 12px; }
.aqxbb-tile { background: rgba(255,255,255,.04); border-radius: 11px; padding: 9px 10px; margin-bottom: 7px; }
.aqxbb-tile.lit { background: rgba(34,211,174,.08); border: 1px solid rgba(34,211,174,.22); }
.aqxbb-tile .k { font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; color: var(--aqx-dim, #5e6b85); }
.aqxbb-tile .v { font-size: .76rem; font-weight: 800; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.aqxbb-tile .v.ok { color: var(--aqx-accent, #22d3ae); }
/* One beat, then a long wait — the real fifteen-minute rhythm. A dot that
   throbs continuously is decoration; this one is a status. */
.aqxbb-tile .hb { width: 6px; height: 6px; border-radius: 50%; background: var(--aqx-accent, #22d3ae); animation: aqxbb-beat 3s infinite; }
@keyframes aqxbb-beat {
  0%   { box-shadow: 0 0 0 0 rgba(34,211,174,.55); }
  22%  { box-shadow: 0 0 0 8px rgba(34,211,174,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,211,174,0); }
}
.aqxbb-tile .bar { height: 4px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 8px; }
.aqxbb-tile .bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--aqx-accent,#22d3ae), var(--aqx-primary,#4f7cff)); transition: width 1.6s var(--aqx-ease, cubic-bezier(.16,1,.3,1)); }
.aqxbb-row { display: flex; gap: 7px; }
.aqxbb-row .aqxbb-tile { flex: 1; }
.aqxbb-tile canvas { width: 100%; height: 28px; display: block; margin-top: 5px; }
/* Blurred = genuinely not finished. Saying so beats mocking up a feature
   that might still change before launch. */
.aqxbb-tile.wip { filter: blur(2.6px); opacity: .5; }
.aqxbb-soon { text-align: center; font-size: .52rem; letter-spacing: .14em; text-transform: uppercase; color: var(--aqx-primary-2, #6a8dff); border-top: 1px solid var(--aqx-border, #1b2440); padding-top: 10px; margin-top: 4px; }

/* ------------------------------ the monitor ------------------------------ */
.aqxbb-monitor {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: #05080f; border: 1px solid rgba(255, 0, 0, .22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.aqxbb-monitor canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Scanlines and a vignette. Cheap, and they are what stop a canvas looking
   like a chart widget and start it looking like a feed. */
.aqxbb-scan {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.6) 100%);
}
.aqxbb-mtop, .aqxbb-mbot { position: absolute; left: 12px; right: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aqxbb-mtop { top: 11px; }
.aqxbb-mbot { bottom: 11px; align-items: flex-end; }
.aqxbb-mtop .rec {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, monospace; font-size: .55rem; letter-spacing: .16em;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,0,0,.4); color: #ff6b6b;
  padding: 4px 9px; border-radius: 6px;
}
.aqxbb-mtop .rec .dot { width: 6px; height: 6px; border-radius: 50%; background: #ff3b3b; animation: aqxbb-led 1.6s infinite; }
.aqxbb-mtop .sym { font-family: ui-monospace, monospace; font-size: .55rem; color: var(--aqx-muted, #8b94ad); background: rgba(0,0,0,.55); padding: 4px 8px; border-radius: 6px; }
.aqxbb-mbot .lab { font-family: ui-monospace, monospace; font-size: .5rem; letter-spacing: .2em; color: var(--aqx-dim, #5e6b85); }
.aqxbb-mbot .time { font-family: ui-monospace, monospace; font-size: 1.25rem; color: var(--aqx-text, #e6eaf4); font-variant-numeric: tabular-nums; }
.aqxbb-mbot .note { font-family: ui-monospace, monospace; font-size: .52rem; color: var(--aqx-dim, #5e6b85); }

@media (prefers-reduced-motion: reduce) {
  .aqxbb-led, .aqxbb-tile .hb, .aqxbb-mtop .rec .dot { animation: none; }
}


/* ============================================================================
   7. THE HOME PAGE
   ----------------------------------------------------------------------------
   Used by app/Views/site/home.php only. All aqx-prefixed, nothing overrides an
   existing app.css or Bootstrap selector.

   Everything here degrades: with aqx-2026.js missing, the reel is not sticky,
   every stage's words are visible at once, and the page reads as an ordinary
   stack of sections with every word intact.
   ==========================================================================*/

/* .aqx-grad is theme.css's own gradient-text class and is reused as-is.
   Defining it again here would be a second source of truth for one colour
   ramp — the kind of duplicate that drifts apart six months later. */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* --------------------------------- hero ---------------------------------- */
/* The bottom padding is not decoration — it is the cue's lane. The cue is
   absolutely positioned at the hero's bottom, but the hero centres its
   content in the FULL box, so with no padding the last chip row drifts down
   into the cue and the two print on top of each other. Reserving the band
   pushes the centred content up by exactly the height of the thing that
   lives down there. */
.aqxh {
  min-height: 100vh; display: grid; place-items: center;
  padding: 5rem 1.5rem 9.5rem; position: relative;
}
.aqxh-in { max-width: 940px; text-align: center; }
.aqxh-eyebrow {
  font-family: ui-monospace, monospace; font-size: .7rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--aqx-dim,#5e6b85); margin-bottom: 1.3rem;
}
.aqxh h1 { font-size: clamp(2.3rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -.045em; margin: 0 0 1.1rem; }
/* Kinetic words: each is clipped, then slides up. The overflow is what makes
   it read as arriving rather than as fading. */
.aq26-kw { display: inline-block; overflow: hidden; vertical-align: bottom; }
.aq26-kw > i {
  display: inline-block; font-style: normal;
  transform: translateY(105%); opacity: 0;
  transition: transform .95s var(--aqx-ease, cubic-bezier(.16,1,.3,1)), opacity .7s;
}
.aq26-kw.on > i { transform: none; opacity: 1; }

.aqxh-type { font-size: .85rem; color: var(--aqx-dim,#5e6b85); margin: -.3rem 0 1.3rem; }
.aqxh-type span[data-aqx-type] { color: var(--aqx-accent,#22d3ae); }
.aqxh-caret {
  display: inline-block; width: 8px; height: 15px; vertical-align: -2px; margin-left: 2px;
  background: var(--aqx-accent,#22d3ae); animation: aq26-blink 1s steps(1) infinite;
}
@keyframes aq26-blink { 50% { opacity: 0; } }

.aqxh-lede { color: var(--aqx-muted,#8b94ad); font-size: 1.02rem; line-height: 1.7; max-width: 60ch; margin: 0 auto 2rem; }
.aqxh-btns { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

.aqxh-chips { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 2.6rem; }
.aqxh-chip {
  border: 1px solid var(--aqx-border,#1b2440); border-radius: 12px; padding: .8rem 1.15rem;
  background: rgba(17,24,40,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  min-width: 130px;
}
.aqxh-chip b { display: block; font-size: 1.25rem; letter-spacing: -.03em; }
.aqxh-chip > span { display: block; color: var(--aqx-dim,#5e6b85); font-size: .72rem; margin-top: .2rem; }

.aqxh-clocks { position: absolute; inset: 0; pointer-events: none; }
.aqxh-clk {
  position: absolute; font-family: ui-monospace, monospace; font-size: .72rem;
  color: var(--aqx-dim,#5e6b85); white-space: nowrap;
  opacity: 0; transform: translateY(8px);
  transition: opacity .9s var(--aqx-ease, cubic-bezier(.16,1,.3,1)), transform .9s var(--aqx-ease, cubic-bezier(.16,1,.3,1));
}
.aqxh-clk.on { opacity: 1; transform: none; }
.aqxh-clk b { display: block; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--aqx-muted,#8b94ad); margin-bottom: .25rem; font-weight: 500; }
/* Green only while that session is open. A row of always-green clocks would
   be decoration; this way the colour is carrying a fact. */
.aqxh-clk.live b { color: var(--aqx-accent,#22d3ae); }
.aqxh-clk.c1 { top: 19%; left: 8%; }
.aqxh-clk.c2 { top: 27%; right: 9%; }
.aqxh-clk.c3 { bottom: 27%; left: 11%; }
.aqxh-clk.c4 { bottom: 22%; right: 10%; }
@media (max-width: 1200px) { .aqxh-clocks { display: none; } }

.aqxh-cue {
  position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%);
  text-align: center; white-space: nowrap;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--aqx-dim,#5e6b85);
}
.aqxh-cue::after {
  content: ''; display: block; width: 1px; height: 34px; margin: .7rem auto 0;
  background: linear-gradient(var(--aqx-accent,#22d3ae), transparent);
  animation: aq26-cue 1.9s var(--aqx-ease, cubic-bezier(.16,1,.3,1)) infinite;
}
@keyframes aq26-cue {
  0%   { transform: scaleY(0); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: top; }
  56%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --------------------------------- reel ---------------------------------- */
/* 620vh of runway divided by five gives each stage a comfortable amount of
   scroll. .aqxr-live is added by JS — without it nothing is pinned and the
   whole thing is an ordinary tall block. */
.aqxr { position: relative; }
.aqxr.aqxr-live { height: 620vh; }
.aqxr.aqxr-live .aqxr-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  transition: opacity .35s ease;
}
/* When the runway runs out the scene lets go instead of sliding up past the
   header. Nothing half-scrolled, nothing overlapping. */
.aqxr.aqxr-live .aqxr-stage.spent { opacity: 0; pointer-events: none; }

.aqxr.aqxr-live .aqxr-grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 1.9rem; }
.aqxr-grid { display: grid; gap: 2rem; padding: 3rem 1.9rem; }
@media (max-width: 1000px) { .aqxr.aqxr-live .aqxr-grid, .aqxr-grid { grid-template-columns: 1fr; } }

.aqxr-cloud { position: relative; height: 58vh; }
.aqxr-cloud canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 1000px) { .aqxr-cloud { height: 32vh; } }

.aqxr-num { font-size: .78rem; color: var(--aqx-dim,#5e6b85); letter-spacing: .3em; }
.aqxr.aqxr-live .aqxr-box { position: relative; height: clamp(60px, 10vw, 122px); }
.aqxr-box h2 {
  margin: 0; font-size: clamp(2.9rem, 8.8vw, 7.4rem); line-height: 1; letter-spacing: -.045em;
}
.aqxr.aqxr-live .aqxr-box h2 {
  position: absolute; inset: 0; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity .45s, transform .7s var(--aqx-ease, cubic-bezier(.16,1,.3,1)), visibility 0s .45s;
}
.aqxr.aqxr-live .aqxr-box h2.on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .5s .08s, transform .8s var(--aqx-ease, cubic-bezier(.16,1,.3,1)), visibility 0s;
}
.aqxr-box h2 em { font-style: normal; color: var(--aqx-accent,#22d3ae); }

.aqxr.aqxr-live .aqxr-sub { position: relative; height: 82px; margin-top: .9rem; }
.aqxr-sub p { margin: 0 0 .7rem; max-width: 46ch; color: var(--aqx-muted,#8b94ad); font-size: .92rem; line-height: 1.6; }
.aqxr.aqxr-live .aqxr-sub p {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .4s, transform .6s var(--aqx-ease, cubic-bezier(.16,1,.3,1)), visibility 0s .4s;
}
.aqxr.aqxr-live .aqxr-sub p.on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .45s .18s, transform .7s var(--aqx-ease, cubic-bezier(.16,1,.3,1)) .1s, visibility 0s;
}
.aqxr-sub p b { color: var(--aqx-text,#e6eaf4); font-weight: 600; }

/* The order panel. Numbers, not adjectives, while the scene plays. */
.aqxr-hud {
  width: 268px; padding: 1.1rem; border-radius: var(--aqx-radius,16px);
  background: var(--aqx-glass, rgba(15,21,36,.94)); border: 1px solid var(--aqx-border,#1b2440);
  box-shadow: var(--aqx-shadow, 0 22px 52px rgba(0,0,0,.45));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  margin: 1.5rem auto 0;
}
.aqxr.aqxr-live .aqxr-hud { position: absolute; right: 1.9rem; top: 50%; transform: translateY(-50%); margin: 0; }
@media (max-width: 1340px) { .aqxr.aqxr-live .aqxr-hud { display: none; } }
/* The panel is absolutely positioned, so the grid has to be told to leave
   room for it — otherwise the big verb simply runs underneath it. Only at
   the width where the panel is actually shown. */
@media (min-width: 1341px) { .aqxr.aqxr-live .aqxr-grid { padding-right: 21rem; } }
.aqxr-hud .hh {
  display: flex; align-items: center; justify-content: space-between;
  font-family: ui-monospace, monospace; font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--aqx-dim,#5e6b85);
  padding-bottom: .7rem; border-bottom: 1px solid var(--aqx-border,#1b2440);
}
.aqxr-hud .big { font-size: 2.1rem; line-height: 1; letter-spacing: -.04em; margin: .9rem 0 .2rem; font-weight: 700; }
.aqxr-hud .big .u { font-size: .5em; color: var(--aqx-dim,#5e6b85); }
.aqxr-hud .cap { font-size: .76rem; color: var(--aqx-muted,#8b94ad); }
.aqxr-hud .rows { margin-top: .9rem; border-top: 1px solid var(--aqx-border,#1b2440); padding-top: .8rem; }
.aqxr-hud .row { display: flex; justify-content: space-between; gap: .7rem; font-size: .74rem; padding: .28rem 0; color: var(--aqx-dim,#5e6b85); }
.aqxr-hud .row b { color: var(--aqx-text,#e6eaf4); font-weight: 600; font-family: ui-monospace, monospace; font-size: .72rem; }
.aqxr-hud .row b.tl { color: var(--aqx-accent,#22d3ae); }
.aqxr-hud .row b.am { color: var(--aqx-warning,#ffc555); }
/* Without JS every pane is visible — a plain list of what happens at each
   stage, which is still true and still readable. */
.aqxr.aqxr-live .aqxr-hud .pane { display: none; }
.aqxr.aqxr-live .aqxr-hud .pane.on { display: block; animation: aq26-fadein .5s var(--aqx-ease, cubic-bezier(.16,1,.3,1)); }
@keyframes aq26-fadein { from { opacity: 0; transform: translateY(8px); } }

/* The ledger accumulates. Four lines standing there at stage four, because
   you put them there. */
.aqxr-ledger { padding: 0 1.9rem 2rem; max-width: 46ch; }
.aqxr.aqxr-live .aqxr-ledger { position: absolute; left: 1.9rem; bottom: 5.5rem; padding: 0; }
.aqxr-eyebrow { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--aqx-dim,#5e6b85); }
.aqxr-ledger h3 { font-size: clamp(1.5rem, 3.2vw, 2.5rem); letter-spacing: -.035em; margin: .5rem 0 1.1rem; line-height: 1; }
.aqxr-ledger ul { list-style: none; margin: 0; padding: 0; font-family: ui-monospace, monospace; font-size: .76rem; color: var(--aqx-dim,#5e6b85); }
.aqxr-ledger li { display: flex; gap: .6rem; padding: .18rem 0; }
.aqxr.aqxr-live .aqxr-ledger li {
  opacity: 0; transform: translateX(-10px);
  transition: opacity .5s, transform .6s var(--aqx-ease, cubic-bezier(.16,1,.3,1));
}
.aqxr.aqxr-live .aqxr-ledger li.on { opacity: 1; transform: none; }
.aqxr-ledger li i { color: var(--aqx-accent,#22d3ae); font-style: normal; }
.aqxr.aqxr-live .aqxr-ledger li.on:last-of-type span { color: var(--aqx-text,#e6eaf4); }

/* The film strip. A progress bar that says "this is footage". */
/* ----------------------------- the phone cut -----------------------------
   Not pinned, but still a sequence: one stage visible at a time, advanced
   by scroll position rather than by a pinned runway. Same .on classes the
   pinned scene uses, so the JS has one state machine, not two. */
/* ----------------------------- the phone cut -----------------------------
   The pinned scene does not survive a phone: five stages share one absolute
   box, so the word, its paragraph and the ledger printed straight through
   each other. Sticky does not save it either — the stage is taller than a
   phone screen, so the bottom of it would be unreachable while stuck.

   So on a phone the chapter stops being a scene and becomes what it always
   was underneath: a numbered list of five steps. JS pairs each word with
   its own paragraph (they live in separate containers for the desktop
   animation), and every step is simply visible. Nothing overlaps because
   nothing is positioned.                                                   */
.aqxr-flow .aqxr-stage { display: block; }
/* The mesh stays. It is the one genuinely alive thing in this chapter and
   the reason it is worth scrolling at all, so on a phone it sticks to the
   top and keeps morphing while the five steps travel underneath it.

   It carries its OWN background, and that is the whole trick: without one,
   the headings scrolled up THROUGH the particles and the two drawings
   tangled into noise. With one, a step simply passes behind the pane and
   disappears, the way it would behind any other fixed panel. Slightly
   translucent with a blur, so the corridor behind the page still shows and
   the band does not read as a grey box taped over the design. */
.aqxr-flow .aqxr-cloud {
  position: sticky; top: 4.2rem; z-index: 5;
  height: 32svh; min-height: 190px; margin-bottom: .6rem;
  /* Full bleed: the grid's own 1.9rem gutter is cancelled so the pane runs
     edge to edge. Left inside the gutter, a sliver of un-covered heading
     showed down each side of it — which looks like a rendering fault. */
  margin-inline: -1.9rem; padding-inline: 1.9rem;
  background: rgba(8, 12, 21, .88);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  box-shadow: 0 24px 26px -24px rgba(8, 12, 21, 1);
  pointer-events: none;
}
.aqxr-flow .aqxr-grid { isolation: isolate; }
.aqxr-flow .aqxr-box, .aqxr-flow .aqxr-ledger { position: relative; z-index: 1; }

.aqxr-flow .aqxr-box { min-height: 0; height: auto; }
.aqxr-flow .aqxr-box h2 { font-size: clamp(2rem, 11vw, 3.2rem); margin: 0; }
/* Generous, and deliberately so: each step needs enough scroll of its own
   for the mesh above it to finish morphing before the next heading arrives.
   Tight padding made all five shapes flash past in half a thumb-swipe. */
.aqxr-flow .aqxr-step { padding: 3.2rem 0 2.6rem; border-top: 1px solid var(--aqx-border,#1b2440); }
.aqxr-flow .aqxr-step:first-of-type { border-top: 0; }
.aqxr-flow .aqxr-sub { height: auto; }
.aqxr-flow .aqxr-sub p { margin: .5rem 0 0; }
.aqxr-flow .aqxr-hud { display: none; }
/* The stage number belongs to a scene that shows one stage at a time. With
   all five on screen it is just a wrong number sitting above the first. */
.aqxr-flow .aqxr-num { display: none; }
/* Same reason the number goes: in a list, colouring one heading teal says
   "this one is selected" — and nothing is. The em inside a heading keeps
   its accent, that one is deliberate. */
.aqxr-flow .aqxr-box h2 { color: var(--aqx-text, #e6eaf4); }
.aqxr-flow .aqxr-ledger { padding-top: 1.6rem; border-top: 1px solid var(--aqx-border,#1b2440); }

/* --------------------------- the calendar slot ---------------------------
   Market Watch now sits directly under the ticker instead of far down the
   page. It needs air above and below it, but not a full section's worth:
   the ticker and the calendar are one idea in two bands, and pushing them
   apart by 7rem would break the pairing that is the whole reason for
   moving it. Below it, the reel begins, so the gap there is larger.       */
.aqxcal-slot { padding-block: 2.6rem 4.2rem; }
@media (max-width: 767.98px) { .aqxcal-slot { padding-block: 1.8rem 2.8rem; } }

.aqxr-strip { display: none; }
.aqxr-strip.on {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; height: 26px; z-index: 70;
  background: #04060b; border-top: 1px solid var(--aqx-border,#1b2440); overflow: hidden;
}
.aqxr-strip .holes {
  position: absolute; inset: 0; width: 0; opacity: .9;
  background-image: repeating-linear-gradient(90deg, var(--aqx-text,#e6eaf4) 0 12px, transparent 12px 24px);
  background-size: 24px 9px; background-repeat: repeat-x; background-position: 0 8px;
  transition: width .15s linear;
}
.aqxr-strip .edge { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--aqx-accent,#22d3ae); transition: left .15s linear; }

/* ------------------------------- chapters -------------------------------- */
.aqxc-chap { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--aqx-accent,#22d3ae); margin-bottom: 1rem; }
.aqxc-h { font-size: clamp(1.9rem, 5vw, 4rem); letter-spacing: -.045em; margin: 0 0 1rem; line-height: 1.03; }
.aqxc-lede { color: var(--aqx-muted,#8b94ad); max-width: 58ch; font-size: 1rem; line-height: 1.7; }

/* --------------------------------- figures ------------------------------- */
.aqxfig {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; margin-top: 3rem;
  background: var(--aqx-border,#1b2440); border: 1px solid var(--aqx-border,#1b2440);
  border-radius: var(--aqx-radius,16px); overflow: hidden;
}
@media (max-width: 940px) { .aqxfig { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .aqxfig { grid-template-columns: 1fr; } }
.aqxfig .fig { background: var(--aqx-card,#111828); padding: 1.5rem 1.3rem; transition: background .3s; }
.aqxfig .fig:hover { background: var(--aqx-card-2,#17203a); }
.aqxfig .n { font-weight: 700; letter-spacing: -.05em; font-size: clamp(2.1rem,4.6vw,3.4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.aqxfig .l { color: var(--aqx-muted,#8b94ad); font-size: .8rem; margin-top: .7rem; }
.aqxfig .s { color: var(--aqx-dim,#5e6b85); font-size: .68rem; margin-top: .3rem; }

.aqxbadges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.7rem; }
.aqxbadge {
  font-size: .68rem; letter-spacing: .08em; padding: .45rem .8rem; border-radius: 999px;
  border: 1px solid var(--aqx-border-2,#2b3860); color: var(--aqx-muted,#8b94ad);
  transition: border-color .3s, color .3s, transform .4s var(--aqx-ease, cubic-bezier(.16,1,.3,1));
}
.aqxbadge:hover { border-color: var(--aqx-accent,#22d3ae); color: var(--aqx-accent,#22d3ae); transform: translateY(-2px); }

/* -------------------------------- features ------------------------------- */
.aqxfeat { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem; margin-top: 2.8rem; }
@media (max-width: 940px) { .aqxfeat { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .aqxfeat { grid-template-columns: 1fr; } }
.aqxfcard {
  background: var(--aqx-card,#111828); border: 1px solid var(--aqx-border,#1b2440);
  border-radius: var(--aqx-radius,16px); padding: 1.45rem;
  transition: transform .5s var(--aqx-ease, cubic-bezier(.16,1,.3,1)), border-color .3s, background .3s;
}
.aqxfcard:hover { border-color: var(--aqx-border-2,#2b3860); background: var(--aqx-card-2,#17203a); transform: translateY(-3px); }
.aqxfcard .ic { font-size: 1.35rem; margin-bottom: .85rem; }
.aqxfcard h4 { margin: 0 0 .5rem; font-size: .96rem; letter-spacing: -.02em; }
.aqxfcard p { margin: 0; font-size: .83rem; color: var(--aqx-dim,#5e6b85); line-height: 1.65; }

/* --------------------------------- plans --------------------------------- */
.aqxplans { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; margin-top: 2.8rem; }
@media (max-width: 980px) { .aqxplans { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .aqxplans { grid-template-columns: 1fr; } }
.aqxplan {
  position: relative; background: var(--aqx-card,#111828); border: 1px solid var(--aqx-border,#1b2440);
  border-radius: var(--aqx-radius,16px); padding: 1.6rem 1.35rem;
  display: flex; flex-direction: column;
  transition: transform .5s var(--aqx-ease, cubic-bezier(.16,1,.3,1)), border-color .3s;
}
.aqxplan:hover { transform: translateY(-4px); border-color: var(--aqx-border-2,#2b3860); }
.aqxplan.best { border-color: var(--aqx-primary,#4f7cff); background: var(--aqx-card-2,#17203a); }
.aqxplan .pill {
  position: absolute; top: -11px; left: 1.35rem;
  background: var(--aqx-primary,#4f7cff); color: #fff; font-size: .58rem; font-weight: 700;
  letter-spacing: .14em; padding: .25rem .65rem; border-radius: 999px;
}
.aqxplan .nm { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--aqx-dim,#5e6b85); }
.aqxplan .pr { font-weight: 700; font-size: 2.3rem; letter-spacing: -.045em; margin: .6rem 0 .1rem; }
.aqxplan .pr s { font-size: .42em; color: var(--aqx-dim,#5e6b85); margin-right: .35rem; font-weight: 500; }
.aqxplan .pr u { text-decoration: none; font-size: .36em; color: var(--aqx-dim,#5e6b85); margin-left: .3rem; }
.aqxplan .pm { color: var(--aqx-dim,#5e6b85); font-size: .7rem; min-height: 1.1rem; }
.aqxplan ul { list-style: none; margin: 1.1rem 0 1.2rem; padding: 0; flex: 1; }
.aqxplan li { display: flex; gap: .5rem; padding: .3rem 0; font-size: .8rem; color: var(--aqx-muted,#8b94ad); }
.aqxplan li em { font-style: normal; color: var(--aqx-accent,#22d3ae); }
.aqxplans-foot { color: var(--aqx-dim,#5e6b85); font-size: .78rem; margin-top: 1.5rem; text-align: center; }

/* ------------------------------- reviews rail ---------------------------- */
.aqxrev { overflow: hidden; }
.aqxrev-head { text-align: center; margin-bottom: 2.4rem; }
.aqxrev-head .aqxc-lede { margin: 0 auto; }
.aqxrev-stars { color: var(--aqx-warning,#ffc555); letter-spacing: 2px; margin-bottom: .7rem; }
.aqxrev-note { font-size: .78rem; }
.aqxrail { overflow: hidden; }
.aqxrail-track { display: flex; gap: 1rem; width: max-content; animation: aq26-roll var(--aqx-rail-secs, 56s) linear infinite; }
/* Stops the instant the pointer touches it — nobody should have to chase a
   moving card to read it. */
.aqxrail:hover .aqxrail-track { animation-play-state: paused; }
@keyframes aq26-roll { to { transform: translateX(-50%); } }
.aqxrev-card {
  width: 320px; background: var(--aqx-card,#111828); border: 1px solid var(--aqx-border,#1b2440);
  border-radius: var(--aqx-radius,16px); padding: 1.35rem; display: flex; flex-direction: column;
}
.aqxrev-card .st { color: var(--aqx-warning,#ffc555); font-size: .8rem; letter-spacing: 2px; margin-bottom: .6rem; }
.aqxrev-card h4 { font-size: .88rem; margin: 0 0 .5rem; }
.aqxrev-card p { margin: 0 0 1rem; font-size: .82rem; color: var(--aqx-muted,#8b94ad); line-height: 1.65; flex: 1; }
.aqxrev-card .who { display: flex; align-items: center; gap: .6rem; }
.aqxrev-card .av {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--aqx-primary,#4f7cff), var(--aqx-accent,#22d3ae));
  color: #05080f; font-weight: 800; font-size: .8rem;
}
.aqxrev-card .nm { font-size: .8rem; font-weight: 600; }
.aqxrev-card .mt { font-size: .68rem; color: var(--aqx-dim,#5e6b85); }

/* --------------------------------- matrix -------------------------------- */
.aqxmx { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2.6rem; }
@media (max-width: 860px) { .aqxmx { grid-template-columns: 1fr; } }
.aqxmx-col { border: 1px solid var(--aqx-border,#1b2440); border-radius: var(--aqx-radius,16px); padding: 1.6rem; }
.aqxmx-col.on { background: var(--aqx-card,#111828); }
.aqxmx-col .hd { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.aqxmx-col .tag { font-size: .64rem; letter-spacing: .2em; padding: .35rem .7rem; border-radius: 8px; }
.aqxmx-col.on  .tag { background: rgba(34,211,174,.12); color: var(--aqx-accent,#22d3ae); }
.aqxmx-col.off .tag { background: rgba(255,93,108,.10); color: var(--aqx-danger,#ff5d6c); }
.aqxmx-col h4 { margin: 0; font-size: 1rem; letter-spacing: -.02em; }
.aqxmx-col ul { list-style: none; margin: 0; padding: 0; }
.aqxmx-col li { display: flex; gap: .75rem; padding: .68rem 0; border-top: 1px solid var(--aqx-border,#1b2440); font-size: .86rem; color: var(--aqx-muted,#8b94ad); line-height: 1.5; }
.aqxmx-col li:first-child { border-top: 0; }
.aqxmx-col li em { font-style: normal; flex: 0 0 auto; width: 1rem; }
.aqxmx-col.on  li em { color: var(--aqx-accent,#22d3ae); }
.aqxmx-col.off li em { color: var(--aqx-danger,#ff5d6c); }

/* ----------------------------------- FAQ --------------------------------- */
.aqxfaq .container { max-width: 900px; }
.aqxq { border-top: 1px solid var(--aqx-border,#1b2440); }
.aqxq:last-child { border-bottom: 1px solid var(--aqx-border,#1b2440); }
.aqxq > button {
  width: 100%; background: none; border: 0; color: var(--aqx-text,#e6eaf4);
  display: flex; align-items: center; justify-content: space-between; gap: 1.1rem;
  padding: 1.35rem .15rem; text-align: left; font: 600 1rem/1.4 inherit; letter-spacing: -.02em;
}
.aqxq .pm { color: var(--aqx-dim,#5e6b85); font-size: 1.25rem; flex: 0 0 auto; transition: transform .45s var(--aqx-ease, cubic-bezier(.16,1,.3,1)), color .3s; }
.aqxq.open .pm { transform: rotate(45deg); color: var(--aqx-accent,#22d3ae); }
/* Height is measured and animated by JS, not guessed with a max-height — a
   wrong guess either clips the answer or makes the easing look broken.
   Before JS runs, .a has no inline height and the answer is simply open. */
.aqxq.aq26-ready .a { overflow: hidden; height: 0; transition: height .5s var(--aqx-ease, cubic-bezier(.16,1,.3,1)); }
.aqxq .a p { margin: 0 0 1.35rem; color: var(--aqx-muted,#8b94ad); font-size: .9rem; line-height: 1.7; max-width: 62ch; }

/* ----------------------------------- CTA --------------------------------- */
.aqxcta { text-align: center; }
.aqxcta h2 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); letter-spacing: -.035em; margin: 0 0 .7rem; }
.aqxcta p { color: var(--aqx-muted,#8b94ad); margin: 0 0 1.6rem; }
.aqxcta-btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .aqxr.aqxr-live { height: auto; }
  .aqxr.aqxr-live .aqxr-stage { position: static; height: auto; }
  .aqxr.aqxr-live .aqxr-grid { position: static; padding: 3rem 1.9rem; }
  .aqxr.aqxr-live .aqxr-box, .aqxr.aqxr-live .aqxr-sub { height: auto; }
  .aqxr.aqxr-live .aqxr-box h2, .aqxr.aqxr-live .aqxr-sub p { position: static; opacity: 1; visibility: visible; transform: none; }
  .aqxr.aqxr-live .aqxr-hud { position: static; transform: none; margin: 1.5rem auto 0; }
  .aqxr.aqxr-live .aqxr-hud .pane { display: block; }
  .aqxr.aqxr-live .aqxr-ledger { position: static; padding: 0 1.9rem 2rem; }
  .aqxr.aqxr-live .aqxr-ledger li { opacity: 1; transform: none; }
  .aqxr-strip.on { display: none; }
  .aq26-kw > i { opacity: 1; transform: none; }
  .aqxrail-track { animation: none; }
  .aqxh-cue::after { animation: none; }
}


/* ============================================================================
   8. HOME PAGE SPACING — the fix for sections sitting on top of each other
   ----------------------------------------------------------------------------
   The home page was written using class="section", on the assumption that
   app.css defined it. It does not: app.css has .section-eyebrow and nothing
   else, so every one of those sections had ZERO padding and they stacked
   flush against each other.

   So the spacing is defined HERE, on the aqx- classes themselves, and does
   not depend on any class the rest of the site happens to own. If app.css
   ever does gain a .section rule, these still win — they are later in the
   cascade and equally specific.

   One rhythm for the whole page: 7rem between chapters, tightened on small
   screens where 7rem of nothing is just scrolling.
   ==========================================================================*/
.aqxc,
.aqxrev,
.aqxfaq,
.aqxcta,
.aqxbb { padding-block: 7rem; }

@media (max-width: 780px) {
  .aqxc, .aqxrev, .aqxfaq, .aqxcta, .aqxbb { padding-block: 4.25rem; }
}

/* The reel is a full-height pinned scene, so it brings its own air — but it
   still needs a gap from the ticker above and the chapter below, or the film
   strip runs straight into the next heading. */
.aqxr { margin-block: 2rem 0; }
.aqxr + .aqxc,
.aqxr-strip + .aqxc { padding-top: 8rem; }

/* The ticker is a rule, not a section: it should hug the hero above it and
   have breathing room below. */
.ticker-strip { margin-block: 0 2.5rem; }

/* Two chapters in a row want a visible seam, not just space. A hairline is
   enough — it says "new chapter" without adding another 7rem. */
.aqxc + .aqxc { border-top: 1px solid var(--aqx-border, #1b2440); }

/* The partials the page includes (performance strip, calendar, trial banner)
   were written for a page that had spacing around them. Give it to them. */
.aqxc + .container,
.aqxbb + .aqxrev { margin-top: 0; }

/* And the very last section should not end flush against the footer. */
.aqxcta { padding-bottom: 8rem; }


/* ============================================================================
   9. SIDEBAR EMOJI
   ----------------------------------------------------------------------------
   theme.css styles .aqx-nic for an inline SVG (17px box, currentColor). An
   emoji is a glyph, not a drawing: it needs a font-size rather than a width,
   it must not take currentColor, and it sits a little low on the line.
   ==========================================================================*/
/* SPECIFICITY, and why it is written like this.
   theme.css has `.aqx-nav span { flex: 1 1 auto; overflow: hidden; ... }` —
   written for the LABEL, back when the icon was an <svg> and could not match
   it. The icon is a <span> now, so it inherited the label's rule and grew to
   fill the row, which is what pushed every menu item's text to the middle.
   `.aqx-nav span.aqx-nic-e` (0,2,1) outranks `.aqx-nav span` (0,1,1) without
   a single !important. */
.aqx-nav span.aqx-nic-e,
.aqx-nic-e {
  flex: 0 0 auto;
  width: 17px; height: 17px; min-width: 17px;
  overflow: visible;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  /* An emoji already has its own colour. Inheriting the menu item's would
     do nothing on colour fonts and would break the monochrome fallbacks. */
  color: initial;
  /* Emoji sit slightly low against a text baseline; this puts them on it. */
  transform: translateY(-.5px);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
/* theme.css dims and re-colours the SVG on hover / active. Neither applies
   to a glyph, so opacity carries the state instead. */
.aqx-nav .aqx-nic-e     { opacity: .75; transition: opacity .2s, transform .3s var(--aqx-ease, cubic-bezier(.16,1,.3,1)); }
.aqx-nav:hover .aqx-nic-e,
.aqx-nav.on .aqx-nic-e  { opacity: 1; }
.aqx-nav:hover .aqx-nic-e { transform: translateY(-.5px) scale(1.1); }


/* ============================================================================
   10. THE TYPOGRAPHY — what actually separates the preview from the site
   ----------------------------------------------------------------------------
   Everything before this section got the layout right and still looked
   ordinary, because the panel was drawing every number in Inter at default
   tracking. Inter is an excellent UI face and a poor display face: its
   figures are wide, evenly spaced and quiet. Set "1,450 USDT" in it at 32px
   and you get a spreadsheet cell.

   Three rules do most of the work:

     · DISPLAY numbers and headings in Space Grotesk at -0.045em. Narrow
       geometric figures, pulled tight, read as composed rather than typed.
     · CODES in a mono face. A licence key, an order number and an MT5 login
       are identifiers you compare character by character; proportional
       spacing actively fights that.
     · LABELS small, uppercase, widely letterspaced, and dim. The contrast
       between a 10px tracked-out label and a 32px tight number is the whole
       hierarchy — without it every tile is one flat grey block.

   No font-size on html/body is touched anywhere in this file.
   ==========================================================================*/

:root {
  --aq26-display: "Space Grotesk", "Inter", -apple-system, "Segoe UI", sans-serif;
  --aq26-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ------------------------------ the numbers ------------------------------ */
.aq26-tile .val,
.aq26-queue .n,
.aqxfig .n,
.aqxplan .pr {
  font-family: var(--aq26-display);
  font-weight: 700;
  letter-spacing: -.045em;
  /* Tabular figures so a column of numbers lines up and a counting number
     does not jiggle while it animates. */
  font-variant-numeric: tabular-nums;
}

/* ------------------------------- headings -------------------------------- */
.aq26-cardh,
.aq26-alarm .ttl,
.aqxc-h, .aqxh h1, .aqxr-box h2, .aqxr-ledger h3,
.aqxfcard h4, .aqxmx-col h4, .aqxbb-copy h3, .aqxbb-head h2,
.aqxq > button, .aqxcta h2, .aqxrev-card h4 {
  font-family: var(--aq26-display);
  letter-spacing: -.025em;
}
.aqxc-h, .aqxh h1, .aqxr-box h2, .aqxcta h2, .aqxbb-head h2 { letter-spacing: -.045em; }

/* --------------------------------- codes --------------------------------- */
/* Anything that is an identifier rather than a word. */
.aq26-key,
.aq26-keybox .k,
.aqxr-hud .big,
.aqxr-hud .row b,
.aqxr-num, .aqxr-ledger ul,
.aqxbadge, .aqxplan .nm, .aqxplan .pm,
.aqxfig .s, .aqxc-chap, .aqxh-eyebrow, .aqxh-type, .aqxh-cue,
.aqxrev-card .mt, .aqxmx-col .tag, .aqxbb-h,
.aqx-nav-pill, .aq26-tile .sub {
  font-family: var(--aq26-mono);
}

/* ------------------------------ table chrome ------------------------------ */
/* A column header is a label, not a sentence: small, tracked out, dim, and
   in the mono face so it sits under the codes it is naming. */
body.aq26-panel .aq26-panelcard thead th {
  font-family: var(--aq26-mono);
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aqx-dim, #5e6b85);
  padding-top: .8rem; padding-bottom: .8rem;
}
body.aq26-panel .aq26-panelcard td { font-size: .84rem; }
/* Codes in a table body get the mono face wherever they appear. */
body.aq26-panel .aq26-panelcard td .aq26-key,
body.aq26-panel .aq26-panelcard td.mono { font-family: var(--aq26-mono); font-size: .78rem; }

/* Badges are labels too — mono, tracked, small. */
body.aq26-panel .badge {
  font-family: var(--aq26-mono);
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .06em;
}

/* -------------------------------- the labels ------------------------------ */
.aq26-tile .lab {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.aq26-tile .val { font-size: 2.1rem; line-height: 1.02; margin-top: .55rem; }
.aq26-tile .sub { font-size: .66rem; letter-spacing: .02em; }
/* The tile itself gets a touch more room, so the tighter type has air to
   sit in rather than looking cramped in the old padding. */
.aq26-tile { padding: 1.15rem 1.25rem 1.2rem; }

/* Group headings in the sidebar, matched to the same label voice. */
body.aq26-panel .aqx-side-grp,
body.aq26-panel .aqx-side-tag {
  font-family: var(--aq26-mono);
  letter-spacing: .18em;
}

/* --------------------------- the card header ------------------------------ */
.aq26-cardh { font-size: .88rem; font-weight: 600; }
.aq26-cardh a { font-family: "Inter", sans-serif; letter-spacing: 0; }


/* ============================================================================
   11. THE TOP BAR
   ----------------------------------------------------------------------------
   One bold line saying "Admin Dashboard — AIQuorix" is a page title doing two
   jobs badly: it names the panel and the page in the same breath, at the same
   weight, so neither lands. Split into a tracked-out crumb and a tight title
   and both become instantly readable — and the two panels stop looking alike.
   ==========================================================================*/
.aq26-crumb {
  font-family: var(--aq26-mono);
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--aqx-dim, #5e6b85); line-height: 1.4;
}
.aq26-title {
  font-family: var(--aq26-display);
  font-size: 1rem; font-weight: 600; letter-spacing: -.025em;
  line-height: 1.25;
}
.aq26-clock {
  font-family: var(--aq26-mono);
  font-size: .72rem; letter-spacing: .06em;
  color: var(--aqx-dim, #5e6b85);
  font-variant-numeric: tabular-nums;
}

/* The pill on a menu item. theme.css already styles .aqx-nav-pill; this only
   adds the amber variant, because "three orders waiting for payment
   verification" is money sitting still and should not look like "two reviews
   to moderate". Same shape, different urgency. */
body.aq26-panel .aqx-nav-pill { font-family: var(--aq26-mono); }
body.aq26-panel .aqx-nav-pill.warn {
  background: var(--aqx-warning, #ffc555);
  color: #1b1400;
}

/* A feature line that is "highlight" is what you actually gain by moving up
   to this tier — the same meaning /pricing has always given it. Lit, not
   just ticked, so the difference between two cards is visible before you
   read either one. */
.aqxplan li.on span { color: var(--aqx-text, #e6eaf4); font-weight: 600; }
.aqxplan li.on em   { color: var(--aqx-accent, #22d3ae); }


/* ============================================================================
   12. THE FINISH — what actually reads as "expensive"
   ----------------------------------------------------------------------------
   Everything up to here is correct and still looks flat, because "premium" in
   a dark interface is not colour or spacing. It is four physical things:

     1. GRAIN.     Flat #0b1120 is a void. Real surfaces have tooth. A film of
                   noise also destroys the banding that any large gradient
                   shows on an 8-bit display — and this page is nothing but
                   large gradients.
     2. LIGHT.     A card lit from above has a bright hairline on its top edge
                   and a soft shadow beneath it. Without those it is a
                   rectangle of paint; with them it is an object on a surface.
     3. EDGES.     One pixel, deliberately placed. A gradient border on the
                   recommended plan reads as machined; a flat blue outline
                   reads as a CSS default.
     4. RESPONSE.  Buttons that lift, hairlines that warm on hover, a focus
                   ring in the brand colour. Every surface answering a hand.

   None of it is decoration you scroll past — it is the difference between a
   page that looks made and one that looks assembled.
   ==========================================================================*/

/* ---------------------------------- 1. grain ----------------------------- */
/* Generated, not downloaded: an feTurbulence tile as a data URI. About 400
   bytes, no request, and it tiles seamlessly at any size. Fixed, so it never
   scrolls with the content — grain that moves reads as dirt on the content
   rather than texture in the screen. */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::after { opacity: .02; } }

/* ---------------------------------- 2. light ----------------------------- */
/* The inset hairline on the top edge is the whole trick. It is one line of
   white at 4.5% — invisible if you look for it, and the thing your eye reads
   as "this is lit from above" if you do not. */
.aq26-tile,
.aq26-panelcard,
.aqxfcard,
.aqxplan,
.aqxmx-col,
.aqxrev-card,
.aqxbb-bay,
.aqxr-hud,
.aqxh-chip {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 1px 2px rgba(0, 0, 0, .35),
    0 18px 40px -28px rgba(0, 0, 0, .85);
}

/* Hover raises the object and warms its edge — light and shadow moving
   together, because that is what happens when something actually lifts. */
.aq26-tile, .aqxfcard, .aqxplan, .aqxrev-card {
  transition:
    transform .5s var(--aqx-ease, cubic-bezier(.16,1,.3,1)),
    box-shadow .5s var(--aqx-ease, cubic-bezier(.16,1,.3,1)),
    border-color .3s, background .3s;
}
.aq26-tile:hover, .aqxfcard:hover, .aqxplan:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 2px 4px rgba(0, 0, 0, .4),
    0 28px 60px -30px rgba(0, 0, 0, .95);
}

/* ---------------------------------- 3. edges ----------------------------- */
/* A real gradient border, drawn with two masks that cancel in the middle so
   only the 1px ring survives. Blue at the top where the light is, fading to
   nothing at the bottom — a lit edge, not an outline. */
.aqxplan.best { position: relative; border-color: transparent; }
.aqxplan.best::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(170deg,
    rgba(106, 141, 255, .95) 0%,
    rgba(79, 124, 255, .45) 30%,
    rgba(34, 211, 174, .22) 60%,
    rgba(79, 124, 255, .06) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
/* And the glow it sits in. Tight and low-opacity — a recommended plan should
   look lit, not neon. */
.aqxplan.best {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 0 0 1px rgba(79, 124, 255, .10),
    0 24px 60px -26px rgba(79, 124, 255, .45);
}

/* The pill on that card, seated rather than floating. */
.aqxplan .pill {
  box-shadow: 0 4px 14px rgba(79, 124, 255, .5), inset 0 1px 0 rgba(255,255,255,.28);
}

/* -------------------------------- 4. response ---------------------------- */
/* A primary button is a light source: brightest at the top, a rim of white
   inside the top edge, and a coloured shadow beneath — the colour of the
   button itself, because that is what a glowing object does to the surface
   under it. */
body.aq26-site .btn-primary,
body.aq26-panel .btn-primary {
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 55%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    0 1px 2px rgba(0, 0, 0, .35),
    0 10px 24px -10px rgba(79, 124, 255, .65);
  transition: transform .3s var(--aqx-ease, cubic-bezier(.16,1,.3,1)), box-shadow .3s, filter .3s;
}
body.aq26-site .btn-primary:hover,
body.aq26-panel .btn-primary:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    0 2px 4px rgba(0, 0, 0, .4),
    0 16px 34px -12px rgba(79, 124, 255, .8);
}
body.aq26-site .btn-primary:active,
body.aq26-panel .btn-primary:active { transform: translateY(1px); }

/* A ghost button is the opposite: it has no light of its own, so its edge
   warms instead. */
body.aq26-site .btn-ghost,
body.aq26-panel .btn-ghost {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .3s, background .3s, box-shadow .3s, transform .3s var(--aqx-ease, cubic-bezier(.16,1,.3,1));
}
body.aq26-site .btn-ghost:hover,
body.aq26-panel .btn-ghost:hover {
  border-color: rgba(79, 124, 255, .55);
  background: rgba(79, 124, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 22px -14px rgba(79, 124, 255, .6);
}

/* ------------------------- the details nobody names ----------------------- */
/* Selection, focus and the scrollbar are the three places a dark site
   usually falls back to the browser's defaults — and a stock blue highlight
   on a hand-built page is the tell. */
::selection { background: rgba(79, 124, 255, .32); color: #fff; }

body.aq26-site :focus-visible,
body.aq26-panel :focus-visible {
  outline: 2px solid var(--aqx-accent, #22d3ae);
  outline-offset: 2px;
  border-radius: 6px;
}

body.aq26-site, body.aq26-panel { scrollbar-color: #2b3860 transparent; scrollbar-width: thin; }
body.aq26-site ::-webkit-scrollbar,
body.aq26-panel ::-webkit-scrollbar { width: 10px; height: 10px; }
body.aq26-site ::-webkit-scrollbar-track,
body.aq26-panel ::-webkit-scrollbar-track { background: transparent; }
body.aq26-site ::-webkit-scrollbar-thumb,
body.aq26-panel ::-webkit-scrollbar-thumb {
  background: #232e4d; border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
body.aq26-site ::-webkit-scrollbar-thumb:hover,
body.aq26-panel ::-webkit-scrollbar-thumb:hover { background: #33406b; background-clip: content-box; }

/* A chapter label with a rule running off it. One hairline, and the label
   stops floating in space and starts opening a section. */
.aqxc-chap { display: flex; align-items: center; gap: .9rem; }
.aqxc-chap::after {
  content: ''; flex: 1; height: 1px; max-width: 200px;
  background: linear-gradient(90deg, rgba(34,211,174,.4), transparent);
}

/* The tiles' corner tint was a flat radial. Giving it a soft edge stops it
   reading as a circle someone drew and starts it reading as light falling. */
.aq26-tile::after { filter: blur(6px); }