@import url("https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800&display=swap");

/* =============================================================================
   Home page (resources/views/welcome.blade.php) — one block per section.
   Section blocks are prefixed: hero-logo-*, ep-, cs-, pf-, rms-, ctc-, wi-,
   tt-, aic-, csr-, ind-, wbc-, faq-; the motion/reveal block at the end
   is loaded last on purpose so its transition rules win specificity ties.

   Section background artwork is never hardcoded here: each section sets its
   --<prefix>-bg custom property inline from asset() in the blade, so the
   paths live with the other image references.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   hp-btn — the site-wide pill CTA (same anatomy + motion as .odm-btn on the
   service pages): label left, dark disc right; on hover the two trade sides
   and the arrow turns 45°. welcome.blade.php publishes each label's measured
   width as --hp-btn-label-w so the disc knows how far to travel.
   --------------------------------------------------------------------------- */
.hp-btn {
  --hp-btn-icon-w: 44px;
  --hp-btn-gap: 14px;
  --hp-btn-pad-l: 30px;
  --hp-btn-pad-r: 10px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--hp-btn-gap);
  width: max-content;
  max-width: 100%;
  padding: 10px var(--hp-btn-pad-r) 10px var(--hp-btn-pad-l);
  border: 0;
  border-radius: 999px;
  background: #0b6cf0;
  color: #fff;
  overflow: hidden;
  text-decoration: none;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease,
    padding 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.hp-btn:hover,
.hp-btn:focus-visible {
  padding-left: var(--hp-btn-pad-r);
  padding-right: var(--hp-btn-pad-l);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(11, 108, 240, 0.35);
}

.hp-btn__label {
  display: inline-block;
  flex: none;
  font-family: "Poppins", "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.hp-btn__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--hp-btn-icon-w);
  height: var(--hp-btn-icon-w);
  border-radius: 50%;
  background: #0b0b0f;
  color: #fff;
  will-change: transform;
  transition:
    transform 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    box-shadow 0.25s ease;
}

.hp-btn__icon svg {
  width: 18px;
  height: 18px;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.hp-btn:hover .hp-btn__icon svg,
.hp-btn:focus-visible .hp-btn__icon svg {
  transform: rotate(45deg);
}

.hp-btn:hover .hp-btn__label,
.hp-btn:focus-visible .hp-btn__label {
  transform: translateX(calc(var(--hp-btn-icon-w) + var(--hp-btn-gap)));
}

.hp-btn:hover .hp-btn__icon,
.hp-btn:focus-visible .hp-btn__icon {
  transform: translateX(
    calc(-1 * (var(--hp-btn-label-w, 200px) + var(--hp-btn-gap)))
  );
}

/* compact size for captions */
.hp-btn--sm {
  --hp-btn-icon-w: 34px;
  --hp-btn-gap: 10px;
  --hp-btn-pad-l: 18px;
  --hp-btn-pad-r: 6px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.hp-btn--sm .hp-btn__label {
  font-size: 12px;
}

.hp-btn--sm .hp-btn__icon svg {
  width: 15px;
  height: 15px;
}

/* black pill with a blue disc — for the light sections */
.hp-btn--dark {
  background: #0d1117;
}

.hp-btn--dark .hp-btn__icon {
  background: #0b6cf0;
}

.hp-btn--dark:hover,
.hp-btn--dark:focus-visible {
  box-shadow: 0 14px 32px rgba(13, 17, 23, 0.35);
}

/* outlined pill over the hero video */
.hp-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
}

.hp-btn--ghost .hp-btn__icon {
  background: #fff;
  color: #0b0b0f;
}

.hp-btn--ghost:hover,
.hp-btn--ghost:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 14px 32px rgba(0, 0, 0, 0.3);
}

