/* =====================================================================
 * BOTRIX -- board theme
 * Loaded after style.css and overrides its tokens, so the palette has to be
 * repeated here or the two files fight. Same four hues as style.css v18:
 * FR4 green board, ENIG gold, oxidised copper, silkscreen bone.
 *
 * Was: "DARK NEON THEME -- RoboLabs-style UI, neon #C89B3C borders,
 * glassmorphic cards, circuit patterns". The neon, the glass and the circuit
 * grid are the three things that made the site read as generated, so they are
 * gone -- including the word: the `--emods-neon` token that 27 rules below read
 * is `--emods-gold` now, and `.btn-neon` on the footer CTA is `.btn-gold`. The
 * value never changed; it has held #C89B3C since the v18 palette landed, so a
 * token called "neon" was pointing at an ENIG pad. See the note by the tokens.
 * ===================================================================== */

/* Root variables removed to respect design-system.css */
/* =========================================================================
 * GLOBAL RESETS & TYPOGRAPHY OVERRIDES
 * ========================================================================= */
body {
  background-color: transparent !important; /* let design-system.css handle the gradient */
  color: var(--emods-text) !important;
  font-family: var(--font-body);
  position: relative;
}

/* The drifting-particle canvas and the full-page circuit-grid overlay used to
 * live here. Both are gone: the particles were 30 glowing dots on a permanent
 * requestAnimationFrame loop, and the grid was a fixed pseudo-element at
 * z-index 0 painting 1px acid-green lines across everything — including, now,
 * across the 3D scene, which sits at z-index -1. Decoration that costs a
 * composite layer and reads as generated.
 */

/* Sections establish their own stacking context so the fixed scene layer stays
 * behind them. Several also position children absolutely against these. */
.emods-header, .hero, .section, .section-alt, .stats-band, .site-footer,
.coming-soon-banner, .marquee-bar, .trace-divider {
  position: relative;
  z-index: 1;
}

/* =========================================================================
 * HEADER -- Dark glassmorphic floating navbar
 * ========================================================================= */
.emods-header {
  background: rgba(6, 13, 11, 0.8) !important;
  
  
  border-bottom: 1px solid rgba(200, 155, 60, 0.08) !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.emods-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 40px;
  max-width: var(--container);
  margin: 0 auto;
}

.emods-brand img {
  height: 36px;
  filter: brightness(0) invert(1);
}

.emods-search-bar {
  flex: 1;
  max-width: 460px;
  margin: 0 40px;
  position: relative;
}

.emods-search-bar input {
  width: 100%;
  padding: 10px 40px 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius:var(--radius-m);
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--emods-text) !important;
  font-size: 14px;
  transition: all 0.25s ease;
}

.emods-search-bar input::placeholder {
  color: var(--emods-text-muted) !important;
}

.emods-search-bar input:focus {
  border-color: var(--emods-gold) !important;
  box-shadow: 0 0 0 3px rgba(200, 155, 60, 0.1) !important;
  outline: none;
}

.emods-search-bar svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--emods-text-muted);
  stroke: var(--emods-text-muted);
}

.emods-header-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.emods-header-actions a {
  color: var(--emods-text) !important;
  position: relative;
  opacity: 0.6;
  transition: all 0.2s ease;
}

.emods-header-actions a:hover {
  opacity: 1;
  color: var(--emods-gold) !important;
}

.emods-header-actions a svg { stroke: currentColor; }

.emods-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--emods-gold) !important;
  color: #060D0B !important;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radius-m);
}

/* Nav links */
.emods-header-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 6px 0 10px;
  max-width: var(--container);
  margin: 0 auto;
}

.emods-nav-link {
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  color: rgba(237, 231, 217, 0.5) !important;
  letter-spacing: 0.02em;
  padding: 6px 16px;
  border-radius:var(--radius-m);
  transition: all 0.2s ease;
}

.emods-nav-link:hover {
  color: var(--emods-text) !important;
  background: rgba(255, 255, 255, 0.05);
}

.emods-nav-item { position: relative; }

.emods-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(6, 13, 11, 0.95) !important;
  
  
  border: 1px solid rgba(200, 155, 60, 0.1) !important;
  border-radius: var(--radius-l);
  padding: 8px;
  min-width: 200px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 10;
}

.emods-nav-item:hover .emods-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.emods-nav-dropdown a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  color: rgba(237, 231, 217, 0.6) !important;
  text-transform: none;
  font-weight: 500;
  border-radius: var(--radius-m);
  transition: all 0.15s ease;
}

