/* ==========================================================================
   EVENT HORIZON — global styles
   ========================================================================== */

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: rgba(150, 170, 255, 0.35) #06070f;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
  background-color: var(--void);
  overflow-x: hidden;
  min-height: 100vh;
}

img, svg, canvas, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; }
ul, ol { list-style: none; }
a { color: var(--star); text-decoration: none; }

::selection { background: rgba(117, 151, 222, 0.35); color: #fff; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* custom cursor active: hide native everywhere except text entry */
html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor label { cursor: none; }
html.has-cursor input,
html.has-cursor textarea,
html.has-cursor select { cursor: auto; }

/* ==========================================================================
   BACKGROUND LAYERS — nebula, starfield (connective tissue of the site)
   ========================================================================== */

.nebula-layer {
  position: fixed;
  inset: -20%;
  z-index: var(--z-nebula);
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 34% at 18% 22%, rgba(43, 16, 85, 0.55), transparent 70%),
    radial-gradient(ellipse 38% 30% at 84% 12%, rgba(117, 151, 222, 0.14), transparent 70%),
    radial-gradient(ellipse 46% 38% at 70% 88%, rgba(43, 16, 85, 0.45), transparent 70%),
    radial-gradient(ellipse 30% 26% at 8% 78%, rgba(117, 151, 222, 0.10), transparent 70%);
  filter: blur(40px);
  animation: nebula-drift 90s var(--ease-inout) infinite alternate;
  will-change: transform;
}

@keyframes nebula-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  50%  { transform: translate3d(1.5%, 1%, 0) scale(1.04); }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.02); }
}

#starfield {
  position: fixed;
  inset: 0;
  z-index: var(--z-stars);
  pointer-events: none;
}

/* ==========================================================================
   FILM LAYERS — grain, vignette, letterbox
   ========================================================================== */

.grain-overlay {
  position: fixed;
  inset: -100px;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.9s steps(4) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-34px, 22px); }
  50%  { transform: translate(18px, -40px); }
  75%  { transform: translate(-26px, -14px); }
  100% { transform: translate(0, 0); }
}

.vignette-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-vignette);
  pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 62%, rgba(0, 0, 2, 0.42) 100%);
}

/* cinema bars */
.letterbox { pointer-events: none; }
.letterbox__bar {
  position: fixed;
  left: 0;
  width: 100%;
  height: 12vh;
  background: #000;
  z-index: var(--z-letterbox);
  transform: translateY(-101%);
  pointer-events: none;
}
.letterbox__bar--bottom { top: auto; bottom: 0; transform: translateY(101%); }
.letterbox__bar--top { top: 0; }

/* warp-jump canvas + destination readout */
#warp-canvas {
  position: fixed;
  inset: 0;
  z-index: var(--z-warp);
  pointer-events: none;
  opacity: 0;
  background: transparent;
}
.warp-label {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-letterbox);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: var(--track-mono);
  color: var(--signal);
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 18px var(--signal-glow);
}

/* ==========================================================================
   PRELOADER — launch sequence
   ========================================================================== */

.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  background: #000;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.4rem;
}
/* only armed by the inline head script (first visit, motion allowed) */
html.is-intro .preloader {
  display: flex;
  animation: overlay-failsafe 0.6s ease 3s forwards; /* self-destruct if a CDN dies */
}
html.no-motion .preloader, html.no-js .preloader { display: none !important; }
.preloader.is-done { display: none !important; }

/* warp-arrival veil — black frame the new page opens from */
#page-veil { display: none; }
html.is-arriving #page-veil {
  display: block;
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 985;
  animation: overlay-failsafe 0.6s ease 2.2s forwards;
}
html.is-arriving .letterbox__bar { transform: translateY(0); }
html.no-motion #page-veil, html.no-js #page-veil { display: none !important; }

@keyframes overlay-failsafe {
  to { opacity: 0; visibility: hidden; }
}

.preloader__text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--muted);
}
.preloader__count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--track-mono);
  color: var(--star);
}
.preloader__star {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px 3px var(--star-glow);
  transform: scale(0);
}
.preloader__log {
  height: 6.4em;                 /* fixed — lines append without reflow */
  width: min(340px, 82vw);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  line-height: 1.28em;
  text-transform: uppercase;
  color: rgba(138, 147, 184, 0.7);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.preloader__log .ok { color: var(--signal); }
.preloader__log div { animation: log-in 0.12s ease both; }
@keyframes log-in { from { opacity: 0; transform: translateY(4px); } }

/* JS took control of the show — the 3s CSS self-destruct stands down
   (it still fires if a CDN dies and initPreloader never runs) */
.preloader.is-live { animation: none; }

/* AGENT MISTEY materialization (injected by preloader.js when her one-shot
   webp decoded in time). Centered via inset+margin so GSAP owns transform. */
.preloader__mistey {
  position: absolute;
  inset: -10% 0 0 0;
  margin: auto;
  width: min(46vw, 260px);
  height: auto;
  filter: drop-shadow(0 0 28px rgba(111, 247, 227, 0.5));
  pointer-events: none;
  z-index: 2;
}
.preloader__line {
  position: absolute;
  left: 50%;
  bottom: 24%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--star);
  text-shadow: 0 0 12px rgba(111, 247, 227, 0.35);
  max-width: 86vw;
  min-height: 1.2em;
}
@media (max-width: 600px) {
  .preloader__mistey { width: min(58vw, 220px); }
  .preloader__line { font-size: 0.6rem; letter-spacing: 0.12em; }
}

