/*
 * Virtual Runaway — studio theme.
 * Lifted verbatim from the dormant Next.js community platform at
 * /Users/brandon/Documents/projects/virtual_runaway/src/app/globals.css
 * so the static studio site + the future community platform share one
 * visual language when we migrate features over. Matrix-green palette,
 * dark greys, glassmorphism cards, JetBrains Mono display font,
 * Inter body font.
 */

:root {
  --font-inter: 'Inter', system-ui, -apple-system, sans-serif;
  --font-jetbrains-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Primary accents — same hex values the Tailwind config uses
     (tailwind.config.js matrix.{500,600,700} in the Next.js app). */
  --matrix-500: #00FF41;
  --matrix-600: #00D924;
  --matrix-700: #008F11;

  /* Background tiers — matching bg.{primary,secondary,tertiary}. */
  --bg-primary: #0F0F0F;
  --bg-secondary: #1A1A1A;
  --bg-tertiary: #2D2D2D;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
  font-family: var(--font-inter);
  color: #86efac;
  background: #000;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Hint to the rasterizer to round element rects to whole pixels so
     hairline borders don't sub-pixel collapse during scroll/compositing. */
  -webkit-tap-highlight-color: transparent;
}

.font-mono {
  font-family: var(--font-jetbrains-mono);
}

/* ── Matrix scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: rgba(0, 255, 0, 0.31); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 255, 0, 0.5); }

/* ── Matrix glow (used on hero title) ──────────────────────────────────
   Tasteful: soft single-pass shadow with a barely-perceptible 6s breath.
   Replaces the prior 3-stack pure-#00ff00 strobe that was over-blooming. */
@keyframes matrix-glow {
  0%, 100% { text-shadow: 0 0 14px rgba(0, 255, 65, 0.30), 0 0 28px rgba(0, 255, 65, 0.08); }
  50%      { text-shadow: 0 0 16px rgba(0, 255, 65, 0.36), 0 0 32px rgba(0, 255, 65, 0.11); }
}
.matrix-glow {
  animation: matrix-glow 6s ease-in-out infinite;
  /* Prevent the glow from being chopped at the bounding box on some browsers */
  padding: 0.05em 0;
}

/* ── Matrix rain grid background (under hero) ──────────────────────────
   Reworked 2026-05. The previous grid sat at opacity:0.09 × 0.05 line
   alpha ≈ 0.4% effective — invisible on screen. Now the alpha lives in
   the gradient and the layer runs at opacity:1; a radial mask feathers
   it into the section so it never hard-edges, a stationary glow pools
   behind the hero text, and a single soft band scans through every 16s.
   All motion is transform-based + GPU-composited, and the whole layer
   is frozen under prefers-reduced-motion. */
.matrix-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  opacity: 1;
  background: radial-gradient(ellipse 65% 60% at 50% 38%, rgba(0, 255, 65, 0.07), transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 92% 82% at 50% 42%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 92% 82% at 50% 42%, #000 30%, transparent 100%);
  transform: translateZ(0);
  will-change: transform;
  contain: strict;
}
/* The grid itself — drifts down exactly one 64px cell so the loop is
   perfectly seamless. The layer is one cell taller than its box to
   cover the gap the translate opens at the top. */
.matrix-rain::before {
  content: '';
  position: absolute;
  top: -64px;
  left: 0;
  right: 0;
  height: calc(100% + 64px);
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent 62px, rgba(0, 255, 65, 0.10) 62px, rgba(0, 255, 65, 0.10) 64px),
    repeating-linear-gradient(0deg,  transparent 0, transparent 62px, rgba(0, 255, 65, 0.10) 62px, rgba(0, 255, 65, 0.10) 64px);
  animation: matrix-fall 7s linear infinite;
  transform: translateZ(0);
  will-change: transform;
}
/* A single soft light band that sweeps down the hero every 16s. */
.matrix-rain::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -45%;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(0, 255, 65, 0.07) 44%, rgba(0, 255, 65, 0.14) 50%, rgba(0, 255, 65, 0.07) 56%, transparent);
  animation: matrix-scan 16s linear infinite;
  transform: translateZ(0);
  will-change: transform;
}
@keyframes matrix-fall {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 64px, 0); }
}
@keyframes matrix-scan {
  0%   { transform: translate3d(0, 0, 0);    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate3d(0, 340%, 0); opacity: 0; }
}

/* ── Glassmorphism cards ───────────────────────────────────────────────
   Borders use box-shadow:inset so the hairline is drawn by the compositor
   instead of the painter — eliminates the 1px sub-pixel "hop" that high-DPR
   displays produce when the card position rounds differently per frame. */