.emods-nav-dropdown a:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--emods-gold) !important;
}

/* =========================================================================
 * HERO -- Dark with 3D model
 * ========================================================================= */
.hero {
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  overflow: hidden;
  padding: 100px 0 120px !important;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 680px;
}

.hero-text-col h1 {
  /* Was #FFFFFF !important. The palette's text colour is the bone #EDE7D9 and
     every other heading on the site takes it; pure white here made the largest
     piece of type on the homepage the one thing that did not match, reading cold
     against the warm bone paragraph directly beneath it. */
  color: var(--emods-text) !important;
  font-style: normal;
  text-transform: none;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: clamp(2.8rem, 6vw, 5.6rem) !important;
  line-height: 0.95 !important;
}

.hero-text-col p.lead {
  color: rgba(237, 231, 217, 0.55) !important;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 460px;
}

.hero-actions .btn-primary {
  background: var(--emods-gold) !important;
  color: #060D0B !important;
  border-radius:var(--radius-m);
  text-transform: none;
  font-weight: 700;
  padding: 14px 32px;
  border: none !important;
  
  transition: all 0.25s ease;
}

/* Was `background: #D4ED31` -- the acid lime of the old neon theme, which had
   survived here as the hover state of the single most prominent button on the
   homepage. It meant the hero CTA flashed a colour that appears nowhere else in
   the site to anyone who moused over it. --primary-hover is a lighter ENIG gold. */
.hero-actions .btn-primary:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-2px);
}

.hero-actions .btn-secondary {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--emods-text) !important;
  border-radius:var(--radius-m);
  padding: 14px 32px;
  transition: all 0.25s ease;
}

.hero-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(200, 155, 60, 0.3) !important;
}

.hero-bg-media { opacity: 0.85; }

.hero-overlay {
  background: linear-gradient(90deg,
    rgba(6, 13, 11, 0.95) 0%,
    rgba(6, 13, 11, 0.8) 30%,
    rgba(6, 13, 11, 0.4) 55%,
    transparent 100%) !important;
}

@media(max-width: 900px) {
  .hero-overlay {
    background: linear-gradient(180deg,
      rgba(6, 13, 11, 0.95) 0%,
      rgba(6, 13, 11, 0.8) 35%,
      rgba(6, 13, 11, 0.4) 65%,
      transparent 100%) !important;
  }
}

/* =========================================================================
 * GLASS CARDS
 *
 * This block used to re-declare the whole card treatment with !important, which
 * meant it -- not style.css -- was the rule painting every card on the site. Two
 * things made that a real problem rather than a tidiness one:
 *
 *   1. `background: rgba(255,255,255,0.03)`. A 3% white film reads as glass only
 *      while something is blurring what is behind it. --glass-blur is 0px and no
 *      rule anywhere sets backdrop-filter any more, and the BACKGROUND OVERRIDES
 *      block at the bottom of this file makes .section/.hero/.site-footer
 *      transparent so the robot shows through. So every card was a 3% film over a
 *      live WebGL render: body copy, prices and form labels sitting directly on
 *      top of a moving scene.
 *   2. `will-change: transform` and `transform-style: preserve-3d` on every card.
 *      index.php has six and lms-index.php five; will-change promotes each to its
 *      own compositor layer for the whole life of the page, alongside the 3D
 *      canvas that actually needs the GPU.
 *
 * style.css already declares the card correctly -- opaque var(--surface), a
 * hairline border, --radius-m, --shadow-card, and a transition scoped to the
 * three properties that change -- so the fix is to stop overriding it. Deleted
 * with it: `.glass-card.neon-visible` and @keyframes neonPulse, an infinite
 * border-colour animation that nothing added the class for. Grepping every .js
 * and .php file for `neon-visible` returns no hits, so it never ran.
 *
 * The two typography rules below stay: they are additive, not a redeclaration.
 * ========================================================================= */
.glass-card h3 { color: var(--emods-text) !important; }
.glass-card p, .glass-card .muted { color: var(--emods-text-muted) !important; }

/* =========================================================================
 * SECTION STYLES
 * ========================================================================= */
.section-head h2 {
  text-transform: none;
  font-weight: 900;
  color: var(--emods-text) !important;
  letter-spacing: -0.02em;
}

