/* =====================================================================
 * Homepage Embed Styles
 * Extracted from Webflow code embed blocks (<div class="w-embed">)
 * These are page-specific styles only needed on the homepage.
 * ===================================================================== */

/* ---------------------------------------------------------------
 * Gradient border animation (used on hero cards)
 * --------------------------------------------------------------- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.gradient-border-animated {
  position: relative;
  overflow: hidden;
  padding: 2px;
  border-radius: 16px;
}

.gradient-border-animated::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform-origin: center;
  translate: -50% -50%;
  background: conic-gradient(
    rgba(18,57,255,0.12) 0%,
    rgba(18,57,255,0.12) 35%,
    #1239FF 42%,
    #2472FC 48%,
    #8711C1 52%,
    #2472FC 58%,
    rgba(18,57,255,0.12) 65%,
    rgba(18,57,255,0.12) 100%
  );
  animation: spin 3.5s linear infinite;
  z-index: 0;
}

.gradient-border-animated > * {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------
 * Splide carousel overrides (testimonials section)
 * --------------------------------------------------------------- */
.splide__slide.study-image-slide {
  border: none !important;
}

.splide__slide.study-image-slide.is-visible.is-active .splide__item-image {
  opacity: 100%;
  filter: grayscale(0);
}

.splide__slide.study-image-slide.is-visible.is-active .splide__tem-image-wrapper {
  border: 1px solid #1239ff;
}

/* ---------------------------------------------------------------
 * Sticky navbar gradient
 * --------------------------------------------------------------- */
