/* Section title reveal, methodology layout, and native replacement animations. */
/* Section title reveal */
#root {
    --minuit-section-title-font-size: 40px;
    --minuit-section-title-line-height: 48.41px;
  }

  #root .bento__heading,
  #root .projects__heading,
  #root .app-section__title,
  #root .process-40__title,
  #root .testimonial__heading,
  #root .blog-featured-title,
  #root .cta__heading {
    font-family: Inter, sans-serif !important;
    font-size: var(--minuit-section-title-font-size) !important;
    line-height: var(--minuit-section-title-line-height) !important;
  }

  #root .cta__heading-accent {
    color: #fb68a8 !important;
  }

  #root .bento__heading-accent {
    color: #fb68a8 !important;
  }

  @keyframes minuitHeroTitleReveal {
    from {
      opacity: 0;
      transform: translate3d(0, 14px, 0);
      filter: blur(6px);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      filter: blur(0);
    }
  }

  #root .hero__title {
    animation: minuitHeroTitleReveal 920ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
    will-change: opacity, transform, filter;
  }

  #root .section-title-reveal-pending {
    opacity: 0 !important;
    transform: translate3d(0, 14px, 0) !important;
    filter: blur(6px) !important;
    transition:
      opacity 820ms ease,
      transform 820ms cubic-bezier(0.22, 1, 0.36, 1),
      filter 820ms ease !important;
    will-change: opacity, transform, filter;
  }

  #root .section-title-reveal-pending.is-section-title-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    filter: blur(0) !important;
  }

  @media (min-width: 768px) and (max-width: 991px) {
    #root {
      --minuit-section-title-font-size: 40px;
      --minuit-section-title-line-height: 48.41px;
    }
  }

  @media (max-width: 767px) {
    #root {
      --minuit-section-title-font-size: 30px;
      --minuit-section-title-line-height: 36.31px;
    }
  }

  @media (max-width: 479px) {
    #root {
      --minuit-section-title-font-size: 30px;
      --minuit-section-title-line-height: 36.31px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #root .section-title-reveal-pending {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
      transition: none !important;
    }

    #root .hero__title {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }
  }