.glass {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(30, 30, 30, 0.8);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.22);
  border-radius: 12px;
  transform: translateZ(0);
}
.glass-light {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(45, 45, 45, 0.7);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.16);
  border-radius: 12px;
  transform: translateZ(0);
}
.glass-dark {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(15, 15, 15, 0.9);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.28);
  border-radius: 12px;
  transform: translateZ(0);
}

.glass-card-hoverable {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.glass-card-hoverable:hover {
  transform: translateY(-2px) translateZ(0);
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 65, 0.42),
    0 8px 24px rgba(0, 255, 65, 0.07);
}

/* ── Matrix-style buttons ──────────────────────────────────────────── */
.btn-matrix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  background-color: rgba(34, 197, 94, 0.18);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.9);
  border-radius: 0.5rem;
  font-family: var(--font-jetbrains-mono);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #86efac;
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  min-height: 44px;
}
.btn-matrix:hover {
  background-color: rgba(34, 197, 94, 0.28);
  box-shadow: inset 0 0 0 1px rgb(74, 222, 128);
  color: #dcfce7;
}
.btn-matrix-outline {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.45);
  color: #86efac;
}
.btn-matrix-outline:hover {
  background-color: rgba(34, 197, 94, 0.1);
  box-shadow: inset 0 0 0 1px rgb(74, 222, 128);
}

/* ── Layout primitives ────────────────────────────────────────────── */
.container {
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: 1.5rem;
}
.section {
  padding-block: 6rem;
  position: relative;
}
.section.hero { padding-block: 7rem 4rem; }

/* ── Section bands ────────────────────────────────────────────────────
   Alternating content sections get a barely-lighter band (#0a0a0a vs
   pure #000) with hair-thin matrix-green inset borders at top + bottom.
   The contrast is subtle but the eye reads each section as its own
   page-within-the-scroll instead of one long blob. */
.section--band {
  background: #0a0a0a;
  box-shadow:
    inset 0  1px 0 rgba(0, 255, 65, 0.08),
    inset 0 -1px 0 rgba(0, 255, 65, 0.08);
}

.hero-title {
  font-family: var(--font-jetbrains-mono);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 5rem);
  line-height: 1.05;
  color: #4ade80;
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
  word-break: keep-all;
  overflow-wrap: normal;
}
.hero-subtitle {
  font-family: var(--font-jetbrains-mono);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: rgba(134, 239, 172, 0.8);
  max-width: 46rem;
  margin: 0 auto 2rem;
}

.eyebrow {
  font-family: var(--font-jetbrains-mono);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--matrix-700);
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: var(--font-jetbrains-mono);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  color: #4ade80;
  margin-bottom: 2.25rem;
  text-align: center;
  line-height: 1.15;
}

/* ── Apps grid ────────────────────────────────────────────────────── */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.app-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}
.app-card .app-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,255,65,0.22), rgba(0,217,36,0.12));
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-jetbrains-mono);
  font-size: 1.75rem;
  font-weight: 700;
  color: #4ade80;
}
.app-card h3 {
  font-family: var(--font-jetbrains-mono);
  font-size: 1.25rem;
  color: #bbf7d0;
  letter-spacing: 0.02em;
}
.app-card p {
  font-size: 0.95rem;
  color: rgba(134, 239, 172, 0.72);
  line-height: 1.5;
  flex: 1;
}
.app-card .status-pill {
  align-self: flex-start;
  font-family: var(--font-jetbrains-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.35);
  color: var(--matrix-500);
}
.app-card .status-pill.coming-soon {
  box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.4);
  color: rgb(253, 224, 71);
}

