/* ==========================================================================
   NEXVANTA — Deep Field design system
   components.css : reusable UI parts
   ========================================================================== */

/* ============================================================ 1. SURFACES */

/* Gradient hairline border via mask-composite — crisp at any radius. */
.edge {
  position: relative;
  isolation: isolate;
}

.edge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--edge-grad, var(--grad-edge));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--edge-opacity, .55);
  transition: opacity var(--t-mid) var(--ease-out);
  pointer-events: none;
  z-index: 1;
}

.glass {
  position: relative;
  background:
    linear-gradient(168deg, rgba(20, 32, 54, .74), rgba(7, 12, 22, .82) 62%),
    rgba(8, 13, 24, .6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  box-shadow: var(--shadow-md);
}

.glass--flat {
  background: linear-gradient(168deg, rgba(16, 26, 45, .5), rgba(6, 11, 20, .62));
  box-shadow: none;
}

/* Top sheen line found on most panels */
.sheen::after {
  content: "";
  position: absolute;
  inset-inline: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190, 225, 255, .42), transparent);
  pointer-events: none;
}

/* ============================================== 2. CARD + SPOTLIGHT HOVER */
.card {
  position: relative;
  display: grid;
  gap: .85rem;
  padding: clamp(1.25rem, 2.4vw, 1.85rem);
  border-radius: var(--r-lg);
  background:
    linear-gradient(168deg, rgba(19, 30, 51, .66), rgba(7, 12, 22, .8) 68%);
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--t-mid) var(--ease-out),
    border-color var(--t-mid) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out),
    background-color var(--t-mid) var(--ease-out);
}

/* Cursor-following spotlight; --mx/--my written by js/ui.js */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 0%),
    rgba(34, 211, 238, .16),
    rgba(59, 130, 246, .07) 42%,
    transparent 68%
  );
}

.card:where(:hover, :focus-within) {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .9), 0 0 0 1px rgba(140, 190, 255, .1);
}

.card:where(:hover, :focus-within)::before { opacity: 1; }

.card__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, rgba(34, 211, 238, .18), rgba(59, 130, 246, .08));
  border: 1px solid rgba(140, 200, 255, .2);
  color: var(--cyan-hi);
  flex: none;
}

.card__icon svg { width: 20px; height: 20px; }

.card__icon--violet { background: linear-gradient(150deg, rgba(168,85,247,.2), rgba(224,64,251,.08)); border-color: rgba(200,150,255,.24); color: #d8b4fe; }
.card__icon--rose   { background: linear-gradient(150deg, rgba(251,59,108,.2), rgba(251,59,108,.06)); border-color: rgba(255,140,170,.24); color: #ffa3ba; }
.card__icon--amber  { background: linear-gradient(150deg, rgba(245,165,36,.2), rgba(245,165,36,.06)); border-color: rgba(255,205,130,.24); color: #ffd08a; }
.card__icon--emerald{ background: linear-gradient(150deg, rgba(16,224,160,.2), rgba(16,224,160,.06)); border-color: rgba(120,255,215,.22); color: #8ff0cd; }

.card__title {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.28;
}

.card__body {
  font-size: .925rem;
  line-height: 1.62;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* Corner tick marks — subtle "instrument panel" detail */
.ticked::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 10px;
  pointer-events: none;
  background:
    linear-gradient(var(--cyan), var(--cyan)) left top / 12px 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left top / 1px 12px no-repeat,
    linear-gradient(var(--magenta), var(--magenta)) right bottom / 12px 1px no-repeat,
    linear-gradient(var(--magenta), var(--magenta)) right bottom / 1px 12px no-repeat;
  opacity: .3;
  transition: opacity var(--t-mid) var(--ease-out);
}
.ticked:hover::after { opacity: .75; }

/* ============================================================= 3. BUTTONS */
.btn {
  --btn-bg: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 0.78rem 1.35rem;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.905rem;
  font-weight: 550;
  letter-spacing: -0.008em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out),
    background-color var(--t-mid) var(--ease-out),
    border-color var(--t-mid) var(--ease-out),
    color var(--t-mid) var(--ease-out);
}

.btn svg { width: 16px; height: 16px; flex: none; }
.btn:active { transform: translateY(1px) scale(.99); }

/* Primary — brand gradient with an inner light edge */
.btn--primary {
  color: #030711;
  font-weight: 650;
  background: var(--grad-brand);
  border: 0;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .16) inset,
    0 12px 34px -12px rgba(34, 211, 238, .6),
    0 4px 14px -6px rgba(168, 85, 247, .5);
}

.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: linear-gradient(100deg, #67e8f9, #60a5fa 44%, #c084fc 78%, #f0abfc);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
}

.btn--primary:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .28) inset,
    0 18px 46px -12px rgba(34, 211, 238, .78),
    0 6px 20px -6px rgba(224, 64, 251, .6);
}
.btn--primary:hover::after { opacity: 1; }

