/* Self-hosted subsets, latin and latin-ext. No third-party font requests. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Inter-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Inter-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Inter-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Inter-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/SpaceGrotesk-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/SpaceGrotesk-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/SpaceGrotesk-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/SpaceGrotesk-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/SpaceGrotesk-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/SpaceGrotesk-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/SpaceGrotesk-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/SpaceGrotesk-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ==========================================================================
   VoltreeAI Design System
   Version 1.0 · Bioelectric
   --------------------------------------------------------------------------
   A standalone stylesheet. No framework, no utility-class engine, no shadcn
   defaults. Everything is driven by custom properties on :root, so the whole
   system can be retuned from one block.

   Languages: English and German. German sets longer, so the type scale,
   hyphenation and heading measures adapt on [lang="de"].

   Performance note: the @import below works standalone. For production,
   delete it and put this in <head> instead, before this stylesheet:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap">
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- Colour: base ---------------------------------------------------- */
  --vt-black:        #060A08;   /* deepest, page behind everything          */
  --vt-base:         #0A0F0D;   /* default page background                  */
  --vt-surface-1:    #101613;   /* raised panel                             */
  --vt-surface-2:    #161E1A;   /* card                                     */
  --vt-surface-3:    #1C2622;   /* hover / active card                      */
  --vt-line:         #23302A;   /* hairline border                          */
  --vt-line-strong:  #35473E;   /* emphasised border                        */

  /* --- Colour: signal (primary accent) --------------------------------- */
  --vt-signal:       #7DF25B;   /* the bioelectric trace                    */
  --vt-signal-dim:   #5BC93F;
  --vt-signal-deep:  #2E7A1E;
  --vt-signal-wash:  rgba(125, 242, 91, 0.08);
  --vt-signal-edge:  rgba(125, 242, 91, 0.28);

  /* --- Colour: ember (wildfire / risk) --------------------------------- */
  --vt-ember:        #FF6B35;
  --vt-ember-dim:    #D6522450;
  --vt-ember-wash:   rgba(255, 107, 53, 0.09);

  /* --- Colour: support -------------------------------------------------- */
  --vt-amber:        #F5A623;   /* caution / moderate                       */
  --vt-ice:          #6FD3E8;   /* cool data, secondary series              */
  --vt-violet:       #A88BFF;   /* tertiary data series                     */

  /* --- Colour: text ----------------------------------------------------- */
  --vt-ink:          #F2F5F3;
  --vt-ink-soft:     #A8B5AE;
  --vt-ink-mute:     #6B7A72;
  --vt-ink-invert:   #060A08;

  /* --- Typefaces -------------------------------------------------------- */
  --vt-font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --vt-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --vt-font-mono:    ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  /* --- Type scale (fluid, 360px → 1600px viewport) ---------------------- */
  --vt-t-xs:   clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
  --vt-t-sm:   clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --vt-t-base: clamp(0.9375rem, 0.91rem + 0.15vw, 1.0625rem);
  --vt-t-md:   clamp(1.0625rem, 1.01rem + 0.25vw, 1.25rem);
  --vt-t-lg:   clamp(1.25rem, 1.14rem + 0.5vw, 1.625rem);
  --vt-t-xl:   clamp(1.5rem, 1.28rem + 0.98vw, 2.25rem);
  --vt-t-2xl:  clamp(1.875rem, 1.48rem + 1.76vw, 3.25rem);
  --vt-t-3xl:  clamp(2.375rem, 1.66rem + 3.17vw, 4.75rem);
  --vt-t-4xl:  clamp(2.75rem, 1.51rem + 5.51vw, 7rem);

  /* --- Line height ------------------------------------------------------ */
  --vt-lh-tight: 1.02;
  --vt-lh-snug:  1.16;
  --vt-lh-base:  1.62;
  --vt-lh-loose: 1.75;

  /* --- Letter spacing --------------------------------------------------- */
  --vt-ls-display: -0.035em;
  --vt-ls-tight:   -0.018em;
  --vt-ls-normal:  0;
  --vt-ls-wide:    0.06em;
  --vt-ls-caps:    0.14em;

  /* --- Space (8px base, fluid at the top end) --------------------------- */
  --vt-s-1:  0.25rem;
  --vt-s-2:  0.5rem;
  --vt-s-3:  0.75rem;
  --vt-s-4:  1rem;
  --vt-s-5:  1.5rem;
  --vt-s-6:  2rem;
  --vt-s-7:  3rem;
  --vt-s-8:  4rem;
  --vt-s-9:  clamp(4rem, 3rem + 4vw, 6.5rem);
  --vt-s-10: clamp(5rem, 3.5rem + 6vw, 9rem);
  --vt-s-11: clamp(6rem, 4rem + 8vw, 12rem);

  /* --- Layout ----------------------------------------------------------- */
  --vt-max:        1440px;
  --vt-max-text:   68ch;   /* English measure. German narrows this below.   */
  --vt-gutter:     clamp(1.25rem, 0.7rem + 2.4vw, 3.5rem);
  --vt-col-gap:    clamp(1.5rem, 1rem + 2vw, 3rem);
  --vt-nav-h:      76px;

  /* --- Radii ------------------------------------------------------------ */
  --vt-r-sm:  4px;
  --vt-r-md:  8px;
  --vt-r-lg:  14px;
  --vt-r-xl:  22px;
  --vt-r-pill: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --vt-shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --vt-shadow-2: 0 8px 24px -8px rgba(0,0,0,.6);
  --vt-shadow-3: 0 24px 64px -16px rgba(0,0,0,.7);
  --vt-glow:     0 0 0 1px var(--vt-signal-edge), 0 0 32px -8px rgba(125,242,91,.35);

  /* --- Motion ----------------------------------------------------------- */
  --vt-dur-1: 140ms;
  --vt-dur-2: 260ms;
  --vt-dur-3: 480ms;
  --vt-dur-4: 900ms;
  --vt-ease:        cubic-bezier(.4, 0, .2, 1);
  --vt-ease-out:    cubic-bezier(.16, 1, .3, 1);      /* the workhorse      */
  --vt-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --vt-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* --- Layers ------------------------------------------------------------ */
  --vt-z-base: 1;
  --vt-z-media: 5;
  --vt-z-sticky: 50;
  --vt-z-nav: 100;
  --vt-z-menu: 200;
  --vt-z-modal: 300;
  --vt-z-consent: 400;

  /* --- Scrim gradients used over key visuals ---------------------------- */
  --vt-scrim-bottom: linear-gradient(to top, var(--vt-base) 0%, rgba(10,15,13,.86) 26%, rgba(10,15,13,.34) 62%, rgba(10,15,13,0) 100%);
  --vt-scrim-left:   linear-gradient(to right, rgba(6,10,8,.92) 0%, rgba(6,10,8,.55) 45%, rgba(6,10,8,0) 85%);
  --vt-scrim-full:   linear-gradient(180deg, rgba(6,10,8,.55) 0%, rgba(6,10,8,.25) 40%, rgba(6,10,8,.9) 100%);
}