/* ── Feature list ─────────────────────────────────────────────────── */
.feature-list {
  list-style: none;
  display: grid;
  gap: 1rem;
  padding: 0;
}
.feature-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  color: rgba(134, 239, 172, 0.9);
  line-height: 1.55;
}
.feature-list li::before {
  content: '>';
  color: var(--matrix-500);
  font-family: var(--font-jetbrains-mono);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Footer ───────────────────────────────────────────────────────── */
.site-footer {
  padding: 3rem 0 4rem;
  box-shadow: inset 0 1px 0 rgba(0, 255, 65, 0.12);
  margin-top: 4rem;
  text-align: center;
}
.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  justify-content: center;
  margin-bottom: 1rem;
  font-family: var(--font-jetbrains-mono);
  font-size: 0.85rem;
}
.site-footer a {
  color: rgba(134, 239, 172, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.site-footer a:hover { color: var(--matrix-500); }
.site-footer .copyright {
  font-family: var(--font-jetbrains-mono);
  font-size: 0.75rem;
  color: rgba(134, 239, 172, 0.4);
}

/* ── Top nav ──────────────────────────────────────────────────────── */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 1rem 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(0,0,0,0.65);
  box-shadow: inset 0 -1px 0 rgba(0, 255, 65, 0.12);
}
.top-nav .nav-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-nav .brand {
  font-family: var(--font-jetbrains-mono);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: var(--matrix-500);
  text-decoration: none;
}
.top-nav .nav-links {
  display: flex;
  gap: 1.5rem;
  font-family: var(--font-jetbrains-mono);
  font-size: 0.85rem;
}
.top-nav .nav-links a {
  color: rgba(134, 239, 172, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.top-nav .nav-links a:hover { color: var(--matrix-500); }

@media (max-width: 640px) {
  .top-nav .nav-links { gap: 1rem; font-size: 0.8rem; }
}

/* ── Responsive hero CTA row ──────────────────────────────────────── */
.hero-cta-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── App screenshots strip (for /apps/nigh page) ──────────────────── */
.screenshots-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.screenshots-strip img {
  width: 100%;
  border-radius: 12px;
  border: 0;
  box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.18);
  background: rgba(15,15,15,0.7);
}

/* ════════════════════════════════════════════════════════════════════
   Bootstrap 5 bridge + responsive overhaul
   Added 2026-05. Maps Bootstrap CSS vars to the matrix palette so
   BS components inherit the studio look, then tightens responsive
   behaviour down to ~360px.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Bootstrap theme bridge — recolours BS components in matrix green */
  --bs-body-bg: #000;
  --bs-body-color: #86efac;
  --bs-body-font-family: var(--font-inter);
  --bs-primary: #00FF41;
  --bs-primary-rgb: 0, 255, 65;
  --bs-secondary: #008F11;
  --bs-secondary-rgb: 0, 143, 17;
  --bs-link-color: #4ade80;
  --bs-link-color-rgb: 74, 222, 128;
  --bs-link-hover-color: #00FF41;
  --bs-border-color: rgba(0, 255, 0, 0.15);
  --bs-emphasis-color: #bbf7d0;
  --bs-heading-color: #4ade80;
  --bs-code-color: #00FF41;
  --bs-card-bg: rgba(30, 30, 30, 0.8);
  --bs-card-border-color: rgba(0, 255, 0, 0.3);
  --bs-navbar-color: rgba(134, 239, 172, 0.7);
  --bs-navbar-hover-color: var(--matrix-500);
  --bs-navbar-active-color: var(--matrix-500);
  --bs-navbar-brand-color: var(--matrix-500);
  --bs-navbar-brand-hover-color: var(--matrix-500);
  --bs-focus-ring-color: rgba(0, 255, 65, 0.35);
}

[data-bs-theme="dark"] { color-scheme: dark; }

/* ── Bootstrap component refinements ────────────────────────────── */
.bs-navbar.navbar {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(0, 255, 65, 0.12);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.bs-navbar .navbar-brand {
  font-family: var(--font-jetbrains-mono);
  font-weight: 700;
  letter-spacing: 0.2em;
  font-size: 1rem;
}
.bs-navbar .nav-link {
  font-family: var(--font-jetbrains-mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}
.bs-navbar .navbar-toggler {
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.35);
  padding: 0.4rem 0.6rem;
}
.bs-navbar .navbar-toggler:focus { box-shadow: 0 0 0 0.18rem rgba(0,255,65,0.25); }
.bs-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2300FF41' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.bs-card {
  background: rgba(30, 30, 30, 0.8);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.22);
  border-radius: 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: rgba(134, 239, 172, 0.85);
  transform: translateZ(0);
}
.bs-card .card-title {
  font-family: var(--font-jetbrains-mono);
  color: #bbf7d0;
  letter-spacing: 0.02em;
}
.bs-card .card-text { color: rgba(134, 239, 172, 0.72); line-height: 1.55; }

/* ── Service-card variants (about, services, projects) ─────────── */
.svc-card {
  background: rgba(45, 45, 45, 0.6);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.14);
  border-radius: 12px;
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateZ(0);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.svc-card:hover {
  transform: translateY(-2px) translateZ(0);
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 65, 0.4),
    0 8px 22px rgba(0, 255, 65, 0.06);
}
.svc-card .svc-tag {
  font-family: var(--font-jetbrains-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--matrix-500);
  margin-bottom: 0.4rem;
}
.svc-card h3 {
  font-family: var(--font-jetbrains-mono);
  font-size: 1.1rem;
  color: #bbf7d0;
  margin: 0;
}
.svc-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(134, 239, 172, 0.72);
  margin: 0;
  flex: 1;
}
.svc-card .svc-meta {
  font-family: var(--font-jetbrains-mono);
  font-size: 0.72rem;
  color: rgba(134, 239, 172, 0.55);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 0.6rem;
  box-shadow: inset 0 1px 0 rgba(0, 255, 65, 0.1);
  margin-top: auto;
}