/* Ghost — glass with gradient hairline */
.btn--ghost {
  color: var(--ink);
  background: rgba(15, 24, 42, .58);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn--ghost:hover {
  background: rgba(24, 38, 64, .78);
  border-color: rgba(160, 210, 255, .42);
  box-shadow: 0 10px 30px -14px rgba(34, 211, 238, .45);
}

/* Quiet — text + arrow */
.btn--quiet {
  padding: .4rem 0;
  color: var(--cyan-hi);
  border-radius: 4px;
  font-weight: 550;
}

.btn--quiet svg { transition: translate var(--t-mid) var(--ease-out); }
.btn--quiet:hover { color: #a5f3fc; }
.btn--quiet:hover svg { translate: 4px 0; }

.btn--lg { padding: 0.95rem 1.7rem; font-size: 0.97rem; }
.btn--sm { padding: 0.58rem 1rem; font-size: 0.84rem; }
.btn--block { width: 100%; }

/* ================================================== 4. BADGES + PILLS */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .34rem .72rem .34rem .6rem;
  border-radius: var(--r-pill);
  background: rgba(14, 24, 42, .7);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

.badge__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 8px 1px rgba(16, 224, 160, .8);
  flex: none;
}

.badge--cyan    { color: #a5f3fc; border-color: rgba(34,211,238,.34);  background: rgba(34,211,238,.09); }
.badge--violet  { color: #e9d5ff; border-color: rgba(168,85,247,.34);  background: rgba(168,85,247,.09); }
.badge--rose    { color: #ffc2d1; border-color: rgba(251,59,108,.34);  background: rgba(251,59,108,.09); }
.badge--amber   { color: #ffe0b2; border-color: rgba(245,165,36,.34);  background: rgba(245,165,36,.09); }
.badge--emerald { color: #a7f3d0; border-color: rgba(16,224,160,.32);  background: rgba(16,224,160,.09); }

.badge--rose .badge__dot    { background: var(--rose);    box-shadow: 0 0 8px 1px rgba(251,59,108,.85); }
.badge--amber .badge__dot   { background: var(--amber);   box-shadow: 0 0 8px 1px rgba(245,165,36,.85); }
.badge--cyan .badge__dot    { background: var(--cyan);    box-shadow: 0 0 8px 1px rgba(34,211,238,.85); }
.badge--violet .badge__dot  { background: var(--violet);  box-shadow: 0 0 8px 1px rgba(168,85,247,.85); }

/* live indicator */
.badge--live .badge__dot { animation: live-blink 1.6s var(--ease-in-out) infinite; }
@keyframes live-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

/* Small key/value chip used in spec lists */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .46rem .8rem;
  border-radius: var(--r-sm);
  background: rgba(12, 20, 36, .72);
  border: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: .745rem;
  letter-spacing: .02em;
  color: var(--ink-2);
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.chip:hover {
  border-color: rgba(140, 200, 255, .3);
  color: var(--ink);
  background: rgba(18, 30, 52, .85);
}

.chip__dot {
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--chip-color, var(--cyan));
  box-shadow: 0 0 8px 0 var(--chip-color, var(--cyan));
  flex: none;
}

/* ======================================================= 5. STAT BLOCKS */
.stat {
  display: grid;
  gap: .3rem;
  align-content: start;
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.6rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: .1em;
}

.stat__value .unit {
  font-size: .48em;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: var(--cyan-hi);
}

.stat__value--grad {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.stat__label {
  font-family: var(--font-mono);
  font-size: .685rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.stat__note { font-size: .84rem; color: var(--ink-3); line-height: 1.5; }

/* Horizontal stat rail with dividers */
.statrail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.statrail > * {
  padding: clamp(1rem, 2vw, 1.5rem);
  background: linear-gradient(168deg, rgba(16, 26, 45, .72), rgba(6, 11, 20, .82));
}

/* ==================================================== 6. DEVICE / SCREEN */
/* The "console" frame that houses every product capture. */
.screen {
  position: relative;
  border-radius: clamp(12px, 1.4vw, 18px);
  background: linear-gradient(180deg, #0b1425, #060a13);
  border: 1px solid rgba(140, 190, 255, .16);
  box-shadow: var(--shadow-screen);
  overflow: hidden;
  isolation: isolate;
}

.screen__bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem .85rem;
  background: linear-gradient(180deg, rgba(19, 30, 52, .95), rgba(11, 18, 32, .95));
  border-bottom: 1px solid rgba(140, 190, 255, .12);
}

.screen__lights { display: flex; gap: 6px; flex: none; }
.screen__lights i {
  width: 9px; height: 9px;
  border-radius: 50%;
  display: block;
}
.screen__lights i:nth-child(1) { background: #fb3b6c; box-shadow: 0 0 7px rgba(251,59,108,.7); }
.screen__lights i:nth-child(2) { background: #f5a524; box-shadow: 0 0 7px rgba(245,165,36,.7); }
.screen__lights i:nth-child(3) { background: #10e0a0; box-shadow: 0 0 7px rgba(16,224,160,.7); }

.screen__url {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(4, 8, 16, .8);
  border: 1px solid rgba(140, 190, 255, .12);
  font-family: var(--font-mono);
  font-size: .705rem;
  letter-spacing: .01em;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen__url svg { width: 11px; height: 11px; color: var(--emerald); flex: none; }
.screen__url b { color: var(--ink-2); font-weight: 500; }

.screen__meta {
  flex: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.screen__stage {
  position: relative;
  aspect-ratio: var(--demo-ratio);
  background: #05080f;
  overflow: hidden;
}

.screen__stage > video,
.screen__stage > img,
.screen__stage > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Glass reflection across the capture */
.screen__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(198deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, 0) 26%),
    radial-gradient(120% 60% at 50% 108%, rgba(4, 8, 16, .5), transparent 62%);
}

/* Scanline sweep loop — reads as "live telemetry" */
.screen--scan .screen__stage::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 34%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(34, 211, 238, .07) 55%, rgba(34, 211, 238, .16) 82%, transparent);
  animation: scan-sweep 7.5s linear infinite;
  opacity: .8;
}

@keyframes scan-sweep {
  0%   { transform: translateY(-110%); }
  100% { transform: translateY(340%); }
}

/* Outer bloom behind the hero screen */
.screen-bloom {
  position: relative;
  isolation: isolate;
}

.screen-bloom::before {
  content: "";
  position: absolute;
  inset: -14% -8% -22%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 20% 18%, rgba(34, 211, 238, .3), transparent 66%),
    radial-gradient(56% 46% at 82% 26%, rgba(168, 85, 247, .28), transparent 66%),
    radial-gradient(70% 50% at 50% 92%, rgba(59, 130, 246, .22), transparent 68%);
  opacity: .85;
  /* Guarantees the bloom dies out before the box edge — without this the
     stacked gradients leave a visible horizontal seam across the page. */
  -webkit-mask-image: radial-gradient(78% 78% at 50% 50%, #000 26%, transparent 80%);
  mask-image: radial-gradient(78% 78% at 50% 50%, #000 26%, transparent 80%);
}

/* Play / expand affordance */
.screen__expand {
  position: absolute;
  z-index: 4;
  right: .75rem;
  bottom: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .48rem .8rem;
  border-radius: var(--r-pill);
  background: rgba(6, 11, 20, .82);
  border: 1px solid rgba(140, 200, 255, .26);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: 0;
  translate: 0 6px;
  transition: opacity var(--t-mid) var(--ease-out), translate var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out);
}

.screen__expand svg { width: 13px; height: 13px; }

.screen:hover .screen__expand,
.screen__expand:focus-visible { opacity: 1; translate: 0 0; }
.screen__expand:hover { border-color: var(--cyan); }

@media (hover: none) {
  .screen__expand { opacity: 1; translate: 0 0; }
}

/* Floating annotation chips pinned over a capture */
.pin {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .48rem .78rem;
  border-radius: var(--r-pill);
  background: rgba(5, 10, 19, .82);
  border: 1px solid rgba(140, 200, 255, .24);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .95);
  font-family: var(--font-mono);
  font-size: .665rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  animation: float-pin 6s var(--ease-in-out) infinite;
}

.pin i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pin-color, var(--cyan));
  box-shadow: 0 0 10px 1px var(--pin-color, var(--cyan));
  flex: none;
}

.pin b { color: var(--pin-color, var(--cyan-hi)); font-weight: 600; letter-spacing: .04em; }

.pin--2 { animation-delay: -2s; }
.pin--3 { animation-delay: -4s; }

@keyframes float-pin {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@media (max-width: 860px) {
  .pin { display: none; }
}

/* ========================================================== 7. MARQUEE */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  gap: var(--marquee-gap, .7rem);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.marquee__track {
  display: flex;
  gap: var(--marquee-gap, .7rem);
  flex: none;
  min-width: max-content;
  animation: marquee-run var(--marquee-dur, 48s) linear infinite;
  will-change: transform;
}

.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-100% - var(--marquee-gap, .7rem)), 0, 0); }
}

/* ============================================================= 8. TABS */
.tabs {
  display: flex;
  gap: .4rem;
  padding: .4rem;
  border-radius: var(--r-pill);
  background: rgba(8, 14, 26, .72);
  border: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: max-content;
  min-width: 0;   /* let it shrink inside a flex row instead of overflowing */
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .58rem 1.05rem;
  border-radius: var(--r-pill);
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.tab svg { width: 15px; height: 15px; }
.tab:hover { color: var(--ink); }

.tab[aria-selected="true"] {
  color: #041018;
  font-weight: 600;
  background: var(--grad-brand);
  box-shadow: 0 8px 22px -10px rgba(34, 211, 238, .7), 0 0 0 1px rgba(255,255,255,.16) inset;
}

.tab__num {
  font-family: var(--font-mono);
  font-size: .66rem;
  opacity: .7;
}

.tabpanel[hidden] { display: none; }

.tabpanel {
  animation: panel-in 520ms var(--ease-out) both;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(12px); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Vertical rail tabs (module explorer) */
.rail {
  display: grid;
  gap: 2px;
  align-content: start;
}

.rail__item {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: .8rem .9rem;
  border-radius: var(--r-md);
  text-align: left;
  color: var(--ink-3);
  border: 1px solid transparent;
  transition:
    color var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out);
}

.rail__item:hover { color: var(--ink); background: rgba(18, 30, 52, .6); }

.rail__item[aria-selected="true"] {
  color: var(--ink);
  background: linear-gradient(100deg, rgba(34, 211, 238, .14), rgba(168, 85, 247, .07) 70%, transparent);
  border-color: rgba(140, 200, 255, .24);
}

.rail__item[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 14%;
  bottom: 14%;
  width: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  box-shadow: 0 0 12px 1px rgba(34, 211, 238, .8);
}

.rail__glyph {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: rgba(12, 22, 40, .9);
  border: 1px solid var(--line);
  color: currentColor;
}
.rail__glyph svg { width: 15px; height: 15px; }

.rail__item[aria-selected="true"] .rail__glyph {
  color: var(--cyan-hi);
  border-color: rgba(34, 211, 238, .4);
  background: rgba(34, 211, 238, .12);
}

.rail__label {
  display: grid;
  gap: .1rem;
  min-width: 0;
}
.rail__name { font-size: .925rem; font-weight: 550; letter-spacing: -0.012em; line-height: 1.25; }
.rail__hint {
  font-family: var(--font-mono);
  font-size: .645rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-4);
  /* Keep every rail row the same height */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail__tag {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--ink-4);
  padding: .16rem .42rem;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
}
.rail__item[aria-selected="true"] .rail__tag { color: var(--cyan-hi); border-color: rgba(34,211,238,.34); }

/* ============================================================ 9. TABLE */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(168deg, rgba(16, 26, 45, .6), rgba(6, 11, 20, .78));
  scrollbar-width: thin;
}

.matrix {
  min-width: 780px;
  font-size: .905rem;
}

/* On phones the table is the one place a sideways swipe is intentional. Keep the
   swipe inside the table (no scroll chaining to the page), snap to column starts,
   and tighten the cells so three of the four columns are reachable in one swipe. */
@media (max-width: 720px) {
  .table-wrap {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .matrix { min-width: 620px; font-size: .855rem; }
  .matrix th,
  .matrix td { padding: .8rem .85rem; scroll-snap-align: start; }
  .matrix thead th { font-size: .58rem; }
}

.matrix th,
.matrix td {
  padding: 1rem 1.15rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}

.matrix thead th {
  /* Deliberately not sticky: the table's only scroll container is horizontal,
     so a sticky header would latch onto the viewport and collide with the nav. */
  background: rgba(9, 15, 28, .96);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  border-bottom-color: var(--line-strong);
}

.matrix tbody th {
  font-family: var(--font-body);
  font-size: .93rem;
  font-weight: 550;
  color: var(--ink);
  letter-spacing: -0.012em;
  width: 26%;
}

.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td { border-bottom: 0; }

.matrix tbody tr { transition: background-color var(--t-fast) linear; }
.matrix tbody tr:hover { background: rgba(34, 211, 238, .04); }

/* Featured Nexvanta column */
.matrix .col-hero {
  background: linear-gradient(180deg, rgba(34, 211, 238, .08), rgba(168, 85, 247, .05));
  color: var(--ink);
  font-weight: 500;
  border-left: 1px solid rgba(34, 211, 238, .22);
  border-right: 1px solid rgba(168, 85, 247, .18);
}

.matrix thead .col-hero {
  color: var(--cyan-hi);
  background: rgba(11, 22, 38, .97);
  box-shadow: inset 0 -1px 0 rgba(34, 211, 238, .5);
}

/* Row-header column keeps its own tint so the first column reads as a spine. */
.matrix tbody th { background: rgba(8, 13, 24, .4); }

/* ====================================================== 10. METER BARS */
.meter {
  position: relative;
  height: 7px;
  border-radius: 99px;
  background: rgba(120, 160, 220, .1);
  overflow: hidden;
}

.meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 99px;
  background: var(--meter-grad, var(--grad-brand));
  box-shadow: 0 0 14px -2px rgba(34, 211, 238, .8);
  transition: width 1.3s var(--ease-out) var(--meter-delay, 0ms);
}

.is-in .meter__fill,
.meter.is-in .meter__fill { width: var(--meter, 0%); }

.meter--rose { --meter-grad: linear-gradient(90deg, #fb3b6c, #f5a524); }
.meter--dim  { --meter-grad: linear-gradient(90deg, #33415c, #46587a); }
.meter--dim .meter__fill { box-shadow: none; }

/* ======================================================= 11. TERMINAL */
.terminal {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(180deg, #070d18, #04070e);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.terminal__bar {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .85rem;
  background: rgba(15, 25, 43, .9);
  border-bottom: 1px solid var(--line-soft);
}

.terminal__title {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terminal__body {
  margin: 0;
  padding: 1.1rem 1.15rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .795rem;
  line-height: 1.85;
  color: #cbd7ec;
  tab-size: 2;
}

/* On phones a fixed-width <pre> forces a nested sideways scroller and clips the
   line ends. These blocks are illustrative, not copy-paste source, so wrapping is
   preferable to hiding half of every line. pre-wrap keeps the newlines and the
   indentation that make them read as terminal output. */
@media (max-width: 620px) {
  .terminal__body {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow-x: hidden;
    padding: .95rem 1rem;
    font-size: .715rem;
    line-height: 1.75;
  }
  .terminal__bar { padding: .55rem .7rem; gap: .55rem; }
  .terminal__title { font-size: .6rem; letter-spacing: .1em; }
}

.terminal__body .c-com { color: #4d6081; }
.terminal__body .c-cmd { color: var(--cyan-hi); }
.terminal__body .c-str { color: #8ff0cd; }
.terminal__body .c-flag{ color: #d8b4fe; }
.terminal__body .c-ok  { color: var(--emerald); }
.terminal__body .c-warn{ color: var(--amber); }

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .34rem .68rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(9, 16, 29, .8);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex: none;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.copy-btn svg { width: 12px; height: 12px; }
.copy-btn:hover { color: var(--cyan-hi); border-color: rgba(34, 211, 238, .5); }
.copy-btn.is-done { color: var(--emerald); border-color: rgba(16, 224, 160, .5); }

/* ======================================================= 12. LIGHTBOX */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(2, 5, 11, .9);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid) var(--ease-out), visibility var(--t-mid) linear;
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__inner {
  width: min(1320px, 100%);
  transform: scale(.96) translateY(14px);
  transition: transform 480ms var(--ease-out);
}
.lightbox.is-open .lightbox__inner { transform: none; }

.lightbox__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
  flex-wrap: wrap;
}

.lightbox__close {
  position: absolute;
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(10, 17, 32, .86);
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), rotate var(--t-mid) var(--ease-out);
}
.lightbox__close svg { width: 18px; height: 18px; }
.lightbox__close:hover { color: #fff; border-color: var(--cyan); rotate: 90deg; }

/* Shown in place of the player when a source cannot be fetched. */
.lb-fail {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .85rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
  background: linear-gradient(168deg, rgba(20, 32, 54, .9), rgba(6, 11, 20, .96));
}

.lb-fail__title {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, .96rem + .4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.024em;
  color: var(--ink);
}

.lb-fail__body {
  max-width: 44ch;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-3);
}

body.is-locked { overflow: hidden; }

/* ============================================================= 13. NAV */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  height: var(--nav-h);
  transition: background-color var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out), backdrop-filter var(--t-mid) linear;
  border-bottom: 1px solid transparent;
}

.nav.is-stuck {
  background: rgba(4, 8, 15, .78);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom-color: var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex: none;
  border-radius: 8px;
}

.brand img { height: 30px; width: auto; }

.brand__sep {
  width: 1px; height: 20px;
  background: var(--line-strong);
}

.brand__by {
  font-family: var(--font-mono);
  font-size: .615rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-4);
  line-height: 1.3;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin-inline: auto;
}

.nav__link {
  position: relative;
  padding: .5rem .8rem;
  border-radius: var(--r-pill);
  font-size: .875rem;
  font-weight: 450;
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.nav__link:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }

.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: 1px;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  box-shadow: 0 0 10px 1px rgba(34, 211, 238, .8);
}

.nav__actions { display: flex; align-items: center; gap: .55rem; flex: none; }

.nav__burger {
  display: none;
  width: 42px; height: 42px;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(12, 20, 36, .7);
  color: var(--ink);
}
.nav__burger svg { width: 18px; height: 18px; }

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .nav__actions .btn--ghost { display: none; }
  /* .nav__links carried the `margin-inline: auto` that pushed the actions to the
     right edge. With the links hidden the CTA and burger drifted into the middle
     of the bar, leaving dead space beside them. */
  .nav__actions { margin-left: auto; }
}

@media (max-width: 620px) {
  .nav__actions .btn { padding: .6rem 1rem; font-size: .84rem; }
  .brand__sep, .brand__by { display: none; }
}

/* The nav row is brand + CTA + burger with no shrinkable element between them, so
   on narrow handsets it ran past the right edge and clipped the burger — the one
   control that opens the menu. Tighten it in two steps instead. */
@media (max-width: 480px) {
  .nav__inner { gap: .55rem; }
  .brand img { height: 27px; }
  .nav__actions { gap: .4rem; }
  .nav__actions .btn { padding: .55rem .8rem; font-size: .8rem; }
  .nav__burger { width: 40px; height: 40px; }
}

@media (max-width: 370px) {
  .brand img { height: 24px; }
  .nav__actions .btn { padding: .5rem .68rem; font-size: .755rem; }
  .nav__burger { width: 38px; height: 38px; border-radius: 10px; }
  .nav__burger svg { width: 17px; height: 17px; }
}

/* Scroll progress */
.progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 101;
  height: 2px;
  background: var(--grad-brand);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  box-shadow: 0 0 12px 0 rgba(34, 211, 238, .7);
  pointer-events: none;
}

/* Mobile sheet */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 1rem var(--gutter) 2rem;
  background: rgba(4, 8, 15, .97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid) var(--ease-out), visibility var(--t-mid) linear;
}