/* Methodology development animation */
#root .process-40__visual--dev .devAnim {
    --window-loop: 14.4s;
    position: relative !important;
    width: 100% !important;
    min-height: 306px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  #root .process-40__visual--dev .devAnim__stage {
    position: relative !important;
    width: min(100%, 540px) !important;
    height: 306px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    border-radius: 22px !important;
  }

  #root .process-40__visual--dev .devAnim__stage::before {
    content: "";
    position: absolute;
    inset: 34px 28px;
    z-index: 0;
    border-radius: 999px;
    background:
      radial-gradient(circle at 28% 42%, rgba(251, 104, 168, 0.24), transparent 48%),
      radial-gradient(circle at 72% 58%, rgba(106, 59, 255, 0.24), transparent 50%);
    filter: blur(18px);
    opacity: 0.78;
  }

  #root .process-40__visual--dev .devAnim__burstLayer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  #root .process-40__visual--dev .devAnim__miniWindow {
    --window-x: 0px;
    --window-y: 0px;
    --window-width: 300px;
    --window-height: 188px;
    --window-delay: 0s;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    box-sizing: border-box !important;
    width: var(--window-width) !important;
    height: var(--window-height) !important;
    padding: 12px 14px 14px !important;
    border-radius: 16px !important;
    background: rgba(15, 15, 22, 0.86) !important;
    border: 1px solid rgba(255, 90, 170, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 18px 38px rgba(0, 0, 0, 0.38),
      0 0 24px rgba(251, 104, 168, 0.14) !important;
    opacity: 0;
    transform-origin: center;
    animation: methodologyDevWindowBurst var(--window-loop) cubic-bezier(0.2, 0.82, 0.24, 1) infinite;
    animation-delay: var(--window-delay);
    will-change: opacity, filter;
  }

  #root .process-40__visual--dev .devAnim__miniWindow:nth-child(1) {
    --window-x: -124px;
    --window-y: -92px;
    --window-width: 304px;
    --window-height: 188px;
    --window-delay: 0s;
  }

  #root .process-40__visual--dev .devAnim__miniWindow:nth-child(2) {
    --window-x: 124px;
    --window-y: -42px;
    --window-width: 296px;
    --window-height: 178px;
    --window-delay: -1.2s;
  }

  #root .process-40__visual--dev .devAnim__miniWindow:nth-child(3) {
    --window-x: 0px;
    --window-y: 92px;
    --window-width: 318px;
    --window-height: 198px;
    --window-delay: -2.4s;
  }

  #root .process-40__visual--dev .devAnim__miniWindow:nth-child(4) {
    --window-x: -128px;
    --window-y: -84px;
    --window-width: 286px;
    --window-height: 190px;
    --window-delay: -3.6s;
  }

  #root .process-40__visual--dev .devAnim__miniWindow:nth-child(5) {
    --window-x: 120px;
    --window-y: -34px;
    --window-width: 302px;
    --window-height: 182px;
    --window-delay: -4.8s;
  }

  #root .process-40__visual--dev .devAnim__miniWindow:nth-child(6) {
    --window-x: -4px;
    --window-y: 100px;
    --window-width: 312px;
    --window-height: 194px;
    --window-delay: -6s;
  }

  #root .process-40__visual--dev .devAnim__miniWindow:nth-child(7) {
    --window-x: -120px;
    --window-y: -98px;
    --window-width: 304px;
    --window-height: 188px;
    --window-delay: -7.2s;
  }

  #root .process-40__visual--dev .devAnim__miniWindow:nth-child(8) {
    --window-x: 128px;
    --window-y: -48px;
    --window-width: 296px;
    --window-height: 178px;
    --window-delay: -8.4s;
  }

  #root .process-40__visual--dev .devAnim__miniWindow:nth-child(9) {
    --window-x: 4px;
    --window-y: 86px;
    --window-width: 318px;
    --window-height: 198px;
    --window-delay: -9.6s;
  }

  #root .process-40__visual--dev .devAnim__miniWindow:nth-child(10) {
    --window-x: -124px;
    --window-y: -88px;
    --window-width: 286px;
    --window-height: 190px;
    --window-delay: -10.8s;
  }

  #root .process-40__visual--dev .devAnim__miniWindow:nth-child(11) {
    --window-x: 124px;
    --window-y: -38px;
    --window-width: 302px;
    --window-height: 182px;
    --window-delay: -12s;
  }

  #root .process-40__visual--dev .devAnim__miniWindow:nth-child(12) {
    --window-x: 0px;
    --window-y: 96px;
    --window-width: 312px;
    --window-height: 194px;
    --window-delay: -13.2s;
  }

  #root .process-40__visual--dev .devAnim__miniTopbar {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-bottom: 9px !important;
  }

  #root .process-40__visual--dev .devAnim__miniTopbar .dot {
    width: 6px !important;
    height: 6px !important;
  }

  #root .process-40__visual--dev .devAnim__miniTitle {
    margin-left: 4px !important;
    max-width: 132px !important;
    overflow: hidden !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 8.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #root .process-40__visual--dev .devAnim__miniCode {
    display: grid !important;
    gap: 4px !important;
    font-family: "JetBrains Mono", "SFMono-Regular", "Menlo", monospace !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
    color: rgba(214, 237, 255, 0.88) !important;
  }

  #root .process-40__visual--dev .devAnim__miniLine {
    --line-width: 100%;
    display: block !important;
    width: var(--line-width);
    max-width: var(--line-width);
    overflow: hidden !important;
    white-space: pre !important;
    text-align: left !important;
    direction: ltr !important;
    clip-path: inset(0 100% 0 0);
    animation: methodologyDevMiniLineWrite var(--window-loop) steps(26, end) infinite;
    animation-delay: var(--window-delay);
  }

  #root .process-40__visual--dev .devAnim__miniLineContent {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: max-content !important;
    transform-origin: left center !important;
    text-align: left !important;
  }

  #root .process-40__visual--dev .devAnim__miniLine:nth-child(1) {
    --line-width: 92%;
  }

  #root .process-40__visual--dev .devAnim__miniLine:nth-child(2) {
    --line-width: 78%;
    color: rgba(255, 159, 207, 0.9) !important;
    animation-delay: calc(var(--window-delay) + 0.14s);
  }

  #root .process-40__visual--dev .devAnim__miniLine:nth-child(3) {
    --line-width: 86%;
    animation-delay: calc(var(--window-delay) + 0.28s);
  }

  #root .process-40__visual--dev .devAnim__miniLine:nth-child(4) {
    --line-width: 36%;
    animation-delay: calc(var(--window-delay) + 0.42s);
  }

  #root .process-40__visual--dev .devAnim__miniLine:nth-child(5) {
    --line-width: 72%;
    animation-delay: calc(var(--window-delay) + 0.56s);
  }

  #root .process-40__visual--dev .devAnim__token {
    color: rgba(216, 236, 255, 0.9) !important;
  }

  #root .process-40__visual--dev .devAnim__token--keyword {
    color: #ff7ab8 !important;
    font-weight: 700 !important;
  }

  #root .process-40__visual--dev .devAnim__token--function {
    color: #83d8ff !important;
  }

  #root .process-40__visual--dev .devAnim__token--string {
    color: #ffd166 !important;
  }

  #root .process-40__visual--dev .devAnim__token--property,
  #root .process-40__visual--dev .devAnim__token--attr {
    color: #b9a7ff !important;
  }

  #root .process-40__visual--dev .devAnim__token--tag {
    color: #7cffc4 !important;
  }

  #root .process-40__visual--dev .devAnim__token--punct {
    color: rgba(255, 255, 255, 0.48) !important;
  }

  @keyframes methodologyDevWindowBurst {
    0% {
      opacity: 0;
      filter: blur(4px);
      transform: translate(-50%, -50%) translate3d(var(--window-x), var(--window-y), 0);
    }

    8% {
      opacity: 0.9;
      filter: blur(0);
      transform: translate(-50%, -50%) translate3d(var(--window-x), var(--window-y), 0);
    }

    17% {
      opacity: 0.86;
      filter: blur(0);
      transform: translate(-50%, -50%) translate3d(var(--window-x), var(--window-y), 0);
    }

    25% {
      opacity: 0;
      filter: blur(4px);
      transform: translate(-50%, -50%) translate3d(var(--window-x), var(--window-y), 0);
    }

    100% {
      opacity: 0;
      filter: blur(4px);
      transform: translate(-50%, -50%) translate3d(var(--window-x), var(--window-y), 0);
    }
  }

  @keyframes methodologyDevMiniLineWrite {
    0%, 8% {
      clip-path: inset(0 100% 0 0);
    }

    24% {
      clip-path: inset(0 0 0 0);
    }

    25%, 100% {
      clip-path: inset(0 100% 0 0);
    }
  }

  @media (max-width: 767px) {
    #root .process-40__visual--dev .devAnim {
      min-height: 270px !important;
    }

    #root .process-40__visual--dev .devAnim__stage {
      width: min(100%, 360px) !important;
      height: 270px !important;
    }

    #root .process-40__visual--dev .devAnim__miniWindow {
      width: var(--window-width) !important;
      height: var(--window-height) !important;
      padding: 11px 12px 13px !important;
    }

    #root .process-40__visual--dev .devAnim__miniWindow:nth-child(n + 9) {
      display: none !important;
    }

    #root .process-40__visual--dev .devAnim__miniWindow:nth-child(1) {
      --window-x: -86px;
      --window-y: -66px;
      --window-width: 212px;
      --window-height: 156px;
      --window-delay: 0s;
    }

    #root .process-40__visual--dev .devAnim__miniWindow:nth-child(2) {
      --window-x: 86px;
      --window-y: -26px;
      --window-width: 204px;
      --window-height: 148px;
      --window-delay: -2s;
    }

    #root .process-40__visual--dev .devAnim__miniWindow:nth-child(3) {
      --window-x: 0px;
      --window-y: 70px;
      --window-width: 220px;
      --window-height: 160px;
      --window-delay: -4s;
    }

    #root .process-40__visual--dev .devAnim__miniWindow:nth-child(4) {
      --window-x: -89px;
      --window-y: -60px;
      --window-width: 200px;
      --window-height: 154px;
      --window-delay: -6s;
    }

    #root .process-40__visual--dev .devAnim__miniWindow:nth-child(5) {
      --window-x: 83px;
      --window-y: -20px;
      --window-width: 208px;
      --window-height: 150px;
      --window-delay: -8s;
    }

    #root .process-40__visual--dev .devAnim__miniWindow:nth-child(6) {
      --window-x: -3px;
      --window-y: 76px;
      --window-width: 212px;
      --window-height: 156px;
      --window-delay: -10s;
    }

    #root .process-40__visual--dev .devAnim__miniWindow:nth-child(7) {
      --window-x: -83px;
      --window-y: -71px;
      --window-width: 204px;
      --window-height: 148px;
      --window-delay: -12s;
    }

    #root .process-40__visual--dev .devAnim__miniWindow:nth-child(8) {
      --window-x: 89px;
      --window-y: -31px;
      --window-width: 220px;
      --window-height: 160px;
      --window-delay: -14s;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #root .process-40__visual--dev .devAnim__stage::before {
      display: none !important;
    }

    #root .process-40__visual--dev .devAnim,
    #root .process-40__visual--dev .devAnim__stage,
    #root .process-40__visual--dev .codeArea,
    #root .process-40__visual--dev .codeArea code {
      animation: none !important;
      transform: none !important;
    }

    #root .process-40__visual--dev .devAnim__miniWindow {
      opacity: 0.84 !important;
      animation: none !important;
      transform: translate(-50%, -50%) translate3d(var(--window-x), var(--window-y), 0) !important;
    }

    #root .process-40__visual--dev .devAnim__miniLine {
      clip-path: inset(0 0 0 0) !important;
      animation: none !important;
    }
  }