/* dock orb greets when she lands in it at the end of the intro */
.mistey-orb.is-greet { animation: orb-greet 0.9s ease-out 1; }
@keyframes orb-greet {
  0% { transform: scale(1); }
  35% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* MISTEY guide bubble — home-page narration above the dock orb */
.mistey-bubble {
  position: fixed;
  left: 1.6rem;
  bottom: calc(1.6rem + 56px + 14px);
  z-index: var(--z-whatsapp);
  max-width: min(340px, 72vw);
  padding: 0.7rem 2rem 0.7rem 0.9rem;
  background: rgba(8, 10, 20, 0.92);
  border: 1px solid var(--line);
  border-left: 2px solid var(--signal);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: 0 100%;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mistey-bubble::after {
  content: '';
  position: absolute;
  left: 16px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: rgba(8, 10, 20, 0.92);
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(-45deg);
}
.mistey-bubble.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mistey-bubble__x {
  position: absolute;
  top: 0.15rem;
  right: 0.3rem;
  padding: 0.15rem 0.35rem;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}
.mistey-bubble__x:hover { color: var(--star); }
@media (max-width: 768px) {
  .mistey-bubble {
    left: 1rem;
    bottom: calc(1rem + 50px + 12px);
    font-size: 0.55rem;
    max-width: 74vw;
  }
}

/* ==========================================================================
   CUSTOM CURSOR — targeting reticle
   ========================================================================== */

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
}
.cursor-dot {
  /* now a little spaceship that faces its direction of travel */
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 0;
}
.cursor-ship {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(0deg);          /* JS steers this toward the pointer's velocity */
  transition: filter 0.2s ease;     /* rotation is JS-lerped; don't transition it */
  filter: drop-shadow(0 0 6px rgba(111, 247, 227, 0.7));
}
.cursor-ship path {
  fill: #eafcff;
  stroke: var(--signal);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
/* thrust flicker when moving fast (class toggled by JS) */
.cursor-dot.is-thrusting .cursor-ship { filter: drop-shadow(0 0 10px rgba(111, 247, 227, 0.9)); }
.cursor-ring {
  /* geometry (width/height/radius) is lerped by JS — CSS owns colors only */
  width: 34px;
  height: 34px;
  border: 1px solid rgba(168, 198, 255, 0.55);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.28s var(--ease-out), background-color 0.28s var(--ease-out);
}
.cursor-ring .cursor-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: #04241e;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s var(--ease-out);
}
.cursor-ring.is-hover {
  border-color: var(--signal);
  background: rgba(111, 247, 227, 0.08);
}
/* lock-on: ring snapped around the target like target acquisition */
.cursor-ring.is-locked {
  border-color: var(--signal);
  background: rgba(111, 247, 227, 0.05);
}
.cursor-ring.has-label {
  background: var(--signal);
  border-color: var(--signal);
}
.cursor-ring.has-label .cursor-label { opacity: 1; transform: scale(1); }
.cursor-dot.is-hidden, .cursor-ring.is-hidden { opacity: 0; }

/* rotating reticle tick marks (free state) */
.cursor-ticks {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(
    rgba(168, 198, 255, 0.8) 0 7deg, transparent 7deg 90deg,
    rgba(168, 198, 255, 0.8) 90deg 97deg, transparent 97deg 180deg,
    rgba(168, 198, 255, 0.8) 180deg 187deg, transparent 187deg 270deg,
    rgba(168, 198, 255, 0.8) 270deg 277deg, transparent 277deg 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: cursor-spin 14s linear infinite;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.cursor-ring.is-locked .cursor-ticks,
.cursor-ring.has-label .cursor-ticks { opacity: 0; }
@keyframes cursor-spin { to { transform: rotate(360deg); } }

@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }

main { position: relative; z-index: var(--z-content); }

.section { position: relative; padding: var(--space-6) 0; }
.section--tight { padding: var(--space-5) 0; }

/* section header with telemetry label */
.section-head { margin-bottom: var(--space-5); }
.section-head--center { text-align: center; }
.section-head h2 { font-size: var(--fs-h2); max-width: 18ch; }
.section-head--center h2 { margin-inline: auto; }
.section-head .section-sub {
  margin-top: 1rem;
  color: var(--muted);
  max-width: 56ch;
  font-size: 1.02rem;
}
.section-head--center .section-sub { margin-inline: auto; }

/* mono telemetry layer */
.hud-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.hud-label::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--star);
  box-shadow: 0 0 10px var(--star-glow);
  border-radius: 1px;
  flex-shrink: 0;
}
.hud-label--signal::before { background: var(--signal); box-shadow: 0 0 10px var(--signal-glow); }
.hud-label--flare::before { background: var(--flare); box-shadow: 0 0 10px var(--flare-glow); }

/* hairline divider that draws in on scroll */
.hud-line {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--line-strong), transparent);
  transform-origin: left center;
  transform: scaleX(0);
  margin: 1.6rem 0;
}
html.no-motion .hud-line { transform: scaleX(1); }

/* anamorphic lens-flare line on headline reveal */
.lens-flare {
  position: absolute;
  height: 1px;
  left: -10%;
  width: 120%;
  background: linear-gradient(90deg, transparent, rgba(168, 198, 255, 0.85), transparent);
  filter: blur(0.4px);
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   GLASS PANELS & HUD FRAMES
   ========================================================================== */

@property --sheen {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

.panel {
  position: relative;
  /* holographic sheen follows the pointer (--mx/--my set by JS) over the glass */
  background-color: transparent;
  background-image:
    radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
      rgba(168, 198, 255, calc(0.085 * var(--sheen, 0))),
      rgba(111, 247, 227, calc(0.028 * var(--sheen, 0))) 42%,
      transparent 70%),
    linear-gradient(var(--panel), var(--panel));
  backdrop-filter: blur(var(--blur-panel));
  -webkit-backdrop-filter: blur(var(--blur-panel));
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  transition: --sheen 0.45s ease;
}
.panel:hover { --sheen: 1; }
html.perf-low .panel, html.no-motion .panel { --sheen: 0; }

/* corner ticks */
.corners::before,
.corners::after,
.corners > .tick::before,
.corners > .tick::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  transition: border-color var(--dur-fast) ease;
}
.corners::before {
  top: -1px; left: -1px;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}
.corners::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
}
.corners > .tick::before {
  top: -1px; right: -1px;
  border-top: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
}
.corners > .tick::after {
  bottom: -1px; left: -1px;
  border-bottom: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}
.panel:hover.corners::before,
.panel:hover.corners::after,
.panel:hover.corners > .tick::before,
.panel:hover.corners > .tick::after { border-color: var(--star); }

/* faint scanline / grid layer for panels & login */
.scan-grid {
  background-image:
    linear-gradient(rgba(150, 170, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 170, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: rgba(13, 15, 30, 0.45);
  overflow: hidden;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
  will-change: transform;
}
.btn .btn-fill {
  position: absolute;
  inset: 0;
  background: var(--star);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn span, .btn i { position: relative; z-index: 1; }
.btn:hover { color: #05070f; border-color: var(--star); }
.btn:hover .btn-fill { transform: scaleX(1); }

/* primary flare CTA — one per screen */
.btn--flare {
  border-color: rgba(255, 122, 69, 0.5);
  color: var(--flare);
  animation: flare-pulse 3.2s ease-in-out infinite;
}
.btn--flare .btn-fill { background: var(--flare); }
.btn--flare:hover { color: #1a0800; border-color: var(--flare); }

@keyframes flare-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 122, 69, 0); }
  50% { box-shadow: 0 0 26px rgba(255, 122, 69, 0.22); }
}

.btn--signal {
  border-color: rgba(111, 247, 227, 0.4);
  color: var(--signal);
}
.btn--signal .btn-fill { background: var(--signal); }
.btn--signal:hover { color: #03211c; border-color: var(--signal); }

.btn--block { width: 100%; }

/* quiet arrow-link */
.link-line {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--star);
}
.link-line .arrow { transition: transform 0.3s var(--ease-out); }
.link-line:hover .arrow { transform: translateX(6px); }
.link-line::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: var(--line-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.link-line { position: relative; }
.link-line:hover::after { transform: scaleX(1); }

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

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(3, 3, 8, 0.75), rgba(3, 3, 8, 0.35));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: height 0.4s var(--ease-out), border-color 0.4s ease, background 0.4s ease;
}
.site-nav.is-scrolled {
  height: var(--nav-height-scrolled);
  border-bottom-color: var(--line);
  background: linear-gradient(180deg, rgba(3, 3, 8, 0.92), rgba(3, 3, 8, 0.78));
}
/* auto-hide while travelling down, reveal on any upward scroll */
.site-nav { transition: height 0.4s var(--ease-out), border-color 0.4s ease, background 0.4s ease, transform 0.45s var(--ease-out); }
.site-nav.is-hidden { transform: translateY(-100%); }
html.no-motion .site-nav.is-hidden { transform: none; }

.site-nav__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--text);
}
.nav-brand img {
  height: 34px;
  width: 34px;
  object-fit: contain;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: rgba(150, 170, 255, 0.06);
  padding: 3px;
}
.nav-brand .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  color: var(--star);
  font-size: 0.85rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links a:not(.btn) {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.4rem 0;
  transition: color var(--dur-fast) ease;
}
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn).is-active { color: var(--text); }
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).is-active::after { transform: scaleX(1); }