@media (max-width: 360px) {
  .hp-btn {
    --hp-btn-icon-w: 38px;
    --hp-btn-gap: 10px;
    --hp-btn-pad-l: 18px;
    --hp-btn-pad-r: 8px;
  }

  .hp-btn__label {
    font-size: 12px;
  }

  .hp-btn__icon svg {
    width: 16px;
    height: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-btn__label,
  .hp-btn__icon {
    transition: none;
  }

  .hp-btn:hover .hp-btn__label,
  .hp-btn:focus-visible .hp-btn__label,
  .hp-btn:hover .hp-btn__icon,
  .hp-btn:focus-visible .hp-btn__icon,
  .hp-btn:hover .hp-btn__icon svg,
  .hp-btn:focus-visible .hp-btn__icon svg {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   hero — copy over the video. Base rules live in style.css
   (.hero_section_main / .projects_header_counts); these are the home page's
   overrides, hence the doubled selectors.
   --------------------------------------------------------------------------- */
/* scrim: keeps the white copy legible whatever frame the video is on and
   grounds the badge strip along the bottom */
.hero_section.hero_section_main::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* kept light so the video reads through; the text-shadow on the heading
       does most of the legibility work */
  background: linear-gradient(
    180deg,
    rgba(4, 7, 18, 0.28) 0%,
    rgba(4, 7, 18, 0.12) 40%,
    rgba(4, 7, 18, 0.22) 75%,
    rgba(4, 7, 18, 0.7) 100%
  );
  pointer-events: none;
}

.hero_section.hero_section_main .left_hero_section {
  padding-bottom: 150px;
}

.hero_section_main .hero-tagline {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 0;
  margin: 0 0 22px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.92);
  font-family: "Gabarito", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.hero_section_main .hero-tagline span {
  display: inline-flex;
  align-items: center;
}

.hero_section_main .hero-tagline span + span::before {
  content: "";
  width: 5px;
  height: 5px;
  margin: 0 12px;
  border-radius: 50%;
  background: #7fb4ff;
  box-shadow: 0 0 0 3px rgba(127, 180, 255, 0.25);
}

.hero_section_main .left_hero_section .hero-banner-heading {
  max-width: 820px;
  margin: 0 auto 18px;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  /* 8.8vw keeps the longest word inside a 320px screen; the 5.3vw slope
     takes over as soon as there is room for it */
  font-size: clamp(28px, max(5.3vw, min(8.8vw, 34px)), 68px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
}

.hero_section_main .hero-banner-content {
  display: block;
  width: auto;
  max-width: 640px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  line-height: 1.65;
}

.hero_section_main .hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

/* one orchestrated entrance on load: tagline → heading → copy → CTAs */
@keyframes hpHeroIn {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.hero_section_main .left_hero_section > * {
  animation: hpHeroIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero_section_main .left_hero_section > :nth-child(1) {
  animation-delay: 0.1s;
}

.hero_section_main .left_hero_section > :nth-child(2) {
  animation-delay: 0.22s;
}

.hero_section_main .left_hero_section > :nth-child(3) {
  animation-delay: 0.34s;
}

.hero_section_main .left_hero_section > :nth-child(4) {
  animation-delay: 0.46s;
}

/* badge strip: soft fade at both ends of the marquee */
.hero-logo-marquee {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .hero_section_main .left_hero_section > * {
    animation: none;
  }
}

@media (max-width: 575px) {
  .hero_section.hero_section_main .left_hero_section {
    padding-bottom: 96px;
  }

  /* one pill per phrase instead of a single wide pill: at 320px the phrases
     wrap, and a wrapped line used to start with the dot separator hanging
     off its left edge */
  .hero_section_main .hero-tagline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    font-size: 12.5px;
  }

  .hero_section_main .hero-tagline span {
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
  }

  .hero_section_main .hero-tagline span + span::before {
    display: none;
  }

  .hero_section_main .hero-banner-content {
    font-size: 15px;
  }

  .hero_section_main .hero-actions {
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
  }
}

/* ---------------------------------------------------------------------------
   enterprise-partners — intro copy on the left, the company numbers on the
   right (.ep-stat-value counts up when the section scrolls into view)
   --------------------------------------------------------------------------- */
/* eases out of the dark hero and lands on the same lavender the testimonials
   section starts with (#f8f7fd), so hero → stats → testimonials reads as one
   continuous wash instead of a white slab between two tinted bands */
.ep-section {
  position: relative;
  padding: 80px 0 86px;
  background-color: #fbfbfe;
  background-image:
    radial-gradient(
      52% 70% at 88% 16%,
      rgba(45, 126, 250, 0.1) 0%,
      rgba(45, 126, 250, 0) 68%
    ),
    radial-gradient(
      42% 56% at 3% 74%,
      rgba(150, 92, 255, 0.08) 0%,
      rgba(150, 92, 255, 0) 72%
    ),
    /* same lavender core the testimonials section opens with, mirrored on
       this section's bottom edge so the two halves of the blob line up */
      radial-gradient(
        70% 46% at 50% 100%,
        #e6e5fb 0%,
        rgba(230, 229, 251, 0) 66%
      ),
    linear-gradient(180deg, #ffffff 0%, #fbfaff 55%, #f8f7fd 100%);
}

.ep-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px 72px;
}

.ep-copy h2 {
  max-width: 560px;
  margin: 0 0 16px;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.15;
  color: #0d1b3e;
}

.ep-accent {
  background: linear-gradient(90deg, #1431cf, #00c2ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ep-copy p {
  max-width: 520px;
  margin: 0;
  color: #4b5563;
  font-size: 17px;
  line-height: 1.7;
}

.ep-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* cards lift off the tinted wash instead of blending into it */
.ep-stats li {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: 18px;
  background: linear-gradient(160deg, #ffffff 0%, #f2f6ff 100%);
  border: 1px solid rgba(20, 49, 207, 0.09);
  box-shadow: 0 10px 26px -18px rgba(13, 27, 62, 0.35);
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.35s ease;
}

.ep-stats li::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 46px;
  height: 3px;
  border-radius: 0 0 3px 0;
  background: linear-gradient(90deg, #1431cf, #00c2ff);
}

.ep-stats li:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(20, 49, 207, 0.12);
}

.ep-stat-value {
  display: block;
  font-family: "Gabarito", sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, #0d1b3e 0%, #1431cf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ep-stat-label {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

@media (max-width: 991px) {
  .ep-section {
    padding: 64px 0;
  }

  .ep-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .ep-copy h2 {
    font-size: 34px;
  }
}

@media (max-width: 575px) {
  .ep-section {
    padding: 52px 0;
  }

  .ep-copy h2 {
    font-size: 28px;
  }

  .ep-copy p {
    font-size: 15px;
  }

  .ep-stats {
    gap: 12px;
  }

  .ep-stats li {
    padding: 18px 16px 16px;
    border-radius: 14px;
  }

  .ep-stat-value {
    font-size: 30px;
  }

  .ep-stat-label {
    font-size: 12.5px;
  }
}

/* ---------------------------------------------------------------------------
   hero
   --------------------------------------------------------------------------- */
/* ===== Hero: award-badge marquee over the hero video ===== */
/* Reserve room below the CTA so the vertically-centered hero content
   never sits flush against the bottom-pinned logo strip. */
.hero_section.hero_section_main .left_hero_section {
  padding-bottom: 130px;
}

.hero-logo-carousel {
  padding: 18px 0 28px;
}

.hero-logo-carousel:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  z-index: -1;
}

/* Continuous, non-stop scroll — same technique as the header's
   "iapp empowers businesses..." ticker (layouts/header.blade.php),
   reused here instead of a step-by-step carousel. */
.hero-logo-marquee {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.hero-logo-track {
  display: flex;
  width: max-content;
  animation: heroLogoMarquee 16s linear infinite;
  will-change: transform;
}

.hero-logo-marquee:hover .hero-logo-track {
  animation-play-state: paused;
}

@keyframes heroLogoMarquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-track {
    animation: none;
  }
}

.hero-logo-content {
  display: flex;
  align-items: center;
  gap: 143px;
  flex-shrink: 0;
  padding-right: 143px;
}

.hero-logo-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 118px;
  flex-shrink: 0;
}

.hero-logo-img {
  max-height: 118px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.hero-logo-img-default {
  position: relative;
  opacity: 1;
}

.hero-logo-img-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
}

.hero-logo-item:hover .hero-logo-img-default {
  opacity: 0;
}

.hero-logo-item:hover .hero-logo-img-hover {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 767px) {
  .hero-logo-content {
    gap: 70px;
    padding-right: 70px;
  }

  .hero-logo-item {
    height: 64px;
  }

  .hero-logo-img {
    max-height: 64px;
  }
}

/* ---------------------------------------------------------------------------
   customer-stories
   --------------------------------------------------------------------------- */
/* ===== Discover What Our Customers Have To Say About Us ===== */
.cs-section {
  /* lavender wash falling from the top edge into near-white */
  background-color: #fdfdfe;
  background-image:
    radial-gradient(70% 60% at 50% 0%, #e6e5fb 0%, rgba(230, 229, 251, 0) 70%),
    linear-gradient(180deg, #f8f7fd 0%, #fdfdfe 100%);
  padding: 90px 0;
  overflow: hidden;
}

.cs-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 48px;
}

.cs-head h2 {
  max-width: 640px;
  margin: 0;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.15;
  color: #0d1b3e;
}

.cs-head-accent {
  background: linear-gradient(90deg, #1431cf, #00c2ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cs-head-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

/* video testimonial cards */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

/* The testimonial clips are portrait (1080x1920), so the card keeps that
   ratio instead of a fixed height — a near-square box cropped the speaker. */
.cs-card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  background: #0d1b3e;
  cursor: pointer;
  box-shadow: 0 18px 40px -24px rgba(13, 27, 62, 0.55);
  transition:
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.45s ease;
}

.cs-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 50px -26px rgba(13, 27, 62, 0.7);
}

.cs-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.02);
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cs-card.playing video {
  transform: scale(1);
}

.cs-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(4, 6, 15, 0) 30%,
    rgba(4, 6, 15, 0.55) 62%,
    rgba(4, 6, 15, 0.92) 100%
  );
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.cs-card.playing::before {
  opacity: 0;
}

.cs-card.playing video {
  z-index: 2;
}

.cs-card.playing .cs-mute {
  display: flex;
}

/* center play button — hidden while playing */
.cs-card::after {
  content: "";
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232d7efa'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E")
    center / 22px no-repeat;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45);
  z-index: 3;
  pointer-events: none;
  animation: csPlayPulse 2.4s ease-out infinite;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.cs-card:hover::after {
  transform: translate(-50%, -50%) scale(1.08);
}

.cs-card.playing::after {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  animation: none;
}

@keyframes csPlayPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45);
  }

  70%,
  100% {
    box-shadow: 0 0 0 18px rgba(255, 255, 255, 0);
  }
}

.cs-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 22px 20px 20px;
  color: #fff;
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* text clears out while the clip plays */
.cs-card.playing .cs-card-body {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

.cs-quote {
  position: relative;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.92);
}

.cs-quote::before {
  content: "\201C";
  display: block;
  margin-bottom: 2px;
  font-family: "Gabarito", sans-serif;
  font-size: 40px;
  line-height: 0.6;
  color: #7fb4ff;
}

