@charset "UTF-8";/* stylelint-disable unit-disallowed-list */
astro-vision-player {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--border-radius);
  width: 100%;
  height: 100%;
}
article > astro-vision-player:not(first-child) {
  margin-top: var(--spacing-block);
}
astro-vision-player vision-player .vip-media-ele {
  left: 0;
}
astro-vision-player vision-player h1, astro-vision-player h2, astro-vision-player h3 {
  border: none;
}
carousel-root[data-has-aspect=true] astro-vision-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.player-overlay {
  background: var(--color-bg);
}
.player-overlay .ov-bg {
  display: none;
}
.player-overlay wjs-overlay {
  width: 100%;
  height: 100%;
}
.player-overlay .ov-box {
  display: block;
  overflow: hidden;
  width: calc(100vw - var(--spacing-block) * 2);
  margin: 0;
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.8);
  aspect-ratio: 16/9;
}
.player-overlay .pu-box {
  max-width: 400px !important;
}
.player-overlay vision-player {
  --control-color: var(--color-1st);
  --control-border-color: var(--color-1st);
  --control-background-hover: var(--color-1st);
  --control-background-active: var(--color-1st);
  --control-background-focus: var(--color-1st);
  --button-border-style: dotted;
  --button-background: transparent;
  --button-background-hover: var(--color-1st);
  --button-background-active: var(--color-1st);
  --button-background-focus: var(--color-1st);
  --pu-win-width: 300px;
  --button-color: var(--color-text);
}
.player-overlay vision-player input[type=range]::-moz-range-thumb {
  background: var(--color-1st) !important;
}
.player-overlay vision-player input[type=range]::-ms-thumb {
  background: var(--color-1st) !important;
}
.player-overlay vision-player input[type=range]::-webkit-slider-thumb {
  background: var(--color-1st) !important;
}
.player-overlay vision-player img.overlay-demo {
  width: 15vmin;
  max-width: 200px;
  opacity: 0.8;
}
.player-overlay vision-player .mp-spinner-wrapper {
  position: relative;
  top: 0.6vw;
  left: 0.6vw;
}
@media (min-aspect-ratio: 16/9) {
  .player-overlay .ov-box {
    width: auto;
    height: calc(90vh - var(--spacing-block) * 2);
    height: calc(100svh - var(--spacing-block) * 2);
  }
}/* stylelint-disable unit-disallowed-list */
hero-home {
  position: relative;
  display: block;
}
hero-home astro-vision-player {
  will-change: opacity, transform;
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}
hero-home #video-backdrop {
  transition-duration: var(--transition-duration, 0.3s);
  transition-delay: 0s;
  transition-timing-function: ease-in-out;
  transition-property: opacity;
  opacity: 0;
  will-change: opacity;
}
hero-home #video-backdrop-overlay {
  will-change: transform;
}/* stylelint-disable unit-disallowed-list */
feature-list {
  --gap: 2em;
  position: relative;
  margin: var(--gap) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  /* stylelint-disable-next-line at-rule-prelude-no-invalid, media-query-no-invalid */
}
feature-list > feature-item {
  max-width: calc(33.333% - var(--gap) * 2 / 3);
  flex: 0 0 calc(33.333% - var(--gap) * 2 / 3);
  will-change: transform, opacity;
}
@media only screen and (min-width: 1400px) {
  feature-list > feature-item {
    flex: 0 0 calc(25% - var(--gap) * 3 / 4);
    max-width: calc(25% - var(--gap) * 3 / 4);
  }
}
@media only screen and (max-width: 860px) {
  feature-list > feature-item {
    flex: 0 0 calc(50% - var(--gap) / 2);
    max-width: calc(50% - var(--gap) / 2);
  }
}
@media only screen and (max-width: 449px) {
  feature-list.layout-width-wide {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  feature-list > feature-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
}/* stylelint-disable unit-disallowed-list */
:not(.ov-box) > wjs-overlay {
  position: absolute !important; /* Outside the DOM flow */
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  white-space: nowrap;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
}
.feature-overlay.ov.updating-start .ov-box {
  opacity: 0;
  transform: translateX(-20%);
}
.feature-overlay.ov.updating-end .ov-box {
  opacity: 0;
  transform: translateX(20%);
}
.feature-overlay.ov.updating-start.feature-overlay-prev .ov-box {
  transform: translateX(20%);
}
.feature-overlay.ov.updating-end.feature-overlay-prev .ov-box {
  transform: translateX(-20%);
}
.feature-overlay .ov-box {
  max-width: 900px;
}
.feature-overlay .feature-item-video {
  aspect-ratio: 16/9;
  width: 100%;
  background-color: var(--color-contrast3);
}
.feature-overlay astro-vision-player {
  box-shadow: var(--header-shadow);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
feature-item {
  display: block;
  will-change: opacity, transform;
}
.feature-item-content {
  padding: var(--spacing-block);
  background-color: var(--color-bg);
}
.feature-item-content h4 {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-block-small);
  font-size: var(--font-size5);
  padding-bottom: var(--spacing-block-small);
  border-bottom: var(--border-width) solid transparent;
  border-image: linear-gradient(90deg, #FF952A, var(--color-1st), #FF952A) 1;
  text-align: center;
  margin-bottom: var(--spacing-block);
}
.ov .feature-item-content h4 {
  display: flex;
}
.feature-item-content button {
  border: none;
}
.feature-item-content p {
  font-size: var(--font-size3);
}
.feature-item-content p + p {
  margin-top: var(--spacing-block);
}
/*
* Goal: On hover, SVG scales up smoothly, then enters a gentle pulse.
* On mouseout, it eases back to the base scale without a jump.
*
* Technique: Use a typed custom property (@property) and compose transforms
* with variables: transform: scale(var(--scale-base) * var(--pulse)).
* The pulse animation animates --pulse. When hover ends (animation removed),
* transform changes, and the transition on transform handles the smooth return.
*/
/* 1) Register animatable custom property for the pulse factor. */
@property --pulse {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
/* Optional: base scale variable (not animated directly, but transitioned via transform). */
@property --scale-base {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
/* 2) Keyframes animate the custom property, not transform. */
@keyframes pulseScale {
  0%, 100% {
    --pulse: 1;
  }
  50% {
    --pulse: 1.05;
  } /* tweak amplitude here */
}
.feature-item-inner {
  transition-duration: var(--transition-duration, 0.3s);
  transition-delay: 0s;
  transition-timing-function: ease-in-out;
  transition-property: transform, box-shadow;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-block-small);
  border-radius: var(--border-radius);
  background-color: var(--color-box-bg);
  aspect-ratio: 16/9;
  overflow: hidden;
  text-align: center;
  /* Hover state: bump base scale and start pulse animation. */
}
.feature-item-inner wjs-overlay {
  display: block;
}
.feature-item-inner:hover {
  transform: scale(1.05);
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.feature-item-inner h3:not(:first-child) {
  margin-top: var(--spacing-block-small);
  color: var(--color-contrast9);
}
.feature-item-inner svg {
  transition-duration: var(--transition-duration, 0.3s);
  transition-delay: 0s;
  transition-timing-function: ease-in-out;
  transition-property: transform;
  width: 30%;
  height: auto;
  aspect-ratio: 1/1;
  flex-shrink: 0;
  --scale-base: 1;
  --pulse: 1; /* animated on hover */
  transform: scale(calc(var(--scale-base) * var(--pulse)));
}
.feature-item-inner:hover svg {
  --scale-base: 1.3;
  transition-duration: 3s;
  transition-timing-function: ease-out;
  animation: pulseScale 2s ease-in-out infinite 2.8s;
  /* Note: We animate --pulse via @keyframes; transform keeps transitioning. */
}
/* Hide wjs-overlay elements that are NOT children of .ov containers */
/* Accessibility: respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .feature-item-inner,
  .feature-item-inner svg {
    transition-duration: 0.001ms; /* effectively no transition */
  }
  .feature-item-inner:hover svg {
    animation: none;
  }
}/* stylelint-disable unit-disallowed-list */
logo-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 1em;
}
logo-icon-wrapper svg {
  width: 100%;
  min-width: 200px;
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 0 2em rgba(0, 0, 0, 0.7));
}
logo-icon-wrapper svg #mask-2 > use {
  transform-origin: center;
}
.sf[data-astro-cid-rmt2cfs6]{position:fixed;inset:0;pointer-events:none;contain:layout paint;transform-style:preserve-3d;perspective:1000px;overflow:hidden;transform:translate3d(0,0,0)}
.sf-space[data-astro-cid-rmt2cfs6]{position:absolute;left:-10vw;right:-10vw;top:-10vh;transform-style:preserve-3d;will-change:transform;min-height:100%}
.sf-star[data-astro-cid-rmt2cfs6]{position:absolute;display:block;width:72px;height:50px;color:var(--color-contrast5);transform-origin:50% 50%}
@keyframes sfTwinkle{0%,100%{opacity:0.05}50%{opacity:0.3}}
.tw1[data-astro-cid-rmt2cfs6]{animation:sfTwinkle 3.2s ease-in-out infinite}
.tw2[data-astro-cid-rmt2cfs6]{animation:sfTwinkle 4.5s ease-in-out infinite}
.tw3[data-astro-cid-rmt2cfs6]{animation:sfTwinkle 5.4s ease-in-out infinite}