.nav-links .btn { padding: 0.6rem 1.2rem; font-size: 0.66rem; }

/* ---- About dropdown ---- */
.nav-drop { position: relative; }
.nav-drop .drop-caret {
  font-size: 0.55em;
  opacity: 0.7;
  display: inline-block;
  transition: transform 0.25s var(--ease-out);
}
.nav-drop:hover .drop-caret,
.nav-drop:focus-within .drop-caret { transform: rotate(180deg); }
.nav-drop__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 190px;
  padding: 0.5rem;
  background: rgba(9, 11, 24, 0.96);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: grid;
  gap: 0.1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
  z-index: 10;
}
/* hover bridge so the pointer can travel from link to menu */
.nav-drop__menu::before {
  content: "";
  position: absolute;
  top: -12px; left: 0; right: 0; height: 12px;
}
.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.22s ease, transform 0.25s var(--ease-out);
}
.nav-drop__menu a {
  display: block;
  padding: 0.55rem 0.8rem !important;
  border-radius: var(--radius-s);
  white-space: nowrap;
}
.nav-drop__menu a::after { display: none; }   /* no underline anim inside the menu */
.nav-drop__menu a:hover {
  background: rgba(111, 247, 227, 0.06);
  color: var(--text);
}

/* hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
}
.nav-toggle span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--text);
  transition: transform 0.35s var(--ease-out), opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* full-screen mobile menu */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: rgba(3, 3, 8, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.nav-overlay.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.nav-overlay__links { display: flex; flex-direction: column; gap: 0.4rem; }
.nav-overlay__links a {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 9vw, 4rem);
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  opacity: 0;
  transform: translateY(30px);
}
.nav-overlay.is-open .nav-overlay__links a {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.nav-overlay__links a .idx {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--track-mono);
  color: var(--muted);
}
.nav-overlay__links a:hover { color: var(--star); }
.nav-overlay__meta {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  color: var(--muted);
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.nav-overlay__meta a { color: var(--muted); }
.nav-overlay__meta a:hover { color: var(--signal); }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

/* ==========================================================================
   FLASH MESSAGES
   ========================================================================== */

.flash-stack {
  position: relative;
  z-index: var(--z-content);
  max-width: var(--container);
  margin: calc(var(--nav-height) + 1rem) auto 0;
  padding-inline: var(--gutter);
  display: grid;
  gap: 0.6rem;
}
.flash {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--star);
  border-radius: var(--radius-s);
  background: var(--panel);
  backdrop-filter: blur(12px);
  font-size: var(--fs-small);
}
.flash--success { border-left-color: var(--signal); }
.flash--success i { color: var(--signal); }
.flash--danger { border-left-color: var(--flare); }
.flash--danger i { color: var(--flare); }
.flash--warning { border-left-color: #f5d76b; }
.flash--warning i { color: #f5d76b; }
.flash--info i { color: var(--star); }
.flash .flash-close {
  margin-left: auto;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
}
.flash .flash-close:hover { color: var(--text); }

/* ==========================================================================
   FORMS — HUD inputs
   ========================================================================== */

.field { position: relative; padding-top: 1.35rem; }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: rgba(13, 15, 30, 0.4);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--text);
  padding: 0.85rem 1rem;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 130px; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A93B8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.field select option { background: var(--panel-solid); color: var(--text); }
.field input::placeholder,
.field textarea::placeholder { color: rgba(138, 147, 184, 0.55); }
.field label {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur-fast) ease;
}
.field label .req { color: var(--flare); }
/* signal underline that draws on focus */
.field .field-line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
  pointer-events: none;
}
.field:focus-within input,
.field:focus-within select,
.field:focus-within textarea {
  border-color: rgba(111, 247, 227, 0.4);
  background: rgba(13, 15, 30, 0.65);
  outline: none;
}
.field:focus-within label { color: var(--signal); }
.field:focus-within .field-line { transform: scaleX(1); }

/* date/time indicator color on dark */
.field input::-webkit-calendar-picker-indicator { filter: invert(0.75); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem 1.6rem;
}
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* checkbox — HUD style */
.hud-check {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: var(--fs-small);
  color: var(--muted);
}
.hud-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--signal);
}

/* ==========================================================================
   MODAL — glass HUD panel
   ========================================================================== */