.cs-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cs-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.cs-author-meta b {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.cs-author-meta span {
  font-size: 12px;
  color: #cbd5e1;
}

.cs-mute {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  z-index: 4;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.cs-mute:hover {
  background: rgba(0, 0, 0, 0.8);
}

@media (max-width: 991px) {
  .cs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .cs-head {
    flex-direction: column;
  }

  .cs-head h2 {
    font-size: 30px;
  }

  .cs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .cs-card {
    border-radius: 16px;
  }

  .cs-card-body {
    padding: 14px 12px 12px;
  }

  /* two narrow cards per row: the quote would run into the play button,
       so only the author line stays */
  .cs-quote {
    display: none;
  }

  .cs-author-meta span {
    font-size: 11px;
  }

  .cs-head-aside {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   portfolio-showcase
   --------------------------------------------------------------------------- */
/* ===== Portfolio that Speaks for Us ===== */
.pf-section {
  /* blue / violet / pink glows over a pale periwinkle wash — the glass
       frames pick these colours up */
  background-color: #f3f5ff;
  background-image:
    /* eases in from the near-white the testimonials section ends on, so the
       tinted wash does not start on a hard line */
    linear-gradient(180deg, #fdfdfe 0%, rgba(253, 253, 254, 0) 170px),
    radial-gradient(
      42% 55% at 10% 22%,
      rgba(45, 126, 250, 0.3) 0%,
      rgba(45, 126, 250, 0) 70%
    ),
    radial-gradient(
      38% 50% at 90% 14%,
      rgba(150, 92, 255, 0.32) 0%,
      rgba(150, 92, 255, 0) 70%
    ),
    radial-gradient(
      48% 42% at 50% 104%,
      rgba(255, 118, 176, 0.22) 0%,
      rgba(255, 118, 176, 0) 70%
    ),
    radial-gradient(
      30% 40% at 60% 55%,
      rgba(0, 194, 255, 0.14) 0%,
      rgba(0, 194, 255, 0) 70%
    ),
    linear-gradient(180deg, #f6f7ff 0%, #f1f3ff 100%);
  padding: 90px 0 70px;
  overflow: hidden;
}

.pf-head {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
}

.pf-head h2 {
  margin: 0;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: #0d1b3e;
}

.pf-head-accent {
  font-style: italic;
  color: #2d7efa;
}

.pf-head p {
  margin: 14px 0 0;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.7;
}

/* ===== Drag/swipe semi-circular carousel (Swiper effect="coverflow" +
   an arc dip layered on top) =====
   Swiper owns the outer .pf-card (.swiper-slide) transform — translateX,
   rotateY, scale — every frame. The vertical arc dip can't also live there
   without fighting that, so it's applied to the inner .pf-card-face instead
   (JS sets its translateY from the slide's Swiper `progress`); visual
   styling (rounded corners, shadow, the darken overlay) moved to the face
   for the same reason — it needs to move with the dip, not just the tilt. */
.pf-stage {
  position: relative;
  padding: 56px 0 112px;
}

/* `.pf-swiper.swiper` / `.pf-swiper .pf-card`: home.css is linked from the
   <head> stack, which sits *before* swiper-bundle.min.css, so these need to
   out-rank Swiper's own `.swiper { overflow:hidden }` and
   `.swiper-slide { width:100% }` rather than tie with them. */
.pf-swiper.swiper {
  width: 100%;
  position: relative;
  z-index: 1;
  /* Swiper's coverflow effect needs a definite container height to measure
       against when slidesPerView is "auto" — it stretches every slide to
       fill this height via an inline style, so this is also the card's
       actual rendered height (878:543 ratio baked in per breakpoint). */
  /* artwork at 878:543 inside the 12px frame + the 70px caption bar */
  height: calc((760px - 24px) * 543 / 878 + 24px + 70px);
  /* let the coverflow 3D depth (and the arc dip below it) render without being clipped */
  overflow: visible;
}

.pf-swiper .swiper-wrapper {
  height: 100%;
  align-items: center;
}

.pf-swiper .pf-card {
  position: relative;
  width: 760px;
  height: 100%;
  cursor: grab;
}

.pf-swiper.swiper .pf-card:active {
  cursor: grabbing;
}

.pf-card-face {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 12px;
  border-radius: 24px;
  overflow: hidden;
  /* frosted glass: the section's colour glows show through the frame */
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.34) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 30px 60px -22px rgba(13, 27, 62, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  transition: transform 0.3s ease;
  will-change: transform;
}

.pf-card-frame {
  flex: 1;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
}

.pf-card-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 70px;
  padding: 10px 4px 0 10px;
}

.pf-card-caption h3 {
  margin: 0;
  min-width: 0;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  color: #0d1b3e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* live-drag tracking needs to be instant; the transition only kicks back
   in once the pointer is released, so the dip settles smoothly instead of lagging */
.pf-swiper--dragging .pf-card-face {
  transition: none;
}

.pf-card-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* transparent device mockups (Baridata) sit on their own gradient instead
   of being cropped like the full-bleed banners */
.pf-card-frame--contain {
  background: linear-gradient(135deg, #eef3ff 0%, #f6f0ff 55%, #e6f4ff 100%);
}

.pf-card-frame--contain img {
  object-fit: contain;
  padding: 6%;
}

/* prev/next controls under the carousel */
.pf-nav {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  z-index: 30;
}

.pf-nav-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(13, 27, 62, 0.12);
  background: #fff;
  color: #0d1b3e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(13, 27, 62, 0.45);
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.pf-nav-btn:hover {
  background: #2d7efa;
  border-color: #2d7efa;
  color: #fff;
  transform: translateY(-2px);
}

.pf-nav-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

@media (max-width: 991px) {
  .pf-swiper.swiper {
    height: calc((560px - 24px) * 543 / 878 + 24px + 70px);
  }

  .pf-swiper .pf-card {
    width: 560px;
  }
}

@media (max-width: 767px) {
  .pf-head h2 {
    font-size: 26px;
  }

  /* capped so the active card still fits inside a ~390px viewport
       instead of being clipped on both edges */
  /* card never wider than the viewport (minus the page gutter); height
       follows the 878:543 artwork ratio so nothing is cropped at 320px */
  .pf-swiper.swiper {
    height: calc((min(364px, 100vw - 32px) - 16px) * 543 / 878 + 16px + 60px);
  }

  .pf-swiper .pf-card {
    width: min(364px, calc(100vw - 32px));
  }

  .pf-card-face {
    padding: 8px;
    border-radius: 18px;
  }

  .pf-card-frame {
    border-radius: 11px;
  }

  .pf-card-caption {
    height: 60px;
    padding: 8px 2px 0 6px;
  }

  .pf-card-caption h3 {
    font-size: 13.5px;
  }

  .pf-card-caption .hp-btn--sm {
    --hp-btn-icon-w: 30px;
    --hp-btn-pad-l: 12px;
    --hp-btn-pad-r: 5px;
  }

  .pf-card-caption .hp-btn--sm .hp-btn__label {
    font-size: 10.5px;
  }

  .pf-nav-btn {
    width: 42px;
    height: 42px;
  }

  .pf-nav-btn svg {
    width: 17px;
    height: 17px;
  }
}

/* ---------------------------------------------------------------------------
   reach-more-searches
   --------------------------------------------------------------------------- */
/* ===== "Have a Product Idea?" CTA banner =====
   Full-bleed dark banner: the robotic-hand artwork lives in the background
   image (its subject sits on the right), so the copy is constrained to the
   left half and a left-to-right gradient keeps the text legible wherever
   the image crops on narrower viewports. */
.rms-section {
  position: relative;
  background-color: #05070c;
  /* --rms-bg is set inline on the <section> from asset() in welcome.blade.php */
  background-image: var(--rms-bg);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  overflow: hidden;
}

.rms-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(5, 7, 12, 0.92) 0%,
    rgba(5, 7, 12, 0.75) 38%,
    rgba(5, 7, 12, 0) 68%
  );
  pointer-events: none;
}

.rms-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding: 74px 0 78px;
}

.rms-inner h2 {
  margin: 0 0 18px;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.2;
  color: #fff;
}

.rms-inner p {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.65;
}

@media (max-width: 991px) {
  .rms-inner {
    max-width: 520px;
    padding: 60px 0 62px;
  }

  .rms-inner h2 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .rms-section {
    background-position: 78% center;
  }

  /* on phones the hand crops into the copy area, so darken the whole banner
       rather than only its left edge */
  .rms-section::before {
    background: linear-gradient(
      180deg,
      rgba(5, 7, 12, 0.9) 0%,
      rgba(5, 7, 12, 0.8) 100%
    );
  }

  .rms-inner {
    max-width: 100%;
    padding: 46px 0 48px;
  }

  .rms-inner h2 {
    font-size: 24px;
  }

  .rms-inner p {
    font-size: 15px;
  }
}

/* ---------------------------------------------------------------------------
   concept-to-completion
   --------------------------------------------------------------------------- */
/* ===== "Concept To Completion" scroll story =====
   Desktop: .ctc-stage pins (sticky) while the taller .ctc-scroller passes and
   welcome.blade.php (hpScrollStory) maps scroll progress onto the active
   service. Three things move together: the copy on the left (big counter +
   title + text), the artwork deck on the right (the active card rises to the
   front, passed cards tuck behind it), and the rail along the bottom (dot per
   service, line fills up to the current one). Clicking a chip scrolls to that
   service. Below 992px there is no pinning; chips are plain buttons.

   All ten copy blocks are rendered up front and only the active one is shown
   — that keeps the site's `.contactUsModal`/`.sourceBtn` jQuery handlers
   (bound once on load) working for every CTA. */
.ctc-section {
  --ctc-tint: #fdf3ea;
  position: relative;
  /* built background (the old PNG pixelated): soft vertical wash + dot grid */
  background-color: #fff;
  background-image:
    radial-gradient(rgba(13, 27, 62, 0.075) 1px, transparent 1.4px),
    linear-gradient(180deg, #f7f9ff 0%, #ffffff 45%, #f5f7fd 100%);
  background-size:
    22px 22px,
    100% 100%;
  /* NOT overflow:hidden -- that would make this the scroll container and
       silently break the sticky stage. clip crops without scrolling. */
  overflow: clip;
}

/* JS sets the scroller's height on desktop; until then it is just a wrapper */
.ctc-scroller {
  position: relative;
}

.ctc-stage {
  position: relative;
  padding: 56px 0 44px;
}

/* tinted glow that follows the active service's colour, plus a fixed blue one
   for depth. On the pin (not the stage, which stretches while pinning) so
   they travel with the content. Pure gradients, no filter: blur(). */
.ctc-pin {
  position: relative;
}

.ctc-pin::before,
.ctc-pin::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.ctc-pin::before {
  right: -8%;
  top: -10%;
  width: 52vw;
  height: 52vw;
  max-width: 760px;
  max-height: 760px;
  background: radial-gradient(
    circle,
    var(--ctc-tint) 0%,
    rgba(255, 255, 255, 0) 62%
  );
  transition: background 0.6s ease;
}

.ctc-pin::after {
  left: -14%;
  bottom: -12%;
  width: 40vw;
  height: 40vw;
  max-width: 600px;
  max-height: 600px;
  background: radial-gradient(
    circle,
    rgba(45, 126, 250, 0.1) 0%,
    rgba(45, 126, 250, 0) 62%
  );
}

.ctc-stage > .container {
  position: relative;
  z-index: 1;
}

.ctc-body,
.ctc-rail {
  position: relative;
  z-index: 1;
}

/* the head scrolls away; copy + deck + rail pin once they reach the header.
   A sticky element can only travel inside its parent, so stage + container
   stretch to the scroller's (JS-set) height; with no height on the scroller
   100% resolves to auto and nothing changes. */
@media (min-width: 992px) {
  .ctc-stage,
  .ctc-stage > .container {
    height: 100%;
  }

  .ctc-pin {
    position: sticky;
    /* clears the fixed site header */
    top: 84px;
  }

  /* hpScrollStory adds .is-static when even the pinned block is taller than
     the viewport (very short window / zoomed far in): click-to-switch */
  .ctc-scroller.is-static .ctc-pin {
    position: static;
  }
}

/* shorter laptops: trim the stage so it still fits under the header */
@media (min-width: 992px) and (max-height: 860px) {
  .ctc-stage {
    padding: 40px 0 32px;
  }

  .ctc-head {
    margin-bottom: 14px;
  }

  .ctc-head h2 {
    font-size: 28px;
  }

  .ctc-badge {
    width: 76px;
    height: 76px;
  }

  .ctc-counter-num {
    font-size: 64px;
  }

  .ctc-copy {
    min-height: 260px;
  }

  .ctc-deck {
    width: min(100%, calc(36vh * 268 / 163));
  }

  .ctc-rail {
    margin-top: 26px;
    padding: 26px 18px 14px;
  }
}

.ctc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 22px;
}

.ctc-head h2 {
  margin: 0;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.25;
  color: #0d1b3e;
}

.ctc-accent {
  position: relative;
  color: #2d7efa;
}

.ctc-accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  border-radius: 3px;
  background: #2d7efa;
}

/* rotating "iapp technologies" ring with an arrow in the middle */
.ctc-badge {
  position: relative;
  flex: none;
  width: 96px;
  height: 96px;
}

.ctc-badge-ring {
  width: 100%;
  height: 100%;
  animation: ctc-spin 22s linear infinite;
}

.ctc-badge-ring text {
  font-family: "Gabarito", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  fill: #0d1b3e;
}

.ctc-badge-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0d1b3e;
}

.ctc-badge-arrow svg {
  width: 22px;
  height: 22px;
}

@keyframes ctc-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- body: copy left, artwork deck right ---- */
.ctc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

/* both halves centre their block inside the column */
.ctc-copy {
  justify-self: center;
  width: 100%;
  max-width: 470px;
  /* keeps the stage height steady between services so the scroll maths
       doesn't shift under the reader */
  min-height: 330px;
}

/* big outlined counter — the one loud element in the section */
.ctc-counter {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
  font-family: "Gabarito", sans-serif;
  font-weight: 800;
  line-height: 1;
}

.ctc-counter-num {
  font-size: 96px;
  letter-spacing: -0.03em;
  /* gradient fill (a text-stroke showed the glyphs' inner contours) */
  background: linear-gradient(160deg, #2d7efa 0%, #a9c9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.ctc-counter-total {
  font-size: 18px;
  font-weight: 600;
  color: #aab3c5;
  font-variant-numeric: tabular-nums;
}

/* every service's copy is in the DOM; only the active one is shown */
.ctc-item[hidden] {
  display: none;
}

.ctc-item:not([hidden]) {
  animation: ctcItemIn 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

.ctc-item h3 {
  margin: 0 0 14px;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.25;
  color: #0d1b3e;
}

.ctc-item p {
  margin: 0 0 24px;
  max-width: 460px;
  color: #5b6478;
  font-size: 15.5px;
  line-height: 1.7;
}

/* ---- artwork deck ---- */
/* Sized by height on desktop so the whole stage fits a laptop viewport; the
   268:163 ratio matches the artwork (1608x978, see the img width/height
   attrs), so `cover` never crops any of the scene. */
.ctc-deck {
  position: relative;
  width: min(100%, calc(42vh * 268 / 163));
  aspect-ratio: 268 / 163;
  margin: 0 auto;
}

/* no padding: the card is exactly the artwork's ratio, so `cover` shows the
   whole image with nothing cropped */
.ctc-card {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--tint, #f4f6fb);
  box-shadow: 0 34px 60px -34px rgba(13, 27, 62, 0.4);
  opacity: 0;
  transform: translateY(46px) scale(0.96);
  transition:
    transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.5s ease;
  z-index: 1;
}

.ctc-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ctc-card.is-active {
  opacity: 1;
  transform: none;
  z-index: 3;
}

/* only the card just passed peeks out behind the active one (stacking all of
   them at half opacity muddied the edge into a smeared halo) */
.ctc-card.is-prev {
  opacity: 0.6;
  transform: translateY(-20px) scale(0.94);
  z-index: 2;
}

/* ---- rail: a track of ten stops, line fills to the current one ---- */
.ctc-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  margin-top: 40px;
  padding: 30px 18px 18px;
  border: 1px solid rgba(13, 27, 62, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 20px 44px -34px rgba(13, 27, 62, 0.35);
  backdrop-filter: blur(8px);
}

.ctc-rail-line {
  position: absolute;
  left: calc(18px + 5%);
  right: calc(18px + 5%);
  top: 36px;
  height: 3px;
  background: rgba(13, 27, 62, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.ctc-rail-line i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #7fb4ff, #2d7efa);
  transform-origin: left center;
  transform: scaleX(0.05);
}

.ctc-tab {
  --p: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #6b7280;
  font-family: "Gabarito", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: color 0.25s ease;
}

.ctc-tab-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #c9d2e3;
  background: #fff;
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.3s ease;
}

.ctc-tab:hover {
  color: #0d1b3e;
}

.ctc-tab:hover .ctc-tab-dot {
  border-color: #2d7efa;
  transform: scale(1.15);
}

/* stops already passed */
.ctc-tab.is-done .ctc-tab-dot {
  border-color: #2d7efa;
  background: #2d7efa;
}

.ctc-tab.is-active {
  color: #2d7efa;
}

.ctc-tab.is-active .ctc-tab-dot {
  border-color: #2d7efa;
  background: #2d7efa;
  transform: scale(1.3);
  box-shadow:
    0 0 0 5px rgba(45, 126, 250, 0.18),
    0 6px 14px -4px rgba(45, 126, 250, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .ctc-badge-ring,
  .ctc-item:not([hidden]) {
    animation: none;
  }

  .ctc-card {
    transition: none;
  }
}

@media (max-width: 1199px) {
  .ctc-body {
    gap: 32px;
  }

  .ctc-counter-num {
    font-size: 80px;
  }

  .ctc-item h3 {
    font-size: 26px;
  }

  .ctc-tab {
    font-size: 12px;
  }
}

@media (max-width: 991px) {
  .ctc-stage {
    padding: 70px 0;
  }

  .ctc-head h2 {
    font-size: 30px;
  }

  .ctc-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .ctc-copy {
    min-height: 0;
    order: 2;
  }

  .ctc-deck {
    width: 100%;
    order: 1;
  }

  .ctc-copy {
    max-width: none;
  }

  /* no rail line on small screens: the ten chips become a swipe row */
  .ctc-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-top: 24px;
    padding: 0 0 6px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    scrollbar-width: none;
  }

  .ctc-rail::-webkit-scrollbar {
    display: none;
  }

  .ctc-rail-line {
    display: none;
  }

  .ctc-tab {
    flex: none;
    flex-direction: row;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(13, 27, 62, 0.05);
    white-space: nowrap;
    font-size: 13.5px;
  }

  .ctc-tab-dot {
    width: 8px;
    height: 8px;
    margin: 0;
  }

  .ctc-tab.is-active {
    background: #0d1117;
    color: #fff;
  }

  .ctc-tab.is-active .ctc-tab-dot {
    transform: none;
    box-shadow: none;
    background: #7fb4ff;
    border-color: #7fb4ff;
  }
}

@media (max-width: 767px) {
  .ctc-stage {
    padding: 56px 0;
  }

  .ctc-head {
    margin-bottom: 24px;
  }

  .ctc-head h2 {
    font-size: 25px;
  }

  .ctc-head h2 br {
    display: none;
  }

  .ctc-badge {
    width: 76px;
    height: 76px;
  }

  .ctc-badge-arrow {
    width: 34px;
    height: 34px;
  }

  .ctc-badge-arrow svg {
    width: 17px;
    height: 17px;
  }

  .ctc-counter-num {
    font-size: 64px;
  }

  .ctc-item h3 {
    font-size: 23px;
  }

  .ctc-card {
    border-radius: 18px;
  }
}

/* ---------------------------------------------------------------------------
   why-iapp
   --------------------------------------------------------------------------- */
/* ===== "Over 12 Years of Building Digital Products" =====
   Right-hand list selects which reason is shown in the panel on the left.
   All five panels are rendered up front and toggled with [hidden] — nothing
   is fetched on switch, so the change is instant. */
.wi-section {
  position: relative;
  /* colour keeps the section on-brand if the artwork is slow or blocked */
  background-color: #f6fbff;
  background-image: var(--wi-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* clip, not hidden: hidden would become the scroll container and break
       the sticky stage */
  overflow: clip;
}

/* scroll story: hpScrollStory sizes the scroller on desktop, the stage pins */
.wi-scroller {
  position: relative;
}

.wi-stage {
  padding: 80px 0;
}

@media (min-width: 992px) {
  .wi-stage,
  .wi-stage > .container {
    height: 100%;
  }

  .wi-pin {
    position: sticky;
    top: 84px;
  }

  .wi-scroller.is-static .wi-pin {
    position: static;
  }
}

@media (min-width: 992px) and (max-height: 860px) {
  .wi-stage {
    padding: 44px 0 36px;
  }

  .wi-head {
    margin-bottom: 26px;
  }

  .wi-head h2 {
    font-size: 30px;
  }

  .wi-panel {
    padding: 26px 28px 28px;
    min-height: 0;
  }

  .wi-tabs {
    gap: 10px;
  }

  .wi-tab {
    padding: 12px 18px;
  }
}

.wi-head {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center;
}

.wi-head h2 {
  margin: 0;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.25;
  color: #0d1117;
}

.wi-head-accent {
  color: #2d7efa;
}

.wi-head p {
  margin: 14px auto 0;
  max-width: 680px;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.7;
}

.wi-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 28px;
  align-items: center;
}

/* ---- left: the selected reason ---- */
.wi-panel {
  background: #fff;
  border: 1px solid rgba(13, 27, 62, 0.07);
  border-radius: 18px;
  box-shadow: 0 26px 60px -42px rgba(13, 27, 62, 0.5);
  padding: 34px 36px 38px;
  min-height: 356px;
}

.wi-item[hidden] {
  display: none;
}

.wi-item-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
  margin-bottom: 26px;
}

.wi-item h3 {
  margin: 0;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.3;
  color: #0d1117;
}

/* the short rule under the heading */
.wi-item h3::after {
  content: "";
  display: block;
  width: 128px;
  height: 3px;
  margin-top: 12px;
  border-radius: 3px;
  background: #2d7efa;
}

.wi-item p {
  margin: 20px 0 0;
  color: #5b6478;
  font-size: 15px;
  line-height: 1.75;
}

.wi-note {
  margin-top: 26px;
  padding: 13px 18px;
  border: 1px solid rgba(45, 126, 250, 0.28);
  border-radius: 8px;
  background: #eff5ff;
  color: #2d7efa;
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---- right: the reason list ---- */
.wi-tabs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wi-tab {
  --p: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  border: 1px solid rgba(13, 27, 62, 0.07);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 30px -26px rgba(13, 27, 62, 0.55);
  color: #0d1117;
  font-family: "Gabarito", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.wi-tab:hover {
  transform: translateY(-2px);
}

/* progress bar along the bottom edge: fills as you scroll through the reason,
   stays full once passed */
.wi-tab::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #2d7efa;
  transform: scaleX(var(--p));
  transform-origin: left center;
}

.wi-tab.is-active::before {
  background: rgba(255, 255, 255, 0.85);
}

.wi-tab-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #eef4ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
}

.wi-tab-icon img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  display: block;
}

.wi-tab.is-active {
  background: #2d7efa;
  border-color: #2d7efa;
  color: #fff;
  box-shadow: 0 18px 34px -22px rgba(45, 126, 250, 0.9);
}

.wi-tab.is-active .wi-tab-icon {
  background: #fff;
}

@media (max-width: 1199px) {
  .wi-body {
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  .wi-panel {
    padding: 30px 28px 32px;
  }
}

@media (max-width: 991px) {
  .wi-stage {
    padding: 70px 0;
  }

  .wi-head h2 {
    font-size: 31px;
  }

  .wi-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .wi-panel {
    min-height: 0;
  }
}

@media (max-width: 767px) {
  .wi-stage {
    padding: 56px 0;
  }

  .wi-head {
    margin-bottom: 32px;
  }

  .wi-head h2 {
    font-size: 25px;
  }

  .wi-panel {
    padding: 24px 22px 26px;
    border-radius: 16px;
  }

  .wi-item h3 {
    font-size: 22px;
  }

  .wi-item-icon {
    margin-bottom: 18px;
  }

  .wi-tab {
    padding: 13px 15px;
    gap: 13px;
    font-size: 15px;
  }

  .wi-tab-icon {
    width: 40px;
    height: 40px;
  }

  .wi-tab-icon img {
    width: 22px;
    height: 22px;
  }
}

/* ---------------------------------------------------------------------------
   technology-ring
   --------------------------------------------------------------------------- */
/* ===== "Crafting Solutions With Technology That Works For You" =====
   The section is pinned with `position: sticky` inside the taller #ttScroll
   spacer; scrolling through that spacer turns a ring of wide technology cards
   (copy left, artwork right) past the camera. There is no CSS 3D context —
   welcome.blade.php projects the ring itself and gives each card a 2D
   transform, and plain `none` for the one facing front, so its text is
   rendered rather than resampled.
   Below 992px — and for reduced motion — the pin and the 3D are dropped and
   the ring becomes a plain swipeable strip of the same cards. */
.tt-scroll {
  position: relative;
  /* scroll spent on each card after the first; the pinned travel is
     (count - 1) * step, which is what the JS maps 0..1 onto */
  --tt-step: 46vh;
  height: calc(100vh + (var(--tt-count) - 1) * var(--tt-step));
  background-color: #05070c;
}

.tt-section {
  position: sticky;
  top: 0;
  height: 100vh;
  /* clears the fixed site header */
  padding-top: 76px;
  display: flex;
  align-items: center;
  background-color: #05070c;
  background-image: var(--tt-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.tt-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 26px);
  width: 100%;
}

.tt-head {
  max-width: 780px;
  margin: 0;
  text-align: center;
}

.tt-head h2 {
  margin: 0;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 40px);
  line-height: 1.3;
  color: #fff;
}

.tt-accent {
  position: relative;
  color: #22c55e;
}

.tt-accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: #22c55e;
}

/* ---- the ring ---- */
.tt-stage {
  --tt-card-w: clamp(560px, 56vw, 1040px);
  /* 2.5:1 splits into two 1.25:1 halves — the copy gets a column as wide as it
     is tall, and the artwork slot matches the 5:4 crop of the source files, so
     the image is shown whole instead of being cropped to fit */
  --tt-card-h: clamp(300px, calc(var(--tt-card-w) / 2.5), 416px);
  position: relative;
  width: 100%;
  /* breathing room above and below the ring */
  height: calc(var(--tt-card-h) + clamp(40px, 7vh, 84px));
  display: flex;
  align-items: center;
  justify-content: center;
}

.tt-ring {
  position: relative;
  width: var(--tt-card-w);
  height: var(--tt-card-h);
  /* Deliberately NOT a 3D context. A `perspective` on the stage (or
     transform-style: preserve-3d here) puts every card into a resampled 3D
     layer, and the front card's text is then a stretched texture however
     crisp the source is. welcome.blade.php instead projects the ring in JS
     and hands each card a plain 2D transform — and `none` for the card
     facing front, which is what keeps its text pixel-sharp. Nor is there a
     CSS transition: re-triggering one every scroll frame would leave the
     cards permanently animating, which also blocks a clean re-raster. */
}

.tt-card {
  position: absolute;
  /* inset + margin auto centres the card in the ring box, so the front card
     can be sized up in layout — scaling it with transform() would only stretch
     an already-rasterised layer and the text goes soft */
  inset: 0;
  margin: auto;
  width: var(--tt-card-w);
  height: var(--tt-card-h);
  padding: 0;
  display: block;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: #080b12;
  /* own stacking context so the artwork fade always sits over the image */
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.95);
  transition:
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.tt-card-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
}