/* ── Projects (apps + live tools) ───────────────────────────────── */
.proj-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.75rem;
  height: 100%;
  background: rgba(30, 30, 30, 0.78);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.22);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateZ(0);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.proj-card:hover {
  transform: translateY(-3px) translateZ(0);
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 65, 0.5),
    0 10px 28px rgba(0, 255, 65, 0.08);
  color: inherit;
  text-decoration: none;
}
.proj-card .proj-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.proj-card .proj-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0,255,65,0.24), rgba(0,217,36,0.1));
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-jetbrains-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: #4ade80;
}
.proj-card h3 {
  font-family: var(--font-jetbrains-mono);
  font-size: 1.2rem;
  color: #bbf7d0;
  margin: 0;
}
.proj-card .proj-status {
  font-family: var(--font-jetbrains-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--matrix-500);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.4);
  display: inline-block;
  align-self: flex-start;
}
.proj-card .proj-status.status-build {
  color: rgb(253, 224, 71);
  box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.42);
}
.proj-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(134, 239, 172, 0.78);
  margin: 0;
  flex: 1;
}
.proj-card .proj-cta {
  font-family: var(--font-jetbrains-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--matrix-500);
  margin-top: 0.25rem;
}
.proj-card .proj-stack {
  font-family: var(--font-jetbrains-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: rgba(134, 239, 172, 0.55);
  padding-top: 0.7rem;
  box-shadow: inset 0 1px 0 rgba(0, 255, 65, 0.1);
  margin-top: auto;
}

/* ── Contact panel ──────────────────────────────────────────────── */
.contact-panel {
  background: rgba(15, 15, 15, 0.85);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.26);
  border-radius: 14px;
  padding: 2rem;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateZ(0);
}
.contact-panel .contact-email {
  font-family: var(--font-jetbrains-mono);
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  color: var(--matrix-500);
  word-break: break-all;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.contact-panel .contact-email:hover { color: #dcfce7; }

/* ── Section spacing + utility ──────────────────────────────────── */
.section-narrow { max-width: 56rem; margin-inline: auto; }
.section-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.22) 30%, rgba(0, 255, 65, 0.22) 70%, transparent);
  margin: 0;
  /* Promote to compositor layer so the 1-physical-pixel line doesn't
     sub-pixel collapse / shimmer when the page or hero rain shifts. */
  transform: translateZ(0);
  will-change: transform;
}
.muted-mono {
  font-family: var(--font-jetbrains-mono);
  font-size: 0.78rem;
  color: rgba(134, 239, 172, 0.55);
  letter-spacing: 0.08em;
}

/* ── Tighter btn-matrix sizing for use inside cards/inline ─────── */
.btn-matrix.btn-sm {
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  min-height: 38px;
}

/* ── Responsive overhaul ───────────────────────────────────────── */
/* Default: mobile-first. Body type already uses Inter @ 16px. */

/* Tablet (>= 640px) */
@media (min-width: 640px) {
  .section { padding-block: 7rem; }
  .section.hero { padding-block: 8rem 5rem; }
}

/* Desktop (>= 992px) */
@media (min-width: 992px) {
  .section { padding-block: 8.5rem; }
  .section.hero { padding-block: 9rem 6rem; }
}

/* Ultrawide (>= 1400px) — keep container reasonable, expand padding only */
@media (min-width: 1400px) {
  .container, .bs-navbar > .container { max-width: 76rem; }
}

/* Mobile tightening (<= 575px) */
@media (max-width: 575.98px) {
  .section { padding-block: 4rem; }
  .section.hero { padding-block: 4rem 2.5rem; }
  .container { padding-inline: 1.15rem; }
  .hero-title { letter-spacing: 0; }
  .hero-subtitle { font-size: 1rem; line-height: 1.55; }
  .section-title { margin-bottom: 1.5rem; }
  .btn-matrix { width: 100%; padding: 0.95rem 1rem; }
  .hero-cta-row { gap: 0.75rem; }
  .proj-card { padding: 1.5rem; }
  .svc-card { padding: 1.25rem; }
  .contact-panel { padding: 1.5rem; }
  .glass { padding: 1.25rem !important; }
}