.modal-hud {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.modal-hud.is-open { display: flex; }
.modal-hud__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 2, 6, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-hud__panel {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 3rem);
  max-height: calc(100svh - 3rem);
  overflow-y: auto;
  background: rgba(9, 11, 24, 0.92);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  padding: 2.2rem clamp(1.3rem, 4vw, 2.4rem) 1.8rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.modal-hud__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.modal-hud__head h2 {
  font-size: 1.5rem;
}
.modal-hud__close {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: var(--track-mono);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 0.5rem 0.8rem;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.modal-hud__close:hover { color: var(--flare); border-color: rgba(255, 122, 69, 0.5); }
.modal-alert { margin-top: 1rem; }
.modal-alert .flash { margin: 0; }
.modal-hud__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

body.modal-open { overflow: hidden; }

/* ==========================================================================
   CARD GRID (shared)
   ========================================================================== */

.grid {
  display: grid;
  gap: 1.4rem;
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* generic HUD card */
.hud-card {
  position: relative;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
  will-change: transform;
}
.hud-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 20px 60px rgba(2, 2, 10, 0.6), 0 0 40px rgba(117, 151, 222, 0.06) inset;
}
.hud-card .card-idx {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  color: var(--muted);
}
.hud-card .card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  color: var(--star);
  font-size: 1.05rem;
  background: rgba(150, 170, 255, 0.05);
}
.hud-card h3 { font-size: var(--fs-h3); }
.hud-card p { color: var(--muted); font-size: var(--fs-small); }
.hud-card .card-foot { margin-top: auto; padding-top: 0.8rem; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-6) 0;
  background: linear-gradient(180deg, rgba(43, 16, 85, 0.16), rgba(3, 3, 8, 0));
}
.cta-band .beam {
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(168, 198, 255, 0.06), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-band h2 { font-size: var(--fs-h2); max-width: 20ch; }
.cta-band p { color: var(--muted); margin-top: 0.8rem; max-width: 48ch; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  position: relative;
  z-index: var(--z-content);
  margin-top: var(--space-6);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(3, 3, 8, 0.2), rgba(2, 2, 6, 0.9));
  overflow: hidden;
}
.footer-giant {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 12.5vw, 12rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-align: center;
  padding: var(--space-5) var(--gutter) 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(150, 170, 255, 0.22);
  background: linear-gradient(100deg, var(--nebula-b), var(--star), var(--flare));
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 200% 100%;
  background-position: 100% 0;
  user-select: none;
  white-space: nowrap;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding: var(--space-5) 0 var(--space-4);
}
.footer-col h5 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.2rem;
}
.footer-col ul { display: grid; gap: 0.65rem; }
.footer-col a, .footer-col span, .footer-col p {
  color: var(--muted);
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
}
.footer-col a { transition: color var(--dur-fast) ease; }
.footer-col a:hover { color: var(--star); }
.footer-col ul li i {
  width: 18px;
  margin-right: 0.5rem;
  color: var(--star);
  font-size: 0.8rem;
}
.footer-brandline {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 30ch;
}
.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--muted);
  transition: color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.footer-social a:hover {
  color: var(--signal);
  border-color: rgba(111, 247, 227, 0.45);
  box-shadow: 0 0 18px rgba(111, 247, 227, 0.12);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 1.4rem 0 1.6rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-bottom .pulse {
  color: var(--signal);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   WHATSAPP — comms beacon
   ========================================================================== */

.whatsapp-button {
  position: fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  z-index: var(--z-whatsapp);
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(111, 247, 227, 0.5);
  color: var(--signal);
  background: rgba(9, 11, 24, 0.85);
  backdrop-filter: blur(10px);
  font-size: 1.35rem;
  transition: box-shadow var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.whatsapp-button::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(111, 247, 227, 0.5);
  animation: beacon 2.6s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes beacon {
  0% { transform: scale(1); opacity: 0.8; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}
.whatsapp-button:hover {
  color: #b9fff4;
  border-color: var(--signal);
  box-shadow: 0 0 26px rgba(111, 247, 227, 0.25);
}

/* ==========================================================================
   SOUNDTRACK — side toggle orb (stacked above the WhatsApp beacon)
   ========================================================================== */

.audio-orb {
  position: fixed;
  right: 1.6rem;
  bottom: 5.4rem;                 /* above the whatsapp beacon */
  z-index: var(--z-whatsapp);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(9, 11, 24, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--muted);
  transition: color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.audio-orb:hover { transform: scale(1.08); color: var(--text); border-color: var(--star); }
.audio-orb.is-on { color: var(--signal); border-color: rgba(111, 247, 227, 0.5); box-shadow: 0 0 20px rgba(111, 247, 227, 0.2); }
.audio-orb__icon {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}
.audio-orb__icon .wave {
  width: 3px;
  height: 5px;
  border-radius: 2px;
  background: currentColor;
  transition: height var(--dur-fast) ease;
}
/* animated equalizer only while playing */
.audio-orb.is-on .wave { animation: eq 0.9s ease-in-out infinite; }
.audio-orb.is-on .wave:nth-child(1) { animation-delay: 0s; }
.audio-orb.is-on .wave:nth-child(2) { animation-delay: 0.18s; }
.audio-orb.is-on .wave:nth-child(3) { animation-delay: 0.36s; }
/* off = a muted, low flat set of bars */
.audio-orb:not(.is-on) .wave:nth-child(1) { height: 6px; }
.audio-orb:not(.is-on) .wave:nth-child(2) { height: 10px; }
.audio-orb:not(.is-on) .wave:nth-child(3) { height: 6px; }
.audio-orb:not(.is-on)::after {
  content: "";
  position: absolute;
  width: 30px; height: 1px;
  background: var(--muted);
  transform: rotate(-45deg);   /* a mute slash */
  opacity: 0.7;
}
@keyframes eq {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}
@media (max-width: 768px) { .audio-orb { width: 42px; height: 42px; bottom: 5rem; } }
html.no-motion .audio-orb.is-on .wave { animation: none; height: 10px; }

/* ==========================================================================
   AGENT MISTEY — assistant dock
   ========================================================================== */

.mistey-orb {
  position: fixed;
  bottom: 1.6rem;
  left: 1.6rem;
  z-index: var(--z-whatsapp);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(111, 247, 227, 0.45);
  background: rgba(9, 11, 24, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.mistey-orb:hover { transform: scale(1.06); border-color: var(--signal); box-shadow: 0 0 26px rgba(111, 247, 227, 0.3); }
.mistey-orb__img {
  width: 70%;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(111, 247, 227, 0.5));
  pointer-events: none;
}
.mistey-orb__ring {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(111, 247, 227, 0.55);
  animation: cursor-spin 9s linear infinite;
}
.mistey-orb__tag {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.42rem;
  letter-spacing: 0.18em;
  color: var(--signal);
  background: var(--void);
  padding: 1px 4px;
  border-radius: 2px;
}
.mistey-orb::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(111, 247, 227, 0.5);
  animation: beacon 2.8s var(--ease-out) infinite;
  pointer-events: none;
}
@media (max-width: 768px) { .mistey-orb { width: 50px; height: 50px; } }
html.perf-low .mistey-orb__ring, html.perf-low .mistey-orb::after { animation: none; }

.mistey-panel__id { display: flex; align-items: center; gap: 0.9rem; }
.mistey-panel__avatar {
  width: 72px;
  height: auto;
  filter: drop-shadow(0 0 12px rgba(111, 247, 227, 0.4));
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .mistey-panel__id { gap: 0.6rem; }
  .mistey-panel__avatar { width: 52px; }
  .mistey-panel__id .hud-label {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }
}

.mistey-status { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.16em; color: var(--signal); vertical-align: middle; }
.mistey-convo { margin: 0.4rem 0 1.4rem; }
.mistey-say {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  padding: 1rem 1.1rem;
  border-left: 2px solid var(--signal);
  background: linear-gradient(90deg, rgba(111, 247, 227, 0.05), transparent);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  min-height: 3.4em;
}
.mistey-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.mistey-actions .btn { width: 100%; }
.mistey-foot {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-align: center;
}
@media (max-width: 560px) { .mistey-actions { grid-template-columns: 1fr; } }

/* ---- MISTEY chatbot (chat log, bubbles, chips, input row) ---- */
/* the panel is a column so the log takes every spare pixel and the input row
   stays anchored — the log scrolls, the panel itself never does */
.mistey-panel .modal-hud__panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mistey-panel .modal-hud__head,
.mistey-panel .mistey-chips,
.mistey-panel .mistey-inputrow,
.mistey-panel .mistey-foot { flex: 0 0 auto; }
.mistey-convo {
  flex: 1 1 auto;
  margin: 0.4rem 0 1rem;
  max-height: 52vh;
  min-height: 130px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  scrollbar-width: thin;
  padding-right: 0.3rem;
}
.m-msg {
  max-width: 88%;
  padding: 0.65rem 0.9rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
}
.m-msg--bot {
  align-self: flex-start;
  border-left: 2px solid var(--signal);
  background: linear-gradient(90deg, rgba(111, 247, 227, 0.05), transparent);
  border-radius: 0 6px 6px 0;
}
.m-msg--user {
  align-self: flex-end;
  border-right: 2px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px 0 0 6px;
}
.m-typing span {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--signal);
  animation: m-dot 1s ease-in-out infinite;
}
.m-typing span:nth-child(2) { animation-delay: 0.18s; }
.m-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes m-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
html.no-motion .m-typing span { animation: none; }
.mistey-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.2rem;
}
.m-inline-chips { align-self: flex-start; max-width: 92%; }
.mistey-chip {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--star);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.mistey-chip:hover {
  border-color: var(--signal);
  color: var(--signal);
  background: rgba(111, 247, 227, 0.06);
}
.m-actions {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.m-actions .btn { font-size: 0.6rem; padding: 0.55rem 0.9rem; }
.mistey-inputrow {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.mistey-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.7rem 0.9rem;
  outline: none;
  transition: border-color 0.2s ease;
}
.mistey-input:focus { border-color: var(--signal); }
.mistey-input::placeholder { color: var(--muted); }
.mistey-panel.is-busy .mistey-send { opacity: 0.5; pointer-events: none; }
@media (max-height: 640px) { .mistey-convo { max-height: 36vh; } }

/* ==========================================================================
   TACTICAL HUD CHROME (sitewide, disciplined)
   ========================================================================== */

/* chamfered control silhouette — angled top-left / bottom-right corners */
.btn {
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.btn .btn-fill { clip-path: inherit; }

/* reticle crosshair on card hover — reuses the existing corner-tick span */
.hud-card > .tick { position: absolute; inset: 0; pointer-events: none; }
.hud-card > .tick::before,
.hud-card > .tick::after {
  content: "";
  position: absolute;
  background: var(--signal);
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
}
.hud-card > .tick::before { top: 50%; left: -1px; width: 8px; height: 1px; }
.hud-card > .tick::after { top: 50%; right: -1px; width: 8px; height: 1px; }
.hud-card:hover > .tick::before,
.hud-card:hover > .tick::after { opacity: 0.85; }
html.perf-low .hud-card > .tick::before, html.perf-low .hud-card > .tick::after { display: none; }

/* segmented power bars (stat cards) */
.power-bar {
  display: flex;
  gap: 3px;
  width: 100%;
  max-width: 120px;
  margin: 0.6rem auto 0;
}
.power-bar span {
  flex: 1;
  height: 4px;
  background: rgba(150, 170, 255, 0.14);
  transform: scaleY(0.6);
  transform-origin: bottom;
  transition: background 0.3s ease, transform 0.3s ease;
}
.power-bar span.is-lit { background: var(--star); transform: scaleY(1); box-shadow: 0 0 6px var(--star-glow); }
.stat-card--flare .power-bar span.is-lit { background: var(--flare); box-shadow: 0 0 6px var(--flare-glow); }

/* ==========================================================================
   PAGE HERO (inner pages)
   ========================================================================== */

.page-hero {
  position: relative;
  padding: calc(var(--nav-height) + var(--space-4)) 0 var(--space-5);
  overflow: hidden;
}
.page-hero h1 {
  font-size: var(--fs-h1);
  max-width: 16ch;
}
.page-hero--center { text-align: center; }
.page-hero--center h1 { margin-inline: auto; }
.page-hero .lead {
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  max-width: 58ch;
}
.page-hero--center .lead { margin-inline: auto; }
.page-hero .hero-coords {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--nav-height) + 1.2rem);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: var(--track-mono);
  color: rgba(138, 147, 184, 0.5);
  text-transform: uppercase;
  text-align: right;
  line-height: 2;
  pointer-events: none;
}
@media (max-width: 700px) { .page-hero .hero-coords { display: none; } }

/* ==========================================================================
   PROSE (legal pages, DB HTML content)
   ========================================================================== */

.prose {
  max-width: 72ch;
  margin-inline: auto;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
  margin: 2.2rem 0 0.9rem;
  color: var(--text);
}
.prose h2 { font-size: 1.6rem; }
.prose h3 { font-size: 1.25rem; }
.prose p, .prose li { color: var(--muted); margin-bottom: 0.9rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: 1.2rem; }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-left: 0.4rem; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 0.7em;
  width: 5px;
  height: 1px;
  background: var(--star);
}
.prose ol { list-style: decimal; }
.prose a { color: var(--star); border-bottom: 1px solid var(--line-strong); }
.prose a:hover { color: var(--signal); }
.prose strong { color: var(--text); }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }
.prose blockquote {
  border-left: 2px solid var(--star);
  padding-left: 1.2rem;
  margin: 1.5rem 0;
}
.prose img { border-radius: var(--radius-m); border: 1px solid var(--line); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; }
.prose th, .prose td {
  border: 1px solid var(--line);
  padding: 0.6rem 0.9rem;
  color: var(--muted);
  text-align: left;
  font-size: var(--fs-small);
}
.prose th { color: var(--text); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pager {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--space-5);
  flex-wrap: wrap;
}
.pager a, .pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--muted);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.pager a:hover { color: var(--text); border-color: var(--star); }
.pager .is-current { color: var(--signal); border-color: rgba(111, 247, 227, 0.5); }

