/* Service page «Vídeo profesional con IA» (template-parts/video-page.php).
   Deep-space stage for the work: a WebGL star tunnel and a holographic portal in the
   hero, quiet nebulas and drifting stars below. Text stays on solid contrast; the one
   filled violet per viewport is the primary CTA. Reduced motion freezes everything. */

.vx {
  --vx-bg: #07040d;
  --vx-violet: #8f63f5;
  --vx-violet-soft: rgba(143, 99, 245, .35);
  --vx-pink: #e879f9;
  --vx-ice: #9be7ff;
  --vx-line: rgba(188, 157, 248, .2);
  --vx-ease: cubic-bezier(.23, 1, .32, 1);
  position: relative;
  background: var(--vx-bg);
  color: var(--color-text);
  overflow: clip;
}

/* ── Shared stars for the sections (two tiled layers, slow drift) ── */
.vx-section { position: relative; padding-block: clamp(3rem, 5vw, 4.5rem); isolation: isolate; }
.vx-section::before,
.vx-section::after {
  content: '';
  position: absolute;
  inset: -50% 0 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1px 1px at 140px 90px, rgba(214, 198, 255, .6), transparent 60%),
    radial-gradient(1.5px 1.5px at 260px 200px, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1px 1px at 330px 40px, rgba(155, 231, 255, .55), transparent 60%),
    radial-gradient(1px 1px at 90px 260px, rgba(255, 255, 255, .45), transparent 60%);
  background-size: 380px 300px;
  opacity: .55;
  animation: vx-drift 90s linear infinite;
}
.vx-section::after { background-size: 620px 520px; opacity: .3; animation-duration: 150s; transform: translate3d(0, 0, 0) scale(1.4); }
@keyframes vx-drift { to { transform: translate3d(-120px, 300px, 0); } }
.vx-section > .container { position: relative; }

/* Nebulas sit well inside each section and fade before its edges, so sections flow
   into one continuous sky instead of showing seams. */
.vx-intro, .vx-process, .vx-faq { background: radial-gradient(48% 42% at 82% 45%, rgba(103, 48, 201, .2), transparent 100%), var(--vx-bg); }
.vx-examples, .vx-why { background: radial-gradient(40% 32% at 14% 40%, rgba(143, 99, 245, .16), transparent 100%), radial-gradient(36% 30% at 88% 72%, rgba(232, 121, 249, .08), transparent 100%), var(--vx-bg); }
.vx-uses { background: radial-gradient(56% 40% at 50% 46%, rgba(103, 48, 201, .18), transparent 100%), var(--vx-bg); }