/* --------------------------------------------------------------------------
   1b. German adjustments
   German runs roughly 30% longer than English and builds long compounds
   (Brandrisikomanagement, Bodenfeuchtemessung). Headlines need more room,
   body text needs a shorter measure, and hyphenation must be on.
   -------------------------------------------------------------------------- */

:root:lang(de),
[lang="de"] {
  --vt-t-3xl: clamp(2rem, 1.42rem + 2.6vw, 3.9rem);
  --vt-t-4xl: clamp(2.25rem, 1.3rem + 4.3vw, 5.6rem);
  --vt-ls-display: -0.028em;
  --vt-max-text: 62ch;
}

[lang="de"] h1,
[lang="de"] h2,
[lang="de"] h3,
[lang="de"] .vt-display,
[lang="de"] .vt-h1,
[lang="de"] .vt-h2 {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  overflow-wrap: break-word;
}

[lang="de"] p,
[lang="de"] li {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}

[lang="de"] q { quotes: "\201E" "\201C" "\201A" "\2018"; }
[lang="en"] q { quotes: "\201C" "\201D" "\2018" "\2019"; }

/* ==========================================================================
   2. RESET
   ========================================================================== */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--vt-nav-h) + var(--vt-s-5));
  -moz-tab-size: 2;
  tab-size: 2;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--vt-base);
  color: var(--vt-ink);
  font-family: var(--vt-font-body);
  font-size: var(--vt-t-base);
  line-height: var(--vt-lh-base);
  font-weight: 400;
  letter-spacing: var(--vt-ls-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "tnum" 0;
  overflow-x: hidden;
}

img, svg, video, canvas, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: none; cursor: pointer; }

ul[role="list"], ol[role="list"] { list-style: none; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--vt-signal); color: var(--vt-ink-invert); }

:target { scroll-margin-top: calc(var(--vt-nav-h) + var(--vt-s-6)); }

/* Focus: visible, on-brand, and never removed. */
:focus-visible {
  outline: 2px solid var(--vt-signal);
  outline-offset: 3px;
  border-radius: var(--vt-r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Skip link for keyboard and screen reader users. */
.vt-skip {
  position: absolute;
  left: var(--vt-s-4);
  top: -100%;
  z-index: var(--vt-z-modal);
  padding: var(--vt-s-3) var(--vt-s-5);
  background: var(--vt-signal);
  color: var(--vt-ink-invert);
  font-weight: 600;
  border-radius: var(--vt-r-md);
  transition: top var(--vt-dur-2) var(--vt-ease-out);
}
.vt-skip:focus { top: var(--vt-s-4); }

/* Custom scrollbar, Firefox and WebKit. */
html { scrollbar-color: var(--vt-line-strong) var(--vt-base); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--vt-base); }
::-webkit-scrollbar-thumb {
  background: var(--vt-line-strong);
  border-radius: var(--vt-r-pill);
  border: 2px solid var(--vt-base);
}
::-webkit-scrollbar-thumb:hover { background: var(--vt-signal-deep); }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.vt-shell { width: 100%; overflow-x: clip; }

.vt-container {
  width: 100%;
  max-width: var(--vt-max);
  margin-inline: auto;
  padding-inline: var(--vt-gutter);
}
.vt-container--narrow { max-width: 960px; }
.vt-container--wide   { max-width: 1680px; }
.vt-container--flush  { padding-inline: 0; }

.vt-section { padding-block: var(--vt-s-10); position: relative; }
.vt-section--tight { padding-block: var(--vt-s-8); }
.vt-section--loose { padding-block: var(--vt-s-11); }
.vt-section--flush-top { padding-block-start: 0; }

.vt-section--raised { background: var(--vt-surface-1); }
.vt-section--black  { background: var(--vt-black); }

/* Hairline rule that fades at both ends. */
.vt-rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--vt-line-strong) 18%, var(--vt-line-strong) 82%, transparent);
}

.vt-grid { display: grid; gap: var(--vt-col-gap); }
.vt-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.vt-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.vt-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.vt-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(280px,100%), 1fr)); }

@media (max-width: 1024px) {
  .vt-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vt-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .vt-grid--2, .vt-grid--3, .vt-grid--4 { grid-template-columns: 1fr; }
}

.vt-stack > * + * { margin-block-start: var(--vt-s-4); }
.vt-stack--lg > * + * { margin-block-start: var(--vt-s-6); }
.vt-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-s-3);
  align-items: center;
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

.vt-display,
.vt-h1, .vt-h2, .vt-h3, .vt-h4,
h1, h2, h3, h4 {
  font-family: var(--vt-font-display);
  font-weight: 600;
  line-height: var(--vt-lh-snug);
  letter-spacing: var(--vt-ls-tight);
  text-wrap: balance;
}

/* The oversized uppercase statement headline. */
.vt-display {
  font-size: var(--vt-t-4xl);
  line-height: var(--vt-lh-tight);
  letter-spacing: var(--vt-ls-display);
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;
}

.vt-h1, h1 { font-size: var(--vt-t-3xl); line-height: 1.06; letter-spacing: var(--vt-ls-display); }
.vt-h2, h2 { font-size: var(--vt-t-2xl); }
.vt-h3, h3 { font-size: var(--vt-t-xl); }
.vt-h4, h4 { font-size: var(--vt-t-lg); }

.vt-lead {
  font-size: var(--vt-t-md);
  line-height: var(--vt-lh-loose);
  color: var(--vt-ink-soft);
  max-width: var(--vt-max-text);
  text-wrap: pretty;
}

.vt-body { max-width: var(--vt-max-text); text-wrap: pretty; }
.vt-body p + p { margin-block-start: var(--vt-s-4); }

.vt-small { font-size: var(--vt-t-sm); }
.vt-fine  { font-size: var(--vt-t-xs); color: var(--vt-ink-mute); line-height: 1.5; }