/* ==========================================================================
   MISC UTILITIES
   ========================================================================== */

.mono { font-family: var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.text-signal { color: var(--signal); }
.text-flare { color: var(--flare); }
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* empty state */
.empty-state {
  text-align: center;
  padding: var(--space-5) var(--space-3);
}
.empty-state i { font-size: 1.6rem; color: var(--muted); margin-bottom: 1rem; }
.empty-state h5 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.empty-state p { color: var(--muted); max-width: 46ch; margin-inline: auto; }

/* reveal defaults — JS animates these in; visible if JS/motion is off */
html.no-motion [data-reveal],
html.no-motion [data-reveal-group] > * { opacity: 1 !important; transform: none !important; filter: none !important; }

/* ==========================================================================
   REDUCED MOTION — content appears instantly and fully
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  .nebula-layer { animation: none; }
  .grain-overlay { animation: none; }
  .cursor-dot, .cursor-ring { display: none !important; }
  .preloader { display: none !important; }
  .letterbox__bar { display: none !important; }
  #warp-canvas { display: none !important; }
}

/* same guarantees when JS flags no-motion (reduced motion or CDN failure) */
html.no-motion .cursor-dot,
html.no-motion .cursor-ring,
html.no-motion .letterbox__bar,
html.no-motion #warp-canvas,
html.no-motion .warp-label { display: none !important; }
html.no-motion .nebula-layer,
html.no-motion .grain-overlay { animation: none; }

/* ==========================================================================
   PHASE 2 — alive-ship layer
   ========================================================================== */

/* ---- warp departure/arrival camera settle (guarded in JS vs active pins) ---- */
main {
  transition: transform 0.5s var(--ease-inout), filter 0.5s var(--ease-inout);
  transform-origin: 50% 42%;
}
/* full-viewport blur() is the most expensive filter there is — scale/saturate only */
html.is-warping-out main {
  transform: scale(1.022);
  filter: saturate(1.15);
}
html.is-arriving main {
  transform: scale(1.012);
}
html.no-motion main { transition: none; transform: none !important; filter: none !important; }

/* ---- footer telemetry ---- */
.footer-bottom { font-variant-numeric: tabular-nums; }
.footer-bottom .tm-line { display: inline-flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }

/* ---- COMMS AUDIO toggle ---- */
.audio-toggle {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.audio-toggle::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  transition: background var(--dur-fast), box-shadow var(--dur-fast);
}
.audio-toggle:hover { color: var(--text); border-color: var(--line-strong); }
.audio-toggle.is-on { color: var(--signal); border-color: rgba(111, 247, 227, 0.4); }
.audio-toggle.is-on::before { background: var(--signal); box-shadow: 0 0 10px var(--signal-glow); }

/* ---- command palette (nav console) ---- */
.palette { align-items: flex-start; }
.palette .palette__panel {
  position: relative;
  width: min(580px, 100%);
  margin-top: 14vh;
  padding: 1.6rem 1.6rem 1rem;
  background: rgba(9, 11, 24, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.palette__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.2rem;
}
.palette__avatar { width: 30px; height: auto; }
.palette__input {
  width: 100%;
  background: rgba(13, 15, 30, 0.5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 1rem;
  margin-top: 0.4rem;
}
.palette__input:focus {
  outline: none;
  border-color: rgba(111, 247, 227, 0.5);
}
.palette__input::placeholder { color: rgba(138, 147, 184, 0.45); }
.palette__list {
  margin-top: 0.6rem;
  max-height: 46vh;
  overflow-y: auto;
}
.palette__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-s);
  cursor: pointer;
  border: 1px solid transparent;
}
.palette__list li .pal-name { font-size: 0.92rem; color: var(--text); }
.palette__list li .pal-path {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.palette__list li .pal-jump {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--signal);
  opacity: 0;
  margin-left: auto;
  white-space: nowrap;
}
.palette__list li.is-active {
  background: rgba(111, 247, 227, 0.05);
  border-color: rgba(111, 247, 227, 0.25);
}
.palette__list li.is-active .pal-jump { opacity: 1; }
.palette__empty {
  padding: 1rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}
.palette__hint {
  font-size: 0.54rem;
  color: rgba(138, 147, 184, 0.5);
  padding: 0.8rem 0.2rem 0.2rem;
  border-top: 1px solid var(--line);
  margin-top: 0.6rem;
}
.nav-kbd {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.nav-kbd:hover { color: var(--signal); border-color: rgba(111, 247, 227, 0.4); }
@media (max-width: 900px) { .nav-kbd { display: none; } }

/* ---- mission waypoint rail ---- */
.waypoint-rail {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.waypoint-rail .wp-track {
  position: relative;
  width: 1px;
  background: var(--line);
  flex: 1;
}
.waypoint-rail .wp-fill {
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 100%;
  background: var(--signal);
  transform-origin: top center;
  transform: scaleY(0);
  box-shadow: 0 0 8px var(--signal-glow);
}
.waypoint-rail .wp-dot {
  position: relative;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
}
.waypoint-rail .wp-dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  transition: background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.waypoint-rail .wp-dot:hover::before { background: var(--text); transform: scale(1.4); }
.waypoint-rail .wp-dot.is-active::before {
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal-glow);
  transform: scale(1.5);
}
.waypoint-rail .wp-dot::after {
  content: attr(data-label);
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
  pointer-events: none;
}
.waypoint-rail .wp-dot:hover::after,
.waypoint-rail .wp-dot.is-active::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
@media (max-width: 1100px) { .waypoint-rail { display: none; } }
html.no-motion .waypoint-rail { display: none; }

/* ---- adaptive quality: perf-low degradations ---- */
html.perf-low .grain-overlay { animation: none; }
html.perf-low { --blur-panel: 6px; }
html.perf-low .cursor-ticks { animation: none; opacity: 0; }
html.perf-low .btn--flare { animation: none; }

/* ==========================================================================
   INTERACTION POLISH (2026-07-26) — cursor spotlight, scroll progress,
   springy press. Transform/opacity/custom-property only: no layout thrash.
   Paired with static/js/interactions.js.
   ========================================================================== */

/* ---- 1. cursor spotlight: a soft light follows the pointer across a card ---- */
.card-hover, .svc-card, .stat-card, .panel, [data-tilt] {
  --mx: 50%;
  --my: 50%;
}
.card-hover::after, .svc-card::after, .stat-card::after, [data-tilt]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  clip-path: inherit;
  background: radial-gradient(340px circle at var(--mx) var(--my),
              rgba(111, 247, 227, 0.13), rgba(168, 198, 255, 0.06) 40%, transparent 68%);
  transition: opacity 0.45s var(--ease-out);
  z-index: 0;
}
.card-hover.is-lit::after, .svc-card.is-lit::after,
.stat-card.is-lit::after, [data-tilt].is-lit::after { opacity: 1; }

/* ---- 2. scroll progress hairline ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--signal), #A8C6FF 55%, #FF7A45);
  box-shadow: 0 0 12px var(--signal-glow);
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
}

/* ---- 3. springy press response (Apple-style tactile feedback) ---- */
.btn, .svc-card, .card-hover, .nav-link, .stat-link {
  transition: transform 0.42s var(--ease-out), opacity 0.42s var(--ease-out),
              border-color 0.42s var(--ease-out), box-shadow 0.42s var(--ease-out),
              background-color 0.42s var(--ease-out), color 0.42s var(--ease-out);
}
.btn:active, .stat-link:active { transform: scale(0.972); transition-duration: 0.09s; }
.svc-card:active, .card-hover:active { transform: scale(0.992); transition-duration: 0.12s; }

/* honour the quiet paths */
html.no-motion .scroll-progress { display: none; }
html.no-motion .card-hover::after, html.no-motion .svc-card::after,
html.no-motion .stat-card::after, html.no-motion [data-tilt]::after { display: none; }
html.perf-low .card-hover::after, html.perf-low .svc-card::after,
html.perf-low .stat-card::after, html.perf-low [data-tilt]::after { display: none; }

/* ---- footer ecosystem band: the live product subdomains ---- */
.footer-eco {
  padding: var(--space-4) 0 0;
  border-bottom: 1px solid rgba(168, 198, 255, 0.10);
  padding-bottom: var(--space-4);
}
.footer-eco h5 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.2rem;
}
.eco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.9rem;
}
.eco-item {
  --mx: 50%; --my: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid rgba(168, 198, 255, 0.14);
  background: rgba(168, 198, 255, 0.035);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  text-decoration: none;
  transition: transform 0.42s var(--ease-out), border-color 0.42s var(--ease-out),
              background-color 0.42s var(--ease-out);
}
.eco-item:hover {
  transform: translateY(-3px);
  border-color: rgba(111, 247, 227, 0.45);
  background: rgba(111, 247, 227, 0.06);
}
.eco-item:active { transform: translateY(-1px) scale(0.99); transition-duration: 0.1s; }
.eco-name {
  font-family: var(--font-display, inherit);
  font-size: 0.95rem;
  color: var(--text, #E8EEF9);
  letter-spacing: 0.02em;
}
.eco-name i { font-size: 0.62em; opacity: 0.6; margin-left: 0.35rem; }
.eco-item:hover .eco-name { color: var(--signal); }
.eco-desc {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 600px) {
  .eco-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .eco-item { padding: 0.75rem 0.85rem; }
  .eco-desc { font-size: 0.58rem; }
}

/* ==========================================================================
   MOBILE CHROME PASS (2026-07-26)
   Overrides only — appended last so they win without restructuring anything
   above. Scope: global chrome at 360 / 390 / 414 / 768. Nothing here animates
   a layout property; motion stays on transform/opacity and the
   html.no-motion / html.perf-low guardrails are untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOUCH DEVICES — kill the desktop-only pointer affordances.
   On iOS/Android a tap latches :hover until the next tap elsewhere, which
   leaves buttons stuck in their filled "pressed" skin and cards stuck lit.
   Keyed on pointer capability, not width, because that is the real signal.
   -------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  /* the custom reticle is display:none here already — give the OS caret back */
  html.has-cursor,
  html.has-cursor a,
  html.has-cursor button,
  html.has-cursor label { cursor: auto; }

  /* sticky-hover neutralisers (the :active spring below still fires) */
  .btn:hover { color: var(--text); border-color: var(--line-strong); }
  .btn:hover .btn-fill { transform: scaleX(0); }
  .btn--flare:hover { color: var(--flare); border-color: rgba(255, 122, 69, 0.5); }
  .btn--signal:hover { color: var(--signal); border-color: rgba(111, 247, 227, 0.4); }
  .link-line:hover::after { transform: scaleX(0); }
  .eco-item:hover { transform: none; background: rgba(168, 198, 255, 0.035); border-color: rgba(168, 198, 255, 0.14); }
  .eco-item:hover .eco-name { color: var(--text); }
  .audio-orb:hover,
  .mistey-orb:hover { transform: none; }
  .hud-card:hover { box-shadow: none; }
  .panel:hover { --sheen: 0; }

  /* the pointer spotlight cannot track a finger and latches lit after a tap */
  .card-hover::after,
  .svc-card::after,
  .stat-card::after,
  [data-tilt]::after { display: none; }

  /* keep press feedback meaningful when hover fill is gone */
  .eco-item:active { transform: scale(0.985); }
}

