/* ==========================================================================
   Singularity Hypertech — shared section styles
   Sections used by more than one page, lifted out of the home stylesheet so
   there is a single copy. Load this BEFORE the page's own stylesheet.
   ========================================================================== */

/* ==========================================================================
   BRANDS MARQUEE
   ========================================================================== */
/* Figma: Client Section (1348:739) — 1440x544, padding 100px 0, gap 64px */
.brands {
  background: #fff;
  padding: 100px 0;
  overflow: hidden;
}
.brands-title {
  max-width: 668px;
  margin: 0 auto 64px;
  text-align: center;
  font-family: var(--font-tight);
  font-size: 45px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 120%;
  color: #03020b;
}
.marquee {
  overflow: hidden;
  position: relative;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  animation: scroll 44s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.brand-chip {
  flex: 0 0 auto;
  width: 164px;
  height: 164px;
  display: grid;
  place-items: center;
  background: #f6f6f6;
  border-radius: 40px;
  padding: 0 27px;
}
.brand-chip img {
  max-width: 110px;
  max-height: 44px;
  width: auto;
  object-fit: contain;
  /* Figma shows the logo wall desaturated; colour is revealed on hover */
  filter: grayscale(1);
  opacity: 0.7;
  transition:
    filter 0.3s ease,
    opacity 0.3s ease;
}
.brand-chip:hover img {
  filter: grayscale(0);
  opacity: 1;
}
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   AI EXECUTION GAP
   ========================================================================== */
/* Figma: Others VS AI (1348:1071) — 1440x845, bg #010214, padding 100px 64px, gap 64.
   The two corner blooms stand in for Figma's "Pricing Plan Card" ellipses, and the
   wide one for its 2024x1397 #6766ff ellipse (blur 828 → rendered as a wash). */
.gap {
  position: relative;
  isolation: isolate;
  padding: 100px 0;
  color: #fff;
  overflow: hidden;
  /* the corner plates supply the bloom, so the base only has to fall off to #010214 */
  background: linear-gradient(
    180deg,
    #262163 0%,
    #17133f 26%,
    #09081f 58%,
    #010214 100%
  );
}
/* the two exported corner plates carry both the grid and the bloom */
.gap-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.gap-bg img {
  position: absolute;
  top: 0;
  display: block;
  max-width: none;
}
.gap-bg-l {
  left: 0;
  width: 700px;
}
.gap-bg-r {
  right: 0;
  width: 660px;
}

/* --- Pricing Plan Title (1000x177) --- */
.gap-head {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  position: relative;
}
.gap-head h2 {
  align-self: stretch;
  font-family: var(--font-tight);
  font-size: 65px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 100%;
  margin: 0;
}
.gap-head p {
  width: 642px; /* Figma 722 @18px -> same line breaks at the site-wide 16px */
  max-width: 100%;
  margin: 0;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 150%;
  color: #e1e2e5;
}

/* --- Pricing Plan Content: two 543x404 cards, 60px apart --- */
.gap-cards {
  display: flex;
  /* cards grow with their list and stay the same height as each other */
  align-items: stretch;
  justify-content: center;
  gap: 60px;
  position: relative;
  text-align: left;
}
.gap-card {
  flex: 0 0 543px;
  width: 543px;
  min-height: 404px;
  border-radius: 24px;
  padding: 32px;
  overflow: hidden;
}
.gap-dark {
  background: #03020b;
  border: 1px solid #595959;
}
.gap-glow {
  position: relative;
  /* Figma card plate, exported whole: warm violet-black with a fine star
     texture, the lavender rim, and the blue nebula in the lower right. The
     rim and rounded corners are baked in, so no CSS border here. */
  background: url("../images/home/gap-card-bg.png?v=2") center / 100% 100% no-repeat;
  border: 0;
}

/* --- drifting smoke behind the highlighted card --------------------------- */
.gap-smoke {
  position: absolute;
  inset: -28%;
  z-index: 0;
  pointer-events: none;
  filter: blur(22px);
  opacity: 0.16; /* Figma plate stays dark; smoke is only a hint */
  display: none; /* the exported plate already carries the texture */
}
.gap-smoke::before,
.gap-smoke::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 46%;
  will-change: transform;
}
.gap-smoke::before {
  background:
    radial-gradient(
      28% 34% at 24% 30%,
      rgba(122, 108, 255, 0.55),
      transparent 70%
    ),
    radial-gradient(
      30% 26% at 72% 62%,
      rgba(96, 150, 255, 0.42),
      transparent 72%
    ),
    radial-gradient(
      22% 30% at 52% 86%,
      rgba(152, 110, 255, 0.38),
      transparent 70%
    );
  animation: gapSmokeA 28s linear infinite;
}
.gap-smoke::after {
  background:
    radial-gradient(
      26% 30% at 70% 24%,
      rgba(88, 190, 255, 0.32),
      transparent 72%
    ),
    radial-gradient(
      32% 28% at 26% 70%,
      rgba(132, 100, 255, 0.36),
      transparent 74%
    );
  animation: gapSmokeB 38s linear infinite;
}
@keyframes gapSmokeA {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.16);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
@keyframes gapSmokeB {
  0% {
    transform: rotate(360deg) scale(1.12);
  }
  50% {
    transform: rotate(180deg) scale(0.94);
  }
  100% {
    transform: rotate(0deg) scale(1.12);
  }
}
/* keep the copy above the smoke and the arc */
.gap-glow .gap-body {
  z-index: 2;
}
.gap-body {
  position: relative;
  isolation: isolate;
  width: 451px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.gap-glow .gap-body {
  width: 422px;
}
.gap-card h3 {
  align-self: stretch;
  font-family: var(--font-inter);
  font-size: 28px;
  font-weight: 500;
  line-height: 130%;
  margin: 0;
}
.gap-included {
  align-self: stretch;
  border-top: 1px solid #595959;
  padding-top: 32px;
}
.gap-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* 24px icon + 10px gap + Figma's fixed 318px text column = 352 */
.gap-list li {
  width: 352px;
  max-width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  color: #fff; /* deepak.css: Review Text inherits #fff in both cards */
}
/* the deliver column wraps to two lines, so its icons pin to the top */
.gap-glow .gap-list li {
  align-items: flex-start;
  /* 24px icon + 10px gap + a 365px text column: the Figma breaks are
     "...trigger actions" on one line, "...built into / every layer" */
  width: 399px;
}
.dot-i,
.check-c {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: block;
  border: 0;
  border-radius: 0;
  background: none;
}
.dot-i svg,
.check-c svg {
  width: 24px;
  height: 24px;
  display: block;
}
.gap-badge {
  position: absolute;
  top: 0;
  right: -50px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 48px;
  /* Figma render: charcoal pill with a bright lavender rim */
  border: 1.5px solid #7d76ee;
  background: linear-gradient(180deg, #37333e 0%, #26232c 100%);
  font-family: var(--font-inter);
  font-size: 14px;
  font-weight: 500;
  line-height: 100%;
  white-space: nowrap;
  z-index: 2;
}
.gap-badge svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

/* ==========================================================================
   RELATED ARTICLES
   ========================================================================== */
/* Latest Insights — featured story + ranked list, on the light theme */
.insights {
  background: #fff;
  padding: 100px 0;
}
.insights-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}
.insights-head h2 {
  margin: 0;
  font-family: var(--font-tight);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #03020b;
}
.insights-all {
  flex: 0 0 auto;
}

.insights-grid {
  display: grid;
  grid-template-columns: 1.42fr 1fr;
  gap: 40px;
  align-items: start;
}

/* ---- featured story ---- */
.insight-feature {
  display: block;
  color: inherit;
}
.insight-feature-img {
  position: relative;
  display: block;
  aspect-ratio: 71 / 40;
  border-radius: 16px;
  overflow: hidden;
  background: var(--grey-2);
}
.insight-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.insight-feature:hover .insight-feature-img img {
  transform: scale(1.035);
}
.insight-tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(3, 2, 11, 0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-family: var(--font-inter);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}
.insight-feature-body {
  position: relative;
  display: block;
  padding: 22px 56px 0 0;
}
.insight-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-inter);
  font-size: 13px;
  color: #767676;
}
.insight-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b9b9c2;
}
.insight-title {
  display: block;
  margin-top: 10px;
  font-family: var(--font-tight);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: #03020b;
  transition: color 0.25s ease;
}
.insight-feature:hover .insight-title {
  color: var(--brand-3);
}
.insight-excerpt {
  display: block;
  margin-top: 12px;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 1.6;
  color: #767676;
}
.insight-arrow {
  position: absolute;
  top: 22px;
  right: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #03020b;
  opacity: 0.45;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    background 0.25s ease;
}
.insight-arrow svg {
  width: 18px;
  height: 18px;
}
.insight-feature:hover .insight-arrow {
  opacity: 1;
  background: var(--grey-2);
  transform: translate(2px, -2px);
}

