/* ==========================================================================
   Singularity Hypertech — INDUSTRY DETAIL PAGES
   Figma: BFSI (1452:4442) — 1440x10777.
   Written to serve all nine industry pages, not just BFSI: nothing here is
   BFSI-specific, the page only supplies its own copy and images.
   Brands strip, related articles and the closing CTA come from css/shared.css.
   ========================================================================== */

.industry-page .container {
  max-width: 1440px;
  padding: 0 100px;
}

/* ==========================================================================
   HERO — Hero Section (1452:4443), 1440x617, photo behind, copy left
   ========================================================================== */
.id-hero {
  position: relative;
  min-height: 617px;
  display: flex;
  align-items: center;
  padding: 190px 0 90px;
  background-color: #05040f;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
/* the photo is a working office shot, so it needs a firm scrim to carry
   white display type and keep the nav legible */
.id-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      rgba(5, 4, 15, 0.9) 0%,
      rgba(5, 4, 15, 0.72) 42%,
      rgba(5, 4, 15, 0.55) 100%
    ),
    linear-gradient(180deg, rgba(5, 4, 15, 0.6) 0%, rgba(5, 4, 15, 0.25) 40%, rgba(5, 4, 15, 0.5) 100%);
}
.id-hero .container {
  position: relative;
  z-index: 1;
}
.id-hero h1 {
  margin: 0;
  max-width: 1080px;
  font-family: var(--font-tight);
  font-size: 72px; /* site hero size, as on Home, Services and Industries */
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.045em;
  background: linear-gradient(
    167.27deg,
    #f0e4ff 2.68%,
    #f9f4ff 30.5%,
    rgba(255, 255, 255, 0.4)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.id-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
}
/* the same 60px hero pills as every other hero: 220 primary / 225 frosted */
.id-hero-actions .btn {
  min-height: 60px;
  padding: 0 22px;
  justify-content: center;
}
.id-hero-actions .btn-primary {
  min-width: 220px;
}
.id-hero-actions .btn-glass {
  min-width: 225px;
}

/* ==========================================================================
   INTRO — Section (1452:4831), same band the Industries page uses
   ========================================================================== */
.id-intro {
  background: #fff;
  padding: 100px 0;
}
.id-intro-grid {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  align-items: start;
}
.id-intro-mark {
  width: 200px;
  height: auto;
  margin-top: 8px;
}
.id-intro-copy p {
  margin: 0;
  max-width: 994px;
  font-family: var(--font-inter);
  font-size: 31px;
  line-height: 1.26;
  letter-spacing: -0.01em;
  color: #767676;
}
.id-intro-copy p + p {
  margin-top: 30px;
}
.id-intro-copy p strong {
  font-weight: inherit;
  color: #03020b;
}
.id-intro-copy .btn {
  margin-top: 40px;
  min-width: 229px;
  padding: 14px 30px;
  border-color: var(--brand);
  color: #05011c;
}
.id-intro-copy .btn:hover {
  background: rgba(103, 102, 255, 0.06);
  color: var(--brand);
}

/* ==========================================================================
   CHALLENGES — Our Success Journey (1452:4985), bg #f6f6f6, padding 100,
   list on the left and a three-tile mosaic on the right
   ========================================================================== */
.id-challenges {
  background: #f6f6f6;
  padding: 100px 0;
}
.id-challenges-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 643px;
  gap: 86px;
  align-items: start;
}
.id-challenges h2 {
  margin: 0 0 60px;
  font-family: var(--font-tight);
  font-size: 65px; /* site-wide section heading size (desktop) */
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #03020b;
}
.id-challenge-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.id-challenge {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 18px;
  padding: 32px 0;
  border-bottom: 1px solid #e2e2e8;
}
.id-challenge:first-child {
  padding-top: 0;
}
.id-challenge-tick {
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: 50%;
  color: #2a1a96;
  box-shadow: 0 0 0 2px #dcd9f7;
}
.id-challenge h3 {
  margin: 0;
  font-family: var(--font-inter);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #03020b;
}
.id-challenge p {
  margin: 8px 0 0;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 1.4;
  color: #565c6e;
}