/* --------------------------------------------------------------------------
   2. MOBILE MENU — the overlay used to bury its own close button.
   .nav-overlay is z-index 900 and .site-nav was 800, so once the menu opened
   the hamburger (which morphs into the X) rendered BEHIND the sheet and the
   only way out was the back button. Lift the bar above the menu — but still
   below .modal-hud (950), the preloader (1000) and the cursor (1010).
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .site-nav { z-index: calc(var(--z-menu) + 1); }

  /* cosmetic: while the sheet is open the bar itself should be invisible
     chrome so only the brand + X float over it (progressive, :has-gated) */
  html:has(.nav-overlay.is-open) .site-nav {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }
  html:has(.nav-overlay.is-open) .site-nav.is-hidden { transform: none; }

  .nav-overlay {
    padding-top: calc(var(--nav-height) + 1rem);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;             /* short landscape screens can still reach it */
    overscroll-behavior: contain;
  }
  .nav-overlay__links { gap: 0.2rem; }
  .nav-overlay__links a { min-height: 48px; align-items: center; }
  .nav-overlay__meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   3. TOP BAR at narrow widths — "ProvatSoft Ecosystem" measured 249px against
   a 252px budget at 360px, i.e. one glyph away from colliding with the
   hamburger. Give the brand a smaller face and the row a smaller gap.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-brand { min-height: 44px; }
}
@media (max-width: 420px) {
  .site-nav__inner { gap: 0.75rem; }
  .nav-brand { font-size: 1rem; gap: 0.55rem; }
  .nav-brand img,
  .nav-brand .brand-mark { width: 30px; height: 30px; }
}