.tt-card-media img,
.tt-card-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* biased upward so faces/headsets stay in frame when it crops */
  object-position: center 35%;
}

/* fades the artwork into the card so the copy stays readable */
.tt-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    #080b12 0%,
    rgba(8, 11, 18, 0.72) 22%,
    rgba(8, 11, 18, 0) 60%
  );
  pointer-events: none;
}

.tt-card-copy {
  position: relative;
  z-index: 1;
  max-width: 50%;
  height: 100%;
  padding: clamp(18px, 3vh, 36px) clamp(20px, 2.2vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tt-card.is-active {
  border-color: rgba(45, 126, 250, 0.7);
  box-shadow: 0 34px 80px -30px rgba(45, 126, 250, 0.65);
}

/* icon sits beside the heading, not above it */
.tt-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(10px, 1.4vh, 16px);
}

.tt-item-icon {
  flex: none;
  width: clamp(34px, 2.2vw, 42px);
  height: clamp(34px, 2.2vw, 42px);
  border-radius: 11px;
  background: #2d7efa;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tt-item-icon svg {
  width: clamp(18px, 1.2vw, 22px);
  height: clamp(18px, 1.2vw, 22px);
  display: block;
}

.tt-card h3 {
  margin: 0;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 1.3vw, 24px);
  color: #fff;
}