/* Section eyebrow: small, tracked-out, with a leading signal tick. */
.vt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-s-3);
  font-family: var(--vt-font-mono);
  font-size: var(--vt-t-xs);
  font-weight: 500;
  letter-spacing: var(--vt-ls-caps);
  text-transform: uppercase;
  color: var(--vt-signal);
  margin-block-end: var(--vt-s-4);
}
.vt-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  flex: none;
}
.vt-eyebrow--plain::before { display: none; }
.vt-eyebrow--mute { color: var(--vt-ink-mute); }

/* Numeric and sensor readouts. Tabular figures so columns align. */
.vt-mono {
  font-family: var(--vt-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: 0;
}

.vt-ink-soft { color: var(--vt-ink-soft); }
.vt-ink-mute { color: var(--vt-ink-mute); }
.vt-signal   { color: var(--vt-signal); }
.vt-ember    { color: var(--vt-ember); }

/* Word set in the signal colour inside a headline. */
.vt-mark {
  color: var(--vt-signal);
  font-style: normal;
}

/* Headline word with an animated underline trace. */
.vt-trace {
  position: relative;
  display: inline-block;
  color: var(--vt-signal);
}
.vt-trace::after {
  content: "";
  position: absolute;
  left: 0; bottom: .06em;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  animation: vt-trace-in var(--vt-dur-4) var(--vt-ease-out) .3s forwards;
}

/* Ordered spec list, numbered in mono. */
.vt-speclist { list-style: none; counter-reset: spec; }
.vt-speclist > li {
  counter-increment: spec;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--vt-s-4);
  padding-block: var(--vt-s-5);
  border-block-start: 1px solid var(--vt-line);
}
.vt-speclist > li::before {
  content: counter(spec, decimal-leading-zero);
  font-family: var(--vt-font-mono);
  font-size: var(--vt-t-sm);
  color: var(--vt-signal);
  letter-spacing: var(--vt-ls-wide);
  padding-block-start: .2em;
}

/* Footnote marker and citation block, for referencing sources inline. */
.vt-ref {
  font-family: var(--vt-font-mono);
  font-size: .72em;
  vertical-align: super;
  color: var(--vt-signal);
  margin-inline-start: .15em;
}
.vt-citation {
  border-inline-start: 2px solid var(--vt-line-strong);
  padding-inline-start: var(--vt-s-4);
  font-size: var(--vt-t-sm);
  color: var(--vt-ink-mute);
  line-height: 1.55;
}
.vt-citation cite { font-style: normal; color: var(--vt-ink-soft); }

/* ==========================================================================
   5. BUTTONS AND LINKS
   ========================================================================== */

.vt-btn {
  --btn-bg: transparent;
  --btn-fg: var(--vt-ink);
  --btn-bd: var(--vt-line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vt-s-3);
  padding: 0.9em 1.6em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--vt-r-pill);
  font-family: var(--vt-font-display);
  font-size: var(--vt-t-sm);
  font-weight: 500;
  letter-spacing: var(--vt-ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    color var(--vt-dur-2) var(--vt-ease),
    border-color var(--vt-dur-2) var(--vt-ease),
    transform var(--vt-dur-2) var(--vt-ease-out);
}

/* Fill sweeps in from the left on hover. */
.vt-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vt-signal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--vt-dur-3) var(--vt-ease-out);
}
.vt-btn:hover::before,
.vt-btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.vt-btn:hover, .vt-btn:focus-visible { color: var(--vt-ink-invert); border-color: var(--vt-signal); }
.vt-btn:active { transform: translateY(1px); }

.vt-btn--primary { --btn-bg: var(--vt-signal); --btn-fg: var(--vt-ink-invert); --btn-bd: var(--vt-signal); }
.vt-btn--primary::before { background: var(--vt-ink); }
.vt-btn--primary:hover, .vt-btn--primary:focus-visible { color: var(--vt-signal); border-color: var(--vt-ink); }

.vt-btn--ghost { --btn-bd: transparent; padding-inline: 0; border-radius: 0; }
.vt-btn--ghost::before { display: none; }
.vt-btn--ghost:hover { color: var(--vt-signal); border-color: transparent; }

.vt-btn--lg { padding: 1.05em 2.1em; font-size: var(--vt-t-base); }
.vt-btn--sm { padding: 0.7em 1.2em; font-size: var(--vt-t-xs); }
.vt-btn--block { display: flex; width: 100%; }

/* Label swap on hover: the current label rolls up, a duplicate rolls in.
   Markup: <a class="vt-btn vt-btn--swap"><span data-label="Mehr">Mehr</span></a> */
.vt-btn--swap span {
  position: relative;
  display: block;
  overflow: hidden;
}
.vt-btn--swap span::after {
  content: attr(data-label);
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  width: 100%;
}
.vt-btn--swap span > * ,
.vt-btn--swap span::after {
  transition: transform var(--vt-dur-3) var(--vt-ease-out);
}
.vt-btn--swap:hover span { color: transparent; }
.vt-btn--swap:hover span::after { transform: translateY(-100%); color: var(--vt-ink-invert); }

/* Arrow link. The arrow travels on hover. */
.vt-link {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-s-2);
  color: var(--vt-signal);
  font-weight: 500;
  border-block-end: 1px solid transparent;
  transition: border-color var(--vt-dur-2) var(--vt-ease);
}
.vt-link::after {
  content: "→";
  display: inline-block;
  transition: transform var(--vt-dur-2) var(--vt-ease-out);
}
.vt-link:hover { border-block-end-color: currentColor; }
.vt-link:hover::after { transform: translateX(4px); }

/* Inline text link inside body copy. */
.vt-a {
  color: var(--vt-signal);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--vt-dur-2) var(--vt-ease-out);
}
.vt-a:hover { background-size: 100% 1px; }

/* ==========================================================================
   6. BADGES, PILLS AND STATUS
   ========================================================================== */

.vt-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-s-2);
  padding: 0.4em 0.9em;
  border: 1px solid var(--vt-line-strong);
  border-radius: var(--vt-r-pill);
  font-family: var(--vt-font-mono);
  font-size: var(--vt-t-xs);
  letter-spacing: var(--vt-ls-wide);
  text-transform: uppercase;
  color: var(--vt-ink-soft);
  background: var(--vt-surface-1);
}
.vt-pill--signal { color: var(--vt-signal); border-color: var(--vt-signal-edge); background: var(--vt-signal-wash); }
.vt-pill--ember  { color: var(--vt-ember);  border-color: var(--vt-ember-dim);  background: var(--vt-ember-wash); }

