@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-tabs
   --------------------------------------------------------------------------- */
/* ===== "Crafting Solutions With Technology That Works For You" =====
   Dark section: a row of technology tabs above one panel. The panel keeps a
   single <img> that JS swaps (the artwork is heavy, so rendering all eight at
   once is not an option) while every copy block is pre-rendered and toggled. */
.tt-section {
  position: relative;
  padding: 90px 0;
  background-color: #05070c;
  background-image: var(--tt-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

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

.tt-head h2 {
  margin: 0;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.35;
  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;
}

/* ---- tab row: icon tiles ---- */
.tt-tabs {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.tt-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 16px 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  color: #cbd2e0;
  font-family: "Gabarito", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.35s ease;
}

/* soft top-light on hover */
.tt-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    80% 60% at 50% 0%,
    rgba(127, 180, 255, 0.22),
    rgba(127, 180, 255, 0)
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.tt-tab:hover {
  color: #fff;
  border-color: rgba(127, 180, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-3px);
}

.tt-tab:hover::before {
  opacity: 1;
}

.tt-tab-icon {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(45, 126, 250, 0.14);
  color: #7fb4ff;
  display: grid;
  place-items: center;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tt-tab-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.tt-tab:hover .tt-tab-icon {
  transform: scale(1.1);
}

.tt-tab-label {
  position: relative;
}

.tt-tab.is-active {
  background: linear-gradient(160deg, #2d7efa 0%, #1a4fd6 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 16px 34px -14px rgba(45, 126, 250, 0.9);
}

.tt-tab.is-active::before {
  opacity: 0;
}

.tt-tab.is-active .tt-tab-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* autoplay clock: a bar along the active tile's bottom edge fills over the
   3s interval (welcome.blade.php re-adds .is-timing on every switch) */
.tt-tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.85);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}

.tt-section.is-autoplaying .tt-tab.is-active.is-timing::after {
  opacity: 1;
  animation: ttTiming 3s linear forwards;
}

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

  to {
    transform: scaleX(1);
  }
}

/* ---- panel ---- */
/* The artwork is square (2528x2564). The media box has to stay near that
   ratio or `cover` crops the subject's head off — hence the tall panel and
   the fairly narrow media column rather than a short, wide one. */
.tt-panel {
  position: relative;
  /* own stacking context so the media fade always sits over the artwork */
  isolation: isolate;
  min-height: 560px;
  border-radius: 12px;
  overflow: hidden;
  background: #05070c;
}

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

.tt-media img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* biased upward so faces/headsets stay in frame when it does crop */
  object-position: center 35%;
  display: block;
  transition: opacity 0.3s ease;
}

.tt-media.is-swapping img {
  opacity: 0;
}

/* fades the artwork into the dark panel so the copy stays readable.
   z-index keeps it above the <img> once a hover/swap transform promotes
   the image into its own layer — without it the fade drops behind. */
.tt-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    #05070c 0%,
    rgba(5, 7, 12, 0.7) 20%,
    rgba(5, 7, 12, 0) 55%
  );
  pointer-events: none;
}

.tt-copy {
  position: relative;
  z-index: 1;
  max-width: 56%;
  padding: 44px 44px 48px;
}

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

.tt-item-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #2d7efa;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.tt-item-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

.tt-item h3 {
  margin: 0 0 14px;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 21px;
  color: #fff;
}

.tt-item p {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.7;
}

.tt-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tt-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
}

.tt-list li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  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;
}

@media (max-width: 1199px) {
  .tt-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tt-copy {
    max-width: 58%;
    padding: 34px 30px 38px;
  }

  .tt-media {
    width: 46%;
  }
}

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

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

  .tt-tab {
    gap: 9px;
    padding: 14px 8px 12px;
    font-size: 13.5px;
  }

  .tt-tab-icon {
    width: 38px;
    height: 38px;
  }

  /* artwork moves above the copy so the text keeps full width */
  .tt-panel {
    min-height: 0;
  }

  /* square box (matching the artwork) rather than a full-width strip, which
       would crop more than half the image away at this width */
  .tt-media {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .tt-media::after {
    background: linear-gradient(180deg, rgba(5, 7, 12, 0) 45%, #05070c 100%);
  }

  .tt-copy {
    max-width: 100%;
    padding: 26px 26px 30px;
  }
}

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

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

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

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

  /* single swipeable row of tiles */
  .tt-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

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

  .tt-tab {
    flex: 0 0 132px;
  }

  .tt-copy {
    padding: 22px 20px 26px;
  }

  .tt-item-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
  }

  .tt-item h3 {
    font-size: 19px;
  }
}

/* ---------------------------------------------------------------------------
   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-grid
   --------------------------------------------------------------------------- */
/* ===== "Solving Complex Challenges Across Every Industry" =====
   Dark navy with a violet glow on the right and a faint blue one bottom-left,
   a grid of industry cards on top. Each card keeps a fixed 4:3 media box. */
.ind-section {
  position: relative;
  padding: 90px 0;
  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;
}

.ind-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 46px;
}

.ind-head h2 {
  margin: 0;
  max-width: 560px;
  font-family: "Gabarito", sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #fff;
}

.ind-head h2 span {
  color: #2f7dff;
}

.ind-head p {
  margin: 10px 0 0;
  max-width: 300px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

.ind-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.ind-card {
  position: relative;
  padding: 10px 10px 4px;
  border: 1px solid rgba(64, 116, 255, 0.55);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(14, 22, 56, 0.85) 0%,
    rgba(9, 14, 38, 0.85) 100%
  );
  box-shadow:
    0 0 0 1px rgba(9, 14, 38, 0.6),
    0 10px 30px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ind-card:hover {
  transform: translateY(-6px);
  border-color: rgba(120, 165, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(9, 14, 38, 0.6),
    0 18px 40px rgba(23, 56, 160, 0.55),
    0 0 28px rgba(47, 125, 255, 0.25);
}

/* artwork drifts in slightly under the cursor */
.ind-card-media img {
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ind-card:hover .ind-card-media img {
  transform: scale(1.07);
}

.ind-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 10, 26, 0) 55%,
    rgba(6, 10, 26, 0.55) 100%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.ind-card:hover .ind-card-media::after {
  opacity: 1;
}

/* media box: holds the real artwork once supplied, placeholder until then */
.ind-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 9px;
  overflow: hidden;
  background: #0b1130;
}

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

.ind-card-media.is-empty {
  border: 1px dashed rgba(120, 160, 255, 0.35);
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 0 10px,
    rgba(255, 255, 255, 0) 10px 20px
  );
}

.ind-card h3 {
  position: relative;
  margin: 0;
  padding: 15px 6px 13px;
  font-family: "Gabarito", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0.1px;
  text-align: center;
  color: #fff;
}

/* short rule that grows out from the centre on hover */
.ind-card h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: #2f7dff;
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ind-card:hover h3::after {
  transform: translateX(-50%) scaleX(1);
}

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

  .ind-grid {
    gap: 18px;
  }
}

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

  .ind-head {
    flex-direction: column;
    gap: 14px;
  }

  .ind-head p {
    max-width: 100%;
  }

  .ind-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

  .ind-head h2 {
    font-size: 26px;
  }

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

  .ind-card h3 {
    font-size: 15px;
    padding: 12px 4px 11px;
  }
}

/* ---------------------------------------------------------------------------
   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]),
.tt-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 tabs ---------- */
.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]),
  .tt-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;
  }
}