.tt-card p {
  margin: 0 0 clamp(14px, 1.8vh, 20px);
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(13px, 0.85vw, 16px);
  line-height: 1.6;
}

.tt-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.2vh, 13px);
}

.tt-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #fff;
  font-size: clamp(13px, 0.82vw, 15px);
  line-height: 1.45;
}

.tt-list li::before {
  content: "";
  flex: none;
  width: clamp(17px, 1vw, 19px);
  height: clamp(17px, 1vw, 19px);
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232d7efa'/%3E%3Cpath d='M7.4 12.4l3.1 3.1 6.1-6.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/contain no-repeat;
}

/* ---- prev / next ---- */
.tt-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.tt-arrow {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tt-arrow:hover {
  background: #2d7efa;
  border-color: transparent;
  transform: translateY(-2px);
}

.tt-arrow svg {
  width: 18px;
  height: 18px;
  display: block;
}

.tt-nav-count {
  font-family: "Gabarito", sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.55);
}

.tt-nav-count b {
  color: #fff;
  font-weight: 700;
}

/* short viewports: the bullets go first, the ring is the point of the section */
@media (min-width: 992px) and (max-height: 720px) {
  .tt-list {
    display: none;
  }
}

/* ---- flat fallback: no pin, no 3D, just a swipeable strip ---- */
@media (max-width: 991px), (prefers-reduced-motion: reduce) {
  .tt-scroll {
    height: auto;
  }

  .tt-section {
    position: static;
    height: auto;
    display: block;
    padding: 70px 0;
  }

  .tt-inner {
    display: block;
  }

  .tt-head {
    margin: 0 auto 26px;
  }

  .tt-stage {
    height: auto;
    display: block;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  .tt-stage::-webkit-scrollbar {
    display: none;
  }

  .tt-ring {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    width: auto;
    height: auto;
    transform: none !important;
    transform-style: flat;
    transition: none;
    padding-bottom: 6px;
  }

  /* artwork on top, copy under it — the wide split has no room here */
  .tt-card,
  .tt-card.is-active {
    position: relative;
    inset: auto;
    margin: 0;
    flex: 0 0 min(86vw, 520px);
    width: auto;
    height: auto;
    transform: none !important;
    opacity: 1 !important;
    z-index: auto !important;
    scroll-snap-align: center;
  }

  .tt-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 900 / 730;
  }

  .tt-card-media::after {
    background: linear-gradient(180deg, rgba(8, 11, 18, 0) 45%, #080b12 100%);
  }

  .tt-card-copy {
    max-width: 100%;
    height: auto;
    padding: 22px 22px 26px;
  }

  .tt-nav {
    justify-content: center;
    margin-top: 22px;
  }
}

@media (max-width: 767px) {
  .tt-section {
    padding: 56px 0;
  }

  .tt-head h2 br {
    display: none;
  }
}
/* ---------------------------------------------------------------------------
   ai-cta
   --------------------------------------------------------------------------- */
/* ===== "Build AI Apps, Tools & Business Solutions" CTA band =====
   Full-bleed blue banner. The diagonal shapes are baked into the background
   artwork on its right side, so the copy is held to the left and the 3D
   magnifier sits over those shapes. */
.aic-section {
  position: relative;
  background-color: #a8d5f7;
  background-image: var(--aic-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  /* white band between this banner and the dark section above it. Done as a
       border (not margin) so it is pure #fff rather than the page's #fbfbfb;
       padding-box clipping keeps the blue artwork out of that strip. */
  background-clip: padding-box;
}

.aic-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 40px;
  min-height: 380px;
  padding: 56px 0;
}

.aic-copy {
  max-width: 620px;
}

.aic-copy h2 {
  margin: 0 0 18px;
  max-width: 520px;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.22;
  color: #0d1117;
}

.aic-accent {
  color: #2d7efa;
}

.aic-copy p {
  margin: 0 0 28px;
  color: #33445f;
  font-size: 16px;
  line-height: 1.7;
}

.aic-art {
  justify-self: center;
  width: 100%;
  max-width: 380px;
}

.aic-art img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1199px) {
  .aic-copy h2 {
    font-size: 34px;
  }

  .aic-art {
    max-width: 300px;
  }
}

