:root {
  --vd-violet: #9b7cff;
  --vd-lavender: #c8b8ff;
  --vd-ink: #050408;
}

html { scroll-behavior: auto; }

.vedika-cinematic-home {
  overflow-x: clip;
  background: var(--vd-ink);
}

.vedika-cinematic-home > nav {
  position: fixed !important;
  inset: 0 0 auto;
  z-index: 120 !important;
  background: linear-gradient(180deg, rgba(3, 2, 7, .94), rgba(3, 2, 7, .68)) !important;
  border-bottom: 1px solid rgba(200, 184, 255, .13);
  box-shadow: none !important;
}

.legacy-home-hero { display: none !important; }

.vedika-singularity {
  --singularity-center-x: 61%;
  --singularity-center-y: 48%;
  position: relative;
  z-index: 1;
  height: max(760px, 100svh);
  min-height: 760px;
  overflow: hidden;
  color: #fff;
  background: #020104;
  isolation: isolate;
}

#vedika-blackhole-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
}

.singularity-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Was a 95%-opaque black wash over the left 58% of the frame, sized for
     the old full-height left copy column. It blacked out exactly the region
     where the lensed nebula has to be visible, which is why the left of the
     canvas read as flat black instead of as bent smoke. The copy is smaller
     and corner-placed now, so a light scrim behind each corner is enough. */
  background:
    linear-gradient(90deg, rgba(2, 1, 4, .50) 0%, rgba(2, 1, 4, .18) 22%, transparent 44%),
    radial-gradient(circle at var(--singularity-center-x) var(--singularity-center-y), transparent 12%, rgba(2, 1, 4, .02) 40%, rgba(2, 1, 4, .32) 100%),
    linear-gradient(180deg, rgba(2, 1, 4, .28), transparent 22%, transparent 74%, rgba(2, 1, 4, .60));
}

.singularity-core {
  --core-size: clamp(94px, 10.5vw, 172px);
  position: absolute;
  z-index: 4;
  left: var(--singularity-center-x);
  top: var(--singularity-center-y);
  width: var(--core-size);
  height: var(--core-size);
  transform: translate(-50%, -50%) scale(var(--audio-scale, 1));
  display: grid;
  place-items: center;
  border-radius: 50%;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}

.singularity-core::before {
  content: "";
  position: absolute;
  inset: 2%;
  border-radius: inherit;
  background: radial-gradient(circle, #020104 0 58%, rgba(4,2,8,.94) 69%, transparent 72%);
  box-shadow: inset 0 0 22px #000, 0 0 22px rgba(218, 207, 255, .25);
}

.singularity-core img {
  position: relative;
  z-index: 2;
  width: 46%;
  height: 46%;
  object-fit: contain;
  filter: brightness(1.18) saturate(.88) drop-shadow(0 0 16px rgba(198,181,255,.54));
}

.singularity-lens {
  position: absolute;
  inset: -5%;
  border-radius: inherit;
  border: 1px solid rgba(245, 241, 255, .86);
  box-shadow:
    0 0 6px #fff,
    0 0 20px rgba(202, 188, 255, .9),
    0 0 52px rgba(132, 90, 255, .44),
    inset 0 0 18px rgba(255,255,255,.24);
  animation: lens-breathe 3.8s ease-in-out infinite;
}

@keyframes lens-breathe {
  50% { opacity: .68; transform: scale(1.035); }
}

.singularity-hud,
.singularity-status,
.singularity-sound,
.singularity-scroll,
.singularity-kicker {
  font-family: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .13em;
}

.singularity-hud {
  position: absolute;
  z-index: 6;
  left: clamp(20px, 3.4vw, 58px);
  right: clamp(20px, 3.4vw, 58px);
  top: 92px;
  display: flex;
  justify-content: space-between;
  color: rgba(234, 229, 247, .48);
  font-size: 9px;
}

/* Hero copy layout, measured off the founder's reference capture rather than
 * designed: the copy is NOT one centred left column. In every reference frame
 *   kicker + headline   sit in the TOP-left     (~13-37% of frame height)
 *   the body line       sits at the BOTTOM-left (~78-85%)
 *   the two buttons     sit at the BOTTOM-RIGHT (~85%)
 *   the scroll cue      sits bottom-centre
 * so the black hole owns the middle of the frame and nothing crowds it.
 *
 * The block therefore spans the whole hero and positions its children, instead
 * of being a column that stacks them. DOM order is untouched — this is
 * presentation only, so the copy stays in reading order for crawlers. */
.singularity-copy {
  position: absolute;
  z-index: 8;
  inset: 0;
  width: auto;
  transform: none;
  pointer-events: none;   /* children re-enable; the canvas keeps the drags */
}

.singularity-copy > * { pointer-events: auto; }

.singularity-copy .singularity-kicker {
  position: absolute;
  left: clamp(24px, 6vw, 104px);
  top: clamp(104px, 14.5vh, 156px);
  margin: 0;
}

.singularity-copy h1 {
  position: absolute;
  left: clamp(24px, 6vw, 104px);
  top: clamp(136px, 19vh, 206px);
  /* narrow enough that the em wraps, giving the reference's three lines:
     'Ask the cosmos.' / 'Get a computed' / 'answer.' */
  width: min(27vw, 360px);
}

/* THE STANDFIRST SITS UNDER THE HOLE, NOT BESIDE THE HEADLINE.
 *
 * Stacked in the left column it made a single tall wall of text down one edge
 * — kicker, headline and body all left-aligned on top of each other — and the
 * whole right two thirds of the frame carried nothing but the hole. Centring
 * it low balances the composition against the buttons and puts the sentence
 * where the eye already is after it has followed the hole down. */
.singularity-copy .singularity-subtitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(84px, 13vh, 140px);
  width: min(62ch, 74vw);
  margin: 0;
  text-align: center;
  text-wrap: balance;
}