.section-eyebrow {
  /* Was `color: var(--emods-gold) !important` with a matching gold dot. Both
     are muted now -- see the note on .section-eyebrow in style.css. This file
     loads second and used !important, so leaving it gold here would have
     silently undone that change. */
  color: var(--emods-text-muted) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.section-eyebrow::before { background: var(--emods-border) !important; }

/* `.section-alt { background: rgba(255,255,255,0.01) !important }` used to be
   here. The BACKGROUND OVERRIDES block at the bottom of this same file names
   .section-alt explicitly and sets it transparent, and it comes later, so the 1%
   never painted. Removed rather than left: a colour that loses to a rule 750
   lines below it in its own file is the hardest kind of dead code to notice. The
   two hairline borders are what actually separate the band, so they stay. */
.section-alt {
  border-top: 1px solid rgba(200, 155, 60, 0.06) !important;
  border-bottom: 1px solid rgba(200, 155, 60, 0.06) !important;
}

/* Stats band */
.stats-band {
  /* Was `background: rgba(255,255,255,0.02) !important`, which beat the
     var(--surface-2) in style.css. .stats-band is a full-bleed band sitting
     directly inside a transparent .section, so the four headline figures were
     reading against 98% live 3D scene. Dropping the override hands the band back
     to style.css's opaque --surface-2 (#16413A, bone text at 9.20:1). */
  border-top: 1px solid rgba(200, 155, 60, 0.08) !important;
  border-bottom: 1px solid rgba(200, 155, 60, 0.08) !important;
}

/* `.stats-band::before { background: var(--emods-gold) !important }` used to sit
   here. scripts/deglow.mjs stripped its glow and left the fill behind, and the
   `content:''` that gave the pseudo-element a box lived in style.css and has
   since gone with the dot itself -- so this rule generated nothing. Removed
   rather than left in place: a one-line `::before` with a colour in it reads like
   something that works. */

/* Was the same gradient-clipped-to-the-glyphs treatment style.css had, and this
   copy carried !important, so squaring it up over there changed nothing on the
   page. `color:transparent` with `background-clip:text` means the figures are
   painted by the gradient or not at all -- one bad colour stop and the four
   headline numbers on the homepage are blank. Solid gold. */
.stats-band-grid div strong {
  color: var(--emods-gold) !important;
}

.stats-band-grid div span { color: var(--emods-text-muted) !important; }

/* The three `.section-glow-*::before` blobs that were here are gone for the same
   reason as .stats-band::before: style.css no longer gives those pseudo-elements
   a `content`, so all three were painting a radial gradient into a box that is
   never generated. One of them was rgba(91,127,255) -- a blue from the neon
   theme, which is not in this palette. The classes stay on the sections in
   index.php; they only establish a stacking context now. */

/* =========================================================================
 * PRODUCT CARDS -- Neon bordered, dark glass
 * ========================================================================= */
.product-card {
  /* This block used to redeclare the whole card with `background:
     rgba(255,255,255,0.03) !important`, a 1px gold-tinted border, --radius-l and
     `transition: all` -- the same override pattern as the .glass-card block that
     came out of this file earlier, and the same consequence: the store grid was a
     3% white film over the transparent .section, so every product name, price and
     description sat on a live WebGL render. .product-card is in style.css's card
     rule alongside .glass-card, so it already has the opaque var(--surface), the
     hairline var(--glass-border), --radius-m and a transition scoped to the three
     properties that actually change. Only the two structural declarations the
     grid needs and style.css does not set are kept.

     Gone with the fill: --radius-l, which made the product cards the only 6px
     corners on a site that is 4px everywhere else, and `transform-style:
     preserve-3d`, which promoted every card in a store grid of up to twelve to
     its own compositor layer next to the 3D canvas that needs the GPU. */
  padding: 0 !important;
  overflow: hidden;
}

.product-card:hover {
  border-color: rgba(200, 155, 60, 0.35) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
}

.product-card .thumb {
  /* Follows the card's --radius-m now, not --radius-l. The 4% white tint stays:
     it composites over the opaque card behind it, not over the 3D scene, which
     is the whole distinction this pass has been drawing. */
  border-radius: var(--radius-m) var(--radius-m) 0 0 !important;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04) !important;
}

.product-card .card-price-badge {
  background: var(--emods-gold) !important;
  color: #060D0B !important;
  font-weight: 800;
  border-radius:var(--radius-m);
  
}