/* ---- ranked list ---- */
.insight-list {
  display: flex;
  flex-direction: column;
}
.insight-item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--stroke-light);
  color: inherit;
}
.insight-item:first-child {
  padding-top: 0;
}
.insight-item:last-child {
  border-bottom: 0;
}
.insight-thumb {
  flex: 0 0 128px;
  width: 128px;
  aspect-ratio: 3 / 2;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: var(--grey-2);
}
.insight-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.insight-item:hover .insight-thumb img {
  transform: scale(1.06);
}
.insight-item-body {
  display: block;
  min-width: 0;
}
.insight-kicker {
  display: block;
  font-family: var(--font-inter);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #767676;
}
.insight-item-title {
  display: block;
  margin-top: 8px;
  font-family: var(--font-tight);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #03020b;
  transition: color 0.25s ease;
}
.insight-item:hover .insight-item-title {
  color: var(--brand-3);
}

/* ==========================================================================
   GAUGE ORB + FINAL CTA
   Shared: the home hero/CTA orb and the closing call-to-action band, used by
   the home page and the about page.
   ========================================================================== */
.hero .orb {
  transform: scale(1.16);
  transform-origin: 100% 100%;
} /* a bit larger, anchored bottom-right */
.orb {
  position: relative;
  width: min(520px, 92vw);
  height: 400px;
  max-width: 100%;
  perspective: 700px; /* depth for the pill flip */
}
/* everything anchored to the ring centre at (50%, 70%) */
.orb-clip,
.orb-rings,
.orb-glow,
.orb-sweep,
.orb-arc,
.orb-shelf,
.orb-pill,
.orb-pin {
  position: absolute;
}