/* ── Typography ── */
.vx-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.9rem); line-height: 1.03; letter-spacing: -.025em; text-wrap: balance; }
.vx-heading { display: grid; gap: 1.1rem; max-width: 52rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.vx-heading p { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: var(--color-text-muted); max-width: 60ch; }

/* ── Hero ── */
.vx-hero {
  position: relative;
  min-height: min(100svh, 980px);
  display: grid;
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 7vw, 6rem);
  isolation: isolate;
  background: radial-gradient(90% 80% at 70% 40%, #1a0b33 0%, #0b0616 55%, var(--vx-bg) 100%);
}
.vx-hero__field { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; }
.vx-hero__aurora {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 72% 46%, rgba(143, 99, 245, .42), transparent 70%),
    radial-gradient(26% 30% at 80% 70%, rgba(232, 121, 249, .16), transparent 70%),
    radial-gradient(30% 30% at 12% 85%, rgba(155, 231, 255, .07), transparent 70%);
  filter: blur(8px);
}
.vx-hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.vx-hero__copy { position: relative; z-index: 1; }
.vx-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.1rem, 1.6rem + 6.4vw, 7.4rem);
  line-height: .96;
  letter-spacing: -.035em;
  text-wrap: balance;
}
/* Gradient word with a blurred twin behind it (text-shadow cannot glow a clipped gradient). */
.vx-glow { position: relative; display: inline-block; color: #c9b2ff; }
.vx-glow__light { display: none; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .vx-glow {
    background: linear-gradient(100deg, #f4e9ff 0%, #c9b2ff 30%, #8f63f5 62%, #e879f9 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: vx-sheen 7s var(--vx-ease) infinite;
  }
  .vx-glow__light {
    display: block; pointer-events: none;
    position: absolute; inset: 0; z-index: -1;
    background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: blur(22px); opacity: .85;
  }
}
@keyframes vx-sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.vx-hero__lead { margin-top: clamp(1.4rem, 2.5vw, 2rem); max-width: 34rem; font-size: clamp(1.08rem, 1rem + .4vw, 1.32rem); line-height: 1.6; color: #d9d0e8; }
.vx-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: clamp(1.8rem, 3vw, 2.5rem); }
.vx-hero__actions .button--primary { box-shadow: 0 18px 50px -12px rgba(143, 99, 245, .75), inset 0 1px 0 rgba(255, 255, 255, .25); }
.vx-link { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; color: var(--color-text); font-weight: 500; text-decoration: none; }
.vx-link svg { transition: transform var(--duration-fast) var(--vx-ease); }
.vx-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: clamp(1.8rem, 3vw, 2.5rem); padding: 0; list-style: none; }
.vx-chips li {
  padding: .5rem .85rem;
  border: 1px solid var(--vx-line);
  border-radius: 999px;
  background: rgba(13, 8, 24, .55);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .01em;
  color: #e3d8f7;
}

/* Portal: rotating rings, a 3D-tilted screen and a perspective floor. */
.vx-portal { position: relative; margin: 0; display: grid; justify-items: center; gap: 1rem; }
.vx-portal__stage {
  --rx: 4deg; --ry: -12deg;
  position: relative;
  width: min(100%, 470px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  perspective: 1100px;
}
.vx-portal__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(201, 178, 255, .95) 18%, transparent 30%, rgba(232, 121, 249, .7) 52%, transparent 64%, rgba(155, 231, 255, .65) 80%, transparent 92%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  filter: drop-shadow(0 0 12px rgba(143, 99, 245, .9));
  animation: vx-spin 26s linear infinite;
}
.vx-portal__ring--inner { inset: 9%; opacity: .7; animation-duration: 38s; animation-direction: reverse; }
.vx-portal__stage::before {
  content: '';
  position: absolute; inset: 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(143, 99, 245, .55), rgba(103, 48, 201, .18) 60%, transparent 100%);
  filter: blur(18px);
  animation: vx-pulse 6s ease-in-out infinite;
}
@keyframes vx-spin { to { transform: rotate(1turn); } }
@keyframes vx-pulse { 50% { opacity: .65; transform: scale(.94); } }
.vx-portal__frame {
  position: relative;
  z-index: 1;
  width: 52%;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(30px);
  transform-style: preserve-3d;
  background: #120a22;
  box-shadow:
    0 0 0 1px rgba(214, 198, 255, .45),
    0 0 40px rgba(143, 99, 245, .55),
    0 40px 80px -20px rgba(0, 0, 0, .8);
  transition: transform .9s var(--vx-ease);
}
.vx-portal__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-portal__scan {
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, transparent 28%, transparent 70%, rgba(201, 178, 255, .12) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.vx-portal__floor {
  position: absolute; left: -20%; right: -20%; bottom: -18%; height: 46%;
  background:
    repeating-linear-gradient(90deg, rgba(188, 157, 248, .38) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(188, 157, 248, .3) 0 1px, transparent 1px 44px);
  transform: rotateX(76deg);
  transform-origin: 50% 0;
  -webkit-mask: radial-gradient(60% 80% at 50% 0%, #000 20%, transparent 75%);
  mask: radial-gradient(60% 80% at 50% 0%, #000 20%, transparent 75%);
  opacity: .8;
  animation: vx-floor 4s linear infinite;
}
@keyframes vx-floor { to { background-position: 0 44px, 0 44px; } }
.vx-portal__caption { font-family: var(--font-mono); font-size: .78rem; color: #b7a9cf; text-align: center; }

.vx-motion {
  position: absolute; left: var(--gutter); bottom: 1.25rem; z-index: 2;
  min-height: 40px; padding: .45rem .9rem;
  border: 1px solid var(--vx-line); border-radius: 999px;
  background: rgba(7, 4, 13, .7); color: #e3d8f7;
  font-size: .8125rem; cursor: pointer;
}

/* ── Intro ── */
.vx-intro__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.vx-intro__body { display: grid; gap: 1.3rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height: 1.7; color: #d4cae3; }

/* ── Example screens ── */
.vx-screen {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background: #0d0818;
  isolation: isolate;
  box-shadow: 0 0 0 1px rgba(214, 198, 255, .28), 0 30px 70px -30px rgba(80, 30, 170, .85);
  transition: box-shadow var(--duration-normal) var(--vx-ease), transform var(--duration-normal) var(--vx-ease);
}
.vx-screen::after { /* holographic edge sheen */
  content: '';
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .14), transparent 30%, transparent 75%, rgba(201, 178, 255, .14));
  transition: opacity var(--duration-normal);
}
.vx-screen__video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0d0818; }
.vx-screen__play {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  border: 0; padding: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(7, 4, 13, .55));
  color: #fff; cursor: pointer;
}
.vx-screen__play[hidden] { display: none; }
.vx-screen__glyph {
  display: grid; place-items: center;
  width: 74px; height: 74px; border-radius: 50%;
  padding-left: 4px;
  background: rgba(20, 10, 38, .5);
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 10px rgba(143, 99, 245, .14), 0 0 40px rgba(143, 99, 245, .7);
  transition: transform var(--duration-normal) var(--vx-ease), box-shadow var(--duration-normal);
}
.vx-screen__badge {
  position: absolute; left: .9rem; bottom: .9rem; z-index: 4;
  padding: .3rem .6rem; border-radius: 999px;
  background: rgba(7, 4, 13, .72);
  font-family: var(--font-mono); font-size: .72rem; color: #e3d8f7;
  pointer-events: none;
  transition: opacity var(--duration-fast);
}
.vx-screen.is-playing .vx-screen__badge,
.vx-screen.is-playing::after { opacity: 0; }
.vx-screen__play:focus-visible { outline: none; }
.vx-screen__play:focus-visible .vx-screen__glyph { box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--vx-violet), 0 0 40px rgba(143, 99, 245, .7); }