.product-card h3 { color: var(--emods-text) !important; }
.product-card .card-desc { color: var(--emods-text-muted) !important; }

.card-title-block .tag {
  background: rgba(200, 155, 60, 0.1) !important;
  color: var(--emods-gold) !important;
}

.card-meta-row .card-rating { color: var(--emods-gold) !important; }
.card-info-list { border-left-color: rgba(200, 155, 60, 0.2) !important; }
.card-info-list .info-label { color: var(--emods-gold) !important; }
.card-info-list .info-value { color: var(--emods-text-muted) !important; }

/* Product card buttons */
.product-card .btn-primary,
.product-card .btn-cart {
  background: var(--emods-gold) !important;
  color: #060D0B !important;
  border: none !important;
  border-radius:var(--radius-m);
  text-transform: none;
  font-weight: 700;
  font-size: 14px;
  width: 100%;
  text-align: center;
  transition: all 0.25s ease;
  
}

/* Same acid lime as the hero CTA had, on every Add to Cart button in every
   product grid on the site. See the note at .hero-actions .btn-primary:hover. */
.product-card .btn-primary:hover,
.product-card .btn-cart:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-1px);
}

/* General buttons */
.btn-primary {
  background: var(--emods-gold) !important;
  color: #060D0B !important;
}

/* `.btn-primary:hover {}` was here with nothing in it -- deglow.mjs took its
   only declaration. The two hover rules that do work are further down the file,
   on .hero-actions .btn-primary and .product-card .btn-primary. */

.btn-secondary {
  background: transparent !important;
  color: var(--emods-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(200, 155, 60, 0.25) !important;
  color: var(--emods-text) !important;
}

/* =========================================================================
 * TAGS
 * ========================================================================= */
/* These four carried !important, so they were the rules actually painting the
   category tags -- the whole .tag block in style.css was being overridden here.
   .tag-kit was the live failure: rgba(91,127,255) is a blue from the neon theme
   and --emods-blue is copper #B4653A despite the name, so it rendered copper
   text on a blue wash at 4.02:1, under AA at 0.68rem.
   They now defer to style.css, which gives all nine tags a bone label with the
   hue on a 2px left edge, so no pair can drift under AA. Only .badge-trust keeps
   an override, because it is a bare colour with nothing to conflict with. */
.badge-trust { color: var(--emods-gold) !important; }

/* =========================================================================
 * COMING SOON
 * ========================================================================= */
.coming-soon-banner { background: var(--emods-dark) !important; border-bottom: 1px solid rgba(200, 155, 60, 0.08); }
.coming-soon-eyebrow { color: var(--emods-gold) !important; }
.coming-soon-eyebrow::before { background: var(--emods-gold) !important; }
.cs-num { color: var(--emods-gold) !important; }
.cs-unit { background: rgba(200, 155, 60, 0.04) !important; border-color: rgba(200, 155, 60, 0.12) !important; }

/* =========================================================================
 * MARQUEE
 * ========================================================================= */
.marquee-bar {
  /* Was `rgba(200,155,60,0.03)` -- a 3% gold, which over the page ground is
     #0C110C and over the transparent section is nothing at all. This is a
     full-bleed bar with running text in it, so it needs a floor of its own; the
     scrolling type is the one thing on the page that cannot afford to cross a
     moving robot. --bg-alt is the board green one step up from the ground, which
     is what a strip laid over the page should read as. */
  background: var(--bg-alt) !important;
  border-bottom: 1px solid rgba(200, 155, 60, 0.06);
  color: var(--emods-text) !important;
}

/* =========================================================================
 * COMMUNITY SHOWCASE
 * ========================================================================= */
.section-alt h2, .section-alt h3 { color: var(--emods-text) !important; }

/* =========================================================================
 * FOOTER
 *
 * The markup in includes/footer.php used to carry all of this as inline style
 * attributes -- twelve anchors each repeating the same colour, size and
 * text-decoration, and three <h4>s hard-coded to the old acid green #E6FF53.
 * That is also why the three .footer-grid rules that already lived here had
 * never applied to anything: the element they target was class="grid-4".
 * ========================================================================= */
.site-footer {
  /* Overridden to transparent further down the file, where the 3D layer needs
     to show through. Kept as the value that applies if that block is ever
     scoped to the homepage. */
  background: rgba(6, 13, 11, 0.95) !important;
  border-top: 1px solid var(--emods-border);
}

.footer-inner {
  padding-top: 64px;
  padding-bottom: 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  gap: 48px;
}

.footer-grid h4 {
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emods-text-muted) !important;
  margin: 0 0 18px !important;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: flex-start;
}