/* clips everything above the shelf line so rings/glow/dots never bleed below it */
.orb-clip {
  inset: 0;
  z-index: 1;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 68.5%,
    transparent 70.5%
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(180deg, #000 0%, #000 68.5%, transparent 70.5%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

/* faint concentric radar rings */
.orb-rings {
  left: 50%;
  top: 70%;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    rgba(180, 170, 255, 0.045) 0 1px,
    transparent 1px 58px
  );
  -webkit-mask-image: radial-gradient(circle, #000 38%, transparent 64%);
  mask-image: radial-gradient(circle, #000 38%, transparent 64%);
}

/* central flare */
.orb-glow {
  left: 50%;
  top: 66%;
  width: 380px;
  height: 380px;
  margin: -190px 0 0 -190px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(123, 88, 255, 0.5) 0%,
    rgba(95, 61, 230, 0.18) 46%,
    transparent 70%
  );
  filter: blur(6px);
  animation: breathe 5s ease-in-out infinite;
}

/* rotating radar sweep wedge */
.orb-sweep {
  left: 50%;
  top: 70%;
  width: 470px;
  height: 470px;
  margin: -235px 0 0 -235px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(170, 130, 255, 0) 0deg,
    rgba(170, 130, 255, 0.26) 24deg,
    rgba(150, 110, 255, 0) 56deg,
    rgba(170, 130, 255, 0) 360deg
  );
  -webkit-mask-image: radial-gradient(
    circle,
    transparent 15%,
    #000 21%,
    #000 50%,
    transparent 54%
  );
  mask-image: radial-gradient(
    circle,
    transparent 15%,
    #000 21%,
    #000 50%,
    transparent 54%
  );
  mix-blend-mode: screen;
  animation: spinCCW 18s linear infinite; /* radar sweep, measured ~19.8 deg/s CCW */
}

/* rotating dot rings; lower half masked behind the shelf.
   Dots flow through a gradient that stays FIXED by screen position
   (cyan left -> violet top -> teal/green right) — driven per-frame in JS. */
.orb-arc {
  inset: 0;
}
/* two counter-rotating dot fields (measured ~14.8 deg/s -> 24s each) */
.orb-field {
  position: absolute;
  left: 50%;
  top: 70%;
  width: 0;
  height: 0;
}
.orb-field-a {
  animation: spinCW 24s linear infinite;
} /* outer ring, cyan <-> purple */
.orb-field-b {
  animation: spinCCW 24s linear infinite;
} /* inner spiral, green <-> purple */
.orb-dot {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--a))
    translateY(calc(-1 * var(--r)));
  background: var(--c);
  box-shadow: 0 0 var(--g) var(--c);
  animation: twinkle var(--tw) ease-in-out infinite;
  animation-delay: var(--td);
}

