@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("./assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --vx-void: #05060a;
  --vx-deep: #080a11;
  --vx-panel: #0d1017;
  --vx-raise: #12151f;
  --vx-paper: #eceef4;
  --vx-muted: #929aac;
  --vx-dim: #616a7d;
  --vx-line: rgba(255, 255, 255, .085);
  --vx-line-2: rgba(255, 255, 255, .17);

  --vx-violet: #8c72ff;
  --vx-violet-soft: rgba(140, 114, 255, .14);
  --vx-acid: #c9ff55;
  --vx-copper: #e2703a;
  --vx-blue: #3d6bff;

  --track: var(--vx-violet);

  --vx-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, monospace;
  --vx-shell: min(1340px, 100% - clamp(28px, 6vw, 112px));

  --mx: 0;
  --my: 0;
  --sp: 0;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

[id] { scroll-margin-top: 96px; }

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--vx-paper);
  background: var(--vx-void);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.62;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.mobile-menu-open { overflow: hidden; }

a { color: inherit; }
button, input, textarea, select { font: inherit; }
img { max-width: 100%; }

::selection { color: var(--vx-void); background: var(--vx-acid); }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--vx-acid);
  outline-offset: 3px;
}

.vx-shell { width: var(--vx-shell); margin-inline: auto; }

.vx-skip {
  position: fixed;
  z-index: 300;
  top: 12px;
  left: 12px;
  padding: 11px 16px;
  color: var(--vx-void);
  background: var(--vx-acid);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.vx-skip:focus { transform: none; }

.vx-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  color: var(--vx-muted);
  font-family: var(--vx-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vx-eyebrow i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vx-acid);
  box-shadow: 0 0 0 4px rgba(201, 255, 85, .12);
}

.vx-rule {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(34px, 4vw, 54px);
  color: var(--vx-dim);
  font-family: var(--vx-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.vx-rule i {
  flex: 1;
  height: 1px;
  background: var(--vx-line);
}
.vx-rule span:first-child { color: var(--vx-paper); }

.vx-section-title {
  max-width: 26ch;
  margin: 0 0 clamp(28px, 3vw, 44px);
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.033em;
}
.vx-section-title em,
h1 em,
h2 em {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.02em;
}

.vx-section-lead {
  max-width: 62ch;
  margin: 0 0 clamp(40px, 5vw, 66px);
  color: var(--vx-muted);
  font-size: clamp(16px, 1.15vw, 18px);
}

.vx-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  color: var(--vx-void);
  background: var(--vx-paper);
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background .25s ease, transform .25s ease, color .25s ease;
}
.vx-cta span { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.vx-cta:hover { background: var(--vx-acid); }
.vx-cta:hover span { transform: translateX(5px); }

.vx-quiet-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--vx-line-2);
  color: var(--vx-paper);
  font-size: 15px;
  text-decoration: none;
  transition: border-color .25s ease, color .25s ease;
}
.vx-quiet-link::after { content: "→"; color: var(--vx-dim); transition: transform .3s ease, color .25s ease; }
.vx-quiet-link:hover { border-color: var(--track); }
.vx-quiet-link:hover::after { color: var(--track); transform: translateX(4px); }

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

.vx-header {
  position: sticky;
  z-index: 80;
  top: 0;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
.vx-header.is-scrolled {
  border-bottom-color: var(--vx-line);
  background: rgba(5, 6, 10, .82);
  backdrop-filter: blur(16px) saturate(150%);
}
.vx-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 82px;
}
.vx-brand { display: inline-flex; width: max-content; text-decoration: none; }
.vx-brand img { display: block; width: 172px; height: auto; }

.vx-nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.2vw, 34px);
}
.vx-nav a {
  position: relative;
  padding: 6px 0;
  color: var(--vx-muted);
  font-size: 14.5px;
  text-decoration: none;
  transition: color .2s ease;
}
.vx-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--vx-violet);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.vx-nav a:hover { color: var(--vx-paper); }
.vx-nav a:hover::after { transform: scaleX(1); }

.vx-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.vx-header-cta {
  padding: 11px 20px;
  border: 1px solid var(--vx-line-2);
  color: var(--vx-paper);
  font-size: 14px;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.vx-header-cta:hover {
  border-color: var(--vx-acid);
  background: var(--vx-acid);
  color: var(--vx-void);
}

.vx-menu-toggle {
  display: none;
  width: 44px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--vx-line-2);
  background: none;
  cursor: pointer;
}
.vx-menu-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  margin: 4px auto;
  background: var(--vx-paper);
  transition: transform .3s ease, opacity .3s ease;
}
.vx-header.menu-open .vx-menu-toggle span:first-child { transform: translateY(2.5px) rotate(45deg); }
.vx-header.menu-open .vx-menu-toggle span:last-child { transform: translateY(-2.5px) rotate(-45deg); }

.vx-mobile-menu {
  position: fixed;
  z-index: 90;
  top: 82px;
  right: 0;
  left: 0;
  display: none;
  padding: 14px clamp(20px, 6vw, 40px) 34px;
  border-bottom: 1px solid var(--vx-line);
  background: var(--vx-deep);
}
.vx-header.menu-open .vx-mobile-menu { display: block; }
.vx-mobile-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--vx-line);
  font-size: 21px;
  letter-spacing: -.02em;
  text-decoration: none;
}
.vx-mobile-menu a span { color: var(--vx-dim); }
.vx-mobile-sub { margin-top: 20px; }
.vx-mobile-sub a {
  border: 0;
  padding: 9px 0;
  color: var(--vx-muted);
  font-size: 15px;
}