@media (max-width: 991px) {
  .aic-inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 24px;
    min-height: 0;
    padding: 46px 0;
  }

  .aic-copy h2 {
    font-size: 29px;
  }

  .aic-art {
    max-width: 230px;
  }
}

@media (max-width: 767px) {
  /* the artwork moves under the copy rather than shrinking to nothing */
  .aic-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 40px 0 36px;
  }

  .aic-copy h2 {
    font-size: 25px;
  }

  .aic-copy p {
    font-size: 15px;
  }

  .aic-art {
    max-width: 180px;
  }
}

/* ---------------------------------------------------------------------------
   compliance-security
   --------------------------------------------------------------------------- */
/* ===== "Building With Compliance, Security & Risk in Mind" =====
   Six practice cards, three across. Each card: icon tile, title, copy; a
   gradient rule draws across the top on hover. */
.csr-section {
  position: relative;
  padding: 96px 0;
  background-color: #f7f9ff;
  background-image:
    radial-gradient(rgba(13, 27, 62, 0.07) 1px, transparent 1.4px),
    radial-gradient(45% 55% at 100% 0%, rgba(255, 138, 31, 0.12) 0%, rgba(255, 138, 31, 0) 70%),
    radial-gradient(45% 55% at 0% 100%, rgba(45, 126, 250, 0.14) 0%, rgba(45, 126, 250, 0) 70%),
    linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%);
  background-size: 22px 22px, 100% 100%, 100% 100%, 100% 100%;
  overflow: hidden;
}

.csr-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 44px;
}

.csr-head h2 {
  margin: 0;
  max-width: 560px;
  font-family: 'Gabarito', sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #0d1117;
}

.csr-head p {
  margin: 0;
  max-width: 480px;
  color: #5b6478;
  font-size: 15.5px;
  line-height: 1.7;
}

.csr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.csr-card {
  position: relative;
  padding: 30px 28px 32px;
  border: 1px solid rgba(13, 27, 62, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px -30px rgba(13, 27, 62, 0.4);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease, box-shadow 0.4s ease, background 0.3s ease;
}

/* gradient rule across the top, drawn on hover */
.csr-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #2d7efa, #7fb4ff 60%, #ff9a2e);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* soft blue bloom behind the icon */
.csr-card::after {
  content: '';
  position: absolute;
  left: -40px;
  top: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 126, 250, 0.16) 0%, rgba(45, 126, 250, 0) 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.csr-card:hover {
  transform: translateY(-6px);
  border-color: rgba(45, 126, 250, 0.35);
  background: #fff;
  box-shadow: 0 30px 50px -28px rgba(45, 126, 250, 0.45);
}

.csr-card:hover::before {
  transform: scaleX(1);
}

.csr-card:hover::after {
  opacity: 1;
}

/* the icon artwork already includes its own light-blue rounded tile; the
   wrapper adds a white plate + ring so it sits up off the card */
.csr-card-icon {
  position: relative;
  width: 56px;
  height: 56px;
  display: block;
  margin-bottom: 20px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(45, 126, 250, 0.16), 0 10px 20px -12px rgba(45, 126, 250, 0.5);
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
}

.csr-card:hover .csr-card-icon {
  transform: translateY(-4px) rotate(-5deg);
  box-shadow: 0 0 0 1px rgba(45, 126, 250, 0.3), 0 16px 26px -12px rgba(45, 126, 250, 0.6);
}

.csr-card h3 {
  position: relative;
  margin: 0 0 12px;
  font-family: 'Gabarito', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: #0d1117;
  transition: color 0.25s ease;
}

.csr-card:hover h3 {
  color: #2d7efa;
}

.csr-card p {
  position: relative;
  margin: 0;
  color: #5b6478;
  font-size: 14.5px;
  line-height: 1.7;
}

@media (max-width: 1199px) {
  .csr-head h2 {
    font-size: 32px;
  }

  .csr-card {
    padding: 26px 22px 28px;
  }
}

@media (max-width: 991px) {
  .csr-section {
    padding: 70px 0;
  }

  .csr-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 30px;
  }

  .csr-head h2 {
    font-size: 28px;
  }

  .csr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 575px) {
  .csr-section {
    padding: 56px 0;
  }

  .csr-head h2 {
    font-size: 24px;
  }

  .csr-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .csr-card {
    padding: 22px 20px 24px;
    border-radius: 18px;
  }

  .csr-card-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
  }

  .csr-card h3 {
    font-size: 18px;
  }
}

