/* ── app/neon.css — the neon "AI & IoT", wherever the site names the feature ──────────────────────────
   The owner's favourite from the homepage hero (2026-09-29 evening; "everywhere", 2026-09-30): the brand's gold,
   light gold, white and ice travelling slowly through the letters, with a soft glow of the same colours behind
   them. It is used only where the feature is NAMED as a label, title, chip or heading ("AI & IoT", "IoT & AI",
   "IoT and AI"), never on every "AI" in a sentence.

   Markup (the data-t is the words again: the glow is drawn from it, and the empty alt text keeps a screen reader
   from reading them twice):
     on a dark ground   <span class="neon-ai" data-t="IoT &amp; AI">IoT &amp; AI</span>
     on a light ground  <span class="neon-ai-pill"><span class="neon-ai" data-t="IoT &amp; AI">IoT &amp; AI</span></span>
     a small label      add .is-sm to both (a little more room in the capsule, a smaller glow that holds still)
   Neon needs a dark ground, and gold is never text on a light one, so on light grounds the letters sit on the navy
   capsule (the hero's highlight). The gold (#F7B744) is the gradient's darkest stop: 6.6:1 on the navy, 4.7:1 or
   better under the capsule's lighter top (measured on every label on 2026-09-30), 5.6:1 or better on the dark
   panels; every other stop is lighter still, so small labels pass WCAG AA (4.5:1).
   The glow is two blurred copies of the letters (::before, ::after) painted just behind them, so their nearest
   stacking context must be the label's own box: the capsule is one (isolation); on a dark ground give the label's
   parent `isolation: isolate` (the footer link, the Explore tile, ...), or the copies fall behind an opaque
   background further up and vanish.

   The travel: --neon-x, the gradient's position, is moved by app/neon.js: one clock for the page, 15 steps a
   second, running only while a label is on screen and nothing covers the page. It is not a CSS animation on
   purpose: the browser can't hand a background-position change to the GPU, and while any such CSS animation runs
   (even a stepped one) it restyles the page at the screen's full refresh rate; the clock costs a third to a fifth
   of that (the measurements are in shell.js). A step moves the light 1.7% of the tile, 1 to 2.5 px on these labels.
   Small labels keep their glow still (only the letters travel), so a step repaints no blurred layer; the hero's
   large letters keep theirs travelling with them. Reduced motion: no clock; the same gradient and glow, still. */
:root {
  --neon-ai: linear-gradient(90deg, #F7B744, #FFD487 17%, #FFFFFF 33%, #BACEDF 50%, #FFFFFF 67%, #FFD487 83%, #F7B744);
}
.neon-ai {
  --neon-g1: 2.5px; --neon-g2: 9px;   /* the glows' blur: a tight one (the tube's own light) and a wide, softer haze */
  position: relative; white-space: nowrap; color: transparent; text-shadow: none;
  background: var(--neon-ai) var(--neon-x, 0%) 50% / 200% 100% repeat-x; -webkit-background-clip: text; background-clip: text;
}
.neon-ai::before, .neon-ai::after {
  content: attr(data-t); content: attr(data-t) / ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--neon-ai) var(--neon-x, 0%) 50% / 200% 100% repeat-x; -webkit-background-clip: text; background-clip: text;
  filter: blur(var(--neon-g1));
}
.neon-ai::after { filter: blur(var(--neon-g2)); opacity: .9; }

/* the capsule, for light grounds: squarer than the site's pills and flat (no shadow, no glow round it, only the
   letters' own), with a fine ice edge, so it reads as a highlight and not as a button */
.neon-ai-pill {
  position: relative; isolation: isolate; display: inline-block; padding: .04em .38em .1em; border-radius: .3em;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 55%), var(--navy, #00396C);
  font-weight: 700; line-height: 1.3; text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(186, 206, 223, .42);
}
/* small labels (an eyebrow, a chip, a list row, a map label): a little more room in the capsule, a smaller glow, and
   the glow held still (at this size its colour lagging the letters' can't be told apart) */
.neon-ai-pill.is-sm { padding: .24em .5em .22em; border-radius: .4em; line-height: 1.15; }
.neon-ai.is-sm { --neon-g1: 1.5px; --neon-g2: 5px; }
.neon-ai.is-sm::before, .neon-ai.is-sm::after { background-position: 0 50%; }

@media (forced-colors: active) {   /* Windows high contrast: plain system text, no capsule fill, no glow */
  .neon-ai { color: CanvasText; background: none; }
  .neon-ai::before, .neon-ai::after { content: none; }
  .neon-ai-pill { background: none; box-shadow: none; }
}