.footer-grid a {
  color: var(--emods-text-muted) !important;
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.4;
}

.footer-grid a:hover {
  color: var(--emods-text) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.25rem !important;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--emods-text) !important;
}

.footer-brand-mark:hover {
  text-decoration: none !important;
}

.footer-brand-mark svg {
  color: var(--emods-gold);
  flex-shrink: 0;
}

.footer-blurb {
  margin: 18px 0 0;
  max-width: 42ch;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--emods-text-muted);
}

/* Rendered only when social_links has a row with a URL, so this may not appear
   at all -- see includes/footer.php. */
.footer-social {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--emods-border);
  border-radius: var(--radius-m);
  color: var(--emods-text-muted) !important;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-social a:hover {
  color: var(--emods-gold) !important;
  border-color: var(--emods-gold);
  text-decoration: none !important;
}

.footer-bottom {
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--emods-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.footer-bottom p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--emods-text-muted);
}

.footer-bottom-links {
  display: flex;
  gap: 22px;
}

.footer-bottom-links a {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--emods-text-muted) !important;
  text-decoration: none;
}

.footer-bottom-links a:hover {
  color: var(--emods-text) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* =========================================================================
 * FORMS
 * ========================================================================= */
input, select, textarea {
  /* Was `rgba(255,255,255,0.03) !important`. Most forms on the site live inside a
     .form-card, which is opaque, so a 3% film there is only faint. The newsletter
     field sits in .site-footer, which the BACKGROUND OVERRIDES block makes
     transparent -- so typing an email address meant typing into a pane of the 3D
     scene. --surface-2 is the opaque #16413A the other inset controls already use
     (.qty-stepper button, .login-pill, .product-card .thumb), one step lighter
     than the card behind it, and bone text on it is 9.20:1. */
  background: var(--surface-2) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--emods-text) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--emods-gold) !important;
  box-shadow: 0 0 0 3px rgba(200, 155, 60, 0.08) !important;
}

/* =========================================================================
 * TEXT OVERRIDES
 * ========================================================================= */
h1, h2, h3, h4 { color: var(--emods-text) !important; }
p { color: var(--emods-text-muted); }
.muted { color: var(--emods-text-muted) !important; }
.card-link { color: var(--emods-gold) !important; }
.trace-divider { background: rgba(200, 155, 60, 0.06) !important; }
/* `.text-gradient` was declared here with the clipped-gradient-plus-transparent
   treatment. Grepping every template for the class name returns nothing, so it
   was an unused helper offering the one effect this pass has been removing. */

/* Search suggestions */
.search-suggestions { background: rgba(6, 13, 11, 0.95) !important; border: 1px solid rgba(200, 155, 60, 0.1) !important; }
.search-suggestion-item { color: var(--emods-text) !important; border-bottom-color: rgba(255, 255, 255, 0.05) !important; }
.search-suggestion-item:hover { background: rgba(255, 255, 255, 0.04) !important; }

/* Splash */
#splashOverlay { background: var(--emods-dark); }

/* The `.wa-float` override used to be here. It read
   `box-shadow: 0 8px 24px rgba(37,211,102,0.4), 0 0 12px rgba(37,211,102,0.2)` --
   the second layer has no offset and no spread, so it was a pure halo, the last one
   on the site after scripts/deglow.mjs. Removed along with the base rule in
   style.css, because the selector is dead: nothing in any .php, .js or .html names
   `wa-float`. */

/* =========================================================================
 * RESPONSIVE
 * ========================================================================= */
@media(max-width: 768px) {
  .emods-header-top { padding: 12px 16px; }
  .emods-search-bar { margin: 0 16px; }
  .emods-header-nav { gap: 4px; padding: 6px 16px 10px; justify-content: flex-start; overflow-x: auto; }
  .hero { min-height: auto !important; padding: 60px 0 80px !important; }
}

@media(max-width: 980px) {
  .emods-nav-dropdown {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    
    padding: 0 0 6px 18px !important;
    min-width: 0 !important;
  }
}

/* =========================================================================
 * FLOATING PILL NAVBAR
 * ========================================================================= */
.btx-nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: calc(100% - 48px);
  max-width: 1100px;
}