/* dark notch shelf the pin docks into (covers the lower half of the rings) */
.orb-shelf {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 2;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}
.orb-shelf-fill {
  fill: #06050e;
}
.orb-shelf-rim {
  stroke: url(#shelfEdge);
  stroke-width: 1.4;
  opacity: 0.7;
}
.orb-cta .orb-shelf-fill {
  fill: #030209;
}

.orb-pill {
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px;
  padding: 8px 18px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.5);
  transform-style: preserve-3d;
  transition:
    transform 0.34s ease,
    opacity 0.34s ease;
}
.orb-pill.flip {
  transform: translate(-50%, -50%) rotateX(90deg);
  opacity: 0.15;
}
.orb-pin {
  left: 50%;
  top: 70%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 4;
  background: radial-gradient(circle at 32% 28%, #9a7bff, #4a29c7 70%);
  box-shadow:
    0 0 0 7px rgba(15, 10, 34, 0.96),
    0 0 44px -2px rgba(123, 88, 255, 0.95);
  animation: floaty 5s ease-in-out infinite;
}
.orb-pin img {
  width: 42px;
  height: 42px;
  position: relative;
  z-index: 1;
  filter: brightness(0) invert(1);
}
.cta .orb-cta {
  margin-bottom: 10px;
}

@keyframes spinCW {
  to {
    transform: rotate(360deg);
  }
}
@keyframes spinCCW {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@keyframes breathe {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}
@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.cta {
  background: var(--dark);
  color: #fff;
  padding: 40px 0 110px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta h2 {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.cta p {
  max-width: 560px;
  margin: 20px auto 34px;
  color: var(--para-light);
  font-size: 16px;
}
.cta-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}


/* ==========================================================================
   SCROLL INK — text that fills in as the block travels up the viewport
   Put data-scroll-ink on any copy block. js/main.js splits it into single
   letters and lights them in reading order as you scroll down, unlighting
   them as you scroll back up, because the state is derived from scroll
   position rather than a one-shot trigger.

   Two colours only: a letter the scroll has reached is full ink, a letter it
   has not reached yet sits in the muted second colour. The letter spans set
   their own colour, so this overrides whatever the paragraph or its <strong>
   would have used and every letter ends up at the same full-strength ink.
   ========================================================================== */
/* each word stays one unbreakable unit so per-letter spans can never let a
   line break land in the middle of a word */
[data-scroll-ink] .ink-w {
  white-space: nowrap;
}
[data-scroll-ink] .ink-c {
  color: #8d90a5;
  transition: color 0.22s ease;
}
[data-scroll-ink] .ink-c.is-lit {
  color: var(--title-dark);
}
/* on a dark section the pair flips: white ink, a dim second colour */
[data-nav="dark"] [data-scroll-ink] .ink-c {
  color: #5a5d72;
}
[data-nav="dark"] [data-scroll-ink] .ink-c.is-lit {
  color: #fff;
}
/* before the script runs, and for anyone who has asked for less motion,
   the copy simply reads as designed */
[data-scroll-ink]:not(.ink-ready) .ink-c,
[data-scroll-ink].ink-static .ink-c {
  color: inherit;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-scroll-ink] .ink-c,
  [data-scroll-ink] .ink-c.is-lit {
    color: inherit;
    transition: none;
  }
}

/* ==========================================================================
   WHY CHOOSE (STATS)
   ========================================================================== */
/* Figma: Section (1348:1561) — 1440x1154, bg #f6f6f6,
   padding 100 top / 100 left / 80 right, content 1260 wide. */
.why {
  background: #f6f6f6;
  color: #03020b;
  /* No fixed height: the service pages run one short row where home runs two
     full ones, and a Figma-derived min-height left dead space below them. */
  padding: 100px 0;
}
.why-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px 0 100px;
}

/* --- heading group (896 wide, 390 tall) --- */
.why-head {
  max-width: 896px;
  margin-bottom: 60px; /* 30px container padding + 30px gap to the rows */
}
.why-head h2 {
  margin: 0;
  font-family: var(--font-tight);
  font-size: 40px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.025em;
  color: #03020b;
}
.why-head .dim2 {
  color: #888;
}
.why-head p {
  width: 672px;
  max-width: 100%;
  margin-top: 30px;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 120%;
  color: #767676;
}

/* desktop-only line breaks in the heading / lede */
@media (max-width: 1080px) {
  .why-head .br-desk {
    display: none;
  }
}
/* ==========================================================================
   WHY CHOOSE — display type on desktop: 65px heading (site-wide), 20px lede
   (tablet and phone sizes come from typography.css)
   ========================================================================== */
/* Figma: three lines — "Why Choose Singularity / Hypertech. Built for /
   enterprise intelligence." inside the 896px heading column */
.why .why-head {
  max-width: 896px;
}
@media (min-width: 1081px) {
  .why .why-head h2 {
    font-size: 65px; /* site-wide section heading size (desktop) */
    line-height: 1.1;
  }
  .why .why-head p {
    max-width: 780px;
    font-size: 20px;
    line-height: 1.3;
  }
}
@media (max-width: 1080px) {
  .why .why-head h2 {
    font-size: 35px;
  }
}
@media (max-width: 560px) {
  .why .why-head h2 {
    font-size: 30px;
  }
}

.why-head p strong {
  font-weight: 500;
  color: #565656;
}

/* --- two rows of three, each with its own top rule --- */
.why-rows {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.why-row {
  /* a fixed three-column track, not flex: a row holding only two cells keeps the
     same column width as a row of three and fills columns 1 and 2, instead of the
     two stretching to half the width each */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(34, 34, 34, 0.3);
}
.why-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.why-num {
  align-self: stretch;
  font-family: var(--font-tight);
  font-size: 72px; /* Figma ~72-75px numerals */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  /* Figma fills the numerals with a radial gradient clipped to the glyphs */
  background: radial-gradient(54.35% 54.35% at 50% 50%, #6646eb, #351a95);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 0;
}
.why-cell-text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.why-cell h3 {
  margin: 13px 0 0;
  font-family: var(--font-inter);
  font-size: 20px; /* Figma ~20px */
  font-weight: 500;
  line-height: 26px;
  color: #03020b;
}
.why-cell p {
  margin: 7px 0 0;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 1.6;
  color: #767676;
}

/* ==========================================================================
   FINAL CTA — Figma "Build Intelligence that Scales" (1440x836, bg #010214).
   Reuses the hero gauge art: logo centred at (50%, 350), full-width shelf
   at y=297 with a deep notch, 716px faint outline circle behind.
   ========================================================================== */
.cta.cta-figma {
  background: #010214;
  padding: 450px 0 120px;
  isolation: isolate;
}
.cta-stage {
  position: absolute;
  inset: 0 0 auto;
  height: 450px;
  pointer-events: none;
  z-index: 0;
}
.cta-ring {
  position: absolute;
  top: -24px;
  left: 50%;
  width: 716px;
  height: 716px;
  margin-left: -358px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 75%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 75%);
}
/* Figma "Group 1707481275" (603x603): flare, two counter-rotating dot rings,
   twin light discs, cyan glow. Its x=300 sits on the page centre and its
   top on y=19, which puts the logo (y 329.5) in the shelf notch at y~349. */
.cta-gauge {
  position: absolute;
  top: 19px;
  left: calc(50% - 300px);
  width: 603px;
  height: 603px;
  z-index: 1;
}
.cta-gauge > * {
  position: absolute;
  max-width: none;
}
.cg-back {
  inset: 0;
  width: 100%;
  height: 100%;
}
/* logo: 67px at (268,296) in the art. It is a sibling of the shelf (not
   inside the gauge) so it can sit above the shelf plate, in the notch. */
.cg-logo {
  position: absolute;
  left: calc(50% - 300px + 268px);
  top: calc(19px + 296px);
  width: 67px;
  height: 67px;
  max-width: none;
  z-index: 3;
}
/* pill: Figma 108x27 at (247.6,247.6) -> centre (301.7, 261) */
.cta-gauge .orb-pill {
  left: 301.7px;
  top: 261px;
  z-index: 3;
  font-family: var(--font-tight);
  font-size: 10.7px;
  line-height: 1.5;
  padding: 5.4px 10.8px;
  background: rgba(255, 255, 255, 0.1);
  border: 0.67px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: none;
}
.cta-shelf {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3000px;
  height: 836px;
  margin-left: -1500px;
  max-width: none;
  z-index: 2;
}

.cta-figma .cta-inner {
  position: relative;
  z-index: 3;
}
/* Figma: Inter Tight 500, -2.8px tracking, white fading to 20% at the foot */
.cta-figma h2 {
  font-family: var(--font-tight);
  font-size: 65px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), #fff 50.65%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.cta-figma p {
  max-width: 660px;
  margin: 30px auto 40px;
  color: #c4c8df;
  line-height: 1.5;
}
.cta-figma .cta-actions {
  gap: 20px;
}
.cta-figma .cta-actions .btn {
  min-height: 60px;
  padding: 0 18px;
  justify-content: center;
}
.cta-figma .cta-actions .btn-primary { min-width: 220px; }
.cta-figma .cta-actions .btn-glass { min-width: 225px; }

/* CTA gauge scales down as one piece on narrow screens */
@media (max-width: 860px) {
  .cta.cta-figma { padding-top: 330px; }
  .cta-stage { transform: scale(0.72); transform-origin: 50% 0; }
  .cta-figma h2 { font-size: 35px; }
}
@media (max-width: 560px) {
  .cta.cta-figma { padding: 270px 0 80px; }
  .cta-stage { transform: scale(0.58); }
  .cta-figma h2 { font-size: 30px; }
  .cta-figma .cta-actions .btn { flex: 1 1 100%; }
}

/* Latest insights heading — 65px on desktop on every page (tablet/phone
   sizes come from typography.css) */
@media (min-width: 1081px) {
  .insights .insights-head h2 {
    font-size: 65px;
  }
}