/* Very small (<= 360px) — last-resort */
@media (max-width: 360px) {
  .hero-title { font-size: 2rem; }
  /* Ease the grid back on the smallest screens — readable but quieter. */
  .matrix-rain { opacity: 0.7; }
  .top-nav .nav-links { gap: 0.65rem; font-size: 0.72rem; }
}

/* Prevent matrix-rain horizontal overflow on narrow viewports */
.matrix-rain { max-width: 100vw; }
header.hero, section.section { overflow-x: clip; }

/* Focus rings — keep accessible without losing the dark aesthetic */
a:focus-visible,
button:focus-visible,
.btn-matrix:focus-visible,
.bs-navbar .nav-link:focus-visible {
  outline: 2px solid var(--matrix-500);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .matrix-glow { animation: none; text-shadow: 0 0 8px #00ff00; }
  .matrix-rain::before { animation: none; }
  .glass-card-hoverable, .proj-card, .svc-card { transition: none; }
}

/* Print: drop the neon, keep legible */
@media print {
  body { background: #fff; color: #000; }
  .matrix-rain, .top-nav, .bs-navbar, .site-footer { display: none !important; }
  .glass, .glass-light, .bs-card, .proj-card, .svc-card { background: #fff; border: 1px solid #ccc; color: #000; }
  .hero-title, .section-title, h1, h2, h3 { color: #000 !important; text-shadow: none !important; }
}

/* Skip-to-content link for keyboard users */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: var(--matrix-500);
  padding: 0.75rem 1rem;
  font-family: var(--font-jetbrains-mono);
  font-size: 0.85rem;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--matrix-500);
  z-index: 100;
  text-decoration: none;
}
.skip-to-content:focus {
  left: 1rem;
  top: 1rem;
}

/* ── Legal document styling (privacy, terms) ───────────────────── */
.legal-doc {
  background: rgba(15, 15, 15, 0.85);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.14);
  border-radius: 12px;
  padding: 2rem;
  color: rgba(220, 252, 231, 0.86);
  font-size: 0.97rem;
  line-height: 1.7;
  transform: translateZ(0);
}
.legal-doc h1 {
  font-family: var(--font-jetbrains-mono);
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  color: #4ade80;
  letter-spacing: 0.04em;
  margin: 0 0 0.4rem;
}
.legal-doc h2 {
  font-family: var(--font-jetbrains-mono);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: #bbf7d0;
  letter-spacing: 0.02em;
  margin: 2rem 0 0.75rem;
  padding-top: 1.25rem;
  box-shadow: inset 0 1px 0 rgba(0, 255, 65, 0.08);
}
.legal-doc h2:first-of-type { box-shadow: none; padding-top: 0; }
.legal-doc .doc-date {
  font-family: var(--font-jetbrains-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(134, 239, 172, 0.55);
  margin: 0 0 1.5rem;
}
.legal-doc p { margin: 0 0 1rem; }
.legal-doc ul { margin: 0 0 1rem 1.25rem; padding: 0; }
.legal-doc li { margin-bottom: 0.5rem; }
.legal-doc strong { color: #bbf7d0; }
.legal-doc a { color: var(--matrix-500); text-decoration: underline; text-underline-offset: 3px; }
.legal-doc a:hover { color: #dcfce7; }
@media (max-width: 575.98px) {
  .legal-doc { padding: 1.25rem; font-size: 0.94rem; }
}

/* ════════════════════════════════════════════════════════════════════
   Micro-interactions & motion — added 2026-05
   Restrained, graceful motion that keeps the matrix theme: scroll
   reveals, a one-time hero entrance, animated nav underline + scroll-
   spy, button sheen, card pointer-glow, a terminal caret on eyebrows,
   and a gentle pulse on the "in development" status. Everything here
   is transform/opacity-based, GPU-friendly, and fully neutralised
   under prefers-reduced-motion at the end of this block.
   ══════════════════════════════════════════════════════════════════ */

/* ── Smooth in-page scrolling, offset for the sticky nav ──────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* ── Scroll reveal ───────────────────────────────────────────────────
   Default state is *visible* so the page reads fully with no JS. A tiny
   inline <head> script adds `js` to <html>; only then do reveal targets
   start hidden and animate in via IntersectionObserver (see studio.js).
   data-delay="N" on an element staggers its entrance by N milliseconds. */
.reveal { opacity: 1; transform: none; }
html.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ── One-time hero entrance ──────────────────────────────────────────
   animation-fill-mode:both holds the hidden 0% frame until the delay
   elapses, so there is no flash even though this runs without JS. */
.hero .eyebrow,
.hero .hero-title,
.hero .hero-subtitle,
.hero .hero-cta-row,
.hero .muted-mono {
  animation: hero-rise 0.82s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero .eyebrow       { animation-delay: 0.06s; }
.hero .hero-title    { animation-delay: 0.16s; }
.hero .hero-subtitle { animation-delay: 0.30s; }
.hero .hero-cta-row  { animation-delay: 0.44s; }
.hero .muted-mono    { animation-delay: 0.56s; }
/* The hero title also carries .matrix-glow: run the entrance first, then
   hand off to the breathing glow. This 0,2,0 selector intentionally
   overrides the base .matrix-glow single-animation declaration. */
.hero .matrix-glow {
  animation:
    hero-rise 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both,
    matrix-glow 6s ease-in-out 1.05s infinite;
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Section title — a quiet accent rule under each title ─────────── */
.section-title { position: relative; }
.section-title::after {
  content: '';
  display: block;
  width: 3rem;
  height: 2px;
  margin: 0.75rem auto 0;
  background: linear-gradient(90deg, transparent, var(--matrix-600), transparent);
}

/* ── Nav links: animated underline + scroll-spy active state ─────── */
.bs-navbar .nav-link,
.top-nav .nav-links a {
  position: relative;
}
.bs-navbar .nav-link::after,
.top-nav .nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--matrix-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.bs-navbar .nav-link:hover::after,
.bs-navbar .nav-link:focus-visible::after,
.bs-navbar .nav-link.active::after,
.top-nav .nav-links a:hover::after,
.top-nav .nav-links a:focus-visible::after,
.top-nav .nav-links a.active::after {
  transform: scaleX(1);
}

/* ── Navbar gains depth once the page is scrolled ────────────────── */
.bs-navbar,
.top-nav {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.bs-navbar.is-scrolled,
.top-nav.is-scrolled {
  background: rgba(0, 0, 0, 0.92);
  box-shadow:
    inset 0 -1px 0 rgba(0, 255, 65, 0.28),
    0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ── Button sheen + press feedback ───────────────────────────────── */
.btn-matrix {
  position: relative;
  overflow: hidden;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}
.btn-matrix::after {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(220, 252, 231, 0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.btn-matrix:hover { transform: translateY(-1px); }
.btn-matrix:hover::after { left: 150%; }
.btn-matrix:active { transform: translateY(1px); }

/* ── Card pointer-glow (service + project cards) ─────────────────────
   studio.js feeds --mx/--my as the pointer moves; the glow is purely a
   hover affordance and is skipped entirely under reduced-motion. */
.svc-card { position: relative; }
/* z-index:-1 keeps the glow above the card's own background but behind
   its text — both card types establish a stacking context via their
   base translateZ(0), so this resolves predictably. */
.svc-card::before,
.proj-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 255, 65, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.svc-card:hover::before,
.proj-card:hover::before { opacity: 1; }

/* ── Project status pill: a gentle "still building" pulse ────────── */
.proj-card .proj-status.status-build {
  animation: pill-pulse 3.2s ease-in-out infinite;
}
@keyframes pill-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.42); }
  50%      { box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.75), 0 0 12px rgba(234, 179, 8, 0.20); }
}

/* ── Footer + contact link underlines ────────────────────────────── */
.site-footer a { position: relative; }
.site-footer a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--matrix-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer a:hover::after,
.site-footer a:focus-visible::after { transform: scaleX(1); }
.contact-panel .contact-email {
  transition: color 0.2s ease, text-shadow 0.3s ease;
}
.contact-panel .contact-email:hover {
  text-shadow: 0 0 18px rgba(0, 255, 65, 0.45);
}

/* ── Reduced-motion: neutralise everything added in this block ────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero .eyebrow,
  .hero .hero-title,
  .hero .hero-subtitle,
  .hero .hero-cta-row,
  .hero .muted-mono,
  .hero .matrix-glow {
    animation: none;
  }
  .matrix-rain::before,
  .matrix-rain::after {
    animation: none;
  }
  .proj-card .proj-status.status-build {
    animation: none;
  }
  .btn-matrix,
  .btn-matrix::after {
    transition: none;
  }
  .btn-matrix:hover,
  .btn-matrix:active {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Bootstrap Icons — added 2026-05
   The feature / "under the hood" icons were emoji HTML entities, which
   rendered in full colour and broke the monochrome matrix palette.
   They are now Bootstrap Icons that inherit their tile's green colour
   and mono sizing. This styles the icon tiles and normalises the glyph
   inside them.
   ══════════════════════════════════════════════════════════════════ */

/* Normalise the glyph so it sits dead-centre in its flex tile. */
.app-icon .bi {
  display: block;
  line-height: 1;
}

/* nigh's feature cards use .svc-card > .app-icon, which previously had
   no tile styling of its own. Give it the same matrix treatment as the
   larger .app-card .app-icon, sized down for the denser service grid. */
.svc-card .app-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 255, 65, 0.22), rgba(0, 217, 36, 0.12));
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4ade80;
  font-size: 1.35rem;
}

/* ════════════════════════════════════════════════════════════════════
   Logo, link defaults, project-card link refactor — added 2026-05
   The navbar brand is now the studio mark image (VirtualRunaway.PNG)
   instead of the "VR://" text. Generic <a> tags fall back to matrix
   green so nothing renders as user-agent blue. Project cards no longer
   wrap their content in a single <a> — the title and CTA are the only
   clickable elements, descriptions and stack lines are plain text.
   ══════════════════════════════════════════════════════════════════ */

/* ── Navbar brand: the studio mark ─────────────────────────────────── */
.vr-brand {
  display: inline-flex;
  align-items: center;
  padding: 0;
  line-height: 0;
}
.vr-logo {
  height: 32px;
  width: 32px;
  display: block;
  filter: drop-shadow(0 0 6px rgba(0, 255, 65, 0.18));
  transition: filter 0.25s ease, transform 0.25s ease;
}
.vr-brand:hover .vr-logo,
.vr-brand:focus-visible .vr-logo {
  filter: drop-shadow(0 0 12px rgba(0, 255, 65, 0.4));
  transform: scale(1.04);
}
@media (max-width: 575.98px) {
  .vr-logo { height: 28px; width: 28px; }
}

/* ── Link defaults: never render as user-agent blue ──────────────────
   Any <a> without a more specific colour rule (btn-matrix, nav-link,
   contact-email, proj-cta, …) inherits matrix green here. */
a {
  color: var(--matrix-500);
}
a:hover,
a:focus-visible {
  color: #dcfce7;
}
a:visited {
  color: var(--matrix-500);
}

/* ── Project cards: title + CTA are the only links ───────────────────
   The card itself is an <article> now (not an anchor), so its hover
   lift / pointer glow still trigger but click targets are scoped. */
.proj-card h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.25s ease;
}
.proj-card h3 a:hover,
.proj-card h3 a:focus-visible {
  color: #dcfce7;
  text-shadow: 0 0 12px rgba(0, 255, 65, 0.35);
}
.proj-card .proj-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  align-self: flex-start;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease, transform 0.2s ease;
}
.proj-card .proj-cta:hover,
.proj-card .proj-cta:focus-visible {
  color: #dcfce7;
  transform: translateX(2px);
}

/* ════════════════════════════════════════════════════════════════════
   Card containment — added 2026-05
   Cards were reading as one blob of stacked text. Tighten the visual
   grouping inside each card with subtle hair-thin internal dividers:
   svc-cards get a line under their kicker tag (head / body), proj-cards
   get a line under their head row (head / body / cta). Internal padding
   and gaps go up for breathing room.
   ══════════════════════════════════════════════════════════════════ */
.svc-card {
  padding: 1.75rem;
  gap: 0.85rem;
}
.svc-card .svc-tag {
  margin-bottom: 0;
  padding-bottom: 0.65rem;
  align-self: stretch;
  box-shadow: inset 0 -1px 0 rgba(0, 255, 65, 0.10);
}
.svc-card h3 {
  font-size: 1.15rem;
}
.svc-card p {
  margin-top: 0.1rem;
}

.proj-card {
  padding: 2rem;
  gap: 1.1rem;
}
.proj-card .proj-head {
  padding-bottom: 1.1rem;
  box-shadow: inset 0 -1px 0 rgba(0, 255, 65, 0.12);
}
.proj-card h3 {
  font-size: 1.35rem;
}
.proj-card .proj-cta {
  margin-top: 0.4rem;
  font-size: 0.82rem;
}

/* Slightly wider container for project cards so the two side-by-side
   cards have proper room on desktop (cards were feeling cramped at the
   original 72rem max). */
@media (min-width: 992px) {
  #projects .container { max-width: 70rem; }
}

/* ════════════════════════════════════════════════════════════════════
   Overlay router — added 2026-05
   Each section (Services / Projects / About / Contact) lives in a
   full-screen overlay panel triggered from the nav. No new routes are
   added — URL hash drives state (/#services etc.) so links remain
   shareable. studio.js wires open/close/back-nav/focus-trap.
   ══════════════════════════════════════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0, 0, 0, 0.94);
  -webkit-backdrop-filter: blur(22px);
          backdrop-filter: blur(22px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.overlay[hidden] { display: none; }
.overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
body.overlay-open { overflow: hidden; }

/* Small green texture behind the overlay content — matches the hero. */
.overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(0, 255, 65, 0.06), transparent 70%);
  pointer-events: none;
}