.btx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 12px 12px 24px;
  background: rgba(6, 13, 11, 0.85);
  
  
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius:var(--radius-m);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.btx-nav-logo {
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--text) !important;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  text-decoration: none;
}

.btx-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C89B3C;
  
}

.btx-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btx-nav-item {
  position: relative;
}

.btx-nav-item > a {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(237, 231, 217, 0.6) !important;
  padding: 6px 14px;
  border-radius:var(--radius-m);
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
  display: block;
}

.btx-nav-item > a:hover, .btx-nav-item:hover > a {
  color: var(--text) !important;
  background: rgba(255, 255, 255, 0.06);
}

.btx-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(6, 13, 11, 0.95);
  
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-m);
  padding: 8px;
  min-width: 160px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  z-index: 1001;
}

.btx-nav-item:hover .btx-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(4px);
}

.btx-nav-dropdown a {
  display: block;
  padding: 8px 16px;
  color: rgba(237, 231, 217, 0.7) !important;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-l);
  transition: all 0.2s ease;
}

.btx-nav-dropdown a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #C89B3C !important;
}

.btx-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btx-nav-cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text) !important;
  transition: all 0.2s ease;
}

.btx-nav-cart:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.4);
  color: var(--primary) !important;
}

.btx-cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--accent);
  color: #07090E;
  font-size: 9px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btx-nav-login {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text) !important;
  padding: 8px 12px;
  border-radius: var(--radius-m);
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btx-nav-login:hover {
  color: var(--primary) !important;
  background: rgba(255, 255, 255, 0.05);
}

.btx-nav-signup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: var(--radius-m);
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(14, 165, 233, 0.15));
  border: 1px solid rgba(0, 240, 255, 0.4) !important;
  color: #00F0FF !important;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btx-nav-signup:hover {
  background: #00F0FF !important;
  color: #07090E !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.45);
}

.btx-nav-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text) !important;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btx-nav-user:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.4);
  color: var(--primary) !important;
}

.btx-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-m);
  background: var(--primary);
  color: #07090E !important;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.3);
}

.btx-nav-cta:hover {
  background: #38BDF8;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
  transform: translateY(-1px);
}

.btx-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  cursor: pointer;
}

/* Hide old emods header */
.emods-header { display: none !important; }

@media(max-width: 768px) {
  .btx-nav { top: 10px; width: calc(100% - 24px); }
  .btx-nav-inner { padding: 8px 8px 8px 16px; }
  .btx-nav-links { display: none; }
  .btx-nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    background: rgba(6, 13, 11, 0.95);
    
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-l);
    padding: 16px;
    gap: 4px;
  }
  .btx-nav-links.open a { padding: 12px 16px; }
  .btx-nav-cta { display: none; }
  .btx-nav-toggle { display: flex; }
  body { padding-top: 70px !important; }
}

@media(min-width: 769px) {
  body { padding-top: 80px !important; }
}

/* =========================================================================
 * SECTION RAIL
 *
 * Buttons, not divs: these move the viewport, so they have to be reachable by
 * keyboard and announced. The label is visible on hover/focus instead of
 * living only in a title attribute.
 * ========================================================================= */
.btx-section-dots {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.btx-dot {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 7px 4px;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font: inherit;
  color: rgba(237, 231, 217, 0.55);
}

/* The tick itself. A 1px rule that lengthens when active — a measurement mark
   rather than a glowing pill. */
.btx-dot::after {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s;
}

.btx-dot-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.22s, transform 0.22s;
}

.btx-dot:hover,
.btx-dot:focus-visible {
  color: var(--text);
  outline: none;
}

.btx-dot:hover .btx-dot-label,
.btx-dot:focus-visible .btx-dot-label {
  opacity: 1;
  transform: none;
}

.btx-dot:focus-visible::after {
  width: 26px;
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.btx-dot.active {
  color: #C89B3C;
}

.btx-dot.active::after {
  width: 30px;
}

@media (max-width: 1024px) {
  .btx-section-dots { display: none; }
}

/* =========================================================================
 * SCROLL-DRIVEN 3D SCENE
 *
 * z-index: -1 rather than 0. body's background propagates to the canvas, so a
 * negative index paints the scene above the page background and below every
 * in-flow section — which is what lets translucent panels tint the robot
 * instead of hiding it. At z-index: 0 the fixed layer painted over ordinary
 * non-positioned content, which is why sections here carry defensive z-index.
 * ========================================================================= */
#robotBg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1 !important;
  display: block !important;
  transition: opacity 500ms ease-out;
}