/* ---------------------------------------------------------------------------
   industries-reel
   --------------------------------------------------------------------------- */
/* ===== "The Industries We Serve" =====
   Pinned with `position: sticky` inside the taller #indScroll spacer. The first
   slice of that scroll fades the heading out and lifts the card into place; the
   rest runs the verticals through it — the artwork on the left is wiped in with
   clip-path (alternating edge per index), the copy on the right is a stack of
   absolutely positioned panels translated by (i - pos) * 100%, and the dots on
   the left track the index. welcome.blade.php drives all of it from one scroll
   progress. Below 992px — and for reduced motion — the pin is dropped and the
   same markup renders as a plain stacked list. */
.ind-scroll {
  position: relative;
  /* scroll spent on each vertical after the first */
  --ind-step: 90vh;
  height: calc(100vh + (var(--ind-count) - 1) * var(--ind-step));
  background-color: #0c111a;
}

.ind-section {
  position: sticky;
  top: 0;
  height: 100vh;
  /* clears the fixed site header, so the card never touches it */
  padding-top: 76px;
  background-color: #0c111a;
  background-image:
    radial-gradient(
      45% 55% at 100% 22%,
      rgba(96, 62, 196, 0.55) 0%,
      rgba(96, 62, 196, 0) 70%
    ),
    radial-gradient(
      35% 40% at 0% 100%,
      rgba(47, 125, 255, 0.22) 0%,
      rgba(47, 125, 255, 0) 70%
    ),
    linear-gradient(180deg, #0c111a 0%, #0a0f1c 100%);
  overflow: hidden;
}

/* ---- wordmark rows behind everything ---- */
.ind-bg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  /* faded in by the script as the card grows, and each row is drifted */
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.ind-bg-line {
  display: flex;
  flex: none;
  white-space: nowrap;
  /* the script drifts odd and even rows in opposite directions */
  will-change: transform;
}

.ind-bg-set {
  display: flex;
  flex: none;
}

.ind-bg-line span span {
  padding: 0 0.22em;
  font-family: "Gabarito", sans-serif;
  font-weight: 800;
  font-size: clamp(42px, 5.2vw, 80px);
  line-height: 0.9;
  text-transform: uppercase;
  color: rgba(47, 125, 255, 0.28);
}

/* ---- heading, out of the way once the card lands ---- */
.ind-head {
  position: absolute;
  top: clamp(96px, 13vh, 130px);
  left: 0;
  right: 0;
  z-index: 2;
}

/* the heading and the card both sit on the site container, as the grid did */
.ind-head-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.ind-head h2 {
  margin: 0;
  font-family: "Gabarito", sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 4vw, 66px);
  line-height: 1.02;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #fff;
}

.ind-head p {
  margin: 6px 0 0;
  max-width: 340px;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

/* ---- the card ---- */
.ind-card-wrap {
  position: absolute;
  /* absolute offsets resolve against the section's padding box, so the header
     clearance has to be repeated here or the card centres behind it */
  inset: 76px 0 0;
  z-index: 3;
  pointer-events: none;
}

.ind-card-holder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.ind-card {
  width: 100%;
  height: min(76vh, 720px);
  padding: 18px;
  /* glass, not a solid slab: the wordmark marquee stays readable through it */
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    0 40px 90px -40px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
  pointer-events: auto;
  /* the card enters small and is scaled to 1 by the script; at rest the
     transform is dropped entirely so the copy is rendered, not resampled */
  transform-origin: 50% 50%;
}

.ind-stage {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.ind-left,
.ind-right {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

/* rounds the artwork on all four corners, not just the two on the card's edge */
.ind-left {
  border-radius: 14px;
}

/* Artwork. The wipe is a transition, not a scrub: a single ~0.9s clip-path tween
   fires the moment the copy steps over, rather than dragging the reveal out
   across the whole step (which reads as the image changing late).
   Every slide hides at the BOTTOM edge, so scrolling down wipes the new artwork
   upwards — the same direction the copy travels — and scrolling back runs the
   same wipe in reverse. Alternating the edge per index made the wipe fight the
   copy on every other step. */
.ind-img {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.ind-img.is-on {
  clip-path: inset(0 0 0 0);
}

/* only ever seen for the instant an image is decoding */
.ind-img,
.ind-img img {
  background: rgba(8, 11, 18, 0.55);
}

.ind-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


/* copy: one panel per vertical, stacked and translated a panel at a time */
.ind-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 clamp(24px, 3vw, 56px);
}

.ind-slide-inner {
  max-width: 480px;
}

.ind-slide h3 {
  margin: 0 0 10px;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.1vw, 46px);
  line-height: 1.3;
  color: #fff;
  /* the glass lets the marquee through, so the copy needs its own separation */
  text-shadow: 0 2px 18px rgba(3, 6, 14, 0.75);
}

.ind-slide p {
  margin: 0;
  max-width: 450px;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 12px rgba(3, 6, 14, 0.7);
}

/* ---- flat fallback: no pin, plain stacked list ---- */
@media (max-width: 991px), (prefers-reduced-motion: reduce) {
  .ind-scroll {
    height: auto;
  }

  .ind-section {
    position: static;
    height: auto;
    padding: 70px 0;
  }

  .ind-bg {
    display: none;
  }

  .ind-head {
    position: static;
    display: block;
    padding: 0 20px;
    opacity: 1 !important;
    transform: none !important;
  }

  .ind-head p {
    max-width: 100%;
    margin-top: 12px;
  }

  .ind-card-wrap {
    position: static;
    display: block;
  }

  .ind-card {
    width: auto;
    height: auto;
    margin: 26px 20px 0;
    padding: 0 18px 18px 18px;
    background: none;
    box-shadow: none;
    transform: none !important;
  }

  /* the panels flatten into one column and `order` re-pairs each image with
     its own copy, which the two-column layout had split apart */
  .ind-stage {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  .ind-left,
  .ind-right,
  .ind-images {
    display: contents;
  }

  .ind-img {
    order: calc(var(--i) * 2);
  }

  .ind-slide {
    order: calc(var(--i) * 2 + 1);
  }

  .ind-img,
  .ind-slide {
    position: relative;
    inset: auto;
    clip-path: none !important;
    transform: none !important;
  }

  .ind-img {
    margin-top: 16px;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
  }

  .ind-slide {
    display: block;
    padding: 18px 20px 24px;
    border-radius: 0 0 14px 14px;
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }

}
/* ---------------------------------------------------------------------------
   why-choose-ai
   --------------------------------------------------------------------------- */
/* ===== "Why Businesses Choose iApp Technologies for AI Transformation?" =====
   Same three-column shape as the compliance section: feature cards, the AI
   illustration, more feature cards. */
.wbc-section {
  position: relative;
  padding: 70px 0 90px;
  background: linear-gradient(180deg, #fbfaff 0%, #f6f5fc 100%);
  /* clip, not hidden, so the sticky illustration keeps working */
  overflow: clip;
}

.wbc-head {
  max-width: 760px;
  margin: 0 auto 50px;
  text-align: center;
}

.wbc-head h2 {
  margin: 0;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.45;
  color: #0d1117;
}

.wbc-head h2 span {
  color: #1a73f0;
}

.wbc-head p {
  margin: 18px auto 0;
  max-width: 660px;
  font-size: 15px;
  line-height: 1.75;
  color: #6b7280;
}

.wbc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.wbc-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.wbc-card {
  padding: 20px 20px 22px;
  border: 1px solid #e4e6f5;
  border-radius: 14px;
  background: #fdfdff;
  box-shadow: 0 6px 18px rgba(20, 30, 90, 0.04);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.wbc-card:hover {
  transform: translateY(-3px);
  border-color: #cfd6f2;
  box-shadow: 0 12px 26px rgba(20, 30, 90, 0.09);
}

.wbc-card-icon {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  margin-bottom: 14px;
}

.wbc-card h3 {
  margin: 0 0 10px;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  color: #0d1117;
}

.wbc-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: #6b7280;
}

/* illustration starts level with the first cards and rides along while the
   two columns scroll past */
.wbc-visual {
  text-align: center;
  position: sticky;
  top: 110px;
}

.wbc-visual img {
  width: 100%;
  max-width: 560px;
  height: auto;
}

@media (max-width: 1199px) {
  .wbc-head h2 {
    font-size: 29px;
  }

  .wbc-body {
    gap: 22px;
  }

  .wbc-col {
    gap: 20px;
  }
}

@media (max-width: 991px) {
  .wbc-section {
    padding: 55px 0 70px;
  }

  /* illustration moves above the two card columns */
  .wbc-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wbc-visual {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 10px;
    position: static;
  }
}

@media (max-width: 575px) {
  .wbc-head h2 {
    font-size: 24px;
  }

  .wbc-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   faq-section
   --------------------------------------------------------------------------- */
/* ===== Frequently asked questions =====
   Accordion on the left, a pinned "more questions?" card on the right. */
.faq-section {
  position: relative;
  padding: 90px 0 100px;
  background-color: #f6fbff;
  background-image: var(--faq-bg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  /* NOT overflow:hidden -- that would make this the scroll container and
       silently break the sticky aside below. clip crops without scrolling. */
  overflow: clip;
}

.faq-section h2 {
  margin: 0 0 46px;
  font-family: "Gabarito", sans-serif;
  font-weight: 800;
  font-size: 46px;
  line-height: 1.14;
  letter-spacing: -0.5px;
  color: #0b1020;
}

.faq-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 40px;
  align-items: start;
}

/* --- accordion --- */
.faq-item {
  background: #fff;
  border: 1px solid #e7eaf3;
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 20px 24px;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: #0b1020;
  cursor: pointer;
}

.faq-q:hover {
  color: #1a6cf5;
}

/* +/- built from two bars so it can rotate into a minus when open */
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #0b1020;
  transform: translateY(-50%);
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.faq-icon::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq-q[aria-expanded="true"] .faq-icon::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.faq-a-inner {
  padding: 0 24px 22px;
  font-size: 14.5px;
  line-height: 1.75;
  color: #5b6478;
}

/* --- pinned side card --- */
.faq-aside {
  position: sticky;
  top: 104px;
  padding: 34px 28px 30px;
  background: #fff;
  border: 1px solid #e7eaf3;
  border-radius: 12px;
  text-align: center;
}

.faq-aside-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  color: #0b1020;
}

.faq-aside h3 {
  margin: 0 0 14px;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  color: #0b1020;
}

.faq-aside p {
  margin: 0 0 28px;
  font-size: 14.5px;
  line-height: 1.7;
  color: #5b6478;
}

/* the card is ~280px of usable width, so the long label ("Talk to Our
   Technology Experts") needs a tighter type scale to keep the disc inside
   the pill instead of pushing it past the card edge */
.faq-aside .hp-btn {
  --hp-btn-icon-w: 30px;
  --hp-btn-gap: 8px;
  --hp-btn-pad-l: 14px;
  --hp-btn-pad-r: 5px;
  max-width: 100%;
}

.faq-aside .hp-btn .hp-btn__label {
  font-size: 10.5px;
  letter-spacing: 0.035em;
}

@media (max-width: 991px) {
  .faq-section {
    padding: 65px 0 75px;
  }

  .faq-section h2 {
    font-size: 34px;
    margin-bottom: 32px;
  }

  .faq-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  /* single column: nothing to pin against, so let it flow */
  .faq-aside {
    position: static;
  }
}

@media (max-width: 575px) {
  .faq-section h2 {
    font-size: 27px;
  }

  .faq-q {
    padding: 17px 18px;
    font-size: 15.5px;
  }

  /* narrower card: give the CTA the full inner width and let the long label
     wrap, so the disc stays inside the pill instead of being clipped */
  .faq-aside {
    padding: 28px 18px 26px;
  }

  .faq-aside .hp-btn {
    --hp-btn-pad-l: 16px;
    width: 100%;
    justify-content: center;
  }

  .faq-aside .hp-btn .hp-btn__label {
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }

  .faq-a-inner {
    padding: 0 18px 18px;
  }
}

/* ---------------------------------------------------------------------------
   home-motion
   --------------------------------------------------------------------------- */
/* ===== Home page motion + polish =====
   Loaded once at the bottom of welcome.blade.php, after every per-section
   stylesheet, so the transition/hover rules here win ties. Two jobs:

   1. Scroll reveal. JS tags elements with .hp-reveal (+ --hp-i for a stagger)
      and flips .is-in once they enter the viewport; both classes are removed
      after the transition so nothing here lingers on the element.
   2. Section polish that is purely presentational: tab-panel entrances,
      CTA arrow nudges, floating artwork, hover states. */

/* ---------- reveal ---------- */
.hp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease,
    transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--hp-i, 0) * 85ms);
}

.hp-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* accent underlines draw in with their heading */
.ctc-head.hp-reveal .ctc-accent::after,
.tt-head.hp-reveal .tt-accent::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s;
}