.sheet.is-open { opacity: 1; visibility: visible; }

.sheet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--nav-h) - 1rem);
}

.sheet__nav {
  display: grid;
  align-content: center;
  gap: .2rem;
  margin-block: 1rem;
}

.sheet__link {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: .8rem .25rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5.5vw, 1.9rem);
  font-weight: 550;
  letter-spacing: -0.03em;
  color: var(--ink);
  opacity: 0;
  translate: 0 14px;
  transition: opacity 420ms var(--ease-out), translate 420ms var(--ease-out), color var(--t-fast) linear;
}

.sheet.is-open .sheet__link { opacity: 1; translate: 0 0; }
.sheet__link:hover { color: var(--cyan-hi); }

.sheet__link span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--ink-4);
}

.sheet__foot { display: grid; gap: .6rem; }

/* ========================================================== 14. FOOTER */
.footer {
  position: relative;
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-bottom: 2.25rem;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(6, 11, 20, .4), rgba(3, 6, 12, .9));
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

@media (max-width: 1000px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Brand blurb spans both tracks so the four link lists sit in a tidy 2x2.
     Collapsing everything to one column made the phone footer five screens long. */
  .footer__col:first-child { grid-column: 1 / -1; }
}
/* Only the narrowest handsets fall back to a single column — 360/375/390px, which
   is most of the phone market, keeps the 2x2. */
