.site-header .navbar-brand {
  opacity: 0;
  transform: translateX(-35px);
  animation: logoReveal 0.7s 0.15s ease-out forwards;
}

@keyframes logoReveal {
  from {
    opacity: 0;
    transform: translateX(-35px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.site-header .navbar-nav .nav-item {
  opacity: 0;
  transform: translateY(-18px);
  animation: navReveal 0.55s ease-out forwards;
}

.site-header .navbar-nav .nav-item:nth-child(1) {
  animation-delay: 0.25s;
}
.site-header .navbar-nav .nav-item:nth-child(2) {
  animation-delay: 0.32s;
}
.site-header .navbar-nav .nav-item:nth-child(3) {
  animation-delay: 0.39s;
}
.site-header .navbar-nav .nav-item:nth-child(4) {
  animation-delay: 0.46s;
}
.site-header .navbar-nav .nav-item:nth-child(5) {
  animation-delay: 0.53s;
}
.site-header .navbar-nav .nav-item:nth-child(6) {
  animation-delay: 0.6s;
}
.site-header .navbar-nav .nav-item:nth-child(7) {
  animation-delay: 0.67s;
}
.site-header .navbar-nav .nav-item:nth-child(8) {
  animation-delay: 0.74s;
}
/* The language switcher is its own list, so it would otherwise take the first delay; it comes in after Contact. */
.site-header .lang-switcher .nav-item:nth-child(1) {
  animation-delay: 0.81s;
}

@keyframes navReveal {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-header .dropdown-menu.show {
  animation: menuReveal 0.2s ease-out;
}

@keyframes menuReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-content {
  opacity: 0;
  transform: translateX(-60px);
  animation: heroReveal 0.9s 0.35s ease-out forwards;
}

@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-tag {
  opacity: 0;
  transform: translateY(20px);
  animation: itemReveal 0.6s 0.55s ease-out forwards;
}

.hero-content h1 {
  opacity: 0;
  transform: translateY(30px);
  animation: itemReveal 0.75s 0.7s ease-out forwards;
}
.hero-content-inner-pages {
  opacity: 0;
  transform: translateY(30px);
  animation: itemReveal 0.75s 0.7s ease-out forwards;
}

.hero-content h1 strong {
  opacity: 0;
  transform: translateX(-20px);
  animation: strongReveal 0.6s 1s ease-out forwards;
}

.hero-description {
  opacity: 0;
  transform: translateY(20px);
  animation: itemReveal 0.65s 1.15s ease-out forwards;
}

.hero-btn {
  opacity: 0;
  transform: translateY(20px);
  animation: itemReveal 0.65s 1.3s ease-out forwards;
}

@keyframes itemReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes strongReveal {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-video {
  opacity: 0;
  transform: translateX(70px) scale(0.96);
  animation: videoReveal 1s 0.55s ease-out forwards;
}

@keyframes videoReveal {
  from {
    opacity: 0;
    transform: translateX(70px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.play-btn {
  opacity: 0;
  transform: scale(0.55);
  animation: playReveal 0.7s 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes playReveal {
  0% {
    opacity: 0;
    transform: scale(0.55);
  }
  70% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.play-btn::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  opacity: 0;
  animation: playPulse 2.2s 1.8s ease-out infinite;
}

@keyframes playPulse {
  0% {
    opacity: 0.65;
    transform: scale(0.85);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.play-btn .play-icon {
  animation: playFloat 2.5s 1.8s ease-in-out infinite;
}

@keyframes playFloat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

@media (max-width: 991.98px) {
  .hero-content {
    transform: translateY(35px);
  }

  .hero-video {
    transform: translateY(40px) scale(0.96);
  }

  @keyframes heroReveal {
    from {
      opacity: 0;
      transform: translateY(35px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes videoReveal {
    from {
      opacity: 0;
      transform: translateY(40px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .navbar-brand,
  .site-header .navbar-nav .nav-item,
  .site-header .dropdown-menu.show,
  .hero-content,
  .hero-tag,
  .hero-content h1,
  .hero-content h1 strong,
  .hero-description,
  .hero-btn,
  .hero-video,
  .play-btn,
  .play-btn::before,
  .play-btn .play-icon {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.solutions-heading {
  opacity: 0;
  transform: translateY(50px);
  animation: solutionsFadeUp 0.8s ease-out both;
  animation-timeline: view();
  animation-range: entry 5% cover 30%;
}

@keyframes solutionsFadeUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.solutions-heading .heading-line {
  display: block;
  transform: scaleX(0);
  transform-origin: center;
  animation: solutionsLine 0.7s ease-out both;
  animation-timeline: view();
  animation-range: entry 15% cover 35%;
}

@keyframes solutionsLine {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.solutions-section .row > div {
  opacity: 0;
  transform: translateY(70px);
  animation: solutionCardReveal 0.8s ease-out both;
  animation-timeline: view();
}

@keyframes solutionCardReveal {
  from {
    opacity: 0;
    transform: translateY(70px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.solutions-section .row > div:nth-child(1) {
  animation-range: entry 0% cover 28%;
}

.solutions-section .row > div:nth-child(2) {
  animation-range: entry 8% cover 36%;
}

.solutions-section .row > div:nth-child(3) {
  animation-range: entry 16% cover 44%;
}

.solution-image {
  overflow: hidden;
}

.solution-image img {
  transition: transform 0.6s ease;
}

.solution-image .image-overlay {
  transition: opacity 0.6s ease;
}

/* Hover the column, not .solution-card: the whole-card link (.full-a) sits on top of the card. */
.solutions-section .row > div:hover .solution-image img {
  transform: scale(1.06);
}

.solutions-section .row > div:hover .solution-image .image-overlay {
  opacity: 0.4;
}

@media (max-width: 767.98px) {
  .solutions-heading {
    transform: translateY(35px);
  }

  .solutions-section .row > div {
    transform: translateY(45px);
  }

  .solutions-section .row > div:nth-child(1),
  .solutions-section .row > div:nth-child(2),
  .solutions-section .row > div:nth-child(3) {
    animation-range: entry 0% cover 30%;
  }
}

@supports not (animation-timeline: view()) {
  .solutions-heading,
  .solutions-section .row > div {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .solutions-heading .heading-line {
    transform: scaleX(1);
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .solutions-heading,
  .solutions-section .row > div {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .solutions-heading .heading-line {
    transform: scaleX(1);
    animation: none;
  }

  .solution-card,
  .solution-image img,
  .solution-image .image-overlay,
  .solution-bottom .card-arrow,
  .solution-bottom > a:first-child {
    transition: none;
  }
}

.why-matters-heading {
  opacity: 0;
  transform: translateY(35px);
  animation: whyTitle 0.8s ease-out both;
  animation-timeline: view();
  animation-range: entry 0% cover 28%;
}

@keyframes whyTitle {
  from {
    opacity: 0;
    transform: translateY(35px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.why-matters-section .row > div:nth-child(1) {
  opacity: 0;
  transform: translateX(-70px);
  animation: whyCardLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-timeline: view();
  animation-range: entry 0% cover 35%;
}

@keyframes whyCardLeft {
  from {
    opacity: 0;
    transform: translateX(-70px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.why-matters-section .row > div:nth-child(2) {
  opacity: 0;
  transform: translateY(80px);
  animation: whyCardCenter 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-timeline: view();
  animation-range: entry 8% cover 43%;
}

@keyframes whyCardCenter {
  from {
    opacity: 0;
    transform: translateY(80px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.why-matters-section .row > div:nth-child(3) {
  opacity: 0;
  transform: translateX(70px);
  animation: whyCardRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-timeline: view();
  animation-range: entry 16% cover 51%;
}

@keyframes whyCardRight {
  from {
    opacity: 0;
    transform: translateX(70px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.why-card-icon {
  opacity: 0;
  transform: scale(0.5);
  animation: whyIconPop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-timeline: view();
  animation-range: entry 12% cover 40%;
}

@keyframes whyIconPop {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  70% {
    opacity: 1;
    transform: scale(1.12);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.why-card-content {
  opacity: 0;
  transform: translateY(20px);
  animation: whyContent 0.7s ease-out both;
  animation-timeline: view();
  animation-range: entry 18% cover 48%;
}

@keyframes whyContent {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Check marks pop in one after the other once their list is in view: js/common.js adds .checks-ready, then
   .checks-in. Time-based on purpose: a scroll-driven pop left the lower icons of a card half-scaled. Without JS,
   or with reduced motion, the classes are never added and the icons simply show. */
.why-card ul.checks-ready .check-icon {
  transform: scale(0);
  transform-origin: center;
}

.why-card ul.checks-in .check-icon {
  animation: checkPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.why-card ul.checks-in li:nth-child(2) .check-icon { animation-delay: 0.12s; }
.why-card ul.checks-in li:nth-child(3) .check-icon { animation-delay: 0.24s; }
.why-card ul.checks-in li:nth-child(4) .check-icon { animation-delay: 0.36s; }
.why-card ul.checks-in li:nth-child(5) .check-icon { animation-delay: 0.48s; }
.why-card ul.checks-in li:nth-child(n+6) .check-icon { animation-delay: 0.6s; }

@keyframes checkPop {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@media (max-width: 767.98px) {
  .why-matters-section .row > div:nth-child(1),
  .why-matters-section .row > div:nth-child(2),
  .why-matters-section .row > div:nth-child(3) {
    transform: translateY(50px);
    animation-name: whyCardMobile;
    animation-range: entry 0% cover 30%;
  }

  @keyframes whyCardMobile {
    from {
      opacity: 0;
      transform: translateY(50px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@supports not (animation-timeline: view()) {
  .why-matters-heading,
  .why-matters-section .row > div,
  .why-card-icon,
  .why-card-content {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-matters-heading,
  .why-matters-section .row > div,
  .why-card-icon,
  .why-card-content,
  .why-card li .check-icon {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .why-card {
    transition: none;
  }
}

.why-section-heading {
  opacity: 0;
  transform: translateY(35px);
  animation: whyHeadingReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-timeline: view();
  animation-range: entry 0% cover 25%;
}

@keyframes whyHeadingReveal {
  from {
    opacity: 0;
    transform: translateY(35px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}



.why-image-overlay {
  transition: opacity 0.5s ease;
}


.why-archeobase-section .row > .col-lg-5 {
  opacity: 0;
  transform: translateX(80px);

  animation: whyAccordionColumn 1s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-timeline: view();
  animation-range: entry 5% cover 45%;
}

@keyframes whyAccordionColumn {
  from {
    opacity: 0;
    transform: translateX(80px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.why-accordion .accordion-item {
  opacity: 0;
  transform: translateY(25px);

  animation: accordionItemReveal 0.65s ease-out both;
  animation-timeline: view();
}

.why-accordion .accordion-item:nth-child(1) {
  animation-range: entry 8% cover 32%;
}

.why-accordion .accordion-item:nth-child(2) {
  animation-range: entry 14% cover 38%;
}

.why-accordion .accordion-item:nth-child(3) {
  animation-range: entry 20% cover 44%;
}

.why-accordion .accordion-item:nth-child(4) {
  animation-range: entry 26% cover 50%;
}

.why-accordion .accordion-item:nth-child(5) {
  animation-range: entry 32% cover 56%;
}

@keyframes accordionItemReveal {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.why-accordion .accordion-button {
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.why-accordion .accordion-button:hover {
  padding-left: 8px;
}

.why-accordion .accordion-button::after {
  transition: transform 0.35s ease, opacity 0.3s ease;
}

.why-accordion .accordion-body {
  animation: accordionBodyReveal 0.45s ease-out;
}

@keyframes accordionBodyReveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.know-more-btn {
  display: inline-flex;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.know-more-btn:hover {
  transform: translateX(5px);
}



@media (max-width: 991.98px) {
  .why-archeobase-section .row > .col-lg-7,
  .why-archeobase-section .row > .col-lg-5 {
    transform: translateY(0px);
  }

  @keyframes whyImageColumnMobile {
    from {
      opacity: 0;
      transform: translateY(0px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes whyAccordionColumnMobile {
    from {
      opacity: 0;
      transform: translateY(45px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .why-archeobase-section .row > .col-lg-7 {
    animation-name: whyImageColumnMobile;
  }

  .why-archeobase-section .row > .col-lg-5 {
    animation-name: whyAccordionColumnMobile;
  }

  .why-accordion .accordion-item:nth-child(1),
  .why-accordion .accordion-item:nth-child(2),
  .why-accordion .accordion-item:nth-child(3),
  .why-accordion .accordion-item:nth-child(4),
  .why-accordion .accordion-item:nth-child(5) {
    animation-range: entry 0% cover 30%;
  }
}

@supports not (animation-timeline: view()) {
  .why-section-heading,
  .why-archeobase-section .row > .col-lg-7,
  .why-archeobase-section .row > .col-lg-5,
  .why-accordion .accordion-item,
  .why-image-card h3 {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-section-heading,
  .why-archeobase-section .row > .col-lg-7,
  .why-archeobase-section .row > .col-lg-5,
  .why-accordion .accordion-item,
  .why-image-card h3 {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .why-image-card,
  .why-image-card img,
  .why-accordion .accordion-button,
  .know-more-btn {
    transition: none;
  }
}


.cta-banner {
  position: relative;
  overflow: hidden;

  opacity: 0;
  transform: translateY(50px) scale(0.96);

  animation: ctaBannerReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-timeline: view();
  animation-range: entry 0% cover 35%;
}

@keyframes ctaBannerReveal {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cta-content {
  opacity: 0;
  transform: translateX(-55px);

  animation: ctaContentReveal 0.8s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-timeline: view();
  animation-range: entry 8% cover 40%;
}

@keyframes ctaContentReveal {
  from {
    opacity: 0;
    transform: translateX(-55px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.cta-content strong {
  display: inline-block;
  opacity: 0;
  transform: translateY(15px);

  animation: ctaStrongReveal 0.7s 0.35s ease-out both;
  animation-timeline: view();
  animation-range: entry 12% cover 45%;
}

@keyframes ctaStrongReveal {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cta-button-wrap {
  opacity: 0;
  transform: translateX(55px);

  animation: ctaButtonReveal 0.8s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-timeline: view();
  animation-range: entry 10% cover 42%;
}

@keyframes ctaButtonReveal {
  from {
    opacity: 0;
    transform: translateX(55px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.cta-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;

  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}

.cta-button:hover {
  transform: translateY(-4px);
}

.cta-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;

  width: 70%;
  height: 100%;

  background: linear-gradient(
    110deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );

  transform: skewX(-20deg);
  transition: left 0.7s ease;
}

.cta-button:hover::before {
  left: 140%;
}

.cta-arrow {
  display: inline-flex;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-button:hover .cta-arrow {
  transform: translateX(7px);
}

.cta-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;

  width: 30%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.06),
    transparent
  );

  transform: skewX(-20deg);
  pointer-events: none;

  animation: ctaLightSweep 4s 1.5s ease-in-out infinite;
}

@keyframes ctaLightSweep {
  0% {
    left: -30%;
  }

  45%,
  100% {
    left: 120%;
  }
}

@media (max-width: 767.98px) {
  .cta-banner {
    transform: translateY(35px) scale(0.98);
  }

  .cta-content,
  .cta-button-wrap {
    transform: translateY(25px);
  }

  @keyframes ctaContentMobile {
    from {
      opacity: 0;
      transform: translateY(25px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes ctaButtonMobile {
    from {
      opacity: 0;
      transform: translateY(25px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .cta-content {
    animation-name: ctaContentMobile;
  }

  .cta-button-wrap {
    animation-name: ctaButtonMobile;
  }
}

@supports not (animation-timeline: view()) {
  .cta-banner,
  .cta-content,
  .cta-content strong,
  .cta-button-wrap {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .cta-banner::after {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-banner,
  .cta-content,
  .cta-content strong,
  .cta-button-wrap {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .cta-banner::after {
    animation: none;
  }

  .cta-button,
  .cta-arrow {
    transition: none;
  }
}

.free-trial-box {
  position: relative;
  overflow: hidden;

  opacity: 0;
  transform: translateY(55px) scale(0.97);

  animation: freeTrialBoxReveal 1s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-timeline: view();
  animation-range: entry 0% cover 35%;
}

@keyframes freeTrialBoxReveal {
  from {
    opacity: 0;
    transform: translateY(55px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.free-trial-content {
  opacity: 0;
  transform: translateX(-60px);

  animation: freeTrialContentReveal 0.9s 0.15s cubic-bezier(0.22, 1, 0.36, 1)
    both;
  animation-timeline: view();
  animation-range: entry 5% cover 42%;
}

@keyframes freeTrialContentReveal {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}



.free-trial-content h2 {
  opacity: 0;
  transform: translateY(30px);

  animation: freeTrialHeadingReveal 0.8s 0.4s cubic-bezier(0.22, 1, 0.36, 1)
    both;
  animation-timeline: view();
  animation-range: entry 10% cover 48%;
}

@keyframes freeTrialHeadingReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.free-trial-content h2 strong {
  display: inline-block;

  opacity: 0;
  transform: translateX(-25px);

  animation: freeTrialStrongReveal 0.7s 0.55s cubic-bezier(0.22, 1, 0.36, 1)
    both;
  animation-timeline: view();
  animation-range: entry 12% cover 50%;
}

@keyframes freeTrialStrongReveal {
  from {
    opacity: 0;
    transform: translateX(-25px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}
f
.free-trial-image {
  opacity: 0;
  transform: translateX(70px) scale(1.03);

  animation: freeTrialImageReveal 1s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-timeline: view();
  animation-range: entry 5% cover 45%;
}

@keyframes freeTrialImageReveal {
  from {
    opacity: 0;
    transform: translateX(70px) scale(1.03);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.free-trial-image img {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.free-trial-box:hover .free-trial-image img {
  transform: scale(1.04);
}

@media (max-width: 991.98px) {
  .free-trial-content {
    transform: translateY(35px);
  }

  .free-trial-image {
    transform: translateY(40px) scale(0.98);
  }

  @keyframes freeTrialContentMobile {
    from {
      opacity: 0;
      transform: translateY(35px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes freeTrialImageMobile {
    from {
      opacity: 0;
      transform: translateY(40px) scale(0.98);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .free-trial-content {
    animation-name: freeTrialContentMobile;
  }

  .free-trial-image {
    animation-name: freeTrialImageMobile;
  }
}

@supports not (animation-timeline: view()) {
  .free-trial-box,
  .free-trial-content,
  .free-trial-tag,
  .free-trial-content h2,
  .free-trial-content h2 strong,
  .free-trial-btn,
  .free-trial-image {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .free-trial-box,
  .free-trial-content,
  .free-trial-tag,
  .free-trial-content h2,
  .free-trial-content h2 strong,
  .free-trial-btn,
  .free-trial-image {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .free-trial-btn,
  .free-trial-btn > span:last-child,
  .free-trial-image img {
    transition: none;
  }
}

.footer-announcement {
  opacity: 0;
  transform: translateY(-25px);

  animation: footerAnnouncement 0.7s ease-out both;
  animation-timeline: view();
  animation-range: entry 0% cover 25%;
}

@keyframes footerAnnouncement {
  from {
    opacity: 0;
    transform: translateY(-25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.footer-main {
  overflow: hidden;
}

.footer-brand {
  opacity: 0;
  transform: translateX(-50px);

  animation: footerBrandReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-timeline: view();
  animation-range: entry 0% cover 35%;
}

@keyframes footerBrandReveal {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.footer-logo {
  display: inline-block;
  transition: transform 0.35s ease;
}

.footer-logo:hover {
  transform: translateY(-4px);
}

.footer-tagline {
  opacity: 0;
  transform: translateY(15px);

  animation: footerTagline 0.65s 0.15s ease-out both;
  animation-timeline: view();
  animation-range: entry 8% cover 40%;
}

@keyframes footerTagline {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.footer-main .row > div:not(:first-child) {
  opacity: 0;
  transform: translateY(45px);

  animation: footerColumnReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-timeline: view();
}

@keyframes footerColumnReveal {
  from {
    opacity: 0;
    transform: translateY(45px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.footer-main .row > div:nth-child(2) {
  animation-range: entry 0% cover 30%;
}

.footer-main .row > div:nth-child(3) {
  animation-range: entry 8% cover 38%;
}

.footer-main .row > div:nth-child(4) {
  animation-range: entry 16% cover 46%;
}

.footer-links h6,
.footer-social h6 {
  transition: transform 0.3s ease;
}

.footer-links h6:hover,
.footer-social h6:hover {
  transform: translateX(3px);
}


@keyframes footerSocialReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: scale(0.5);

  animation: socialIconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-timeline: view();
  animation-range: entry 15% cover 50%;

  transition: transform 0.3s ease, opacity 0.3s ease;
}

@keyframes socialIconPop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.social-icons a:nth-child(1) {
  animation-range: entry 10% cover 40%;
}

.social-icons a:nth-child(2) {
  animation-range: entry 13% cover 43%;
}

.social-icons a:nth-child(3) {
  animation-range: entry 16% cover 46%;
}

.social-icons a:nth-child(4) {
  animation-range: entry 19% cover 49%;
}

.social-icons a:nth-child(5) {
  animation-range: entry 22% cover 52%;
}

.social-icons a:hover {
  transform: translateY(-5px) scale(1.08);
}

@media (max-width: 767.98px) {
  .footer-brand,
  .footer-main .row > div:not(:first-child) {
    transform: translateY(35px);
  }

  .footer-main .row > div:not(:first-child) {
    animation-range: entry 0% cover 30%;
  }

  .footer-links ul li {
    transform: translateX(10px);
  }
}

@supports not (animation-timeline: view()) {
  .footer-announcement,
  .footer-brand,
  .footer-tagline,
  .footer-main .row > div:not(:first-child),
  .footer-links ul li,
  .footer-social,
  .social-icons a,
  .footer-bottom {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-announcement,
  .footer-brand,
  .footer-tagline,
  .footer-main .row > div:not(:first-child),
  .footer-links ul li,
  .footer-social,
  .social-icons a,
  .footer-bottom {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .footer-logo,
  .footer-links ul li a,
  .social-icons a {
    transition: none;
  }
}