/* Live dot, for anything streaming. */
.vt-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--vt-signal);
  flex: none;
  box-shadow: 0 0 0 0 var(--vt-signal-edge);
  animation: vt-pulse 2.4s var(--vt-ease-in-out) infinite;
}
.vt-dot--ember { background: var(--vt-ember); }

/* Evidence badge. Use it to label the maturity of a statement, so a claim
   and its status travel together. Levels: established, evaluation, target. */
.vt-evidence {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-s-2);
  padding: 0.25em 0.7em;
  border-radius: var(--vt-r-sm);
  font-family: var(--vt-font-mono);
  font-size: var(--vt-t-xs);
  letter-spacing: var(--vt-ls-wide);
  text-transform: uppercase;
  border: 1px solid;
}
.vt-evidence--established { color: var(--vt-signal); border-color: var(--vt-signal-edge); background: var(--vt-signal-wash); }
.vt-evidence--evaluation  { color: var(--vt-amber);  border-color: rgba(245,166,35,.3); background: rgba(245,166,35,.08); }
.vt-evidence--target      { color: var(--vt-ink-mute); border-color: var(--vt-line-strong); background: transparent; }

/* ==========================================================================
   7. NAVIGATION
   ========================================================================== */

.vt-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--vt-z-nav);
  height: var(--vt-nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition:
    background var(--vt-dur-3) var(--vt-ease),
    border-color var(--vt-dur-3) var(--vt-ease),
    backdrop-filter var(--vt-dur-3) var(--vt-ease);
  border-block-end: 1px solid transparent;
}
/* Add .is-stuck with JS on scroll past the hero. */
.vt-nav.is-stuck {
  background: rgba(10,15,13,.82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-block-end-color: var(--vt-line);
}

.vt-nav__inner {
  width: 100%;
  max-width: var(--vt-max);
  margin-inline: auto;
  padding-inline: var(--vt-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-s-6);
}

.vt-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-s-3);
  font-family: var(--vt-font-display);
  font-weight: 700;
  font-size: var(--vt-t-md);
  letter-spacing: var(--vt-ls-tight);
  color: var(--vt-ink);
}
.vt-logo__mark { width: 30px; height: 30px; flex: none; color: var(--vt-signal); }
.vt-logo__ai { color: var(--vt-signal); }

.vt-nav__links {
  display: flex;
  align-items: center;
  gap: var(--vt-s-6);
  list-style: none;
}
.vt-nav__link {
  position: relative;
  font-family: var(--vt-font-display);
  font-size: var(--vt-t-sm);
  font-weight: 500;
  letter-spacing: var(--vt-ls-wide);
  text-transform: uppercase;
  color: var(--vt-ink-soft);
  padding-block: var(--vt-s-2);
  transition: color var(--vt-dur-2) var(--vt-ease);
}
.vt-nav__link::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 100%; height: 1px;
  background: var(--vt-signal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--vt-dur-2) var(--vt-ease-out);
}
.vt-nav__link:hover, .vt-nav__link[aria-current="page"] { color: var(--vt-ink); }
.vt-nav__link:hover::after,
.vt-nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* Language switch. Mark the active one with aria-current="true". */
.vt-lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--vt-line-strong);
  border-radius: var(--vt-r-pill);
  overflow: hidden;
}
.vt-lang a {
  padding: 0.35em 0.8em;
  font-family: var(--vt-font-mono);
  font-size: var(--vt-t-xs);
  letter-spacing: var(--vt-ls-wide);
  text-transform: uppercase;
  color: var(--vt-ink-mute);
  transition: background var(--vt-dur-2) var(--vt-ease), color var(--vt-dur-2) var(--vt-ease);
}
.vt-lang a:hover { color: var(--vt-ink); }
.vt-lang a[aria-current="true"] { background: var(--vt-signal); color: var(--vt-ink-invert); font-weight: 600; }

/* Burger, three lines that fold into a cross. */
.vt-burger {
  display: none;
  width: 40px; height: 40px;
  position: relative;
  flex: none;
}
.vt-burger span {
  position: absolute;
  left: 9px;
  width: 22px; height: 1.5px;
  background: var(--vt-ink);
  transition: transform var(--vt-dur-3) var(--vt-ease-out), opacity var(--vt-dur-2) var(--vt-ease);
}
.vt-burger span:nth-child(1) { top: 14px; }
.vt-burger span:nth-child(2) { top: 20px; }
.vt-burger span:nth-child(3) { top: 26px; }
.vt-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.vt-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vt-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.vt-menu {
  position: fixed;
  inset: 0;
  z-index: var(--vt-z-menu);
  background: var(--vt-black);
  padding: calc(var(--vt-nav-h) + var(--vt-s-7)) var(--vt-gutter) var(--vt-s-7);
  display: flex;
  flex-direction: column;
  gap: var(--vt-s-5);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--vt-dur-4) var(--vt-ease-out);
  overflow-y: auto;
}
.vt-menu[data-open="true"] { clip-path: inset(0 0 0 0); }
.vt-menu a {
  font-family: var(--vt-font-display);
  font-size: var(--vt-t-2xl);
  font-weight: 600;
  letter-spacing: var(--vt-ls-display);
  text-transform: uppercase;
  border-block-end: 1px solid var(--vt-line);
  padding-block-end: var(--vt-s-4);
  opacity: 0;
  transform: translateY(20px);
}
.vt-menu[data-open="true"] a {
  animation: vt-rise var(--vt-dur-3) var(--vt-ease-out) forwards;
}
.vt-menu[data-open="true"] a:nth-child(1) { animation-delay: 120ms; }
.vt-menu[data-open="true"] a:nth-child(2) { animation-delay: 180ms; }
.vt-menu[data-open="true"] a:nth-child(3) { animation-delay: 240ms; }
.vt-menu[data-open="true"] a:nth-child(4) { animation-delay: 300ms; }
.vt-menu[data-open="true"] a:nth-child(5) { animation-delay: 360ms; }

@media (max-width: 900px) {
  .vt-nav__links { display: none; }
  .vt-burger { display: block; }
}

/* ==========================================================================
   8. HERO
   ========================================================================== */

.vt-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding-block: calc(var(--vt-nav-h) + var(--vt-s-8)) var(--vt-s-9);
  overflow: hidden;
  isolation: isolate;
}