/* --------------------------------------------------------------------------
   4. MODAL / MISTEY HEAD — "ESC / CLOSE" overflowed the panel by ~17px at
   390px because every flex item in .modal-hud__head keeps min-width:auto and
   the MISTEY id-block pins its telemetry label to a 200px nowrap line.
   Let the label wrap and let the head shrink.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .modal-hud { padding: 0.9rem; }
  .modal-hud__panel {
    max-height: calc(100vh - 2.2rem);
    max-height: calc(100svh - 2.2rem);
    padding: 1.8rem 1.15rem 1.5rem;
  }
  .modal-hud__head { gap: 0.5rem; margin-bottom: 1.2rem; }
  .modal-hud__head > div,
  .mistey-panel__id,
  .mistey-panel__id > div { min-width: 0; }
  .modal-hud__head h2 { font-size: 1.3rem; }
  .modal-hud__close {
    flex: 0 0 auto;
    padding: 0.5rem 0.55rem;
    font-size: 0.55rem;
    letter-spacing: 0.06em;
    min-height: 44px;
  }
  .mistey-panel__id .hud-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
    margin-bottom: 0.35rem;
  }
  /* stacked, full-width modal actions instead of a cramped right-aligned row */
  .modal-hud__footer { flex-direction: column-reverse; align-items: stretch; }
  .modal-hud__footer .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   5. MISTEY CHAT DOCK — chips were 29px tall, the composer font was 11.5px
   (anything under 16px makes iOS Safari zoom the whole page on focus).
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .mistey-chip {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0.5rem 0.8rem;
    font-size: 0.6rem;
  }
  .mistey-chips { gap: 0.4rem; }
  .m-actions .btn { min-height: 44px; }
  .m-msg { max-width: 92%; font-size: 0.95rem; }

  /* 16px === no auto-zoom on focus in iOS Safari */
  .mistey-input {
    font-size: 16px;
    letter-spacing: 0.01em;
    padding: 0.7rem 0.75rem;
  }
  .palette__input { font-size: 16px; letter-spacing: 0.06em; }
  .field input,
  .field select,
  .field textarea { font-size: 16px; }

  .mistey-inputrow { gap: 0.45rem; }
  .mistey-send { padding-inline: 0.9rem; }
}