.vx-menu-backdrop {
  position: fixed;
  z-index: 70;
  inset: 0;
  background: rgba(5, 6, 10, .7);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.vx-menu-backdrop.is-visible { opacity: 1; pointer-events: auto; }

.vx-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 104px) clamp(70px, 9vw, 132px);
}

.vx-hero-field {
  position: absolute;
  z-index: 0;
  inset: -10% -10% 0;
  background-image:
    radial-gradient(circle at 76% 6%, rgba(140, 114, 255, .13), transparent 46%),
    radial-gradient(circle at 8% 78%, rgba(61, 107, 255, .07), transparent 52%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  pointer-events: none;
}

.vx-hero-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.vx-hero-canvas.is-live { opacity: 1; }

.vx-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
}

.vx-hero-copy h1 {
  margin: 0 0 26px;
  font-size: clamp(38px, 5.6vw, 78px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.04em;
}

.vx-lead {
  max-width: 54ch;
  margin: 0 0 34px;
  color: var(--vx-muted);
  font-size: clamp(16px, 1.2vw, 18.5px);
}

.vx-hero-actions {
  display: flex;
  align-items: center;
  gap: 26px clamp(18px, 2.4vw, 32px);
  flex-wrap: wrap;
  margin-bottom: clamp(38px, 4.5vw, 58px);
}

.vx-hero-facts {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--vx-line);
  background: var(--vx-line);
}
.vx-hero-facts > div { padding: 20px 20px 4px; background: var(--vx-void); }
.vx-hero-facts dt {
  margin-bottom: 3px;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 600;
  letter-spacing: -.02em;
}
.vx-hero-facts dd {
  margin: 0;
  color: var(--vx-dim);
  font-size: 13px;
  line-height: 1.45;
}

.vx-stage-wrap { position: relative; }

.vx-stage {
  perspective: 1500px;
  perspective-origin: 55% 45%;
}

