/* ==========================================================================
   Singularity Hypertech — INDUSTRIES PAGE
   Figma: Industry (1473:2184) — 1440x8053.
   Brands strip, the stats band, related articles and the closing CTA all come
   from css/shared.css. Page-specific art lives in images/industries/.
   ========================================================================== */

/* the artboard uses a 100px gutter -> 1240 content, same as About and Contact */
.industries-page .container {
  max-width: 1440px;
  padding: 0 100px;
}

/* ==========================================================================
   HERO — .hero-section, 1440x512, photo behind, cover from the top
   ========================================================================== */
.iw-hero {
  position: relative;
  min-height: 512px;
  display: flex;
  align-items: center;
  padding: 180px 0 90px;
  text-align: center;
  background-color: #010214;
  background-image: url("../../images/industries/hero-bg.jpg");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
/* the photo is busy under the nav, so lift the type off it */
.iw-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(3, 2, 18, 0.55) 0%,
    rgba(3, 2, 18, 0.12) 34%,
    rgba(3, 2, 18, 0) 62%
  );
}
.iw-hero .container {
  position: relative;
  z-index: 1;
}
.iw-hero h1 {
  margin: 0;
  font-family: var(--font-tight);
  font-size: 72px; /* site hero size, as on Home and Services */
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.058em;
  /* the same gradient wordmark the About and Contact heroes use */
  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;
}

/* ==========================================================================
   INTRO — .section (top 511, h 534), white, mark on the left, copy on the right
   ========================================================================== */
.iw-intro {
  background: #fff;
  padding: 100px 0;
}
/* Text Content (1473:2664) is 1240 wide: the mark sits in the first 246px and
   the copy runs the remaining 994. */
.iw-intro-grid {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.iw-intro-mark {
  width: 200px;
  height: auto;
  margin-top: 8px;
}
.iw-intro-copy p {
  margin: 0;
  max-width: 994px;
  font-family: var(--font-inter);
  font-size: 31px;
  line-height: 1.26;
  letter-spacing: -0.01em;
  /* the sentence trails off into grey after the opening claim */
  color: #767676;
}
.iw-intro-copy p strong {
  font-weight: inherit;
  color: #03020b;
}

/* ==========================================================================
   OUR INDUSTRY EXPERTISE — .others-vs-ai (bg #010214, padding 100, gap 64)
   ========================================================================== */
.iw-expertise {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  padding: 100px 0;
  /* the same fall-off as the execution-gap band: violet at the top easing into
     the dark navy over the first ~800px, then #010214 */
  background:
    linear-gradient(180deg, #262163 0, #17133f 220px, #09081f 520px, #010214 800px) top / 100% 800px no-repeat,
    #010214;
}
/* the two corner plates (.gap-bg in shared.css) carry the grid + bloom; the
   foot glow below stands in for the indigo haze at the bottom of the frame */
.iw-bloom {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.iw-bloom-c {
  left: 50%;
  bottom: -360px;
  width: 1900px;
  height: 800px;
  margin-left: -950px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(74, 70, 214, 0.55), rgba(74, 70, 214, 0) 70%);
  filter: blur(40px);
}
.iw-expertise .container {
  position: relative;
  z-index: 1;
}
.iw-expertise-title {
  margin: 0 0 64px;
  text-align: center;
  font-family: var(--font-tight);
  font-size: 65px; /* site-wide section heading size (desktop) */
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

.iw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
/* the ninth card runs the full width of the grid */
.iw-card-wide {
  grid-column: 1 / -1;
}

/* ---- card ----
   Figma plain card: near-black navy on the left with indigo gathering on the
   right, and a faint grey rim. The lit (active / hover)
   card swaps to the star-textured plate with the lavender rim baked in. */
.iw-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px;
  border-radius: 32px;
  /* Figma: near-black on the left and foot, indigo gathering along the right
     edge (not a top-to-bottom fade) */
  background: linear-gradient(100deg, #03030f 0%, #050520 48%, #0d0d46 88%, #14145a 100%);
  color: inherit;
  transition: transform 0.45s ease;
}
/* the lit card (hover / keyboard focus only): the exported Figma plate (grain,
   violet-black, blue nebula lower right) fades in over the plain card instead
   of snapping. It is drawn 14px oversize so its own baked corners fall outside
   the card and the card's 32px radius does the clipping; the rim is drawn in
   CSS (::after) so it follows the same radius at every card size. */
.iw-card::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  background: url("../../images/home/gap-card-bg.png?v=2") center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.iw-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: none;
  transition: box-shadow 0.45s ease;
}
.iw-card:hover,
.iw-card:focus-visible {
  transform: translateY(-4px);
}
.iw-card:hover::before,
.iw-card:focus-visible::before {
  opacity: 1;
}
.iw-card:hover::after,
.iw-card:focus-visible::after {
  box-shadow: inset 0 0 0 1.5px #8b7cf6;
}
.iw-card:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.iw-card-img {
  display: block;
  height: 228px;
  border-radius: 20px;
  overflow: hidden;
  background: #0a0a18;
  flex-shrink: 0;
}
.iw-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.iw-card:hover .iw-card-img img {
  transform: scale(1.04);
}
.iw-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.iw-card-body h3 {
  margin: 0;
  font-family: var(--font-inter);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: #fff;
}
.iw-card-body p {
  margin: 0;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 1.5;
  color: #e8e8e8;
}
.iw-card-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 1.5;
  color: #f4f2fe;
}
.iw-card:hover .iw-card-link {
  color: #fff;
}

/* the wide card keeps the same rhythm but a shorter photo band */
.iw-card-wide .iw-card-body {
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .iw-card,
  .iw-card-img img {
    transition: none;
  }
  .iw-card:hover {
    transform: none;
  }
  .iw-card:hover .iw-card-img img {
    transform: none;
  }
}