/* ---- the mosaic: one wide photo over a violet card and a second photo ---- */
/* the mosaic pins while the list of challenges scrolls past it — the list is
   much taller than the three tiles, so without this the right column is empty
   for most of the section */
.id-mosaic {
  position: sticky;
  top: 104px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 292px 313px;
  gap: 18px;
}
.id-mosaic-wide {
  grid-column: 1 / -1;
}
.id-mosaic figure,
.id-mosaic-card {
  margin: 0;
  border-radius: 32px;
  overflow: hidden;
}
.id-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.id-mosaic-card {
  display: flex;
  align-items: flex-end;
  padding: 26px;
  /* Figma: bright violet at the top sinking to deep indigo at the foot */
  background: linear-gradient(180deg, #4521c9 0%, #3317a6 45%, #1e0e62 100%);
  color: #fff;
  font-family: var(--font-tight);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   OFFERINGS — Frame 2147256807 (1452:5064), six rows of photo + checklist
   ========================================================================== */
.id-offerings {
  background: #fff;
  padding: 100px 0;
}
.id-offerings-head {
  max-width: 900px;
  margin: 0 auto 80px;
  text-align: center;
}
.id-offerings-head h2 {
  margin: 0;
  font-family: var(--font-tight);
  font-size: 65px; /* site-wide section heading size (desktop) */
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #03020b;
}
.id-offerings-head p {
  margin: 24px auto 0;
  max-width: 746px;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 1.55;
  color: #565c6e;
}

/* --- the stack ------------------------------------------------------------
   Same mechanism as the Services detail pages: every row is a sticky card
   sharing one parent, so each pins as it reaches the top and stays pinned
   while the rest scroll up over it. Later rows sit later in the DOM, so they
   paint over the ones already pinned — that is the overlap.

   Two things make it read cleanly: every card is opaque (otherwise the one
   beneath shows straight through) and every card is the same height, so an
   incoming card covers the one below completely instead of leaving a step. */
.id-offering-rows {
  display: block;
  padding-bottom: 40px;
}

/* the row is inset 60px from the container while its rule spans the full
   width, which is what Figma's full-bleed row inside a 1240 grid amounts to */
.id-offering {
  position: sticky;
  top: 104px;
  display: grid;
  grid-template-columns: minmax(0, 604px) minmax(0, 1fr);
  gap: 87px;
  align-items: center;
  padding: 62px 0 62px 60px;
  border-top: 1px solid #e6e6ec;
  background: #fff;
  /* box-sizing is border-box globally, so this has to carry the 124px of
     vertical padding on top of the artwork's own 431px */
  min-height: 560px;
}
.id-offering:last-child {
  border-bottom: 1px solid #e6e6ec;
}

/* anyone who has asked for less motion gets the plain list */
@media (prefers-reduced-motion: reduce) {
  .id-offering {
    position: static;
    min-height: 0;
  }
  .id-offering-rows {
    padding-bottom: 0;
  }
}
.id-offering-img {
  margin: 0;
  width: 100%;
  aspect-ratio: 604 / 431;
  border-radius: 20px;
  overflow: hidden;
  background: var(--grey-2);
}
.id-offering-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.id-offering h3 {
  margin: 0;
  font-family: var(--font-tight);
  font-size: 37px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #03020b;
}
.id-points {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.id-points li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 1.45;
  color: #05011c;
}
.id-points svg {
  width: 20px;
  height: 20px;
  color: #6b5cf0;
  margin-top: 2px;
}
.id-offering .btn {
  margin-top: 32px;
  min-width: 229px;
  padding: 13px 28px;
  border-color: var(--brand);
  color: #05011c;
}
.id-offering .btn:hover {
  background: rgba(103, 102, 255, 0.06);
  color: var(--brand);
}