/* Featured case */
.vx-feature {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}
.vx-feature__media { position: relative; }
.vx-feature__media::before { /* halo behind the featured screen */
  content: '';
  position: absolute; inset: -12% -18%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(143, 99, 245, .45), transparent 75%);
  filter: blur(10px);
}
.vx-feature__label { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .02em; color: #c9b2ff; }
.vx-feature__title { margin-top: .9rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.vx-feature__text { margin-top: 1.2rem; max-width: 56ch; font-size: clamp(1.02rem, 1rem + .25vw, 1.15rem); line-height: 1.7; color: #d4cae3; }
.vx-feature__points { display: grid; gap: .7rem; margin-top: 1.6rem; padding: 0; list-style: none; }
.vx-feature__points li { display: flex; gap: .7rem; align-items: flex-start; color: #ece5f7; }
.vx-feature__points svg { flex: none; margin-top: .15rem; color: var(--vx-violet); }
.vx-feature__meta { margin-top: 1.6rem; font-family: var(--font-mono); font-size: .8rem; color: #a99cbf; }

/* The other examples: three columns, a swipe rail on phones */
.vx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); padding: 0; margin: 0; list-style: none; }
.vx-item__kicker { margin-top: 1.25rem; font-family: var(--font-mono); font-size: .76rem; color: #c9b2ff; }
.vx-item__title { margin-top: .45rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.15; }
.vx-item__text { margin-top: .6rem; line-height: 1.6; color: #c9bfd9; }
.vx-note {
  margin: clamp(2rem, 3vw, 3rem) auto 0;
  max-width: 44rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 2rem);
  line-height: 1.3;
  color: #efe8fb;
  text-wrap: balance;
}

/* ── Uses ── */
.vx-uses__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; padding: 0; margin: 0; list-style: none; }
.vx-use {
  --mx: 50%; --my: 0%;
  position: relative;
  display: grid; gap: .7rem; align-content: start;
  min-height: 15rem;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border-radius: 20px;
  background:
    radial-gradient(240px circle at var(--mx) var(--my), rgba(143, 99, 245, .18), transparent 70%) padding-box,
    linear-gradient(160deg, rgba(28, 16, 48, .9), rgba(12, 7, 22, .9)) padding-box,
    linear-gradient(140deg, rgba(188, 157, 248, .45), rgba(103, 48, 201, .12) 50%, rgba(155, 231, 255, .25)) border-box;
  border: 1px solid transparent;
}
.vx-use__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: .6rem;
  border-radius: 14px;
  color: #e9defe;
  background: rgba(143, 99, 245, .16);
  box-shadow: inset 0 0 0 1px rgba(188, 157, 248, .35), 0 0 24px rgba(143, 99, 245, .35);
}
.vx-use h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; }
.vx-use p { line-height: 1.6; color: #c9bfd9; }

/* ── Process: glowing timeline ── */
.vx-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); padding: 0; margin: 0; list-style: none; counter-reset: none; }
.vx-steps::before {
  content: '';
  position: absolute; left: 28px; right: 28px; top: 27px; height: 1px;
  background: linear-gradient(90deg, rgba(143, 99, 245, 0), rgba(188, 157, 248, .8), rgba(232, 121, 249, .6), rgba(143, 99, 245, 0));
  box-shadow: 0 0 12px rgba(143, 99, 245, .8);
}
.vx-step { position: relative; display: grid; gap: .7rem; align-content: start; }
.vx-step__node {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: .9rem;
  border-radius: 50%;
  font-family: var(--font-mono); font-size: .9rem; color: #fff;
  background: radial-gradient(circle at 35% 30%, #a98af5, #4b1fa8 70%);
  box-shadow: 0 0 0 6px rgba(143, 99, 245, .14), 0 0 30px rgba(143, 99, 245, .8);
}
.vx-step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; }
.vx-step p { line-height: 1.6; color: #c9bfd9; }

/* ── Why ── */
.vx-why__inner { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.vx-why__list { display: grid; gap: 0; margin: 0; }
.vx-why__list > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1rem 2rem; padding-block: 1.6rem; border-top: 1px solid var(--vx-line); }
.vx-why__list > div:last-child { border-bottom: 1px solid var(--vx-line); }
.vx-why__list dt { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; }
.vx-why__list dd { margin: 0; line-height: 1.6; color: #c9bfd9; }

/* ── FAQ ── */
.vx-faq__inner { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.vx-faq__list { display: grid; gap: .75rem; }
.vx-faq__item { border-radius: 16px; background: rgba(20, 12, 34, .7); box-shadow: inset 0 0 0 1px var(--vx-line); }
.vx-faq__item[open] { box-shadow: inset 0 0 0 1px rgba(188, 157, 248, .45), 0 18px 50px -30px rgba(143, 99, 245, .8); }
.vx-faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 60px; padding: 1rem 1.25rem;
  font-weight: 550; font-size: 1.05rem;
  cursor: pointer; list-style: none;
}
.vx-faq__item summary::-webkit-details-marker { display: none; }
.vx-faq__icon { position: relative; flex: none; width: 18px; height: 18px; }
.vx-faq__icon::before, .vx-faq__icon::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: #c9b2ff; transition: transform var(--duration-normal) var(--vx-ease); }
.vx-faq__icon::after { transform: rotate(90deg); }
.vx-faq__item[open] .vx-faq__icon::after { transform: rotate(0); }
.vx-faq__item p { padding: 0 1.25rem 1.25rem; line-height: 1.65; color: #d4cae3; max-width: 62ch; }
.vx-faq__item summary:focus-visible { outline: 2px solid var(--color-brand-light); outline-offset: 2px; border-radius: 16px; }

/* ── Final CTA (shares the form layout of the home) ── */
.vx-cta { position: relative; background: radial-gradient(46% 50% at 70% 50%, rgba(103, 48, 201, .26), transparent 100%), var(--vx-bg); border-top: 1px solid var(--vx-line); }
.vx-cta .final-cta__lead { color: var(--color-text-muted); max-width: 46ch; }
.vx-cta .final-cta__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }

/* ── Hover (fine pointers only) ── */
@media (hover: hover) and (pointer: fine) {
  .vx-screen:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(214, 198, 255, .55), 0 0 50px rgba(143, 99, 245, .45), 0 40px 80px -30px rgba(80, 30, 170, .95); }
  .vx-screen__play:hover .vx-screen__glyph { transform: scale(1.08); box-shadow: 0 0 0 14px rgba(143, 99, 245, .18), 0 0 60px rgba(143, 99, 245, .9); }
  .vx-link:hover svg { transform: translateX(4px); }
  .vx-faq__item summary:hover { color: #fff; }
}

/* ── Layout ── */
@media (max-width: 1023px) {
  .vx-hero { min-height: 0; }
  .vx-hero__inner, .vx-intro__inner, .vx-why__inner, .vx-faq__inner { grid-template-columns: 1fr; }
  .vx-portal__stage { width: min(78vw, 420px); }
  .vx-uses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .vx-steps::before { display: none; }
  .vx-feature { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .vx-hero { padding-top: 2rem; text-align: center; }
  .vx-hero__lead { margin-inline: auto; }
  .vx-hero__actions, .vx-chips { justify-content: center; }
  .vx-hero__actions .button { width: 100%; max-width: 24rem; }
  .vx-heading { text-align: center; justify-items: center; }
  .vx-intro .vx-h2, .vx-why .vx-h2, .vx-faq .vx-h2 { text-align: center; }
  .vx-feature { grid-template-columns: 1fr; justify-items: center; text-align: left; }
  .vx-feature__media { width: min(82vw, 360px); }
  /* Swipe rail: three vertical screens side by side */
  .vx-rail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1);
    padding: .5rem var(--gutter) 1rem;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .vx-rail::-webkit-scrollbar { display: none; }
  .vx-rail:focus-visible { outline: 2px solid var(--color-brand-light); outline-offset: -2px; border-radius: 12px; }
  .vx-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74vw; }
  .vx-grid > li { scroll-snap-align: start; }
  .vx-uses__grid, .vx-steps { grid-template-columns: 1fr; }
  .vx-use { min-height: 0; }
  .vx-why__list > div { grid-template-columns: 1fr; gap: .5rem; }
  .vx-motion { left: 50%; transform: translateX(-50%); }
}

/* ── Reduced motion: still frames, no drift, no spin ── */
@media (prefers-reduced-motion: reduce) {
  .vx-section::before, .vx-section::after, .vx-portal__ring, .vx-portal__stage::before, .vx-portal__floor, .vx-glow { animation: none; }
  .vx-portal__frame, .vx-screen, .vx-screen__glyph, .vx-link svg { transition: none; }
}
.vx-hero[data-paused] .vx-portal__ring,
.vx-hero[data-paused] .vx-portal__stage::before,
.vx-hero[data-paused] .vx-portal__floor,
.vx-hero[data-paused] .vx-glow { animation-play-state: paused; }

/* ══ Alignment: centred headings, justified narrative text (owner request 2026-10-04) ══ */
.vx-heading { margin-inline: auto; justify-items: center; text-align: center; }
.vx-heading p { margin-inline: auto; }
.vx-justify, .vx-intro__body p, .vx-feature__text, .vx-faq__item p {
  text-align: justify;
  text-align-last: center;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.vx-intro__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: clamp(1.5rem, 3vw, 2.5rem); }
.vx-intro__body { max-width: 64ch; }
.vx-feature__copy { display: grid; justify-items: center; text-align: center; }
.vx-feature__text { max-width: 58ch; }
.vx-feature__points { width: fit-content; margin-inline: auto; text-align: left; }
.vx-item { text-align: center; }
.vx-item__text { max-width: 36ch; margin-inline: auto; }
.vx-use { justify-items: center; text-align: center; }
.vx-step { justify-items: center; text-align: center; }
.vx-step__node { margin-inline: auto; }
.vx-steps::before { left: 12.5%; right: 12.5%; }
.vx-why__inner, .vx-faq__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.vx-why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; width: 100%; }
.vx-why__list > div,
.vx-why__list > div:last-child {
  grid-template-columns: 1fr; gap: .7rem; justify-items: center;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 0; border-radius: 20px;
  background: linear-gradient(160deg, rgba(28, 16, 48, .75), rgba(12, 7, 22, .75));
  box-shadow: inset 0 0 0 1px var(--vx-line);
}
.vx-faq__list { width: min(100%, 860px); text-align: left; }
.vx-faq__item summary { text-align: left; }