.vt-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.vt-hero__media img,
.vt-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slow drift so a still image feels alive. */
  animation: vt-kenburns 26s var(--vt-ease-in-out) infinite alternate;
}
.vt-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vt-scrim-full);
}
/* Faint scanline texture, reads as instrumentation rather than decoration. */
.vt-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(0deg, rgba(125,242,91,.04) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: .5;
}

.vt-hero__body { max-width: min(100%, 920px); }
.vt-hero .vt-lead { margin-block-start: var(--vt-s-5); max-width: 54ch; }
.vt-hero__actions { margin-block-start: var(--vt-s-7); }

/* Scroll cue at the foot of the hero. */
.vt-scrollcue {
  position: absolute;
  inset-inline-end: var(--vt-gutter);
  inset-block-end: var(--vt-s-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vt-s-3);
  font-family: var(--vt-font-mono);
  font-size: var(--vt-t-xs);
  letter-spacing: var(--vt-ls-caps);
  text-transform: uppercase;
  color: var(--vt-ink-mute);
  writing-mode: vertical-rl;
}
.vt-scrollcue::after {
  content: "";
  width: 1px; height: 56px;
  background: linear-gradient(var(--vt-signal), transparent);
  animation: vt-drop 2.2s var(--vt-ease-in-out) infinite;
}

/* ==========================================================================
   9. SPLIT MEDIA SECTIONS
   The signature layout: a sticky visual on one side, content scrolling past.
   ========================================================================== */

.vt-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0;
  align-items: stretch;
  min-height: 88svh;
}
.vt-split--reverse .vt-split__media { order: 2; }

.vt-split__media {
  position: relative;
  overflow: hidden;
  min-height: 60svh;
}
.vt-split__media img,
.vt-split__media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform var(--vt-dur-4) var(--vt-ease-out);
}
.vt-split:hover .vt-split__media img { transform: scale(1); }
.vt-split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,10,8,.25), rgba(6,10,8,.65));
}

/* Caption plate sitting over the media. */
.vt-split__caption {
  position: absolute;
  z-index: var(--vt-z-media);
  inset-block-end: var(--vt-s-5);
  inset-inline-start: var(--vt-s-5);
  padding: var(--vt-s-3) var(--vt-s-4);
  background: rgba(6,10,8,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--vt-line);
  border-radius: var(--vt-r-md);
  font-family: var(--vt-font-mono);
  font-size: var(--vt-t-xs);
  color: var(--vt-ink-soft);
  letter-spacing: var(--vt-ls-wide);
  max-width: 34ch;
}

.vt-split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--vt-s-9) clamp(1.5rem, 1rem + 4vw, 5rem);
  background: var(--vt-surface-1);
}
.vt-split--onblack .vt-split__body { background: var(--vt-black); }

/* Sticky variant: media pins while the copy column scrolls. */
.vt-split--sticky { align-items: start; }
.vt-split--sticky .vt-split__media {
  position: sticky;
  top: 0;
  height: 100svh;
}

@media (max-width: 860px) {
  .vt-split { grid-template-columns: 1fr; min-height: 0; }
  .vt-split--reverse .vt-split__media { order: 0; }
  .vt-split__media { min-height: 56svh; }
  .vt-split--sticky .vt-split__media { position: relative; height: 56svh; }
  .vt-split__body { padding-block: var(--vt-s-8); }
}

/* ==========================================================================
   10. CARDS
   ========================================================================== */

.vt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--vt-surface-2);
  border: 1px solid var(--vt-line);
  border-radius: var(--vt-r-lg);
  padding: var(--vt-s-6);
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color var(--vt-dur-2) var(--vt-ease),
    background var(--vt-dur-2) var(--vt-ease),
    transform var(--vt-dur-3) var(--vt-ease-out);
}
/* Signal wash follows the pointer. Set --mx/--my in JS for the full effect. */
.vt-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), var(--vt-signal-wash), transparent 65%);
  opacity: 0;
  transition: opacity var(--vt-dur-3) var(--vt-ease);
}
.vt-card:hover {
  border-color: var(--vt-signal-edge);
  background: var(--vt-surface-3);
  transform: translateY(-3px);
}
.vt-card:hover::before { opacity: 1; }

.vt-card__icon {
  width: 40px; height: 40px;
  color: var(--vt-signal);
  margin-block-end: var(--vt-s-5);
}
.vt-card__title { font-size: var(--vt-t-lg); margin-block-end: var(--vt-s-3); }
.vt-card__text { color: var(--vt-ink-soft); font-size: var(--vt-t-sm); }
.vt-card__foot { margin-block-start: auto; padding-block-start: var(--vt-s-5); }

/* Media card: image top, content below, whole thing clickable. */
.vt-mediacard {
  position: relative;
  display: block;
  border-radius: var(--vt-r-lg);
  overflow: hidden;
  background: var(--vt-surface-2);
  border: 1px solid var(--vt-line);
  transition: border-color var(--vt-dur-2) var(--vt-ease), transform var(--vt-dur-3) var(--vt-ease-out);
}
.vt-mediacard:hover { border-color: var(--vt-signal-edge); transform: translateY(-3px); }
.vt-mediacard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.vt-mediacard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--vt-dur-4) var(--vt-ease-out), filter var(--vt-dur-3) var(--vt-ease);
  filter: saturate(.85) contrast(1.05);
}
.vt-mediacard:hover .vt-mediacard__media img { transform: scale(1.05); filter: saturate(1) contrast(1.05); }
.vt-mediacard__media::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--vt-scrim-bottom);
  opacity: .9;
}
.vt-mediacard__label {
  position: absolute;
  z-index: 2;
  inset-block-end: var(--vt-s-4);
  inset-inline-start: var(--vt-s-5);
  font-family: var(--vt-font-display);
  font-size: var(--vt-t-lg);
  font-weight: 600;
  letter-spacing: var(--vt-ls-tight);
}
.vt-mediacard__body { padding: var(--vt-s-5); }
.vt-mediacard__body p { color: var(--vt-ink-soft); font-size: var(--vt-t-sm); }