/* --------------------------------------------------------------------------
   6. FLOATING ORBS — the soundtrack orb sat flush against the WhatsApp beacon
   (0.4px apart) and was a 42px target. Restack with a real gap, honour the
   iOS home-indicator inset, and give the footer clearance so its last row is
   not permanently parked under the beacons.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .whatsapp-button {
    width: 52px;
    height: 52px;
    right: calc(1.2rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
  }
  .audio-orb {
    width: 44px;
    height: 44px;
    right: calc(1.4rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.2rem + 52px + 12px + env(safe-area-inset-bottom, 0px));
  }
  .mistey-orb {
    left: calc(1.2rem + env(safe-area-inset-left, 0px));
    bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
  }
  .mistey-bubble {
    left: calc(1.2rem + env(safe-area-inset-left, 0px));
    bottom: calc(1.2rem + 50px + 14px + env(safe-area-inset-bottom, 0px));
  }
  .site-footer { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------------------------
   7. FOOTER — link rows were 17px tall, the ecosystem band broke 3+1 at
   tablet and orphaned the external-link glyph onto its own line at 360px,
   and the bottom telemetry strip rendered at 9.9px.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .eco-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-col ul { gap: 0.15rem; }
  .footer-col ul li { display: flex; align-items: center; }
  .footer-col ul li i { flex: 0 0 auto; }
  .footer-col ul li > a,
  .footer-col ul li > span {
    display: flex;
    align-items: center;
    min-height: 44px;
    min-width: 0;
  }
  .footer-social a { width: 44px; height: 44px; }
  .audio-toggle { min-height: 44px; padding: 0.5rem 0.9rem; }
  .flash .flash-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
  .mistey-bubble__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
  .pager a, .pager span { min-width: 44px; height: 44px; }
  /* bigger hit box for the quiet arrow-links without shifting the layout */
  .link-line { padding-block: 0.65rem; margin-block: -0.65rem; }
}

@media (max-width: 600px) {
  .footer-giant { font-size: clamp(2.4rem, 12vw, 12rem); }
  .eco-item { padding: 0.8rem 0.75rem; gap: 0.25rem; }
  .eco-name { font-size: 0.82rem; }
  .eco-name i { margin-left: 0.28rem; }
  .eco-desc { font-size: 0.6rem; letter-spacing: 0.04em; }
  .footer-bottom {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    gap: 1rem;
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   8. OVERFLOW GUARD — .lens-flare is the one piece of global chrome that
   deliberately runs past the viewport (left:-10% / width:120%). body has
   overflow-x:hidden, but iOS Safari does not always honour that on <body>
   alone, so pull the flare inside the gutter on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .lens-flare { left: 0; width: 100%; }
}

/* ---- footer: ECOSYSTEM column (live product subdomains) ------------------
   Rendered as a plain link list so it aligns with NAVIGATION/PROTOCOLS.
   The grid gains a 5th track on wide screens; the existing 2-col/1-col
   breakpoints below already handle small screens. ---- */
@media (min-width: 993px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1.1fr 1.3fr 1fr; }
}
.footer-eco-list a { display: inline-flex; align-items: center; gap: 0.4rem; }
.footer-eco-list a i { font-size: 0.6em; opacity: 0.5; }
.footer-eco-list a:hover i { opacity: 0.9; }

/* ==========================================================================
   A11Y / MOBILE FOLLOW-UPS (2026-07-26)
   ========================================================================== */

/* Skip link: `.sr-only` clipped it to 1x1 permanently, so keyboard users could
   focus it but never see it. Un-clip it on focus — the one control that must
   break the visually-hidden rule. */
a.sr-only:focus,
a.sr-only:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.7rem 1.1rem;
  overflow: visible;
  clip: auto;
  clip-path: none;
  z-index: 10001;
  background: var(--bg-1, #0a0a14);
  color: var(--signal, #6FF7E3);
  border: 1px solid var(--signal, #6FF7E3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(111, 247, 227, 0.18);
}

/* CMS-authored tables arrive through `|safe`, so no wrapper markup can be
   added around them — let the table itself scroll instead of forcing the page
   sideways on a phone. */
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Contrast: these were alpha-faded copies of --muted (#8A93B8, itself 6.81:1
   on --void). At .45-.7 alpha they measured 2.13-3.74:1 — below the 4.5:1 AA
   floor for body text. Flat --muted restores legibility without changing the
   palette. */
.palette__input::placeholder,
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: 1; }
.palette__hint,
.page-hero .hero-coords,
.preloader__log { color: var(--muted); }

/* The guide bubble's dismiss button inherited pointer-events:none mid-
   transition, so taps fell through to the card behind it. */
.mistey-bubble__x { pointer-events: auto; }

/* --------------------------------------------------------------------------
   Floating beacons on small screens.
   The WhatsApp / soundtrack / MISTEY buttons are position:fixed, so on a phone
   they ride over in-flow content the whole way down the page — measured
   covering "EXPLORE →" on /services, a price row on /pricing and the coach bio
   on /about. Tighten the cluster to the corner (still >=44px tap targets) and
   fade it out of the way while the visitor is actively scrolling; it returns
   the moment scrolling stops, so nothing becomes unreachable.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .whatsapp-button { width: 46px; height: 46px; bottom: 1rem; right: 1rem; font-size: 1.15rem; }
  .audio-orb { width: 44px; height: 44px; right: 1rem; bottom: 4.2rem; }
  #misteyDock { bottom: 1rem; left: 1rem; }

  .whatsapp-button, .audio-orb, #misteyDock, .mistey-bubble {
    transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
  }
  /* set by interactions.js only while a scroll gesture is in flight */
  html.is-scrolling .whatsapp-button,
  html.is-scrolling .audio-orb,
  html.is-scrolling #misteyDock,
  html.is-scrolling .mistey-bubble {
    opacity: 0.22;
    transform: scale(0.92);
  }
}
/* never dim controls for someone who asked for less motion */
html.no-motion .whatsapp-button,
html.no-motion .audio-orb,
html.no-motion #misteyDock { opacity: 1 !important; transform: none !important; }

/* Footer column titles moved h5 -> h2 (h2->h5 skipped a level on every page).
   Same visual treatment as the old tag selector. */
.footer-col .footer-col__title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.2rem;
}
/* /contact channel titles moved h4 -> h3; inherit the .comm-card sizing */
.comm-card .comm-card__title { font-size: 0.92rem; margin-bottom: 0.25rem; }