/* Methodology card clipping/layout */
#root .process-40 .process-40__card {
    overflow: hidden !important;
  }

  #root .process-40 .process-40__visual,
  #root .process-40 .process-40__anim-wrap,
  #root .process-40 .devAnim__stage {
    border-radius: inherit !important;
  }

  #root .process-40 .process-40__visual {
    position: relative !important;
    isolation: isolate !important;
  }

  #root .process-40 .process-40__visual::before {
    content: "" !important;
    position: absolute !important;
    inset: -8% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    background:
      radial-gradient(circle at 25% 28%, rgba(251, 104, 168, 0.18), transparent 46%),
      radial-gradient(circle at 76% 68%, rgba(106, 59, 255, 0.18), transparent 50%),
      linear-gradient(135deg, rgba(251, 104, 168, 0.05), rgba(70, 120, 255, 0.05)) !important;
    background-size: 140% 140%, 150% 150%, 100% 100% !important;
    background-position: 18% 24%, 82% 72%, center !important;
    filter: blur(22px) !important;
    opacity: 0.7 !important;
    transform: scale(1) !important;
    animation: processVisualGradient 7s ease-in-out infinite alternate !important;
  }

  #root .process-40 .process-40__anim-wrap {
    position: relative !important;
    z-index: 1 !important;
  }

  #root .process-40 .process-40__label {
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
  }

  #root .process-40 .process-40__visual--design::before {
    inset: 12% 7% 6% !important;
    filter: blur(18px) !important;
    opacity: 0.54 !important;
    transform: none !important;
    animation: processDesignVisualGradient 8s ease-in-out infinite alternate !important;
  }

  @keyframes processDesignVisualGradient {
    0% {
      background-position: 18% 30%, 78% 70%, center;
      opacity: 0.46;
    }
    50% {
      background-position: 30% 24%, 68% 60%, center;
      opacity: 0.62;
    }
    100% {
      background-position: 22% 38%, 74% 78%, center;
      opacity: 0.5;
    }
  }

  @media screen and (max-width: 991px) {
    #root .section-bento .bento-content {
      margin-top: 0 !important;
    }

    #root .process-40 .process-40__card,
    #root .process-40 .process-40__row.is-left .process-40__card,
    #root .process-40 .process-40__row.is-right .process-40__card,
    #root .process-40 .process-40__card--active {
      border: 0 !important;
      border-color: transparent !important;
      box-shadow: none !important;
      outline: 0 !important;
    }

    #root .process-40 .process-40__card::before,
    #root .process-40 .process-40__row.is-left .process-40__card::before,
    #root .process-40 .process-40__row.is-right .process-40__card::before {
      display: none !important;
    }

    #root .process-40 .process-40__visual,
    #root .process-40 .process-40__anim-wrap,
    #root .process-40 .process-40__anim-inner,
    #root .process-40 .designStep,
    #root .process-40 .designStep__stage,
    #root .process-40 .devAnim,
    #root .process-40 .devAnim__stage,
    #root .process-40 .testClientAnim {
      overflow: visible !important;
    }

    #root .process-40 .process-40__card {
      overflow: hidden !important;
    }
  }

/* Bento team card stacking */
#root .bento__card--team {
    isolation: isolate !important;
  }

  #root .bento__card--team .circle-ripple {
    z-index: 0 !important;
    pointer-events: none !important;
  }

  #root .bento__card--team .bento-cad__title,
  #root .bento__card--team .image-user-container,
  #root .bento__card--team .image-users--mobile {
    position: relative !important;
    z-index: 1 !important;
  }

  #root .bento__card--team .blur-top-right {
    z-index: 1 !important;
    pointer-events: none !important;
  }