/* ============================================================
   HEADS UP: AI INTAKE MODULE
   Self-contained — no external stylesheet dependency.
   Values sourced from css/variables.css and css/sections.css.
   ============================================================ */

.huai-section {
  --huai-dark:      var(--theme-dark);
  --huai-light:     var(--theme-light);
  --huai-grad-1:    var(--theme-huai-grad-1);
  --huai-grad-2:    var(--theme-huai-grad-2);
  --huai-light-60:  color-mix(in srgb, var(--theme-light) 60%, transparent);
  --huai-radius:    1.4em;
  --huai-medium-wide: 60em;

  position: relative;
  overflow: visible;
}


.huai-section .huai-btn { padding: 22px 40px!important }

.huai-section .image-column-hero { position:relative;width:100%;max-width:54%;top:100px }


/* Wrap utility */
.huai-section .wrap {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
  position: relative;
  width: 100%;
}

.huai-text-content svg use {
    fill: #7797ff
}

.huai-section .huai-text-content h1 { font-size:36px;line-height:1.3 }

/* Callout card */
.huai-callout {
  background-color: var(--huai-light);
  border-radius: var(--huai-radius);
  display: flex;
  overflow: hidden;
  padding: 4em clamp(2em, 10%, 6em);
  position: relative;
  width: 100%;
}

.huai-callout.unconstrained {
  max-width: 46%;
  overflow: visible;
  width: 100%;
  padding-top:0;
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
}

@media screen and (max-width: 768px) {
  .huai-callout {
    flex-direction: column-reverse;
    gap: 2em;
    padding: 2em;
    width:100% !important; 
    max-width:100% !important;

  }
}

/* Decorative blue orb */
.huai-blue-orb {
  background: radial-gradient(circle, rgba(53,93,255,0.6), rgba(53,93,255,0));
  top: 30em;
  left: 80%;
  bottom: 0;
  right: 0;
  filter: blur(4em);
  height: 60em;
  width: 86em;
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}


/* Text content */
.huai-text-content {
  position: relative;
  width: 100%
  z-index: 2;
  max-width:480px
}

@media screen and (max-width: 768px) {
  
  .huai-blue-orb { top: -13em; }
  
  #vimeo-video { width: 300px !important;
    aspect-ratio: 9 / 16 !important;
    height: 420px !important; }
  
  .huai-text-content {
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
    padding-left:20px;
    padding-right:20px
  }
}

/* Tag row */
.huai-tag-row {
  display: flex;
  align-items: center;
  justify-content:flex-start;
  margin-bottom: 2em;
}

.huai-tag-row svg { width:16px;height:16px;margin-right:10px }

.huai-tag-label {
  background: linear-gradient(45deg, var(--huai-grad-1), var(--huai-grad-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 16px;
  margin-bottom:0
}

.huai-tag-label p { margin-bottom:0;font-size:16px }

/* Heading */
.huai-heading {
  font-size: 36px;
  margin-bottom: 0.5em;
}

.huai-heading .huai-gradient-text { background: linear-gradient(45deg, var(--huai-grad-1), var(--huai-grad-2));
    -webkit-text-fill-color: transparent;
    background-position: 50%;
    background-size: 200%;
    -webkit-background-clip: text;
    background-clip: text; }



@media screen and (max-width: 768px) {
  
  .huai-section .app-stores { justify-content:center }
  
  .huai-tag-row { justify-content:center }
  
  .huai-section { overflow:hidden !important }
  
  .huai-section .wrap { flex-direction:column-reverse;max-width:100% }
  
  .huai-section .image-column-hero { min-height: 201px;
        max-width: 100%;
        max-height: unset;
        overflow: hidden;
        display: flex;
        justify-content: center;
        max-height: 548px; }
  
  .huai-callout-image { position:static !important;position: static !important;
        margin-left: auto;
        margin-right: auto; } 
  
  
  .huai-heading { font-size: var(--theme-h2-mobile); }
}

/* Body text */
.huai-body-text {
  font-size: 1.25em;
  margin-bottom: 2rem;
  line-height: 140%;
}

/* CTA row */
.huai-cta-row {
  display: flex;
  align-items: center;
  gap: 1em;
}

@media screen and (max-width: 768px) {
  .huai-cta-row {
    align-items: center;
    justify-content: center;
    max-width: 100%;
    text-align: center;
  }
}

/* Button */
.huai-btn {
  align-items: center;
  background: linear-gradient(120deg, var(--btn-accent-grad-start), var(--btn-accent-grad-end));
  border: none;
  border-radius: var(--btn-border-radius);
  color: var(--btn-accent-text) !important;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-weight: 800;
  justify-content: center;
  min-height: var(--btn-height);
  padding: 0.5em var(--btn-padding-x);
  text-align: center;
  text-decoration: none;
  user-select: none;
  font-family: inherit;
  font-size: inherit;
  transition: all 0.2s ease-in-out;
  gap: 0.6em;
}

.huai-btn:hover { opacity: calc(var(--btn-accent-hover-opacity) * 0.01); }

.huai-btn-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: currentColor;
}

/* Product image */
.huai-callout-image {
    position: absolute;
    z-index: 1;
    top: 5%;
    width: 58% !important;
    right: 30%;
    height: auto !important;
    /* left: 0; */
}

@media screen and (max-width: 1024px) {
  .huai-callout-image { top: 55%; }
}

@media screen and (max-width: 768px) {
  .huai-callout-image {
    position: relative;
    top: 0;
    transform: none;
    right: 0;
    width: 120% !important;
  }
  
  .blurred-orb-banner.purple  { opacity: 0.1;
    right: 0;
    width: 100px;
    /* left: unset; */
    transform: unset; }
  
}



.blurred-orb-banner.purple {
    background: radial-gradient(circle, #c755f0cc, #c755f000);
    width: 714px;
    height: 714px;
    animation-duration: 22s;
    animation-delay: 6s;
    top: 0%;
    right: -60%;
}
.blurred-orb-banner {
    filter: blur(6em);
    pointer-events: none;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}


.blurred-orb-banner.brand {
    background: radial-gradient(circle, #ffd234cc, #ffd23400);
    width: 544px;
    height: 544px;
    top: 10%;
    left: -22vh;
}


.blurred-orb-banner.tertiary {
    background: radial-gradient(circle, var(--tertiary-accent), #fffff000);
    z-index: 0;
    width: 100%;
    height: 1344px;
    animation: none;
    top: 0;
    left: 50%;
}


.huai-section .videp-container { position: absolute;
    top: 50%;
    right: 0px;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    max-height: 90vh;
    height: auto;
    transform: translateY(-50%);
    width: 55%; }

.huai-section .videp-container iframe {
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1; }


.huai-section .video-inner-container { position: absolute;
    top: 0px;
    right: 0px;
    display: flex;
    height: 100%;
    width: 100%; }




.blurred-orb-banner {
  position: fixed;
  border-radius: 50%; /* Makes it a circle */
  filter: blur(100px); /* Creates the glow effect */
  z-index: 0; /* Keeps it visible, change to -1 if it covers text */
  opacity: 0.6; /* Adjust how intense the glow is */
}

/* Position the Purple Orb top left */
.purple {

}

/* Position the Brand Orb bottom right */
.brand {

}