/* Segment tile: full-bleed image, text overlay, expands on hover. */
.vt-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 380px;
  padding: var(--vt-s-6);
  border-radius: var(--vt-r-lg);
  overflow: hidden;
  isolation: isolate;
}
.vt-tile img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--vt-dur-4) var(--vt-ease-out);
}
.vt-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vt-scrim-bottom);
  transition: opacity var(--vt-dur-3) var(--vt-ease);
}
.vt-tile:hover img { transform: scale(1.06); }
.vt-tile__title {
  font-size: var(--vt-t-xl);
  text-transform: uppercase;
  letter-spacing: var(--vt-ls-tight);
}
.vt-tile__text {
  color: var(--vt-ink-soft);
  font-size: var(--vt-t-sm);
  max-width: 40ch;
  margin-block-start: var(--vt-s-2);
  /* Revealed on hover on pointer devices; always visible on touch. */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--vt-dur-3) var(--vt-ease-out), opacity var(--vt-dur-2) var(--vt-ease), margin var(--vt-dur-3) var(--vt-ease-out);
}
@media (hover: hover) {
  .vt-tile:hover .vt-tile__text,
  .vt-tile:focus-within .vt-tile__text { max-height: 12em; opacity: 1; }
}
@media (hover: none) {
  .vt-tile__text { max-height: none; opacity: 1; }
}

/* ==========================================================================
   11. DATA AND METRICS
   ========================================================================== */

.vt-stat { border-block-start: 1px solid var(--vt-line); padding-block-start: var(--vt-s-5); }
.vt-stat__value {
  font-family: var(--vt-font-display);
  font-size: var(--vt-t-2xl);
  font-weight: 700;
  letter-spacing: var(--vt-ls-display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--vt-ink);
}
.vt-stat__value--signal { color: var(--vt-signal); }
.vt-stat__value--ember  { color: var(--vt-ember); }
.vt-stat__unit { font-size: .5em; color: var(--vt-ink-mute); margin-inline-start: .25em; }
.vt-stat__label {
  margin-block-start: var(--vt-s-3);
  font-size: var(--vt-t-sm);
  color: var(--vt-ink-soft);
  max-width: 32ch;
}
.vt-stat__note { margin-block-start: var(--vt-s-2); }

/* Sensor readout panel. */
.vt-readout {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--vt-s-3) var(--vt-s-4);
  align-items: center;
  padding: var(--vt-s-4) var(--vt-s-5);
  background: var(--vt-black);
  border: 1px solid var(--vt-line);
  border-radius: var(--vt-r-md);
  font-family: var(--vt-font-mono);
  font-size: var(--vt-t-sm);
}
.vt-readout__key { color: var(--vt-ink-mute); letter-spacing: var(--vt-ls-wide); text-transform: uppercase; font-size: var(--vt-t-xs); }
.vt-readout__val { color: var(--vt-signal); font-variant-numeric: tabular-nums; text-align: end; }

/* Data table. */
.vt-table { font-size: var(--vt-t-sm); }
.vt-table th {
  text-align: start;
  font-family: var(--vt-font-mono);
  font-size: var(--vt-t-xs);
  font-weight: 500;
  letter-spacing: var(--vt-ls-wide);
  text-transform: uppercase;
  color: var(--vt-ink-mute);
  padding: var(--vt-s-3) var(--vt-s-4);
  border-block-end: 1px solid var(--vt-line-strong);
}
.vt-table td {
  padding: var(--vt-s-4);
  border-block-end: 1px solid var(--vt-line);
  color: var(--vt-ink-soft);
  vertical-align: top;
}
.vt-table tr:hover td { background: var(--vt-surface-1); color: var(--vt-ink); }
.vt-table td:first-child { color: var(--vt-ink); font-weight: 500; }
.vt-table--num td { font-variant-numeric: tabular-nums; font-family: var(--vt-font-mono); }

/* Signal trace divider. Pair with an inline SVG polyline. */
.vt-trace-line {
  width: 100%;
  height: 64px;
  overflow: hidden;
  color: var(--vt-signal);
  opacity: .5;
}
.vt-trace-line svg { width: 100%; height: 100%; }
.vt-trace-line path,
.vt-trace-line polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: vt-draw 4s var(--vt-ease-out) forwards;
}

/* ==========================================================================
   12. TABS AND ACCORDION
   ========================================================================== */

.vt-tabs { display: block; }

.vt-tabs__list {
  display: flex;
  gap: var(--vt-s-2);
  flex-wrap: wrap;
  border-block-end: 1px solid var(--vt-line);
  margin-block-end: var(--vt-s-7);
}
.vt-tabs__tab {
  position: relative;
  padding: var(--vt-s-4) var(--vt-s-5);
  font-family: var(--vt-font-display);
  font-size: var(--vt-t-sm);
  font-weight: 500;
  letter-spacing: var(--vt-ls-wide);
  text-transform: uppercase;
  color: var(--vt-ink-mute);
  transition: color var(--vt-dur-2) var(--vt-ease);
}
.vt-tabs__tab::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 2px;
  background: var(--vt-signal);
  transform: scaleX(0);
  transition: transform var(--vt-dur-3) var(--vt-ease-out);
}
.vt-tabs__tab:hover { color: var(--vt-ink-soft); }
.vt-tabs__tab[aria-selected="true"] { color: var(--vt-signal); }
.vt-tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
.vt-tabs__panel[hidden] { display: none; }
.vt-tabs__panel { animation: vt-fade var(--vt-dur-3) var(--vt-ease-out); }

.vt-acc__item { border-block-end: 1px solid var(--vt-line); }
.vt-acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-s-4);
  padding-block: var(--vt-s-5);
  text-align: start;
  font-family: var(--vt-font-display);
  font-size: var(--vt-t-md);
  font-weight: 500;
  color: var(--vt-ink);
  transition: color var(--vt-dur-2) var(--vt-ease);
}
.vt-acc__trigger:hover { color: var(--vt-signal); }
.vt-acc__icon {
  width: 20px; height: 20px;
  flex: none;
  position: relative;
}
.vt-acc__icon::before,
.vt-acc__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform var(--vt-dur-3) var(--vt-ease-out);
}
.vt-acc__icon::after { transform: rotate(90deg); }
.vt-acc__trigger[aria-expanded="true"] .vt-acc__icon::after { transform: rotate(0deg); }
.vt-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--vt-dur-3) var(--vt-ease-out);
}
.vt-acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.vt-acc__panel > div { overflow: hidden; }
.vt-acc__panel p { padding-block-end: var(--vt-s-5); color: var(--vt-ink-soft); max-width: var(--vt-max-text); }

/* ==========================================================================
   13. MARQUEE AND LOGO STRIP
   ========================================================================== */