@media (max-width: 340px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
}

.footer__col h3 {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 1rem;
}

.footer__col ul { display: grid; gap: .58rem; }

.footer__col a {
  font-size: .885rem;
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease-out), translate var(--t-fast) var(--ease-out);
  display: inline-block;
}
.footer__col a:hover { color: var(--cyan-hi); translate: 3px 0; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: .8rem;
  color: var(--ink-4);
}

/* Giant wordmark watermark */
.footer__watermark {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 15vw, 13rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: .8;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  background: linear-gradient(180deg, rgba(140, 190, 255, .14), rgba(140, 190, 255, 0) 82%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  user-select: none;
  pointer-events: none;
  text-align: center;
}

/* ============================================================ 15. FORM */
.field { display: grid; gap: .45rem; }

.field label {
  font-family: var(--font-mono);
  font-size: .655rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem .95rem;
  border-radius: var(--r-md);
  background: rgba(5, 10, 19, .8);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: .92rem;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
  appearance: none;
}

.field textarea { resize: vertical; min-height: 92px; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-4); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(34, 211, 238, .6);
  background: rgba(8, 15, 27, .9);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .13);
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238394b1' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 15px;
  padding-right: 2.4rem;
  cursor: pointer;
}

.field select option { background: #0a1120; color: var(--ink); }

.form-note { font-size: .78rem; color: var(--ink-4); line-height: 1.55; }

.form-ok {
  display: none;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  background: rgba(16, 224, 160, .09);
  border: 1px solid rgba(16, 224, 160, .34);
  color: #a7f3d0;
  font-size: .9rem;
}
.form-ok.is-shown { display: flex; }
.form-ok svg { width: 18px; height: 18px; flex: none; }

/* ========================================================= 16. TO TOP */
.totop {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(8, 14, 26, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ink-2);
  opacity: 0;
  translate: 0 16px;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease-out), translate var(--t-mid) var(--ease-out), color var(--t-fast) linear, border-color var(--t-fast) linear;
}

.totop svg { width: 17px; height: 17px; }
.totop.is-shown { opacity: 1; translate: 0 0; pointer-events: auto; }
.totop:hover { color: var(--cyan-hi); border-color: rgba(34, 211, 238, .5); }

/* ==================================================== 17. LIST PATTERNS */
.checks { display: grid; gap: .7rem; }

.checks li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  font-size: .915rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.checks svg {
  width: 18px; height: 18px;
  margin-top: 2px;
  color: var(--cyan);
  flex: none;
}

.checks--violet svg { color: var(--violet); }
.checks--emerald svg { color: var(--emerald); }
.checks--dim svg { color: var(--ink-4); }

/* Numbered steps */
.steps { display: grid; gap: 1.1rem; counter-reset: s; }

.steps li {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 1rem;
  counter-increment: s;
}

.steps li::before {
  content: counter(s, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(12, 22, 40, .9);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--cyan-hi);
}

/* Definition rows */
.defrow {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 1rem 1.5rem;
  padding-block: .85rem;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.defrow:last-child { border-bottom: 0; }
.defrow dt {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.defrow dd { font-size: .915rem; color: var(--ink-2); line-height: 1.6; }

@media (max-width: 620px) {
  .defrow { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
}