.ctc-head.hp-reveal.is-in .ctc-accent::after,
.tt-head.hp-reveal.is-in .tt-accent::after {
  transform: scaleX(1);
}

/* the blue rule under the active reason heading */
.wi-panel.hp-reveal .wi-item h3::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s;
}

.wi-panel.hp-reveal.is-in .wi-item h3::after {
  transform: scaleX(1);
}

/* ---------- shared keyframes ---------- */
@keyframes hpItemIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hpFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes hpGlowDrift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(60px, -30px) scale(1.15);
  }
}

/* ---------- tab panels: incoming copy slides up ---------- */
.wi-item:not([hidden]) {
  animation: hpItemIn 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* ---------- badge arrow nudge ---------- */
.ctc-badge-arrow svg {
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ctc-badge:hover .ctc-badge-arrow svg {
  transform: translateX(4px);
}

/* ---------- Have a Product Idea?: slow-moving glow behind the copy ---------- */
.rms-section::after {
  content: "";
  position: absolute;
  left: -120px;
  top: 50%;
  width: 520px;
  height: 520px;
  margin-top: -260px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(31, 122, 236, 0.32) 0%,
    rgba(31, 122, 236, 0) 62%
  );
  filter: blur(10px);
  animation: hpGlowDrift 11s ease-in-out infinite;
  pointer-events: none;
}

/* ---------- Why iApp ---------- */
.wi-tab {
  position: relative;
  overflow: hidden;
}

.wi-tab:hover {
  transform: translate(5px, -1px);
}

.wi-tab::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateX(-8px);
  opacity: 0;
  transition:
    transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.3s ease;
}

.wi-tab.is-active::after,
.wi-tab:hover::after {
  transform: rotate(-45deg) translateX(0);
  opacity: 0.9;
}

.wi-tab-icon img {
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wi-tab:hover .wi-tab-icon img {
  transform: scale(1.12);
}

.wi-item-icon {
  animation: hpFloatSm 4.5s ease-in-out infinite;
}

@keyframes hpFloatSm {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

/* ---------- Technology ring ---------- */
.tt-list li {
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tt-list li:hover {
  transform: translateX(4px);
}

/* ---------- AI CTA band ---------- */
.aic-art {
  position: relative;
}

.aic-art img {
  animation: hpFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 30px 30px rgba(13, 17, 23, 0.22));
}

.aic-art::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 60%;
  height: 22px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse,
    rgba(13, 17, 23, 0.22) 0%,
    rgba(13, 17, 23, 0) 70%
  );
  animation: hpShadow 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hpShadow {
  0%,
  100% {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
  }

  50% {
    transform: translateX(-50%) scaleX(0.82);
    opacity: 0.6;
  }
}

/* ---------- Why businesses choose ---------- */
.wbc-card-icon {
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wbc-card:hover .wbc-card-icon {
  transform: scale(1.1) rotate(-3deg);
}

.wbc-card h3 {
  transition: color 0.25s ease;
}

.wbc-card:hover h3 {
  color: #1a73f0;
}

.wbc-visual img {
  animation: hpFloat 7s ease-in-out infinite;
  filter: drop-shadow(0 30px 34px rgba(20, 30, 90, 0.18));
}

/* ---------- FAQ ---------- */
.faq-item {
  position: relative;
  transition:
    border-color 0.25s ease,
    box-shadow 0.3s ease,
    transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.faq-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #1a6cf5;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.faq-item:hover {
  border-color: #cfd9ee;
  box-shadow: 0 10px 26px -18px rgba(13, 27, 62, 0.4);
}

.faq-item:has(.faq-q[aria-expanded="true"]) {
  border-color: #bcd0f5;
  box-shadow: 0 14px 30px -18px rgba(26, 108, 245, 0.35);
}

.faq-item:has(.faq-q[aria-expanded="true"])::before {
  transform: scaleY(1);
}

.faq-q {
  transition: color 0.25s ease;
}

.faq-icon {
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.faq-q[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
}

.faq-q[aria-expanded="true"] .faq-icon::before {
  background: #1a6cf5;
}

.faq-aside-icon {
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    color 0.3s ease;
}

.faq-aside:hover .faq-aside-icon {
  transform: rotate(-8deg) scale(1.08);
  color: #1a6cf5;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ctc-head.hp-reveal .ctc-accent::after,
  .tt-head.hp-reveal .tt-accent::after,
  .wi-panel.hp-reveal .wi-item h3::after {
    transform: none;
    transition: none;
  }

  .wi-item:not([hidden]),
  .rms-section::after,
  .wi-item-icon,
  .aic-art img,
  .aic-art::after,
  .wbc-visual img {
    animation: none;
  }
}

@media (max-width: 767px) {
  .rms-section::after {
    display: none;
  }
}