.vt-marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--vt-s-5);
  border-block: 1px solid var(--vt-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.vt-marquee__track {
  display: flex;
  gap: var(--vt-s-8);
  width: max-content;
  animation: vt-marquee 42s linear infinite;
}
.vt-marquee:hover .vt-marquee__track { animation-play-state: paused; }
.vt-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-s-3);
  font-family: var(--vt-font-display);
  font-size: var(--vt-t-2xl);
  font-weight: 600;
  letter-spacing: var(--vt-ls-display);
  text-transform: uppercase;
  color: var(--vt-ink-mute);
  white-space: nowrap;
}
.vt-marquee__item span { color: var(--vt-signal); }

.vt-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--vt-s-7);
}
.vt-logos img {
  height: 34px;
  width: auto;
  opacity: .55;
  filter: grayscale(1) brightness(1.6);
  transition: opacity var(--vt-dur-2) var(--vt-ease), filter var(--vt-dur-2) var(--vt-ease);
}
.vt-logos img:hover { opacity: 1; filter: grayscale(0) brightness(1); }

/* ==========================================================================
   14. FORMS
   ========================================================================== */

.vt-field { display: flex; flex-direction: column; gap: var(--vt-s-2); }
.vt-label {
  font-family: var(--vt-font-mono);
  font-size: var(--vt-t-xs);
  letter-spacing: var(--vt-ls-wide);
  text-transform: uppercase;
  color: var(--vt-ink-mute);
}
.vt-input, .vt-textarea, .vt-select {
  width: 100%;
  padding: 0.85em 1em;
  background: var(--vt-black);
  color: var(--vt-ink);
  border: 1px solid var(--vt-line-strong);
  border-radius: var(--vt-r-md);
  font-size: var(--vt-t-base);
  transition: border-color var(--vt-dur-2) var(--vt-ease), box-shadow var(--vt-dur-2) var(--vt-ease);
}
.vt-input::placeholder, .vt-textarea::placeholder { color: var(--vt-ink-mute); }
.vt-input:focus, .vt-textarea:focus, .vt-select:focus {
  outline: none;
  border-color: var(--vt-signal);
  box-shadow: 0 0 0 3px var(--vt-signal-wash);
}
.vt-textarea { min-height: 9rem; resize: vertical; }
.vt-input:user-invalid, .vt-textarea:user-invalid { border-color: var(--vt-ember); }

/* Consent checkbox. German sites need explicit, unticked consent. */
.vt-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--vt-s-3);
  align-items: start;
  font-size: var(--vt-t-sm);
  color: var(--vt-ink-soft);
}
.vt-consent input[type="checkbox"] {
  appearance: none;
  width: 20px; height: 20px;
  margin-block-start: .15em;
  border: 1px solid var(--vt-line-strong);
  border-radius: var(--vt-r-sm);
  background: var(--vt-black);
  cursor: pointer;
  position: relative;
  flex: none;
  transition: background var(--vt-dur-2) var(--vt-ease), border-color var(--vt-dur-2) var(--vt-ease);
}
.vt-consent input[type="checkbox"]:checked { background: var(--vt-signal); border-color: var(--vt-signal); }
.vt-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset-block-start: 3px; inset-inline-start: 6px;
  width: 5px; height: 10px;
  border: solid var(--vt-ink-invert);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Consent banner, bottom sheet. */
.vt-consentbar {
  position: fixed;
  inset-inline: var(--vt-s-4);
  inset-block-end: var(--vt-s-4);
  z-index: var(--vt-z-consent);
  max-width: 560px;
  margin-inline: auto;
  padding: var(--vt-s-5);
  background: var(--vt-surface-2);
  border: 1px solid var(--vt-line-strong);
  border-radius: var(--vt-r-lg);
  box-shadow: var(--vt-shadow-3);
  transform: translateY(140%);
  transition: transform var(--vt-dur-4) var(--vt-ease-out);
}
.vt-consentbar[data-open="true"] { transform: translateY(0); }

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.vt-footer {
  background: var(--vt-black);
  border-block-start: 1px solid var(--vt-line);
  padding-block: var(--vt-s-9) var(--vt-s-6);
}
.vt-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--vt-col-gap);
}
@media (max-width: 900px) { .vt-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vt-footer__grid { grid-template-columns: 1fr; } }

.vt-footer__title {
  font-family: var(--vt-font-mono);
  font-size: var(--vt-t-xs);
  letter-spacing: var(--vt-ls-caps);
  text-transform: uppercase;
  color: var(--vt-ink-mute);
  margin-block-end: var(--vt-s-4);
}
.vt-footer__list { list-style: none; display: flex; flex-direction: column; gap: var(--vt-s-3); }
.vt-footer__list a { color: var(--vt-ink-soft); font-size: var(--vt-t-sm); transition: color var(--vt-dur-2) var(--vt-ease); }
.vt-footer__list a:hover { color: var(--vt-signal); }
.vt-footer__bar {
  margin-block-start: var(--vt-s-8);
  padding-block-start: var(--vt-s-5);
  border-block-start: 1px solid var(--vt-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-s-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--vt-t-xs);
  color: var(--vt-ink-mute);
}

/* ==========================================================================
   16. ANIMATION
   Keyframes first, then the scroll-reveal system.
   ========================================================================== */

@keyframes vt-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vt-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vt-pulse {
  0%   { box-shadow: 0 0 0 0 var(--vt-signal-edge); }
  70%  { box-shadow: 0 0 0 9px rgba(125,242,91,0); }
  100% { box-shadow: 0 0 0 0 rgba(125,242,91,0); }
}
@keyframes vt-drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes vt-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes vt-trace-in {
  to { transform: scaleX(1); }
}
@keyframes vt-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes vt-kenburns {
  from { transform: scale(1) translate3d(0,0,0); }
  to   { transform: scale(1.09) translate3d(-1.5%, -1.5%, 0); }
}
@keyframes vt-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}

/* --- Scroll reveal --------------------------------------------------------
   Add .vt-reveal to any element. Toggle .is-in with an IntersectionObserver:

   const io = new IntersectionObserver((es) => es.forEach(e => {
     if (e.isIntersecting) { e.target.classList.add("is-in"); io.unobserve(e.target); }
   }), { rootMargin: "0px 0px -12% 0px", threshold: 0.12 });
   document.querySelectorAll(".vt-reveal").forEach(el => io.observe(el));
   -------------------------------------------------------------------------- */

.vt-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--vt-dur-4) var(--vt-ease-out),
    transform var(--vt-dur-4) var(--vt-ease-out);
  transition-delay: var(--vt-delay, 0ms);
  will-change: opacity, transform;
}
.vt-reveal.is-in { opacity: 1; transform: none; }