.vx-stage-space {
  position: relative;
  aspect-ratio: 700 / 640;
  transform: rotateX(calc(var(--my) * -5deg)) rotateY(calc(var(--mx) * 7deg)) translateY(calc(var(--sp) * -26px));
  transform-style: preserve-3d;
  transition: transform .26s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

.vx-orbit {
  position: absolute;
  inset: -6% -4%;
  width: 108%;
  height: 112%;
  overflow: visible;
  fill: none;
  transform: translateZ(-140px);
}
.vx-orbit path {
  stroke-linecap: round;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.vx-orbit-base { stroke: url(#vx-orbit-a); opacity: .34; }
.vx-orbit-base.vx-orbit-b { stroke: url(#vx-orbit-b); }
.vx-orbit-run {
  stroke: url(#vx-orbit-a);
  stroke-width: 2.4;
  stroke-dasharray: 70 930;
  filter: drop-shadow(0 0 6px rgba(140, 114, 255, .55));
  animation: vx-run 8s linear infinite;
}
.vx-orbit-run.vx-orbit-b { stroke: url(#vx-orbit-b); }
.vx-orbit-run-2 { animation-delay: -4s; }

@keyframes vx-run {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}

.vx-surface { position: absolute; }

.vx-stage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  padding: 0;
  list-style: none;
}
.vx-stage-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--vx-dim);
  font-family: var(--vx-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vx-stage-legend li::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}
.vx-stage-legend .is-web::before { background: var(--vx-violet); }
.vx-stage-legend .is-sw::before { background: var(--vx-copper); }
.vx-stage-legend .is-app::before { background: var(--vx-blue); }

.vx-surface-web {
  top: 0;
  left: 0;
  width: 74%;
  transform: translateZ(-70px) rotateY(11deg) rotateX(5deg);
}
.vx-surface-sw {
  top: 40%;
  right: 0;
  width: 50%;
  transform: translateZ(40px) rotateY(-10deg) rotateX(3deg);
}
.vx-surface-app {
  bottom: 7%;
  left: 13%;
  width: 25%;
  transform: translateZ(130px) rotateY(9deg) rotateX(2deg);
}

.vx-win {
  border: 1px solid var(--vx-line-2);
  background: linear-gradient(180deg, #10141d, #0a0d14);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
}
.vx-win-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--vx-line);
  background: rgba(255, 255, 255, .03);
}
.vx-win-bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}
.vx-win-bar span {
  margin-left: 10px;
  color: var(--vx-dim);
  font-family: var(--vx-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
}
.vx-win-body { display: grid; grid-template-columns: 46px 1fr; }
.vx-win-side {
  padding: 14px 10px;
  border-right: 1px solid var(--vx-line);
}
.vx-win-side b {
  display: block;
  height: 5px;
  margin-bottom: 11px;
  background: rgba(255, 255, 255, .1);
}
.vx-win-side b.is-on { background: var(--vx-violet); }
.vx-win-main { padding: 14px 16px 16px; }
.vx-win-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--vx-paper);
  font-size: 11px;
  letter-spacing: -.01em;
}
.vx-win-head em {
  color: var(--vx-violet);
  font-family: var(--vx-mono);
  font-size: 13px;
  font-style: normal;
}
.vx-win-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-top: 1px solid var(--vx-line);
  color: var(--vx-muted);
  font-size: 9.5px;
}
.vx-win-row em {
  color: var(--vx-dim);
  font-family: var(--vx-mono);
  font-size: 8.5px;
  font-style: normal;
  letter-spacing: .04em;
}
.vx-win-row em.is-ok { color: var(--vx-acid); }
.vx-win-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 34px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--vx-line);
}
.vx-win-chart b {
  flex: 1;
  background: rgba(140, 114, 255, .35);
}
.vx-win-chart b:nth-child(1) { height: 40%; }
.vx-win-chart b:nth-child(2) { height: 62%; }
.vx-win-chart b:nth-child(3) { height: 48%; }
.vx-win-chart b:nth-child(4) { height: 82%; }
.vx-win-chart b:nth-child(5) { height: 58%; }
.vx-win-chart b:nth-child(6) { height: 96%; background: var(--vx-violet); }
.vx-win-chart b:nth-child(7) { height: 70%; }

.vx-console {
  border: 1px solid var(--vx-line-2);
  background: linear-gradient(180deg, #14161c, #0c0e13);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
}
.vx-console-top {
  display: flex;
  justify-content: space-between;
  padding: 10px 13px;
  border-bottom: 1px solid var(--vx-line);
  color: var(--vx-dim);
  font-family: var(--vx-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vx-console-stream { margin: 0; padding: 6px 13px 10px; list-style: none; }
.vx-console-stream li {
  display: grid;
  align-items: baseline;
  gap: 10px;
  grid-template-columns: auto 1fr;
  padding: 7px 0;
  border-bottom: 1px solid var(--vx-line);
}
.vx-console-stream li:last-child { border-bottom: 0; }
.vx-console-stream time {
  color: var(--vx-copper);
  font-family: var(--vx-mono);
  font-size: 8.5px;
}
.vx-console-stream strong {
  color: var(--vx-paper);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.vx-console-foot {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 10px 13px 12px;
  border-top: 1px solid var(--vx-line);
  background: rgba(226, 112, 58, .06);
}
.vx-console-foot b {
  color: var(--vx-copper);
  font-family: var(--vx-mono);
  font-size: 15px;
}
.vx-console-foot span { color: var(--vx-dim); font-size: 9px; }

.vx-phone {
  position: relative;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 22px;
  background: linear-gradient(160deg, #1b1f2b, #0a0c12);
  box-shadow: 0 44px 90px rgba(0, 0, 0, .65);
}
.vx-phone-notch {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 34%;
  height: 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .8);
  transform: translateX(-50%);
}
.vx-phone-screen {
  padding: 18px 12px 13px;
  border-radius: 16px;
  background: #070910;
}
.vx-phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--vx-dim);
  font-family: var(--vx-mono);
  font-size: 8px;
}
.vx-phone-status i {
  width: 12px;
  height: 5px;
  border: 1px solid var(--vx-dim);
  border-radius: 1px;
}
.vx-phone-kicker {
  margin: 0;
  color: var(--vx-blue);
  font-family: var(--vx-mono);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vx-phone-title {
  margin: 2px 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.vx-phone-card {
  padding: 9px 10px;
  border: 1px solid rgba(61, 107, 255, .34);
  border-radius: 8px;
  background: rgba(61, 107, 255, .1);
}
.vx-phone-card strong { display: block; font-size: 10px; }
.vx-phone-card span { color: var(--vx-dim); font-size: 8px; }
.vx-phone-list { margin: 10px 0 0; padding: 0; list-style: none; }
.vx-phone-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  border-bottom: 1px solid var(--vx-line);
  color: var(--vx-muted);
  font-size: 8.5px;
}
.vx-phone-list b {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}
.vx-phone-button {
  margin-top: 12px;
  padding: 8px;
  border-radius: 7px;
  background: var(--vx-blue);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  text-align: center;
}

.vx-stage-caption {
  max-width: 46ch;
  margin: 14px 0 0;
  color: var(--vx-dim);
  font-size: 13.5px;
  line-height: 1.55;
}

.vx-thesis {
  padding-block: clamp(72px, 9vw, 132px);
  border-top: 1px solid var(--vx-line);
  background: var(--vx-deep);
}
.vx-thesis-grid {
  display: grid;
  gap: clamp(28px, 4vw, 70px);
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  align-items: start;
}
.vx-thesis-grid h2 {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 56px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.035em;
}
.vx-thesis-copy p {
  margin: 0 0 20px;
  color: var(--vx-muted);
  font-size: clamp(16px, 1.15vw, 18px);
}
.vx-thesis-copy p:last-child { margin-bottom: 0; }

.vx-contrast {
  display: grid;
  gap: clamp(22px, 3vw, 48px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(46px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 46px);
  border-top: 1px solid var(--vx-line);
}
.vx-contrast-key {
  display: block;
  margin-bottom: 18px;
  color: var(--vx-dim);
  font-family: var(--vx-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.is-mine .vx-contrast-key { color: var(--vx-acid); }
.vx-contrast ul { margin: 0; padding: 0; list-style: none; }
.vx-contrast li {
  padding: 13px 0 13px 26px;
  border-top: 1px solid var(--vx-line);
  color: var(--vx-muted);
  font-size: 15px;
  position: relative;
}
.vx-contrast li::before {
  position: absolute;
  top: 13px;
  left: 0;
  color: var(--vx-dim);
  content: "—";
}
.is-mine li { color: var(--vx-paper); }
.is-mine li::before { color: var(--vx-acid); content: "✓"; font-size: 12px; }

.vx-tracks { padding-block: clamp(76px, 9vw, 140px); }

.vx-track {
  display: grid;
  align-items: center;
  gap: clamp(28px, 4.5vw, 74px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  padding-block: clamp(44px, 5.5vw, 78px);
  border-top: 1px solid var(--vx-line);
}
.vx-track:last-child { border-bottom: 1px solid var(--vx-line); }
.vx-track-sw { --track: var(--vx-copper); }
.vx-track-app { --track: var(--vx-blue); }

.vx-track-sw .vx-track-media { order: 1; }
.vx-track-sw .vx-track-copy { order: 2; }

.vx-track-index {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 20px;
  font-family: var(--vx-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.vx-track-index::before {
  flex: none;
  width: 26px;
  height: 1px;
  background: var(--track);
  content: "";
}
.vx-track-index span { color: var(--track); }

.vx-track h3 {
  max-width: 18ch;
  margin: 0 0 18px;
  font-size: clamp(25px, 2.9vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.vx-track-copy > p {
  max-width: 54ch;
  margin: 0 0 24px;
  color: var(--vx-muted);
  font-size: 16px;
}
.vx-track-specs { margin: 0 0 26px; padding: 0; list-style: none; }
.vx-track-specs li {
  padding: 11px 0 11px 22px;
  border-top: 1px solid var(--vx-line);
  color: var(--vx-paper);
  font-size: 14.5px;
  position: relative;
}
.vx-track-specs li::before {
  position: absolute;
  top: 19px;
  left: 0;
  width: 8px;
  height: 1px;
  background: var(--track);
  content: "";
}
.vx-track-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid var(--vx-line-2);
  color: var(--vx-paper);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.vx-track-link span { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.vx-track-link:hover {
  border-color: var(--track);
  background: var(--track);
  color: #08090c;
}
.vx-track-link:hover span { transform: translateX(4px); }
.vx-track-copy > .vx-track-note {
  max-width: 48ch;
  margin: 34px 0 0;
  color: var(--vx-dim);
  font-size: 13px;
  line-height: 1.55;
}

.vx-track-media { margin: 0; }
.vx-track-media figcaption {
  margin-top: 14px;
  color: var(--vx-dim);
  font-size: 12.5px;
}
.vx-frame {
  border: 1px solid var(--vx-line-2);
  background: #0b0d13;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .5);
}
.vx-frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--vx-line);
  background: rgba(255, 255, 255, .03);
}
.vx-frame-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.vx-frame-bar small {
  margin-left: 12px;
  color: var(--vx-dim);
  font-family: var(--vx-mono);
  font-size: 10.5px;
}
.vx-frame img { display: block; width: 100%; height: auto; }

.vx-plate {
  overflow: hidden;
  border: 1px solid var(--vx-line);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .5);
}
.vx-plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(.9) contrast(1.04);
}

.vx-work {
  padding-block: clamp(76px, 9vw, 130px);
  border-top: 1px solid var(--vx-line);
  background: var(--vx-deep);
}
.vx-ledger { margin: 0; padding: 0; list-style: none; }
.vx-ledger li {
  display: grid;
  gap: clamp(16px, 3vw, 42px);
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: start;
  padding-block: clamp(26px, 3.4vw, 42px);
  border-top: 1px solid var(--vx-line);
}
.vx-ledger li:last-child { border-bottom: 1px solid var(--vx-line); }
.vx-ledger-main h3 {
  margin: 0 0 10px;
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 600;
  letter-spacing: -.025em;
}
.vx-ledger-main p {
  max-width: 62ch;
  margin: 0 0 16px;
  color: var(--vx-muted);
  font-size: 15.5px;
}
.vx-ledger-spec {
  margin: 4px 0 0;
  color: var(--vx-dim);
  font-family: var(--vx-mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-align: right;
}

.vx-case {
  display: grid;
  gap: clamp(30px, 4vw, 70px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  padding-top: clamp(28px, 3.4vw, 44px);
  border-top: 1px solid var(--vx-line);
}
.vx-case-kicker {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 20px;
  color: var(--vx-violet);
  font-family: var(--vx-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.vx-case-kicker::before {
  flex: none;
  width: 26px;
  height: 1px;
  background: var(--vx-violet);
  content: "";
}
.vx-case-copy h3 {
  max-width: 20ch;
  margin: 0 0 18px;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.03em;
}
.vx-case-copy > p {
  max-width: 56ch;
  margin: 0 0 28px;
  color: var(--vx-muted);
  font-size: 15.5px;
}
.vx-case-list { margin: 0 0 30px; padding: 0; list-style: none; }
.vx-case-list li {
  display: grid;
  gap: 2px 16px;
  grid-template-columns: minmax(0, 15ch) minmax(0, 1fr);
  padding: 13px 0;
  border-top: 1px solid var(--vx-line);
}
.vx-case-list li:last-child { border-bottom: 1px solid var(--vx-line); }
.vx-case-list b { font-size: 14.5px; font-weight: 500; }
.vx-case-list span { color: var(--vx-dim); font-size: 13.5px; line-height: 1.5; }
.vx-case-copy > .vx-case-note {
  max-width: 48ch;
  margin: 34px 0 0;
  color: var(--vx-dim);
  font-size: 12.5px;
  line-height: 1.55;
}

.vx-case-media {
  margin: 0;

  padding: 0 22px 0 clamp(0px, 3vw, 44px);
}
.vx-case-shots { position: relative; }
.vx-case-tablet {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--vx-line-2);
  filter: saturate(.94) brightness(.96);
}
.vx-case-phone {
  position: absolute;
  right: -22px;
  bottom: 0;
  width: 31%;
  height: auto;
  border: 1px solid var(--vx-line-2);
  box-shadow: 0 26px 60px rgba(5, 6, 10, .72);
}
.vx-case-media figcaption {
  margin-top: clamp(20px, 2.4vw, 30px);
  color: var(--vx-dim);
  font-size: 12.5px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .vx-case { grid-template-columns: minmax(0, 1fr); }
  .vx-case-media { padding-left: 0; }
}

@media (max-width: 560px) {
  .vx-case-list li { grid-template-columns: minmax(0, 1fr); }
  .vx-case-phone { width: 34%; }
}

.vx-band {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(340px, 42vw, 520px);
  overflow: hidden;
  border-block: 1px solid var(--vx-line);
}
.vx-band-media {
  position: absolute;
  inset: 0;
  background: url("./assets/software/workday-software.webp") center / cover no-repeat;
  filter: grayscale(.25) contrast(1.05);
  transform: scale(1.06) translateY(calc(var(--sp) * 14px));
}
.vx-band-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(5, 6, 10, .96) 26%, rgba(5, 6, 10, .72) 58%, rgba(5, 6, 10, .3));
  content: "";
}
.vx-band-inner {
  position: relative;
  padding-block: clamp(56px, 7vw, 92px);
}
.vx-band-inner h2 {
  max-width: 24ch;
  margin: 0 0 20px;
  font-size: clamp(25px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.03em;
}
.vx-band-inner p {
  max-width: 54ch;
  margin: 0;
  color: var(--vx-muted);
  font-size: clamp(15px, 1.1vw, 17px);
}

.vx-method { padding-block: clamp(76px, 9vw, 130px); }
.vx-phases {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--vx-line);
  list-style: none;
}
.vx-phases li {
  position: relative;
  padding: clamp(26px, 3vw, 38px) clamp(18px, 2vw, 30px) clamp(26px, 3vw, 38px) 0;
}
.vx-phases li + li { padding-left: clamp(18px, 2vw, 30px); border-left: 1px solid var(--vx-line); }
.vx-phases li::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 2px;
  background: var(--vx-violet);
  content: "";
}
.vx-phases h3 {
  margin: 4px 0 12px;
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: -.02em;
}
.vx-phases p {
  margin: 0 0 20px;
  color: var(--vx-muted);
  font-size: 14.5px;
}
.vx-phase-out {
  display: inline-block;
  padding: 6px 11px;
  border: 1px solid var(--vx-line);
  color: var(--vx-dim);
  font-family: var(--vx-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
}

.vx-stack {
  padding-block: clamp(76px, 9vw, 130px);
  border-top: 1px solid var(--vx-line);
  background: var(--vx-deep);
}
.vx-table {
  width: 100%;
  margin-bottom: clamp(56px, 7vw, 96px);
  border-collapse: collapse;
  text-align: left;
}
.vx-table caption {
  margin-bottom: 18px;
  color: var(--vx-dim);
  font-family: var(--vx-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
}
.vx-table th, .vx-table td {
  padding: 17px 18px 17px 0;
  border-top: 1px solid var(--vx-line);
  vertical-align: top;
}
.vx-table thead th {
  border-top: 1px solid var(--vx-line-2);
  color: var(--vx-dim);
  font-family: var(--vx-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vx-table tbody th {
  width: 22%;
  color: var(--vx-paper);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.vx-table td { color: var(--vx-muted); font-size: 15px; }
.vx-table td:last-child { color: var(--vx-dim); }

.vx-fit {
  display: grid;
  gap: clamp(24px, 3.5vw, 56px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vx-fit h3 {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.vx-fit ul { margin: 0; padding: 0; list-style: none; }
.vx-fit li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-top: 1px solid var(--vx-line);
  color: var(--vx-muted);
  font-size: 15px;
}
.vx-fit li::before {
  position: absolute;
  top: 12px;
  left: 0;
  color: var(--vx-acid);
  content: "✓";
  font-size: 12px;
}
.vx-fit .is-no li::before { color: var(--vx-copper); content: "✕"; }

.vx-contact { padding-block: clamp(76px, 9vw, 130px); }
.vx-contact-grid {
  display: grid;
  gap: clamp(36px, 5vw, 84px);
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  align-items: start;
}
.vx-contact-copy h2 {
  margin: 0 0 20px;
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.033em;
}
.vx-contact-copy > p {
  max-width: 50ch;
  margin: 0 0 32px;
  color: var(--vx-muted);
  font-size: 16px;
}
.vx-contact-facts {
  display: grid;
  gap: 1px;
  margin: 0 0 28px;
  border-top: 1px solid var(--vx-line);
}
.vx-contact-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--vx-line);
}
.vx-contact-facts dt { color: var(--vx-dim); font-family: var(--vx-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.vx-contact-facts dd { margin: 0; font-size: 14.5px; }
.vx-mail {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--vx-violet);
  font-size: clamp(16px, 1.4vw, 20px);
  text-decoration: none;
}

.vx-form {
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--vx-line);
  background: var(--vx-panel);
}
.vx-form > label,
.vx-form-row > label { display: block; margin-bottom: 18px; }
.vx-form label > span:first-child,
.vx-project-type legend {
  display: block;
  margin-bottom: 8px;
  color: var(--vx-muted);
  font-size: 13px;
}
.vx-form label i,
.vx-project-type legend i {
  color: var(--vx-dim);
  font-size: 11px;
  font-style: normal;
}
.vx-form input[type="text"],
.vx-form input[type="email"],
.vx-form input[type="url"],
.vx-form textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--vx-line-2);
  background: rgba(0, 0, 0, .3);
  color: var(--vx-paper);
  transition: border-color .2s ease, background .2s ease;
}
.vx-form textarea { resize: vertical; }
.vx-form input:focus, .vx-form textarea:focus { border-color: var(--vx-violet); outline: none; }
.vx-form [aria-invalid] { border-color: var(--vx-copper); }
.vx-form-row { display: grid; gap: 0 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.vx-project-type { margin: 0 0 22px; padding: 0; border: 0; }
.vx-project-type > div { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-project-type label { flex: 1 1 auto; }
.vx-project-type input { position: absolute; opacity: 0; }
.vx-project-type span {
  display: block;
  padding: 11px 14px;
  border: 1px solid var(--vx-line-2);
  color: var(--vx-muted);
  font-size: 13.5px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.vx-project-type label:hover span { border-color: var(--vx-line-2); color: var(--vx-paper); }
.vx-project-type input:checked + span {
  border-color: var(--vx-violet);
  background: var(--vx-violet-soft);
  color: var(--vx-paper);
}
.vx-project-type input:focus-visible + span { outline: 2px solid var(--vx-acid); outline-offset: 2px; }

.vx-form-trap { position: absolute; left: -9999px; }
.vx-privacy {
  display: flex !important;
  gap: 11px;
  margin: 4px 0 18px;
  color: var(--vx-muted);
  font-size: 13px;
  line-height: 1.5;
}
.vx-privacy input { margin-top: 3px; accent-color: var(--vx-violet); }
.vx-turnstile:not(:empty) { margin-bottom: 16px; }
.vx-safety { margin: 0 0 16px; color: var(--vx-dim); font-size: 12px; }

.vx-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 0;
  background: var(--vx-paper);
  color: var(--vx-void);
  font-weight: 600;
  cursor: pointer;
  transition: background .25s ease;
}
.vx-submit:hover { background: var(--vx-acid); }
.vx-submit[disabled] { opacity: .6; cursor: progress; }

.vx-status { margin: 26px 0 0; font-size: 13.5px; }
.vx-status.is-error { color: #ff9a7a; }
.vx-status.is-success { color: var(--vx-acid); }

.vx-footer {
  padding-block: clamp(52px, 6vw, 78px) 26px;
  border-top: 1px solid var(--vx-line);
  background: var(--vx-deep);
}
.vx-footer-inner {
  display: grid;
  gap: clamp(30px, 4vw, 60px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: start;
}
.vx-footer-cols {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vx-footer-cols p {
  margin: 0 0 14px;
  color: var(--vx-dim);
  font-family: var(--vx-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.vx-footer-cols a {
  display: block;
  padding: 5px 0;
  color: var(--vx-muted);
  font-size: 14px;
  text-decoration: none;
  transition: color .2s ease;
}
.vx-footer-cols a:hover { color: var(--vx-paper); }
.vx-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(38px, 5vw, 62px);
  padding-top: 22px;
  border-top: 1px solid var(--vx-line);
  color: var(--vx-dim);
  font-size: 13px;
}
.vx-footer-bottom a { text-decoration: none; }

.vx-scroll-top {
  position: fixed;
  z-index: 60;
  right: 22px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--vx-line-2);
  background: rgba(5, 6, 10, .8);
  color: var(--vx-paper);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(8px);
  transition: opacity .3s ease, border-color .2s ease;
}
.vx-scroll-top.is-visible { opacity: 1; pointer-events: auto; }
.vx-scroll-top:hover { border-color: var(--vx-acid); }

@media (max-width: 1180px) {
  .vx-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .vx-stage-wrap { max-width: 620px; }
  .vx-thesis-grid { grid-template-columns: minmax(0, 1fr); }
  .vx-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vx-phases li:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--vx-line); }
  .vx-phases li:nth-child(4) { border-top: 1px solid var(--vx-line); }
}

@media (max-width: 1080px) {
  .vx-nav { display: none; }
  .vx-menu-toggle { display: block; }
  .vx-header-cta { display: none; }
  .vx-header-inner { grid-template-columns: 1fr auto; }
}

@media (max-width: 900px) {
  .vx-track,
  .vx-contact-grid,
  .vx-footer-inner { grid-template-columns: minmax(0, 1fr); }
  .vx-track-sw .vx-track-copy { order: 0; }
  .vx-ledger li { grid-template-columns: minmax(0, 1fr); }
  .vx-ledger-spec { text-align: left; }
  .vx-contrast,
  .vx-fit { grid-template-columns: minmax(0, 1fr); }
  .vx-band-media::after { background: linear-gradient(180deg, rgba(5, 6, 10, .82), rgba(5, 6, 10, .94)); }
}

@media (max-width: 720px) {

  .vx-hero-copy h1 br,
  .vx-section-title br,
  .vx-thesis-grid h2 br,
  .vx-band-inner h2 br,
  .vx-contact-copy h2 br { display: none; }
  .vx-rule i + span { display: none; }
  .vx-hero-facts { grid-template-columns: minmax(0, 1fr); background: none; }
  .vx-hero-facts > div { padding: 14px 0; border-bottom: 1px solid var(--vx-line); }
  .vx-form-row { grid-template-columns: minmax(0, 1fr); }
  .vx-phases { grid-template-columns: minmax(0, 1fr); }
  .vx-phases li { padding-left: 0 !important; border-left: 0 !important; border-top: 1px solid var(--vx-line); }
  .vx-footer-cols { grid-template-columns: minmax(0, 1fr); }
  .vx-table thead { display: none; }
  .vx-table tbody th, .vx-table td { display: block; width: auto; padding: 0 0 8px; border: 0; }
  .vx-table tbody th { padding-top: 20px; border-top: 1px solid var(--vx-line); }
  .vx-table tbody tr { display: block; padding-bottom: 14px; }
  .vx-table td::before {
    display: block;
    color: var(--vx-dim);
    font-family: var(--vx-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .vx-table td:nth-of-type(1)::before { content: "Wofür"; }
  .vx-table td:nth-of-type(2)::before { content: "Wann nicht"; }
}

@media (max-width: 640px) {
  .vx-stage-space { aspect-ratio: 380 / 500; }
  .vx-surface-web { top: 0; left: 0; width: 100%; transform: translateZ(-40px) rotateY(6deg) rotateX(3deg); }
  .vx-surface-sw { top: 45%; right: auto; left: 0; width: 66%; transform: translateZ(30px) rotateY(-6deg); }
  .vx-surface-app { right: 0; bottom: 0; left: auto; width: 45%; transform: translateZ(90px) rotateY(6deg); }
  .vx-phone-title { font-size: 11px; }
  .vx-orbit { inset: -4% -2%; width: 104%; height: 108%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vx-orbit-run { animation: none; stroke-dasharray: none; opacity: .5; }
  .vx-stage-space,
  .vx-band-media { transform: none !important; transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .vx-cta span, .vx-track-link span { transition: none; }
}

.vx-arch {
  padding-block: clamp(76px, 9vw, 130px);
  border-top: 1px solid var(--vx-line);
  background: var(--vx-deep);
}

.vx-arch-grid {
  display: grid;
  gap: clamp(28px, 4vw, 62px);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}

.vx-arch-map {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--vx-line);
  background: var(--vx-line);
}
.vx-lane { padding: clamp(20px, 2.2vw, 28px); background: var(--vx-void); }
.vx-lane-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--vx-line);
  font-family: var(--vx-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.vx-lane-title::before {
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--vx-violet);
  content: "";
}
.vx-lane ul { margin: 0; padding: 0; list-style: none; }
.vx-lane li {
  position: relative;
  padding: 9px 0 9px 16px;
  font-size: 14px;
}
.vx-lane li::before {
  position: absolute;
  top: 17px;
  left: 0;
  width: 7px;
  height: 1px;
  background: var(--vx-line-2);
  content: "";
}
.vx-lane li b { display: block; font-weight: 500; }
.vx-lane li em {
  display: block;
  color: var(--vx-dim);
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
}

@media (min-width: 901px) {
  .vx-lane { position: relative; }
  .vx-lane + .vx-lane::before {
    position: absolute;
    top: 26px;
    left: -1px;
    width: 1px;
    height: 22px;
    background: var(--vx-violet);
    content: "";
  }
}

.vx-arch-side h3 {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.vx-arch-list { margin: 0; padding: 0; list-style: none; }
.vx-arch-list li {
  position: relative;
  padding: 12px 0 12px 24px;
  border-top: 1px solid var(--vx-line);
  color: var(--vx-muted);
  font-size: 14.5px;
}
.vx-arch-list li::before {
  position: absolute;
  top: 12px;
  left: 0;
  color: var(--vx-acid);
  content: "✓";
  font-size: 12px;
}

.vx-deliver {
  margin-top: clamp(38px, 4.5vw, 62px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--vx-line);
}
.vx-deliver-title {
  margin: 0 0 22px;
  color: var(--vx-dim);
  font-family: var(--vx-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.vx-deliver ul {
  display: grid;
  gap: clamp(18px, 2.4vw, 34px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.vx-deliver li { border-top: 1px solid var(--vx-line-2); padding-top: 14px; }
.vx-deliver b {
  display: block;
  margin-bottom: 5px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.vx-deliver span { color: var(--vx-dim); font-size: 13px; line-height: 1.5; }

@media (max-width: 900px) {
  .vx-arch-grid { grid-template-columns: minmax(0, 1fr); }
  .vx-arch-map { grid-template-columns: minmax(0, 1fr); }
  .vx-deliver ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .vx-deliver ul { grid-template-columns: minmax(0, 1fr); }
}

.vx-hero-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("./assets/hero/hero-backdrop.webp") 70% 40% / cover no-repeat;
  opacity: .62;
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 94%);
  pointer-events: none;
}
.vx-hero-photo::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(5, 6, 10, .96) 16%, rgba(5, 6, 10, .74) 46%, rgba(5, 6, 10, .34) 78%),
    linear-gradient(to top, rgba(5, 6, 10, .9), transparent 42%);
  content: "";
}

.vx-plate img { filter: saturate(.88) contrast(1.03) brightness(.9); }

.vx-contact { position: relative; overflow: hidden; }
.vx-contact-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("./assets/kontakt/kontakt-buero.webp") 62% 45% / cover no-repeat;
  opacity: .72;
  pointer-events: none;
}
.vx-contact-photo::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(5, 6, 10, .93) 20%, rgba(5, 6, 10, .74) 50%, rgba(5, 6, 10, .5)),
    linear-gradient(to bottom, rgba(5, 6, 10, .7), rgba(5, 6, 10, .42) 40%, rgba(5, 6, 10, .88));
  content: "";
}
.vx-contact-grid { position: relative; z-index: 1; }
.vx-contact .vx-form { background: rgba(13, 16, 23, .92); backdrop-filter: blur(6px); }

@media (max-width: 900px) {
  .vx-hero-photo { opacity: .48; }
  .vx-hero-photo::after {
    background:
      linear-gradient(to bottom, rgba(5, 6, 10, .82), rgba(5, 6, 10, .94) 60%),
      linear-gradient(100deg, rgba(5, 6, 10, .8), rgba(5, 6, 10, .5));
  }
  .vx-contact-photo { opacity: .35; }
}

.vx-arch { position: relative; overflow: hidden; }
.vx-arch-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("./assets/arch/arch-backdrop.webp") 40% 30% / cover no-repeat;
  opacity: .8;
  pointer-events: none;
}
.vx-arch-photo::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(8, 10, 17, .74), rgba(8, 10, 17, .86) 55%, rgba(8, 10, 17, .94)),
    linear-gradient(90deg, rgba(8, 10, 17, .86), rgba(8, 10, 17, .38) 62%, rgba(8, 10, 17, .7));
  content: "";
}
.vx-arch > .vx-shell { position: relative; z-index: 1; }

.vx-hero-photo,
.vx-arch-photo,
.vx-contact-photo { filter: blur(.4px); }

@media (max-width: 900px) {
  .vx-arch-photo { opacity: .38; }
}

.vx-legal { padding-block: clamp(56px, 7vw, 96px) clamp(72px, 8vw, 112px); }

.vx-legal-head {
  padding-bottom: clamp(30px, 4vw, 48px);
}
.vx-legal h1 {
  max-width: 16ch;
  margin: 0 0 18px;
  font-size: clamp(40px, 6.4vw, 82px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.038em;
}
.vx-legal-lead {
  max-width: 62ch;
  margin: 0;
  color: var(--vx-muted);
  font-size: clamp(15.5px, 1.3vw, 18px);
}

.vx-legal-body { max-width: 80ch; }
.vx-legal-body section {
  padding-block: clamp(24px, 2.8vw, 34px);
  border-top: 1px solid var(--vx-line);
}
.vx-legal-body h2 {
  margin: 0 0 14px;
  color: var(--vx-paper);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: -.02em;
}
.vx-legal-body p {
  margin: 0 0 14px;
  color: var(--vx-muted);
  font-size: 15.5px;
}
.vx-legal-body p:last-child { margin-bottom: 0; }
.vx-legal-body ul { margin: 0 0 14px; padding: 0; list-style: none; }
.vx-legal-body ul:last-child { margin-bottom: 0; }
.vx-legal-body li {
  position: relative;
  padding: 7px 0 7px 20px;
  color: var(--vx-muted);
  font-size: 15.5px;
}
.vx-legal-body li::before {
  position: absolute;
  top: 7px;
  left: 0;
  color: var(--vx-violet);
  content: "\2014";
}
.vx-legal-body h3 {
  margin: 26px 0 12px;
  color: var(--vx-paper);
  font-size: 15.5px;
  font-weight: 600;
}
.vx-legal-box {
  margin: 0 0 14px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--vx-line-2);
}
.vx-legal-box b { color: var(--vx-paper); font-weight: 600; }
.vx-legal-box p:last-child { margin-bottom: 0; }
.vx-legal-body a {
  color: var(--vx-paper);
  text-decoration: underline;
  text-decoration-color: var(--vx-line-2);
  text-underline-offset: 3px;
  transition: color .25s ease, text-decoration-color .25s ease;
}
.vx-legal-body a:hover { color: var(--vx-violet); text-decoration-color: var(--vx-violet); }

.vx-legal-note {
  margin: 0;
  padding-block: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--vx-line);
  color: var(--vx-dim);
  font-family: var(--vx-mono);
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.vx-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(26px, 3vw, 40px);
}
.vx-legal-nav a {
  padding: 12px 19px;
  border: 1px solid var(--vx-line-2);
  color: var(--vx-paper);
  font-size: 13.5px;
  text-decoration: none;
  transition: border-color .25s ease, color .25s ease;
}
.vx-legal-nav a:hover { border-color: var(--vx-violet); color: var(--vx-violet); }