/* ══ Motion ══ */
/* Hero entrance: pure CSS, so it plays before any script. */
@keyframes vx-rise { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes vx-portal-in { from { opacity: 0; transform: scale(.86) rotate(-4deg); filter: blur(10px) brightness(1.8); } to { opacity: 1; transform: none; filter: none; } }
@keyframes vx-ring-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.vx-hero__title { animation: vx-rise .9s var(--vx-ease) .05s both; }
.vx-hero__lead { animation: vx-rise .9s var(--vx-ease) .2s both; }
.vx-hero__actions { animation: vx-rise .9s var(--vx-ease) .32s both; }
.vx-chips li { animation: vx-rise .8s var(--vx-ease) both; }
.vx-chips li:nth-child(1) { animation-delay: .44s; }
.vx-chips li:nth-child(2) { animation-delay: .52s; }
.vx-chips li:nth-child(3) { animation-delay: .6s; }
.vx-portal__stage { animation: vx-portal-in 1.3s var(--vx-ease) .15s both; }
.vx-portal__caption { animation: vx-rise .9s var(--vx-ease) .7s both; }

/* Scroll reveals: only when video.js marks the page (content stays visible without JS). */
.vx-anim [data-vx-reveal] {
  opacity: 0;
  transform: translateY(34px) scale(.985);
  filter: blur(6px);
  transition: opacity .9s var(--vx-ease), transform .9s var(--vx-ease), filter .9s var(--vx-ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.vx-anim [data-vx-reveal].is-in { opacity: 1; transform: none; filter: none; }
/* The featured screen opens like a shutter. */
.vx-anim .vx-feature__media[data-vx-reveal] { clip-path: inset(12% 12% 12% 12% round 22px); transform: scale(.94); transition-property: opacity, transform, filter, clip-path; transition-duration: 1.2s; }
.vx-anim .vx-feature__media[data-vx-reveal].is-in { clip-path: inset(-20% -30% -20% -30% round 22px); transform: none; }
/* The process line draws itself, then the nodes light up. */
.vx-anim .vx-steps::before { transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--vx-ease) .2s; }
.vx-anim .vx-steps.is-in::before { transform: scaleX(1); }
.vx-anim .vx-step__node { transform: scale(.4); opacity: 0; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), opacity .5s; transition-delay: calc(.3s + var(--i, 0) * 260ms); }
.vx-anim .vx-steps.is-in .vx-step__node { transform: none; opacity: 1; }

/* Holographic border that slowly orbits the featured video. */
@property --vx-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.vx-feature__media::after {
  content: '';
  position: absolute; inset: -3px; z-index: 0;
  border-radius: 25px;
  padding: 2px;
  background: conic-gradient(from var(--vx-angle), transparent 0 55%, rgba(201, 178, 255, .95) 70%, rgba(232, 121, 249, .9) 80%, rgba(155, 231, 255, .8) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 10px rgba(143, 99, 245, .8));
  animation: vx-orbit 6s linear infinite;
  pointer-events: none;
}
.vx-feature__media .vx-screen { z-index: 1; }
@keyframes vx-orbit { to { --vx-angle: 360deg; } }

/* Cards tilt slightly towards the cursor (vars set by video.js). */
.vx-use, .vx-why__list > div { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .5s var(--vx-ease), box-shadow .3s; }
@media (hover: hover) and (pointer: fine) {
  .vx-use:hover { box-shadow: 0 30px 70px -35px rgba(143, 99, 245, .9); }
  .vx-use:hover .vx-use__icon { transform: translateY(-3px) scale(1.06); }
  .vx-use__icon { transition: transform .4s var(--vx-ease); }
  .vx-item:hover .vx-item__title { color: #e9defe; }
}

@media (max-width: 1023px) {
  .vx-why__list { grid-template-columns: 1fr; }
  .vx-feature__copy { justify-items: center; }
}
@media (max-width: 767px) {
  .vx-feature { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .vx-hero__title, .vx-hero__lead, .vx-hero__actions, .vx-chips li, .vx-portal__stage, .vx-portal__caption { animation: none; }
  .vx-feature__media::after { animation: none; }
  .vx-use, .vx-why__list > div { transform: none; transition: none; }
}

@media(prefers-reduced-motion:reduce) { .vx-anim [data-vx-reveal], .vx-anim .vx-feature__media[data-vx-reveal] { opacity:1; transform:none; filter:none; clip-path:none; transition:none; } .vx-anim .vx-step__node { opacity:1; transform:none; transition:none; } .vx-anim .vx-steps::before { transform:none; transition:none; } }