.vt-reveal--left  { transform: translateX(-32px); }
.vt-reveal--right { transform: translateX(32px); }
.vt-reveal--scale { transform: scale(.96); }
.vt-reveal--none  { transform: none; }

/* Clip-path mask wipe, good for headlines and images. */
.vt-reveal--mask {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--vt-dur-4) var(--vt-ease-out);
  transition-delay: var(--vt-delay, 0ms);
}
.vt-reveal--mask.is-in { clip-path: inset(0 0 0 0); }

/* Stagger helper: set on a parent, children inherit incremental delays. */
.vt-stagger > *:nth-child(1) { --vt-delay: 0ms; }
.vt-stagger > *:nth-child(2) { --vt-delay: 80ms; }
.vt-stagger > *:nth-child(3) { --vt-delay: 160ms; }
.vt-stagger > *:nth-child(4) { --vt-delay: 240ms; }
.vt-stagger > *:nth-child(5) { --vt-delay: 320ms; }
.vt-stagger > *:nth-child(6) { --vt-delay: 400ms; }
.vt-stagger > *:nth-child(7) { --vt-delay: 480ms; }
.vt-stagger > *:nth-child(8) { --vt-delay: 560ms; }

/* Line-by-line headline reveal. Wrap each line in <span class="vt-line"><i>…</i></span> */
.vt-line { display: block; overflow: hidden; }
.vt-line > i {
  display: block;
  font-style: normal;
  transform: translateY(105%);
  transition: transform var(--vt-dur-4) var(--vt-ease-out);
  transition-delay: var(--vt-delay, 0ms);
}
.is-in .vt-line > i,
.vt-line.is-in > i { transform: translateY(0); }

/* Signal sweep highlight, for panels that should feel like they are scanning. */
.vt-sweep { position: relative; overflow: hidden; }
.vt-sweep::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--vt-signal-wash), transparent);
  animation: vt-sweep 5.5s var(--vt-ease-in-out) infinite;
  pointer-events: none;
}

/* Scroll-driven progress bar. Modern browsers only, degrades to nothing. */
@supports (animation-timeline: scroll()) {
  .vt-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    height: 2px;
    width: 100%;
    transform-origin: left;
    background: var(--vt-signal);
    z-index: calc(var(--vt-z-nav) + 1);
    animation: vt-progress-grow linear;
    animation-timeline: scroll(root block);
  }
  @keyframes vt-progress-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  /* Parallax on hero media, no JS required. */
  .vt-parallax {
    animation: vt-parallax-shift linear;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes vt-parallax-shift {
    from { transform: translateY(-6%) scale(1.1); }
    to   { transform: translateY(6%) scale(1.1); }
  }
}

/* ==========================================================================
   17. UTILITIES
   ========================================================================== */

.vt-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.vt-hide { display: none !important; }
@media (max-width: 720px) { .vt-hide-sm { display: none !important; } }
@media (min-width: 721px) { .vt-hide-lg { display: none !important; } }

.vt-center { text-align: center; }
.vt-center .vt-lead,
.vt-center .vt-body { margin-inline: auto; }
.vt-end { text-align: end; }

.vt-mt-0 { margin-block-start: 0; }
.vt-mt-4 { margin-block-start: var(--vt-s-4); }
.vt-mt-6 { margin-block-start: var(--vt-s-6); }
.vt-mt-8 { margin-block-start: var(--vt-s-8); }
.vt-mb-4 { margin-block-end: var(--vt-s-4); }
.vt-mb-6 { margin-block-end: var(--vt-s-6); }
.vt-mb-8 { margin-block-end: var(--vt-s-8); }

.vt-full-bleed {
  width: 100vw;
  margin-inline-start: 50%;
  transform: translateX(-50%);
}

/* Image treatment that unifies stock photography into one brand look:
   slightly desaturated, cooled, with a signal-tinted lift in the shadows. */
.vt-img-brand {
  filter: saturate(.82) contrast(1.06) brightness(.94);
}
.vt-img-duotone {
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: luminosity;
}
.vt-duotone-wrap {
  position: relative;
  background: linear-gradient(145deg, var(--vt-signal-deep), var(--vt-black));
  overflow: hidden;
}

/* Aspect helpers for media slots. */
.vt-ar-16-9 { aspect-ratio: 16 / 9; }
.vt-ar-4-3  { aspect-ratio: 4 / 3; }
.vt-ar-1-1  { aspect-ratio: 1 / 1; }
.vt-ar-3-4  { aspect-ratio: 3 / 4; }
.vt-cover   { width: 100%; height: 100%; object-fit: cover; }

/* Photo credit, required by the Unsplash licence when you choose to credit. */
.vt-credit {
  font-family: var(--vt-font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--vt-ls-wide);
  color: var(--vt-ink-mute);
  opacity: .7;
}

/* ==========================================================================
   18. ACCESSIBILITY, MOTION AND PRINT
   ========================================================================== */

/* Honour the operating system setting. Everything still works, nothing moves. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .vt-reveal,
  .vt-reveal--mask,
  .vt-line > i {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .vt-hero__media img,
  .vt-hero__media video { animation: none; }
  .vt-marquee__track { animation: none; }
  .vt-sweep::after { display: none; }
}

/* Higher contrast when the user asks for it. */
@media (prefers-contrast: more) {
  :root {
    --vt-ink-soft: #D6DEDA;
    --vt-ink-mute: #9AA8A1;
    --vt-line: #3A4A43;
    --vt-line-strong: #5A6E64;
  }
  .vt-btn { border-width: 2px; }
}

/* The palette is dark by design. If a light scheme is ever needed, override
   the tokens in this block rather than rewriting components. */
@media (prefers-color-scheme: light) {
  /* Intentionally empty. VoltreeAI ships dark in both schemes. */
}

/* Forced colours mode, Windows high contrast. */
@media (forced-colors: active) {
  .vt-btn, .vt-card, .vt-input { border: 1px solid ButtonText; }
  .vt-dot { forced-color-adjust: none; }
}

@media print {
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body { font-size: 11pt; line-height: 1.4; }
  .vt-nav, .vt-menu, .vt-consentbar, .vt-scrollcue,
  .vt-marquee, .vt-burger, .vt-progress, video { display: none !important; }
  .vt-hero { min-height: 0; padding-block: 1cm; }
  .vt-split { display: block; }
  .vt-section { padding-block: 0.8cm; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  h1, h2, h3 { break-after: avoid; }
  img { max-width: 100% !important; break-inside: avoid; }
  .vt-reveal { opacity: 1 !important; transform: none !important; }
}