.overlay-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.35);
  border-radius: 10px;
  color: var(--matrix-500);
  font-family: var(--font-jetbrains-mono);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.overlay-close:hover,
.overlay-close:focus-visible {
  background: rgba(0, 255, 65, 0.14);
  box-shadow: inset 0 0 0 1px var(--matrix-500);
  color: #dcfce7;
  transform: rotate(90deg);
}
.overlay-close:focus-visible {
  outline: 2px solid var(--matrix-500);
  outline-offset: 3px;
}
@media (min-width: 768px) {
  .overlay-close { top: 1.25rem; right: 1.5rem; }
}

.overlay-scroll {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 5rem 0 4rem;
}
@media (min-width: 768px) {
  .overlay-scroll { padding: 6rem 0 5rem; }
}

.overlay-content {
  max-width: 64rem;
  margin: 0 auto;
  padding-inline: 1.5rem;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.overlay.is-open .overlay-content {
  opacity: 1;
  transform: none;
}

/* Centered "lead" paragraph under section title inside an overlay. */
.overlay-lead {
  font-family: var(--font-jetbrains-mono);
  font-size: 1rem;
  color: rgba(134, 239, 172, 0.82);
  line-height: 1.7;
  max-width: 42rem;
  margin: 0 auto 2.75rem;
  text-align: center;
}

/* Centered header block inside overlays. */
.overlay-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.overlay-header .eyebrow { margin-bottom: 0.85rem; }
.overlay-header .section-title { margin-bottom: 1.25rem; }

/* Reduced-motion: skip the slide-up so the content is instant. */
@media (prefers-reduced-motion: reduce) {
  .overlay,
  .overlay-content {
    transition: none;
  }
  .overlay-close { transition: none; }
  .overlay-close:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Contact form — added 2026-05
   Sits inside the contact overlay. Posts JSON to /submit/contact via
   studio.js. Falls back to mailto if the backend errors.
   ══════════════════════════════════════════════════════════════════ */
.contact-form {
  max-width: 38rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) {
  .contact-form .form-row { grid-template-columns: 1fr; }
}
.contact-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.contact-form .form-label {
  font-family: var(--font-jetbrains-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(134, 239, 172, 0.72);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
}
.contact-form .form-optional {
  text-transform: none;
  letter-spacing: 0.05em;
  color: rgba(134, 239, 172, 0.42);
  font-size: 0.68rem;
}
.contact-form input,
.contact-form textarea {
  font-family: var(--font-jetbrains-mono);
  font-size: 0.95rem;
  background: rgba(15, 15, 15, 0.78);
  color: #dcfce7;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.22);
  border-radius: 8px;
  padding: 0.85rem 0.95rem;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 44px;
}
.contact-form textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.55;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(134, 239, 172, 0.35);
}
.contact-form input:hover,
.contact-form textarea:hover {
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.42);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  background: rgba(0, 0, 0, 0.92);
  box-shadow:
    inset 0 0 0 1px var(--matrix-500),
    0 0 0 3px rgba(0, 255, 65, 0.18);
}
.contact-form .form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.contact-form .form-status {
  font-family: var(--font-jetbrains-mono);
  font-size: 0.85rem;
  color: rgba(134, 239, 172, 0.7);
  min-height: 1.25em;
  line-height: 1.45;
  flex: 1 1 14rem;
}
.contact-form .form-status--ok    { color: var(--matrix-500); }
.contact-form .form-status--error { color: rgb(252, 165, 165); }
.contact-form .form-status a      { color: var(--matrix-500); text-decoration: underline; text-underline-offset: 3px; }
.contact-form .form-fallback {
  font-family: var(--font-jetbrains-mono);
  font-size: 0.78rem;
  color: rgba(134, 239, 172, 0.5);
  text-align: center;
  margin: 0.4rem 0 0;
}
.contact-form .form-fallback a {
  color: var(--matrix-500);
}

/* Mobile tightening for the form within the overlay */
@media (max-width: 575.98px) {
  .contact-form .form-actions .btn-matrix { flex: 1 1 100%; }
  .contact-form .form-actions .form-status { flex: 1 1 100%; text-align: left; }
}