.singularity-copy .singularity-actions {
  position: absolute;
  right: clamp(24px, 6vw, 104px);
  bottom: clamp(112px, 16vh, 168px);
  margin: 0;
  justify-content: flex-end;
}

.singularity-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 24px;
  color: rgba(224, 216, 247, .66);
  font-size: clamp(8px, .7vw, 11px);
  line-height: 1.4;
}

.singularity-kicker span {
  width: 30px;
  height: 1px;
  background: var(--vd-lavender);
  box-shadow: 0 0 9px var(--vd-violet);
}

.singularity-copy h1 {
  max-width: 720px;
  margin: 0;
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  /* Measured against the reference: "Ask the cosmos." spans ~21% of frame
   * width there. At 5.5vw it spanned ~37% here, which is what made the type
   * crowd the hole and read as oversized. 3.1vw lands on ~21%. */
  font-size: clamp(30px, 3.1vw, 52px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.singularity-copy h1 em {
  color: var(--vd-lavender);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.045em;
}

.singularity-subtitle {
  max-width: 570px;
  margin: 28px 0 0;
  color: rgba(236, 232, 244, .67);
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(14px, 1.08vw, 18px);
  line-height: 1.65;
}

.singularity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.singularity-button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 190px;
  padding: 14px 17px;
  border: 1px solid rgba(214, 203, 244, .2);
  color: rgba(255,255,255,.83);
  background: rgba(10, 7, 17, .48);
  backdrop-filter: blur(16px);
  font: 600 12px/1 "DM Sans", sans-serif;
  letter-spacing: .02em;
  transition: color .25s, border-color .25s, transform .25s, background .25s;
}

.singularity-button::before {
  content: "";
  position: absolute;
  inset: -80%;
  opacity: 0;
  background: conic-gradient(from 90deg, transparent, rgba(200,184,255,.36), transparent 22%);
  transition: opacity .25s;
  animation: button-orbit 2.2s linear infinite;
}

.singularity-button > * { position: relative; z-index: 1; }
.singularity-button:hover { color: #fff; border-color: rgba(210,198,255,.62); transform: translateY(-2px); background: rgba(94,64,165,.18); }
.singularity-button:hover::before { opacity: 1; }
.singularity-button--primary { color: #0a0711; border-color: var(--vd-lavender); background: var(--vd-lavender); }
.singularity-button--primary:hover { color: #07050d; background: #ded4ff; }

@keyframes button-orbit { to { transform: rotate(1turn); } }

.singularity-status {
  position: absolute;
  z-index: 7;
  right: clamp(20px, 3.4vw, 58px);
  bottom: 34px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px 9px;
  color: rgba(232,226,246,.43);
  font-size: 8px;
}

.singularity-status__dot {
  grid-row: 1 / 3;
  align-self: center;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vd-lavender);
  box-shadow: 0 0 12px var(--vd-lavender);
}

.singularity-status strong { color: rgba(224, 214, 255, .88); font-size: 9px; }

.singularity-sound {
  position: absolute;
  z-index: 10;
  right: clamp(20px, 3.4vw, 58px);
  top: 120px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(211, 197, 255, .2);
  color: rgba(235, 230, 247, .62);
  background: rgba(5, 3, 9, .4);
  font-size: 8px;
  cursor: pointer;
  /* THIS LINE IS WHY THE SOUND TOGGLE DID NOTHING.
   *
   * `html.sing-hijack .vedika-singularity` sets `pointer-events: none` on the
   * whole hero so the canvas keeps the wheel and drag gestures — and the
   * hijack is armed for the entire life of the page on desktop.
   * `pointer-events` is an INHERITED property, so every descendant without a
   * declaration of its own inherits `none`. `.singularity-copy > *` re-enables
   * it for the headline and the CTAs; nothing ever re-enabled it for this
   * button, so it painted normally, showed a pointer cursor, and silently
   * dropped every click onto <main> behind it. Verified with
   * document.elementFromPoint at the button's own centre: it returned MAIN.
   *
   * The JS was never broken. The click simply never arrived. */
  pointer-events: auto;
}

.singularity-sound__bars { display: flex; align-items: center; gap: 2px; height: 12px; }
.singularity-sound__bars i { display: block; width: 2px; height: 3px; background: var(--vd-lavender); }
.singularity-sound[aria-pressed="true"] .singularity-sound__bars i { animation: soundbar .7s ease-in-out infinite alternate; }
.singularity-sound[aria-pressed="true"] .singularity-sound__bars i:nth-child(2) { animation-delay: -.2s; }
.singularity-sound[aria-pressed="true"] .singularity-sound__bars i:nth-child(3) { animation-delay: -.43s; }
.singularity-sound[aria-pressed="true"] .singularity-sound__bars i:nth-child(4) { animation-delay: -.11s; }
@keyframes soundbar { to { height: 12px; } }

.singularity-scroll {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 22px;
  display: grid;
  justify-items: center;
  gap: 10px;
  transform: translateX(-50%);
  color: rgba(230, 225, 242, .34);
  font-size: 7px;
}

.singularity-scroll i { width: 1px; height: 28px; background: linear-gradient(var(--vd-lavender), transparent); animation: scroll-pulse 1.8s ease-in-out infinite; }
@keyframes scroll-pulse { 50% { transform: scaleY(.45); transform-origin: top; opacity: .35; } }

.vedika-singularity.is-gravity-active .singularity-core { transform: translate(-50%, -50%) scale(calc(var(--audio-scale, 1) * .93)); }

/* Mesh-style universe begins at the founder-selected comparison section. */
.singularity-static-fallback {
  background:
    radial-gradient(circle at var(--singularity-center-x) var(--singularity-center-y), #010103 0 6%, rgba(200,184,255,.92) 6.2%, rgba(93,60,171,.56) 7.1%, transparent 8.6%),
    repeating-radial-gradient(ellipse at var(--singularity-center-x) var(--singularity-center-y), transparent 0 5.5%, rgba(170,146,244,.18) 6%, transparent 7.4%),
    radial-gradient(ellipse at var(--singularity-center-x) var(--singularity-center-y), rgba(101,67,185,.45), transparent 42%),
    #020104;
}

.singularity-static-fallback #vedika-blackhole-canvas { opacity: 0; }

.vedika-cinematic-home .vedika-space-stage {
  --portal-shift: 0vh;
  --portal-depth: 0px;
  --portal-scale: 1;
  --portal-opacity: 0;
  position: relative;
  z-index: 2;
  min-height: 108svh;
  padding: 72px clamp(22px, 4vw, 64px) 9svh;
  overflow: clip;
  color: #f6f2ff;
  background: transparent !important;
  border: 0 !important;
  perspective: 1400px;
  transform-style: preserve-3d;
  isolation: isolate;
}

.vedika-cinematic-home .vedika-space-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3,2,7,.72), transparent 20%, transparent 76%, rgba(3,2,7,.72)),
    radial-gradient(ellipse at 50% 58%, rgba(126,87,225,.07), transparent 58%);
}

.vedika-space-decoration {
  opacity: .08 !important;
  pointer-events: none !important;
  filter: saturate(.45) hue-rotate(18deg);
}

.vedika-space-focus {
  position: absolute;
  z-index: 4;
  inset: 72px clamp(24px, 5vw, 80px) 10svh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  opacity: var(--portal-opacity);
  transform: translate3d(0, var(--portal-shift), var(--portal-depth)) scale(var(--portal-scale));
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: opacity .14s linear;
  pointer-events: none;
}

.vedika-space-focus__eyebrow,
.vedika-space-focus__summary,
.vedika-space-disclosure > summary,
.vedika-portal-hud,
.vedika-portal-audio {
  font-family: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .105em;
}

.vedika-space-focus__eyebrow {
  margin: 0 0 clamp(22px, 4vh, 46px);
  color: rgba(223,215,246,.5) !important;
  font-size: clamp(8px, .7vw, 11px);
  line-height: 1;
  text-transform: uppercase;
}

.vedika-space-focus__heading {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: min(94vw, 1500px);
}

.vedika-space-focus__heading h2 {
  margin: 0;
  color: #d9ceff !important;
  -webkit-text-fill-color: #d9ceff !important;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(72px, 10.8vw, 178px) !important;
  font-weight: 500 !important;
  line-height: .82 !important;
  letter-spacing: -.078em !important;
  text-wrap: balance;
  text-shadow: 0 0 54px rgba(139,101,236,.18) !important;
}

.vedika-space-focus__metric {
  flex: 0 0 auto;
  margin: clamp(4px, 1vw, 18px) 0 0 clamp(8px, 1.1vw, 18px);
  color: rgba(221,212,244,.42);
  font: 400 clamp(18px, 2.4vw, 40px)/1 "DM Sans", sans-serif;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.vedika-space-focus__summary {
  width: min(68ch, 68vw);
  margin: clamp(46px, 8vh, 88px) auto 0;
  color: rgba(235,230,247,.66) !important;
  font-size: clamp(10px, .96vw, 15px);
  line-height: 1.65;
  text-transform: uppercase;
  text-wrap: pretty;
}

.vedika-space-stage:not(.is-portal-current) .vedika-space-focus {
  opacity: 0;
}

.vedika-space-stage.is-detail-open .vedika-space-focus {
  opacity: .12;
  filter: blur(3px);
}

.vedika-space-disclosure {
  position: absolute;
  z-index: 12;
  left: clamp(24px, 4vw, 64px);
  right: clamp(24px, 4vw, 64px);
  bottom: clamp(34px, 6svh, 72px);
  width: min(1180px, calc(100% - clamp(48px, 8vw, 128px)));
  margin-inline: auto;
  color: #eee9fb;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.vedika-space-stage.is-portal-current .vedika-space-disclosure,
.vedika-space-disclosure[open] {
  opacity: 1;
  pointer-events: auto;
}

.vedika-space-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(270px, 100%);
  margin-inline: auto;
  padding: 12px 0;
  border-block: 1px solid rgba(216,204,250,.26);
  color: rgba(235,229,248,.74);
  background: rgba(3,2,7,.3);
  font-size: 9px;
  line-height: 1;
  list-style: none;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.vedika-space-disclosure > summary::-webkit-details-marker { display: none; }

.vedika-space-disclosure > summary::after {
  content: "+";
  margin-left: 18px;
  color: #cbbcff;
  font-size: 15px;
  line-height: .7;
}

.vedika-space-disclosure[open] > summary::after { content: "−"; }

.vedika-space-disclosure > summary:hover {
  color: #fff;
  border-color: rgba(207,190,255,.62);
  background: rgba(102,72,177,.12);
}

.vedika-space-disclosure > summary:focus-visible,
.vedika-portal-audio:focus-visible,
.singularity-sound:focus-visible,
.singularity-button:focus-visible {
  outline: 2px solid #d5c8ff;
  outline-offset: 4px;
}

.vedika-space-disclosure__number {
  color: rgba(214,204,238,.42);
  font-variant-numeric: tabular-nums;
}

.vedika-space-stage__shell {
  display: none;
  width: 100%;
  max-height: min(68svh, 820px);
  margin: 18px auto 0;
  padding: clamp(20px, 3vw, 42px);
  overflow: auto;
  overscroll-behavior: contain;
  color: #eee9fb;
  background:
    linear-gradient(135deg, rgba(13,9,23,.94), rgba(5,3,10,.91)),
    radial-gradient(circle at 20% 0%, rgba(151,116,242,.13), transparent 42%);
  border: 1px solid rgba(204,186,255,.2);
  border-radius: 2px;
  box-shadow: 0 28px 90px rgba(1,0,4,.52), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(22px);
  scrollbar-color: rgba(191,169,255,.45) transparent;
}

.vedika-space-disclosure[open] > .vedika-space-stage__shell { display: block; }

.vedika-space-stage__shell > * {
  max-width: 100%;
  margin-inline: auto;
}

.vedika-space-stage__shell h1,
.vedika-space-stage__shell h2,
.vedika-space-stage__shell h3,
.vedika-space-stage__shell h4,
.vedika-space-stage__shell h5,
.vedika-space-stage__shell h6 {
  color: #f6f2ff !important;
  -webkit-text-fill-color: #f6f2ff !important;
  text-shadow: 0 8px 42px rgba(2,1,6,.72);
}

.vedika-space-stage__shell p,
.vedika-space-stage__shell li,
.vedika-space-stage__shell td,
.vedika-space-stage__shell th,
.vedika-space-stage__shell [class*="text-gray-"],
.vedika-space-stage__shell [class*="text-slate-"] {
  color: rgba(236,230,250,.78) !important;
}

.vedika-space-stage__shell [class*="bg-white"],
.vedika-space-stage__shell [class*="bg-gray-"],
.vedika-space-stage__shell [class*="bg-slate-"] {
  background-color: rgba(12,8,21,.72) !important;
  background-image: none !important;
  border-color: rgba(199,182,255,.17) !important;
  box-shadow: none !important;
}

.vedika-space-stage__shell [class*="text-emerald-"],
.vedika-space-stage__shell [class*="text-green-"],
.vedika-space-stage__shell [class*="text-lime-"],
.vedika-space-stage__shell [class*="text-teal-"],
.vedika-space-stage__shell [class*="text-orange-"] {
  color: #c2afff !important;
}

.vedika-space-stage__shell [class*="bg-emerald-"],
.vedika-space-stage__shell [class*="bg-green-"],
.vedika-space-stage__shell [class*="bg-lime-"],
.vedika-space-stage__shell [class*="bg-teal-"],
.vedika-space-stage__shell [class*="bg-orange-"] {
  background-color: rgba(123,89,207,.24) !important;
  background-image: none !important;
}

.vedika-space-stage__shell [class*="border-emerald-"],
.vedika-space-stage__shell [class*="border-green-"],
.vedika-space-stage__shell [class*="border-lime-"],
.vedika-space-stage__shell [class*="border-teal-"],
.vedika-space-stage__shell [class*="ring-emerald-"],
.vedika-space-stage__shell [class*="ring-green-"],
.vedika-space-stage__shell [class*="ring-lime-"],
.vedika-space-stage__shell [class*="ring-teal-"] {
  border-color: rgba(181,157,248,.48) !important;
  --tw-ring-color: rgba(181,157,248,.48) !important;
}

.vedika-space-stage__shell [class*="from-emerald-"],
.vedika-space-stage__shell [class*="from-green-"],
.vedika-space-stage__shell [class*="from-lime-"],
.vedika-space-stage__shell [class*="from-teal-"] {
  --tw-gradient-from: #7659c9 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(118,89,201,0) var(--tw-gradient-to-position) !important;
}

.vedika-space-stage__shell [class*="via-emerald-"],
.vedika-space-stage__shell [class*="via-green-"],
.vedika-space-stage__shell [class*="via-lime-"],
.vedika-space-stage__shell [class*="via-teal-"] {
  --tw-gradient-via: #9c7fe7 var(--tw-gradient-via-position) !important;
}

.vedika-space-stage__shell [class*="to-emerald-"],
.vedika-space-stage__shell [class*="to-green-"],
.vedika-space-stage__shell [class*="to-lime-"],
.vedika-space-stage__shell [class*="to-teal-"] {
  --tw-gradient-to: #c5b2ff var(--tw-gradient-to-position) !important;
}

.vedika-space-stage__shell [fill="#10B981" i],
.vedika-space-stage__shell [fill="#34D399" i],
.vedika-space-stage__shell [fill="#059669" i],
.vedika-space-stage__shell [fill="#16A34A" i],
.vedika-space-stage__shell [fill="#22C55E" i],
.vedika-space-stage__shell [fill="#4ADE80" i],
.vedika-space-stage__shell [fill="#6EE7B7" i],
.vedika-space-stage__shell [fill="#3FB950" i] { fill: #8f72e8 !important; }

.vedika-space-stage__shell [stroke="#10B981" i],
.vedika-space-stage__shell [stroke="#34D399" i],
.vedika-space-stage__shell [stroke="#059669" i],
.vedika-space-stage__shell [stroke="#16A34A" i],
.vedika-space-stage__shell [stroke="#22C55E" i],
.vedika-space-stage__shell [stroke="#4ADE80" i],
.vedika-space-stage__shell [stroke="#6EE7B7" i],
.vedika-space-stage__shell [stroke="#3FB950" i] { stroke: #a58df2 !important; }

/* Source-owned legacy greens are recolored only after a section enters the
   immersive portal. Navigation, status, success and error semantics elsewhere
   on the public site retain their original meaning. */
.vedika-cinematic-home .vedika-space-stage__shell [style*="color:#10B981" i],
.vedika-cinematic-home .vedika-space-stage__shell [style*="color: #10B981" i],
.vedika-cinematic-home .vedika-space-stage__shell [style*="color:#34D399" i],
.vedika-cinematic-home .vedika-space-stage__shell [style*="color: #34D399" i],
.vedika-cinematic-home .vedika-space-stage__shell [style*="color:#3FB950" i],
.vedika-cinematic-home .vedika-space-stage__shell [style*="color: #3FB950" i],
.vedika-cinematic-home .vedika-space-stage__shell [style*="color: rgb(63, 185, 80)" i] {
  color: #c2afff !important;
}

.vedika-cinematic-home .vedika-space-stage__shell [style*="background:#10B981" i],
.vedika-cinematic-home .vedika-space-stage__shell [style*="background: #10B981" i],
.vedika-cinematic-home .vedika-space-stage__shell [style*="background:#34D399" i],
.vedika-cinematic-home .vedika-space-stage__shell [style*="background: #34D399" i] {
  background: #8f72e8 !important;
}

.vedika-cinematic-home .vedika-space-stage__shell [style*="background:rgba(16,185,129" i],
.vedika-cinematic-home .vedika-space-stage__shell [style*="background: rgba(16, 185, 129" i] {
  background: rgba(123,89,207,.18) !important;
}

.vedika-cinematic-home .vedika-space-stage__shell [style*="border:1px solid rgba(16,185,129" i],
.vedika-cinematic-home .vedika-space-stage__shell [style*="border: 1px solid rgba(16, 185, 129" i],
.vedika-cinematic-home .vedika-space-stage__shell [style*="border:2px solid #10B981" i],
.vedika-cinematic-home .vedika-space-stage__shell [style*="border: 2px solid #10B981" i] {
  border-color: rgba(181,157,248,.56) !important;
}

.vedika-cinematic-home .vedika-space-stage__shell [style*="background:#051a0e" i],
.vedika-cinematic-home .vedika-space-stage__shell [style*="background: #051a0e" i] {
  background: #080510 !important;
}

.vedika-cinematic-home .vedika-space-stage__shell [style*="filter:drop-shadow"][style*="rgba(16,185,129" i],
.vedika-cinematic-home .vedika-space-stage__shell [style*="filter: drop-shadow"][style*="rgba(16, 185, 129" i] {
  filter: drop-shadow(0 0 12px rgba(166,139,242,.48)) !important;
}

.vedika-cinematic-home .vedika-space-stage__shell .vmig-side.good {
  background: linear-gradient(160deg, rgba(145,113,228,.12), rgba(145,113,228,.025)) !important;
}

.vedika-cinematic-home .vedika-space-stage__shell .vmig-badge.good {
  color: #c2afff !important;
  background: rgba(145,113,228,.16) !important;
}

.vedika-cinematic-home .vedika-space-stage__shell .pg-mini .dots span:nth-child(3) {
  background: #9b7ce8 !important;
}

.vedika-cinematic-home .vedika-space-stage__shell .pg-mini .str {
  color: #c2afff !important;
}

@keyframes vd-node-glow {
  0%, 100% { filter: drop-shadow(0 0 2px #8163d5); }
  50% { filter: drop-shadow(0 0 8px #c2afff); }
}

@keyframes vd-glow-pulse-lavender {
  0%, 100% { stroke-opacity: .2; stroke-width: .8; }
  50% { stroke-opacity: .76; stroke-width: 1.2; }
}

.vedika-cinematic-home .vedika-space-stage__shell .vmig .nn-node-glow {
  animation-name: vd-node-glow !important;
}

.vedika-cinematic-home .vedika-space-stage__shell .vmig .nn-glow-pulse-green {
  stroke: #a58df2 !important;
  animation-name: vd-glow-pulse-lavender !important;
}

.vedika-space-stage__shell img,
.vedika-space-stage__shell svg,
.vedika-space-stage__shell video,
.vedika-space-stage__shell canvas {
  max-width: 100%;
  height: auto;
}

#vedika-space-canvas {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 66%, rgba(92,55,171,.17), transparent 48%),
    linear-gradient(180deg, #030207 0%, #07030e 64%, #030206 100%);
  transition: opacity .42s ease;
}

body.vedika-space-active #vedika-space-canvas { opacity: 1; }

body.vedika-space-fallback #vedika-space-canvas {
  background:
    radial-gradient(circle at 16% 74%, rgba(210,196,255,.72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 62%, rgba(174,145,255,.54) 0 1px, transparent 1.5px),
    radial-gradient(circle at 52% 86%, rgba(221,210,255,.45) 0 1px, transparent 1.5px),
    repeating-radial-gradient(ellipse at 50% 76%, rgba(150,111,238,.15) 0 1px, transparent 1px 15px),
    radial-gradient(ellipse at 50% 72%, rgba(108,68,194,.34), transparent 52%),
    linear-gradient(180deg, #030207, #080312 72%, #030206);
  background-size: 53px 47px, 71px 61px, 89px 73px, auto, auto, auto;
}

.vedika-portal-hud {
  position: fixed;
  z-index: 88;
  inset: 86px 38px auto;
  display: flex;
  justify-content: space-between;
  color: rgba(235,230,247,.62);
  font-size: 10px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.vedika-portal-hud.is-visible { opacity: 1; }
.vedika-portal-hud span:nth-child(2) { color: rgba(215,203,255,.92); }

.vedika-portal-audio {
  position: fixed;
  z-index: 90;
  top: 106px;
  right: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border: 0;
  color: rgba(235,230,247,.7);
  background: transparent;
  font-size: 9px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: color .2s ease, opacity .3s ease;
}

.vedika-portal-audio.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.vedika-portal-audio:hover { color: #fff; }

.vedika-portal-audio__bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 10px;
}

.vedika-portal-audio__bars i {
  display: block;
  width: 1px;
  height: 3px;
  background: #cabaff;
}

.vedika-portal-audio[aria-pressed="true"] .vedika-portal-audio__bars i {
  animation: portal-audio-bar .72s ease-in-out infinite alternate;
}

.vedika-portal-audio[aria-pressed="true"] .vedika-portal-audio__bars i:nth-child(2) { animation-delay: -.26s; }
.vedika-portal-audio[aria-pressed="true"] .vedika-portal-audio__bars i:nth-child(3) { animation-delay: -.48s; }

@keyframes portal-audio-bar { to { height: 10px; } }

.vedika-space-progress {
  position: fixed;
  z-index: 90;
  top: 50%;
  right: 18px;
  width: 1px;
  height: 120px;
  opacity: 0;
  transform: translateY(-50%);
  background: rgba(211,197,255,.12);
  pointer-events: none;
  transition: opacity .3s ease;
}

.vedika-space-progress.is-visible { opacity: 1; }

.vedika-space-progress i {
  display: block;
  width: 100%;
  height: var(--space-progress, 0%);
  background: var(--vd-lavender);
  box-shadow: 0 0 10px var(--vd-violet);
}

.vedika-cinematic-home .is-portal-final {
  min-height: 118svh;
  padding-top: 18svh;
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}

.is-portal-final .vedika-space-focus {
  inset-block: 72px 50%;
}

.is-portal-final .vedika-space-disclosure {
  position: relative;
  inset: auto;
  width: min(1180px, 100%);
  margin-top: 56svh;
  opacity: 1;
  pointer-events: auto;
}

.is-portal-final .vedika-space-disclosure > summary { cursor: default; }
.is-portal-final .vedika-space-disclosure > summary::after { display: none; }

.is-portal-final .vedika-space-stage__shell {
  max-height: none;
  overflow: visible;
}

@media (max-width: 767px) {
  .vedika-cinematic-home,
  .vedika-cinematic-home > main,
  .vedika-cinematic-home > section,
  .vedika-cinematic-home > footer {
    max-width: 100vw !important;
  }

  .vedika-singularity {
    --singularity-center-x: 50%;
    --singularity-center-y: 37%;
    min-height: 760px;
    height: 100svh;
  }

  /* THE HUD IS HIDDEN ON MOBILE, NOT MOVED.
   *
   * It was at top:78px while .singularity-copy is anchored at top:84px. Six
   * pixels apart, so "VEDIKA / INTELLIGENCE FIELD" and the kicker
   * "ASTROLOGY INTELLIGENCE INFRASTRUCTURE" rendered straight through each
   * other - two lines of tracked-out 7px caps overlapping into noise.
   *
   * Nudging one of them down only moves the collision into the h1, which is
   * what the note further down this file already records happening twice
   * before. On a 390px-wide screen there is no band that fits corner HUD
   * chrome AND the headline. The HUD is decorative on desktop and costs
   * nothing to drop here, so the top of the phone viewport belongs to the
   * headline alone - which is what the founder asked for. */
  .singularity-hud { display: none; }

  /* THE BOTTOM HALF WAS GOING FLAT BLACK, and it was this rule, not a missing
   * asset or a canvas that stops short.
   *
   * The old linear stop reached rgba(2,1,4,.88) at 68% and fully opaque
   * #020104 at 100%. On a 844px-tall phone that is opaque ink over the entire
   * lower third: the nebula, the star field and the drifting dust are all
   * still being rendered underneath, and all of it was painted out. What the
   * founder saw as "black random" is a scrim, not an absence.
   *
   * Rebalanced so the darkening arrives later and never reaches full opacity.
   * .82 at the bottom edge still gives the subtitle and buttons - which now
   * sit down there - a legible ground, while the colour keeps reading
   * through. Checked against the lightest nebula pixels rather than the
   * average, since those are what a scrim washes out first. */
  .singularity-vignette {
    background:
      linear-gradient(180deg, rgba(2,1,4,.04) 42%, rgba(2,1,4,.46) 74%, rgba(2,1,4,.82) 100%),
      radial-gradient(circle at var(--singularity-center-x) var(--singularity-center-y), transparent 3%, rgba(2,1,4,.08) 40%, rgba(2,1,4,.44) 100%);
  }

  .singularity-core {
    --core-size: clamp(84px, 25vw, 124px);
  }

  /* On a phone there is no room to scatter the copy to three corners, so the
   * desktop absolute placement is unwound and the block stacks normally at the
   * bottom. Every one of these has to reset a property the desktop rule set,
   * or the children stay pinned to corners inside a full-bleed parent. */
  /* ANCHORED TO THE TOP ON MOBILE, NOT THE BOTTOM.
   *
   * This block was pinned with `bottom: 98px`, which put the headline 62% of the way
   * down a 390x844 screen (measured h1.top = 522.7). That is the middle of the
   * viewport, which is exactly where the orbiting product labels live, and the two
   * collided: at 390 three labels overlapped the h1 box, at 400 it was five, with
   * "Horoscope" sitting entirely inside it and "VOICE AI" striking through the
   * kicker line.
   *
   * Moving the copy to the top does two jobs with one change - it is where the
   * founder asked for it, and it vacates the band the labels orbit in, which is the
   * cheapest possible fix for a collision whose real cause is in the JS placement
   * algorithm rather than in any one CSS rule.
   *
   * 84px clears the fixed nav (65px) with air under it. */
  /* SPLIT TOP AND BOTTOM, rather than one block anchored to either end.
   *
   * Anchoring the whole copy block to the top put the headline where the
   * founder wanted it but dragged the subtitle and both buttons up with it,
   * stranding them in the middle of the screen and leaving the lower half as
   * dead space. Anchoring it to the bottom is what the note below records as
   * the previous attempt, which collided with the orbiting product labels.
   *
   * Both anchors at once solves it: the block spans the viewport, the h1 sits
   * at the top, and `margin-top:auto` on the subtitle pushes it and the
   * actions down to the bottom edge together. The orbiting-label band in the
   * middle is left empty, which is the collision fix the note below was
   * reaching for. */
  .singularity-copy {
    left: 22px;
    right: 22px;
    width: auto;
    transform: none;
    text-align: left;
    inset: 84px 22px 92px 22px;
    display: flex;
    flex-direction: column;
    pointer-events: none;
  }

  /* The block now spans the screen, so it would otherwise swallow taps meant
   * for the canvas behind it. Only the real controls take pointer events. */
  .singularity-copy .singularity-actions,
  .singularity-copy .singularity-button {
    pointer-events: auto;
  }

  /* Hidden for the same reason as the HUD: the founder wants the top of the
   * phone to read "Ask the cosmos. Get a computed answer." and nothing else.
   * The kicker is the second half of the overlapping pair. */
  .singularity-copy .singularity-kicker { display: none; }

  /* This is what moves the body copy and buttons to the bottom. */
  .singularity-copy .singularity-subtitle { margin-top: auto; }

  .singularity-copy .singularity-kicker,
  .singularity-copy h1,
  .singularity-copy .singularity-subtitle,
  .singularity-copy .singularity-actions {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    width: auto;
    justify-content: flex-start;
  }

  .singularity-copy h1 {
    font-size: clamp(30px, 8.6vw, 44px);
    line-height: 1.04;
  }


  .singularity-kicker {
    margin-bottom: 14px;
    font-size: 7px;
  }

  .singularity-subtitle {
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.48;
  }

  .singularity-actions { margin-top: 19px; }

  .singularity-button {
    min-width: 0;
    flex: 1 1 46%;
    padding: 13px 12px;
    font-size: 10px;
  }

  /* WAS top: 88px, WHICH IS NOW DIRECTLY ON THE HEADLINE.
     Correct while the copy was pinned to the bottom of the screen; the copy is now
     anchored to the top, and measured at 390 this toggle occupied 272-376 x 88-132
     against a kicker at 22-368 x 84-94 and an h1 starting at 94 - it covered both.
     Bottom-right instead, where the black hole has empty sky.
     `bottom` alone is not enough: with `top` still set the box gets BOTH anchors and
     stretches to fill between them - measured 734px tall on the first attempt at
     this fix, because a `top: auto` written in an earlier block lost to this rule. */
  .singularity-sound {
    top: auto;
    bottom: 22px;
    right: 14px;
  }

  .singularity-status,
  .singularity-scroll { display: none; }

  .vedika-cinematic-home .vedika-space-stage {
    min-height: 100svh;
    padding: 68px 14px calc(104px + env(safe-area-inset-bottom));
    overflow: clip;
  }

  .vedika-space-focus {
    inset: 68px 16px calc(104px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    padding-top: 24px;
    transform: translate3d(0, calc(var(--portal-shift) * .44), 0);
  }

  .vedika-space-focus__eyebrow {
    margin-bottom: 20px;
    font-size: 7px;
  }

  .vedika-space-focus__heading {
    width: 100%;
    align-items: flex-start;
  }

  .vedika-space-focus__heading h2 {
    max-width: 92vw;
    font-size: clamp(44px, 13vw, 64px) !important;
    line-height: .88 !important;
    letter-spacing: -.055em !important;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .vedika-space-focus__metric {
    position: absolute;
    top: calc(100% + 12px);
    right: 4vw;
    margin: 0;
    font-size: 18px;
  }

  .vedika-space-focus__summary {
    width: min(88vw, 48ch);
    margin-top: 38px;
    font-size: 9px;
    line-height: 1.55;
  }

  .vedika-portal-hud {
    inset: 78px 14px auto;
    font-size: 7px;
  }

  .vedika-portal-hud span:nth-child(2),
  .vedika-portal-hud span:nth-child(3) { display: none; }

  .vedika-portal-audio {
    top: 76px;
    right: 14px;
    font-size: 7px;
  }

  .vedika-space-progress {
    right: 7px;
    height: 78px;
  }

  .vedika-space-disclosure {
    left: 14px;
    right: 14px;
    bottom: calc(124px + env(safe-area-inset-bottom));
    width: calc(100% - 28px);
  }

  .vedika-space-disclosure > summary {
    width: min(250px, 84vw);
    padding: 11px 0;
    font-size: 8px;
  }

  .vedika-space-stage.is-detail-open {
    min-height: 100svh;
    height: auto;
    overflow: visible;
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  .vedika-space-stage.is-detail-open .vedika-space-disclosure,
  .is-portal-final .vedika-space-disclosure {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: 58svh;
  }

  .vedika-space-stage__shell {
    max-height: none;
    padding: 18px 14px 26px;
    overflow: visible;
    overscroll-behavior: auto;
  }

  .vedika-space-stage__shell *,
  .vedika-space-stage__shell > * {
    min-width: 0;
    max-width: 100%;
  }

  .vedika-space-stage__shell pre,
  .vedika-space-stage__shell code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .vedika-space-stage__shell .overflow-x-auto {
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
  }

  .vedika-space-stage__shell table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
  }

  .vedika-space-stage__shell td,
  .vedika-space-stage__shell th {
    padding-inline: 6px !important;
    overflow-wrap: anywhere;
  }

  .vedika-space-stage__shell .grid,
  .vedika-space-stage__shell [class*="grid-cols"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .vedika-cinematic-home .is-portal-final {
    min-height: 118svh;
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  .singularity-lens,
  .singularity-scroll i,
  .singularity-button::before,
  .singularity-sound__bars i,
  .vedika-portal-audio__bars i,
  .vedika-space-stage__shell .animate-pulse,
  .vedika-space-stage__shell .nn-dash-flow,
  .vedika-space-stage__shell .nn-glow-pulse-green,
  .vedika-space-stage__shell .nn-node-glow {
    animation: none !important;
  }

  .vedika-space-focus,
  .vedika-space-disclosure,
  #vedika-space-canvas,
  .vedika-portal-hud,
  .vedika-portal-audio {
    transition: none !important;
  }

  .vedika-space-focus {
    transform: none !important;
  }
}

/* ============================================================================
 * THE MESH ENDING — outro beat + mesh-gradient footer
 * ==========================================================================
 *
 * A MESH GRADIENT is not a linear ramp between two stops. It is several large
 * colour fields placed at different points and allowed to bleed into one
 * another, so the surface has no single direction and no visible band — which
 * is why it reads as light in a volume rather than as a background. Built here
 * from six overlapping radials on one element, each drifting on its own period
 * so the field never visibly repeats.
 *
 * The journey previously ended by simply arriving at the raw site footer: a
 * flat slab at #0F172A carrying a link grid. After a scroll through lensed
 * spacetime that reads as the page running out of content. The outro is the
 * arrival beat, and the footer is then part of the same field rather than a
 * different document pasted underneath it.
 *
 * Every link, heading and legal line in the footer is untouched and still in
 * the DOM — this is a surface treatment, not a rebuild.
 */

.vd-outro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4.5rem, 16vh, 9rem) clamp(1.25rem, 6vw, 5rem) clamp(4rem, 12vh, 7rem);
  background: #07050f;
  color: #efeaff;
  text-align: center;
}

/* the mesh field itself */
.vd-outro::before,
.vd-mesh-footer::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(38% 46% at 14% 18%, rgba(124,  92, 255, 0.62), transparent 64%),
    radial-gradient(34% 40% at 82% 12%, rgba( 64, 154, 255, 0.50), transparent 62%),
    radial-gradient(46% 52% at 24% 88%, rgba(178, 120, 255, 0.46), transparent 66%),
    radial-gradient(40% 44% at 88% 84%, rgba( 84, 206, 236, 0.34), transparent 62%),
    radial-gradient(30% 34% at 52% 46%, rgba(236, 180, 255, 0.28), transparent 60%),
    radial-gradient(70% 70% at 50% 60%, rgba( 12,   9,  30, 0.00), rgba(7, 5, 15, 0.92) 78%);
  filter: blur(14px) saturate(126%);
  animation: vd-mesh-drift 42s ease-in-out infinite alternate;
}

/* fine grain over the mesh: without it a large smooth gradient shows banding
   on 8-bit displays, and the grain is also what stops it looking like plastic */
.vd-outro::after,
.vd-mesh-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

@keyframes vd-mesh-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3.5%, 2.5%, 0) scale(1.09); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.04); }
}

.vd-outro__inner { position: relative; max-width: 62rem; margin: 0 auto; }

.vd-outro__kicker {
  margin: 0 0 clamp(1rem, 2.4vh, 1.75rem);
  font-family: var(--vd-mono, ui-monospace, "SFMono-Regular", monospace);
  font-size: clamp(8px, 0.72vw, 10px);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: rgba(226, 216, 255, 0.62);
}

.vd-outro__h {
  margin: 0;
  font-size: clamp(30px, 5.4vw, 68px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: #fff;
  text-wrap: balance;
}
.vd-outro__h em {
  display: inline-block;
  font-style: italic;
  font-weight: 400;
  color: #d9c9ff;
}

.vd-outro__sub {
  margin: clamp(1.1rem, 2.6vh, 1.9rem) auto 0;
  max-width: 54ch;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.62;
  color: rgba(232, 226, 255, 0.80);
  text-wrap: balance;
}

.vd-outro__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: clamp(1.6rem, 3.4vh, 2.6rem);
}

.vd-outro__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(214, 202, 255, 0.30);
  background: rgba(255, 255, 255, 0.06);
  color: #f2ecff;
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.vd-outro__btn:hover { background: rgba(255, 255, 255, 0.13); transform: translateY(-1px); }
.vd-outro__btn--primary {
  background: #fff;
  border-color: #fff;
  color: #17102e;
}
.vd-outro__btn--primary:hover { background: #efe9ff; border-color: #efe9ff; }

/* ---- the footer, on the same field ------------------------------------- */

.vd-mesh-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* the inline style on the element is #0F172A; this has to win to put the
     mesh behind the links rather than a flat slab */
  background: #07050f !important;
  color: rgba(226, 220, 250, 0.72);
}
/* the footer's own field is calmer than the outro's — it sits under content,
   not behind a headline, so it is dimmed and slowed rather than removed */
.vd-mesh-footer::before {
  opacity: 0.52;
  animation-duration: 64s;
}
.vd-mesh-footer > * { position: relative; z-index: 1; }

.vd-mesh-footer :is(h5, .text-white) { color: #fff; }
.vd-mesh-footer a { transition: color 160ms ease; }
.vd-mesh-footer a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .vd-outro::before, .vd-mesh-footer::before { animation: none; }
}