.navbar-wrapper-transparent.sticky {
  box-shadow: 0px 1px 15px rgb(0 0 0 / 5%);
  background: linear-gradient(135deg, #330E45 0%, #23179B 56.25%);
}

/* ---------------------------------------------------------------
 * Hero headline highlight decoration
 * --------------------------------------------------------------- */
.hero-headline-highlight {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: rgba(252, 211, 77, 0.5);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------
 * Hero demo tab menu items (semi-transparent white text)
 * --------------------------------------------------------------- */
.apps-menu-item-hero.w-tab-link {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  color: color-mix(in oklab, #fff 40%, transparent);
}

.apps-menu-item-hero.w-tab-link:hover {
  color: color-mix(in oklab, #fff 80%, transparent);
}

.apps-menu-item-hero.w--current {
  background-color: color-mix(in oklab, #fff 15%, transparent);
  border-color: color-mix(in oklab, #fff 30%, transparent) !important;
  color: color-mix(in oklab, #fff 90%, transparent);
}

/* ---------------------------------------------------------------
 * Hero trust badges & CTA section purple text
 * --------------------------------------------------------------- */
.hero-review-item,
.section-subheadline-purple {
  color: color-mix(in oklab, #d9b3ffcc 80%, transparent);
  outline-color: color-mix(in oklab, lab(34.924% 0 0) 50%, transparent);
}

.hero-review-item:hover .text-review-hero {
  color: #fff;
  filter: brightness(0.9);
}

/* ---------------------------------------------------------------
 * AI background gradients (hero + CTA purple sections)
 * --------------------------------------------------------------- */
.ai-bg-linear {
  background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(135, 17, 193, 0.20) 0%, transparent 60%);
  inset: calc(0.25rem * 0);
}

.ai-bg-gradient {
  background: linear-gradient(165deg, #1E0D5C 0%, #23179B 50%, #0D0628 100%);
  inset: calc(0.25rem * 0);
}

/* ---------------------------------------------------------------
 * Glassmorphism card style
 * --------------------------------------------------------------- */
.solid-bg-card {
  border: 1px solid oklab(0.999994 0.0000455678 0.0000200868 / 0.1) !important;
  backdrop-filter: blur(8px) !important;
  background-color: color-mix(in oklab, #fff 6%, transparent) !important;
}

.text-color-white-mix {
  color: color-mix(in oklab, var(--color-white) 60%, transparent) !important;
}

/* ---------------------------------------------------------------
 * Nav buttons (glassmorphism style in dark header)
 * --------------------------------------------------------------- */
.button.is-nav {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  color: color-mix(in oklab, #fff 95%, transparent);
  background-color: color-mix(in oklab, #fff 8%, transparent) !important;
  border: 1px solid color-mix(in oklab, #fff 25%, transparent) !important;
}

.button.is-nav:hover {
  background-color: color-mix(in oklab, #fff 15%, transparent) !important;
}

/* ---------------------------------------------------------------
 * CTA background layers (purple gradient sections)
 * --------------------------------------------------------------- */
.cta-bg-top,
.cta-bg-middle,
.cta-bg-bottom {
  position: absolute;
  inset: calc(0.25rem * 0);
}

.cta-bg-top.hero,
.cta-bg-middle.hero,
.cta-bg-bottom.hero {
  bottom: 19% !important;
}

@media screen and (max-width: 479px) {
  .cta-bg-top.hero,
  .cta-bg-middle.hero,
  .cta-bg-bottom.hero {
    bottom: 5% !important;
  }
}

.cta-bg-top {
  background: linear-gradient(165deg, #330E45 0%, #1E0D5C 25%, #23179B 50%, #1A1070 75%, #0D0628 100%);
}

.cta-bg-middle {
  background: radial-gradient(ellipse 80% 50% at 50% 25%, rgba(135, 17, 193, 0.25) 0%, transparent 70%);
}

.cta-bg-bottom {
  background: radial-gradient(ellipse 60% 40% at 50% 60%, rgba(36, 114, 252, 0.12) 0%, transparent 60%);
}

/* ---------------------------------------------------------------
 * "Book My Demo" CTA button glow effect
 * --------------------------------------------------------------- */
.button.is-white.is-demo {
  box-shadow:
    0 0 25px rgba(18, 57, 255, 0.5),
    0 0 60px rgba(18, 57, 255, 0.25),
    0 0 100px rgba(135, 17, 193, 0.15);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.button.is-white.is-demo:hover {
  box-shadow:
    0 0 40px rgba(18, 57, 255, 0.7),
    0 0 90px rgba(18, 57, 255, 0.4),
    0 0 140px rgba(135, 17, 193, 0.25);
  transform: translateY(-2px);
}

.button.is-white.is-demo:active {
  box-shadow:
    0 0 20px rgba(18, 57, 255, 0.4),
    0 0 50px rgba(18, 57, 255, 0.2);
  transform: translateY(0);
}

/* ---------------------------------------------------------------
 * Countdown timer styling
 * --------------------------------------------------------------- */






@keyframes aty-tick {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}



/* ---------------------------------------------------------------
 * White text opacity utilities (used in purple/dark sections)
 * --------------------------------------------------------------- */
@supports (color: color-mix(in lab, red, red)) {
  .text-white-90 {
    color: color-mix(in oklab, #fff 85%, transparent);
  }

  .text-white-60 {
    color: color-mix(in oklab, #fff 60%, transparent);
  }

  .text-white-50 {
    color: color-mix(in oklab, #fff 50%, transparent);
  }

  .text-white-80 {
    color: color-mix(in oklab, #fff 80%, transparent);
  }
}

/* ---------------------------------------------------------------
 * Arcade interactive demo embed
 * --------------------------------------------------------------- */
.arcade-wrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.arcade-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.arcade-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color-scheme: light;
  z-index: 3;
}

.arcade-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 1;
  transition: opacity 0.6s ease;
}

.arcade-loader.adj {
  border-radius: 12px;
  overflow: hidden;
}

.arcade-loader.adj-smart {
  width: auto;
  left: 4%;
  right: 4%;
}

.arcade-loader.adj .arcade-blur {
  border-radius: 12px;
}

.arcade-loader.loaded {
  opacity: 0;
  pointer-events: none;
}

.arcade-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.arcade-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(240, 244, 255, 0.5);
  z-index: 1;
}

.arcade-loader .spinner {
  border: 3px solid rgba(255, 255, 255, 0.6);
  border-top-color: #1239FF;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 2;
}

.arcade-loader .arcade-loader-text {
  font-family: 'Segoe UI', Inter, sans-serif;
  font-size: 14px;
  color: #180D43;
  font-weight: 500;
  position: relative;
  z-index: 2;
}

/* Large viewport spacing adjustment */
@media screen and (min-width: 1000px) and (min-height: 1000px) {
  .apps-menu-tab-wrapper {
    margin-top: 2rem;
  }

  .heading-display-large.hero-v {
    margin-top: 2rem;
  }
}

/* ---------------------------------------------------------------
 * Apollo meetings widget z-index
 * --------------------------------------------------------------- */
#apollo-meetings-widget {
  z-index: 110000 !important;
}