/* ═══════════════════════════════════════════════════════════════
   VIPRA SOFTWARE — POLISH LAYER  v2
   Additive over style.css v2. Restrained by design: one quiet
   motion language, focus states, and the run-console treatment.
   Safe to load on any page; selectors guard on existing classes.
   ═══════════════════════════════════════════════════════════════ */

/* ── 0 · Foundations ──────────────────────────────────────────── */
::selection { background: var(--teal); color: #fff; }
html { scrollbar-color: var(--edge2) var(--bg); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
#nav :focus-visible, footer :focus-visible, .mobile-menu :focus-visible { outline-color: var(--flow-bright, #2FC9B6); }

/* ── 1 · Scroll progress — data flowing through the pipe ──────── */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--teal);
  z-index: 10000;
  transition: width 80ms linear;
}

/* ── 2 · Run console (hero terminal) ──────────────────────────── */
.vx-terminal {
  margin-top: 22px; border-radius: 5px; overflow: hidden;
  border: 1px solid var(--ink-line, rgba(233,238,241,0.12));
  background: var(--ink-3, #1B2936);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.6);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 12px; line-height: 1.85;
  max-width: 420px;
}
.vx-terminal-bar {
  display: flex; align-items: center; gap: 8px; padding: 9px 13px;
  border-bottom: 1px solid var(--ink-line, rgba(233,238,241,0.12));
}
.vx-terminal-bar i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--ink-line, rgba(233,238,241,0.12)); }
.vx-terminal-bar i:nth-child(1) { background: var(--red); }
.vx-terminal-bar span { margin-left: auto; color: var(--ink-sub, #93A4AF); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.vx-terminal-body { padding: 14px 16px 16px; color: var(--ink-sub, #93A4AF); min-height: 132px; }
.vx-terminal-body .ln { display: block; white-space: nowrap; overflow: hidden; }
.vx-terminal-body .p  { color: var(--flow-bright, #2FC9B6); }
.vx-terminal-body .c  { color: var(--ink-sub, #93A4AF); }
.vx-terminal-body .ok { color: var(--flow-bright, #2FC9B6); }
.vx-terminal-body .hl { color: #fff; }
.vx-cursor { display: inline-block; width: 7px; height: 13px; background: var(--flow-bright, #2FC9B6); vertical-align: -2px; animation: vx-blink 1s steps(1) infinite; }
@keyframes vx-blink { 50% { opacity: 0; } }

/* ── 3 · Tech ticker strip ────────────────────────────────────── */
.vx-marquee {
  border-top: 1px solid var(--ink-line, rgba(233,238,241,0.12));
  border-bottom: 1px solid var(--edge);
  background: var(--ink-2, #0D161F); overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.vx-marquee-track {
  display: flex; gap: 44px; width: max-content; padding: 13px 0;
  animation: vx-scroll 46s linear infinite;
}
.vx-marquee:hover .vx-marquee-track { animation-play-state: paused; }
.vx-marquee-track span {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-sub, #93A4AF); white-space: nowrap;
  display: flex; align-items: center; gap: 44px;
}
.vx-marquee-track span::after { content: '·'; color: var(--flow-bright, #2FC9B6); }
@keyframes vx-scroll { to { transform: translateX(-50%); } }

/* ── 4 · Cards — one quiet lift, hairline emphasis ────────────── */
.about-cell, .case-card, .contact-form-box {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

/* ── 5 · Buttons & arrows — restrained choreography ───────────── */
.service-row .service-arrow { transition: transform 0.2s ease, color 0.2s ease; }
.service-num { transition: color 0.2s ease; }

/* ── 6 · Stats — tabular numerals ─────────────────────────────── */
.hero-stat-num, .big, .stat-num { font-variant-numeric: tabular-nums; }

/* ── 7 · Reveal (no blur — clean rise only) ───────────────────── */
.reveal.visible { opacity: 1; transform: none; }

/* ── 8 · Accessibility & motion safety ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vx-marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .vx-cursor { animation: none; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .about-cell, .case-card, .contact-form-box { transition: none; }
}
@media (max-width: 760px) {
  .vx-terminal { max-width: 100%; }
  .vx-marquee-track { gap: 32px; }
  .vx-marquee-track span { gap: 32px; }
}