#robotBg.robot-ready {
  opacity: 1 !important;
}

@media (min-width: 1100px) {
  #robotBg { transform: translateX(12vw); }
}

#robotCanvas {
  width: 100vw;
  height: 100vh;
  display: block;
}

#robotBg.robot-static {
  opacity: 0.9;
}

/* =========================================================================
 * FOOTER CTA SECTION
 * ========================================================================= */
.btx-footer-cta {
  text-align: center;
  padding: 80px 24px;
  border-top: 1px solid var(--emods-border);
  position: relative;
  z-index: 1;
}

/* =========================================================================
 * BACKGROUND OVERRIDES (To make 3D Robot visible)
 * ========================================================================= */
.section, .section-alt, .hero, .site-wrapper, .site-footer {
  background: transparent !important;
  position: relative;
  z-index: 1;
}
.hero-overlay {
  background: linear-gradient(180deg, rgba(7, 9, 14, 0.75) 0%, rgba(7, 9, 14, 0.35) 50%, rgba(7, 9, 14, 0.05) 100%) !important;
}
.emods-dark {
  background-color: transparent !important;
}

.btx-footer-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem) !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.btx-footer-cta p {
  color: var(--emods-text-muted);
  max-width: 52ch;
  margin: 0 auto 32px;
}

.btx-footer-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 auto 56px;
}

/* The email field this used to hold is gone -- see includes/footer.php for why.
   The rule that styled it went with it rather than sitting here waiting for an
   input that no longer exists. */

.btx-footer-cta-actions .btn-gold,
.btx-footer-cta-actions .btn-wa {
  /* Was border-radius: 999px on both. A pair of full pills is the single most
     recognisable stock-template shape there is, and --radius-m is 4px now. */
  border-radius: var(--radius-m);
  padding: 13px 24px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btx-footer-cta-actions .btn-gold {
  background: var(--emods-gold);
  color: var(--emods-dark);
  font-weight: 700;
  border: 1px solid var(--emods-gold);
}

.btx-footer-cta-actions .btn-gold:hover {
  background: transparent;
  color: var(--emods-gold);
}

.btx-footer-cta-actions .btn-wa {
  background: transparent;
  color: var(--emods-text);
  font-weight: 600;
  border: 1px solid var(--emods-border);
}

.btx-footer-cta-actions .btn-wa:hover {
  border-color: var(--emods-text);
}

/* Trust points.
 *
 * Was four badges, each a 36px gold-tinted circle around a stroked icon. Four
 * identical coloured discs in a row is stock-template furniture, and the icons
 * were doing no work the words weren't -- a padlock does not tell you anything
 * a line reading "Cash on delivery" doesn't say better. So: no discs, no icons,
 * four labelled facts separated by hairlines, each one a link to the page that
 * backs it up. */
.btx-trust-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  text-align: left;
  border-top: 1px solid var(--emods-border);
}

.btx-trust-item {
  border-right: 1px solid var(--emods-border);
}

.btx-trust-item:last-child {
  border-right: 0;
}

.btx-trust-item a {
  display: block;
  padding: 20px 22px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.btx-trust-item a:hover {
  background: rgba(237, 231, 217, 0.03);
}

.btx-trust-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--emods-text);
  margin-bottom: 5px;
}

.btx-trust-detail {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--emods-text-muted);
}

@media (max-width: 760px) {
  .btx-trust-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .btx-trust-item:nth-child(2n) {
    border-right: 0;
  }
  .btx-trust-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--emods-border);
  }
}

/* =========================================================================
 * COMMUNITY SECTION (homepage)
 *
 * Both classes are referenced by index.php's #community section and neither
 * existed in any stylesheet, so the byline rendered as body copy and the empty
 * state as a bare paragraph.
 * ========================================================================= */

/* Shown when user_projects has no approved rows. It is a real state, not an
   error, so it is styled as a quiet note rather than a warning panel. */
.community-empty {
  border: 1px solid var(--emods-border);
  border-radius: var(--radius-m);
  padding: 34px 32px;
  max-width: 62ch;
}

.community-empty p {
  margin: 0 0 22px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--emods-text-muted);
}

/* Who built it. Mono, so it reads as attribution and does not compete with the
   project's own description directly above it. */
.project-byline {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--emods-border);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--emods-text-muted);
}