/* ==========================================================================
   Singularity Hypertech — HOME PAGE sections (hero → CTA, scroll reveal)
   ========================================================================== */
/* ==========================================================================
   HERO
   ========================================================================== */
/* Figma "Home" hero frame — 1440x676, bg #010214. Copy block starts at
   y=186; 186 + copy (404) + 86 = 676. */
.hero {
  position: relative;
  background: #010214;
  color: #fff;
  padding: 186px 0 86px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: #010214;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
}
/* Figma: heading block and buttons 60px apart; heading -> paragraph 20px */
.hero-copy {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Figma: Inter Tight 500 / 72px / normal line-height / -4.17px tracking,
   one gradient across both lines (167.27deg #F0E4FF -> #F9F4FF -> white 40%). */
.hero-title {
  font-family: var(--font-tight);
  font-size: 72px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.0579em;      /* -4.17px at 72px */
  background-image: linear-gradient(
    167.27deg,
    #f0e4ff 2.68%,
    #f9f4ff 30.5%,
    rgba(255, 255, 255, 0.4) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-title span {
  display: block;
  white-space: nowrap;
} /* keep each line unbroken -> 2 lines */
.hero-title .dim {
  color: inherit;
}
/* Inter 400 / 150%, #8D90A5; last line 600 #C4C8DF (size set in typography.css) */
.hero-sub {
  margin: 20px 0 60px;
  max-width: 700px; /* first sentence breaks by hand after "ecosystem" (br.br-desk) */
  font-family: var(--font-inter);
  font-size: 20px;
  line-height: 1.5;
  color: #8d90a5;
}
.hero-sub strong {
  color: #c4c8df;
  font-weight: 600;
}
.hero-actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
/* Figma: 220x60 and 225x60 pills, label centred */
.hero-actions .btn {
  min-height: 60px;
  padding: 0 18px;
  border-radius: 88px;
  justify-content: center;
}
.hero-actions .btn-primary {
  min-width: 220px;
}
.hero-actions .btn-glass {
  min-width: 225px;
}

/* ---------- Animated Orb — Anius-style rotating dot gauge ---------- */
.hero-copy {
  min-width: 0;
}
/* ---------- Full-screen hero (desktop) ----------
   The Figma composition is a fixed 676px block (copy at y186, gauge art
   0-675, shelf at y477). On desktop the section fills the viewport and that
   block is centred in it: --hs is the extra room above (and below) the block.
   The shelf plate continues to the section foot so no seam shows. */
@media (min-width: 1081px) {
  .hero {
    --hs: max(0px, calc((100vh - 676px) / 2));
    --hs: max(0px, calc((100svh - 676px) / 2));
    /* gauge top: bottom-anchored (2 x --hs), but never so high that the
       shelf edge (art y 477) meets the buttons (copy ends at y 590): it keeps
       at least 40px below them. On short screens (< ~1000px tall) that pushes
       the art down, so the hero grows to keep the whole gauge in view. */
    --gt: max(calc(var(--hs) * 2), calc(var(--hs) + 153px));
    min-height: 100vh;
    min-height: max(100svh, calc(var(--gt) + 676px));
    padding-top: calc(186px + var(--hs));
    padding-bottom: calc(86px + var(--hs));
    box-sizing: border-box;
  }
  /* the gauge + shelf sit on the section foot (copy stays centred above) */
  .hero .hero-gauge {
    top: var(--gt);
  }
  /* shelf plate below the art: same colour as the shelf's foot (#05061a)
     and the same left-edge fade as hero-shelf.svg */
  .hero-visual::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--gt) + 674px);
    bottom: 0;
    background: #05061a;
    -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - 578px), #000 calc(50% + 142px));
    mask-image: linear-gradient(90deg, transparent calc(50% - 578px), #000 calc(50% + 142px));
    pointer-events: none;
  }
}

/* ---------- Hero gauge — Figma "Group 1707481269" (998x675) ----------
   Art sits right of centre exactly as in the 1440 frame (x = 50% - 278px).
   Layers: outline circles -> glows + rings (SVG, rings counter-rotate inside the file) ->
   sweep -> notch shelf -> logo -> cycling pill.
   Everything inside is in % of the art box so it scales as one piece. */
.hero-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-gauge {
  position: absolute;
  top: 0;
  left: calc(50% - 278px);
  width: 998px;
  aspect-ratio: 998 / 675;
}
.hero-gauge > * {
  position: absolute;
  max-width: none;
}
/* Figma "Vector": 720px pair of concentric outlines at 10%, centred on the
   rings at (735, 438) -> left 37.58%, top 11.56%, width 72.14% of the art */
.hg-circles {
  left: 37.58%;
  top: 11.56%;
  width: 72.14%;
  height: auto;
  opacity: 0.1;
}
/* back art is 1500 wide (same origin as the 998 art) so the big blurred
   glows fade out on their own instead of being cut at x=998 on wide screens */
.hg-back {
  left: 0;
  top: -59.26%;    /* 400 of extra canvas above the 675 art */
  width: 150.3%;
  height: 207.41%; /* 1400 / 675: canvas runs 400 above and 325 below the art */
}
/* radar sweep: confined to the inner disc (Figma circle r153.5 at
   734.5,472.9 -> 30.77% wide, centre 73.59% / 70.06%) and turning clockwise,
   left -> right over the top; trailing glow, bright magenta leading edge */
.hg-sweep {
  left: 73.59%;
  top: 70.06%;
  width: 30.77%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    rgba(170, 110, 255, 0) 0deg,
    rgba(190, 110, 255, 0.08) 20deg,
    rgba(205, 110, 255, 0.3) 52deg,
    rgba(214, 90, 255, 0.85) 53.5deg,
    rgba(214, 90, 255, 0) 55deg,
    rgba(170, 110, 255, 0) 360deg
  );
  -webkit-mask-image: radial-gradient(circle closest-side, #000 96%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 96%, transparent 100%);
  mix-blend-mode: screen;
  animation: hgSweep 18s linear infinite;
}
@keyframes hgSweep {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* 3000-wide shelf art, notch aligned to the logo: starts 1000 units left */
.hg-shelf {
  left: -100.2%;
  top: 0;
  width: 300.6%;
  height: 100%;
}
.hg-logo {
  left: 69.44%;
  top: 62.52%;
  width: 9.72%;
  height: auto;
  filter: drop-shadow(0 0 24px rgba(123, 88, 255, 0.55));
}
/* Figma pill: rect (673.4, 369) 135.9x33.5 -> centre 74.29% / 57.14% */
.hero-gauge .orb-pill {
  left: 74.29%;
  top: 57.14%;
  font-family: var(--font-tight);
  font-size: 13.46px;
  line-height: 1.5;
  padding: 6.7px 13.5px;
  background: rgba(255, 255, 255, 0.1);
  border: 0.84px solid rgba(255, 255, 255, 0.1);
  border-radius: 37px;
  box-shadow: none;
}

/* ==========================================================================
   STATS BENTO
   ========================================================================== */
/* Figma: About Section (1348:819) — 1440x1044, content 1312x844, padding 100px 64px */
.proof {
  background: #f6f6f6;
  padding: 100px 0;
}

/* --- Text Content (1312x236) --- */
.proof .section-head {
  width: 746px;
  max-width: 746px;
  margin: 0 auto 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.proof .section-head h2 {
  align-self: stretch;
  font-family: var(--font-tight);
  font-size: 65px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.02em;
  text-transform: none;
  color: #03020b;
}
.proof .section-head p {
  width: 548px;
  max-width: 548px;
  margin-top: 0;
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #767676;
}

/* --- Bento Cards (1312x544): 12px frame, 12px gutters --- */
.bento {
  width: 100%;
  min-height: 544px;
  background: #fff;
  border-radius: 32px;
  padding: 12px;
  display: grid;
  /* Figma columns 400 / 478 / 386 within 1264px of track — kept as ratios so the
     grid stays on-spec at 1440 and scales down cleanly below it */
  grid-template-columns: 400fr 478fr 386fr;
  grid-template-rows: minmax(118px, auto) minmax(280px, auto) minmax(98px, auto);
  gap: 12px;
}
.bento-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  padding: 24px;
}
/* full-bleed texture / pattern layers behind card copy */
.bento-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.bento-layer-tex {
  mix-blend-mode: overlay;
  z-index: 1;
}
.bento-layer-pattern {
  z-index: 2;
}
.bento-body {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.bento-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bento-num {
  font-family: var(--font-tight);
  font-size: 65px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.02em;
  color: #03020b;
}
.bento-card h3 {
  font-family: var(--font-inter);
  font-size: 26px;
  font-weight: 500;
  line-height: 160%;
  color: #03020b;
}
.bento-card p {
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #767676;
}

/* 30+ — Project Delivered Card (400x520) */
.bento-a {
  grid-column: 1;
  grid-row: 1 / span 3;
  background: linear-gradient(147.16deg, #fff, #ffeffa);
}
.bento-a::before {
  /* Figma: #ff91df 199px blob at (169,197), Figma blur 280. CSS blur at that
     radius dissolves a 199px dot to nothing, so the cloud is painted as
     gradients instead, centred on the blob (268, 297). */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 230px 260px at 268px 300px, rgba(255, 145, 223, 0.55), rgba(255, 145, 223, 0.22) 55%, transparent 100%),
    radial-gradient(ellipse 420px 460px at 268px 300px, rgba(255, 145, 223, 0.22), transparent 75%);
}

/* Enterprise-grade delivery — Integration (478x118) */
.bento-b {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 24px;
  border: 1px solid #e1e2e5;
}
.bento-b .bento-foot {
  gap: 4px;
}
.bento-b p {
  font-size: 16px;
}

/* 40+ — Client Satisfaction Card (478x280) */
.bento-c {
  grid-column: 2;
  grid-row: 2;
  background: #f9fbfe;
}
.bento-c::before {
  /* Figma: #4cc0fd blob (60%) off the top-right corner -> sky-blue glow */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 260px 210px at 100% 0%, rgba(76, 192, 253, 0.5), rgba(76, 192, 253, 0.18) 55%, transparent 100%),
    radial-gradient(ellipse 480px 320px at 100% 0%, rgba(76, 192, 253, 0.14), transparent 80%);
}

/* 120+ — Client Growth Card (386x410) */
.bento-d {
  grid-column: 3;
  grid-row: 1 / span 2;
  background:
    linear-gradient(216.51deg, #e9efff, #fff) padding-box,
    linear-gradient(220.73deg, rgba(255, 255, 255, 0), #f2f2f5) border-box;
  border: 1px solid transparent;
}
.bento-d::before {
  /* Figma: #8cb6ff blob at the top-right -> periwinkle glow down the right */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 230px 300px at 92% 22%, rgba(140, 182, 255, 0.6), rgba(140, 182, 255, 0.22) 55%, transparent 100%),
    radial-gradient(ellipse 420px 460px at 92% 22%, rgba(140, 182, 255, 0.2), transparent 80%);
}

/* 8+ countries served — Country Served (876x98) */
.bento-e {
  grid-column: 2 / span 2;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 24px;
  border: 1px solid #e1e2e5;
}
.bento-e .bento-foot {
  gap: 0;
}
.bento-e p {
  font-size: 16px;
}
.flags {
  flex-shrink: 0;
  height: 37px;
  display: flex;
  align-items: center;
  padding: 1.7px;
  border: 0.2px solid #e1e2e5;
  border-radius: 13.76px;
  background: #fffbf4;
}
.flags img {
  height: 35px;
  width: auto;
  object-fit: contain;
}

/* ==========================================================================
   CHALLENGE
   ========================================================================== */
/* Figma: section bg #15132b, Inter Tight headings, Inter body, vertical divider between columns */
/* Figma: clean dashboard wireframe - dark (1348:912) — 1440x785, bg #15132b.
   Column split at x=703 (hairline), left copy at x=100 w=532, right rail at x=748 w=648. */
.challenge {
  background: #15132b;
  color: #fff;
  padding: 0;
  height: 785px;
  position: relative;
  overflow: hidden;
}
/* faint logo watermark — Figma places it at 22,593 at 306x305 */
.challenge::before {
  content: "";
  position: absolute;
  left: 0;
  top: 574px;
  width: 302px;
  height: 302px;
  background: url(../../images/logo-icon.svg) no-repeat center / contain;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}
.challenge-grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
  height: 100%;
  display: grid;
  grid-template-columns: 703fr 737fr;
  gap: 0;
  position: relative;
  z-index: 1;
  align-items: start;
}
.challenge-left {
  padding: 121px 71px 0 100px;
}
/* right rail: Figma composes it absolutely, and the 656px panel deliberately
   overflows the 648px rail, so mirror that instead of relying on centring */
.challenge-right {
  position: relative;
  height: 100%;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0;
}
.challenge h2 {
  font-family: var(--font-tight);
  font-size: 48px;
  font-weight: 400; /* left heading = 400 */
  letter-spacing: 0;
  line-height: 1.208; /* 58/48 */
  color: #f5f5f5;
  margin-bottom: 30px;
}
.challenge-left h2 {
  width: 532px;
  max-width: 100%;
}
.challenge-right h2 {
  position: absolute;
  left: 93px; /* 796 - 703 */
  top: 121px;
  width: 552px;
  max-width: 100%;
  margin-bottom: 0;
  font-weight: 500; /* right heading = 500 */
}
.challenge-left p {
  font-family: var(--font-inter);
  color: #c4c8df;
  margin-bottom: 27px; /* Figma renders the break as one blank 27px line */
  width: 442px; /* Figma 497 @18px -> same breaks at the site-wide 16px */
  max-width: 100%;
  font-size: 16px;
  line-height: 1.5; /* 150% = 27px */
}
.challenge-left p:last-of-type {
  margin-bottom: 0;
}
.quote-card {
  margin-top: 40px;
  width: 532px;
  max-width: 100%;
  height: 115px;
  display: grid;
  place-items: center;
  background: linear-gradient(150.49deg, #282450 0%, #010214 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 0 57px;
  font-family: var(--font-tight);
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  color: #f5f5f5;
  text-align: left;
}
/* OUTER panel — 656x593, overflows the 648 rail by 4px each side and is
   clipped by the section's 785px height, exactly as in Figma */
.system-card {
  position: absolute;
  left: 41px; /* 744 - 703 */
  top: 262px;
  width: 656px;
  max-width: none;
  height: 593px;
  border-radius: 32px;
  background: linear-gradient(170deg, #1e1b43 0%, #252040 55%, #272440 100%); /* sampled from Figma */
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  padding: 0;
}
/* INNER panel that holds the pills — 482 wide, inset 88 from the left, 42 from the top */
.system-list {
  position: absolute;
  left: 88px;
  top: 42px;
  width: 482px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 42px;
  background: linear-gradient(180deg, #474066 0%, #3a3657 50%, #312e49 100%); /* sampled */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  padding: 26px 0 0;
  overflow: hidden;
}
/* Figma tightens only the first gap: 35.5px, the rest are 42px */
.system-list li:first-child {
  margin-bottom: -6.5px;
}
.system-list li:first-child::after {
  bottom: -17.75px;
}
.system-list li {
  position: relative;
  width: 370px;
  max-width: calc(100% - 24px);
  margin-left: 50px; /* card + list borders account for the other 2px */
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma "flow-items" as Figma renders it (its 150.49deg is defined on a unit
     square, then stretched over the 370x48 pill): flat #5a488b along the top,
     sinking to #41316b bottom-left and near-black #050423 bottom-right.
     Colours sampled from the Figma export. */
  background:
    radial-gradient(75% 150% at 100% 100%, rgba(3, 3, 30, 0.95) 0%, rgba(3, 3, 30, 0.55) 40%, rgba(3, 3, 30, 0) 80%),
    linear-gradient(180deg, #5a488b 0%, #57468a 35%, #41316b 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  padding: 0 44px;
}
/* faint connector line centred in each 42px gap */
.system-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -21px;
  width: 388px;
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
}
.system-list .check {
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  display: grid;
  place-items: center;
  color: #fff;
}
.system-list .check svg {
  width: 11px;
  height: 11px;
  display: block;
}
.system-list .check svg path {
  stroke-width: 3.4; /* Figma's tick is ~1.6px thick at 11px */
}

/* ==========================================================================
   WHAT WE DO
   ========================================================================== */
.whatwedo {
  background: #fff;
  padding: 100px 0 0; /* Figma section padding; the heading scrolls with the page */
}
/* The section pins to the viewport while page-scroll drives the card list,
   then releases. Track height = one viewport + the list's scroll range,
   both set by main.js so the motion is exactly 1:1 with the wheel. */
.wwd-track {
  position: relative;
}
.wwd-pin {
  position: sticky;
  /* main.js sets top to just under the fixed header, and min-height to the
     chips + card window, so the pin never runs past the viewport */
  top: 112px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
}
/* this section uses Figma's 100px gutters (1240 content), not the 64px default */
.whatwedo .container {
  max-width: 1440px;
  padding: 0 100px;
}
.whatwedo .section-head {
  width: 746px;
  max-width: 746px;
  margin: 0 auto 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.whatwedo .section-head h2 {
  align-self: stretch;
  font-size: 65px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
  line-height: 100%;
  color: #03020b;
}
.whatwedo .section-head p {
  width: 440px; /* Figma 548 @20px -> same two-line break at the site-wide 16px */
  max-width: 100%;
  margin-top: 0;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 150%;
  color: #767676;
}

/* ---- filter chips (Figma 1629:3295) — ONE row, 50px tall, 22px gaps.
   Seven pillars don't fit the width, so the row is a sideways slider:
   swipe / shift-wheel / trackpad scrolls it, and main.js glides the active
   chip into view as the cards change. Edges fade so cut-off chips read as
   "more this way". */
.wwd-tabs {
  position: relative; /* offsetLeft of the chips is measured from here */
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  justify-content: flex-start;
  margin: 0 auto 60px;
  padding: 2px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  /* main.js sets --fade-l / --fade-r to 48px only on a side that has more
     chips beyond it, so the first chip is never dimmed at rest */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
}
/* centre the row when it happens to fit, without breaking the scroll start */
.wwd-tab:first-child {
  margin-left: auto;
}
.wwd-tab:last-child {
  margin-right: auto;
}
.wwd-tabs::-webkit-scrollbar {
  display: none;
}
.wwd-tab {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 11px 30px;
  border-radius: 12px;
  font-family: "Poppins", var(--font-inter); /* Figma chips are Poppins */
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  color: rgba(0, 5, 18, 0.6);
  white-space: nowrap;
  cursor: pointer;
  /* Figma paints the resting chip as a gradient hairline over white:
     layer 1 fills the padding box, layer 2 shows only through the border */
  border: 1px solid transparent;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(151.12deg, rgba(56, 51, 109, 0.2), rgba(5, 8, 59, 0.2));
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-repeat: no-repeat;
  box-shadow: none;
  transition:
    color 0.25s ease,
    box-shadow 0.25s ease;
}
/* Figma pins each chip to a fixed width */
/* chips size to their label now that the list can grow to seven pillars */
.wwd-tab {
  width: auto;
}
.wwd-tab:hover {
  color: #03020b;
}
.wwd-tab.is-active {
  border-color: transparent;
  background-image:
    radial-gradient(54.35% 54.35% at 50% 50%, #6646eb 0%, #351a95 100%),
    radial-gradient(54.35% 54.35% at 50% 50%, #6646eb 0%, #351a95 100%);
  color: #eaf9fc;
  font-weight: 600;
  box-shadow: none; /* Figma active chip has no glow */
}

/* ---- rows: 580px preview + 620px copy, 80px apart ---- */
/* The list is a fixed viewport, not a long stack: one full 344px card, the 80px
   gap, then 134px of the next peeking under a bottom fade. 100 + 326 + 558 + 100
   = 1084, which is exactly the height of the Figma frame. */
.wwd-list {
  display: flex;
  flex-direction: column;
  gap: 80px; /* Figma: rows 80px apart */
  /* flex children default to min-height:auto, which would stop this collapsing
     when main.js measures the pin's chrome */
  min-height: 0;
  /* window = one full card + the gap + the top of the next card; main.js sets
     the exact height from the viewport */
  max-height: calc(var(--wwd-card, 344px) * 2 + 80px);
  /* The cards are moved with a transform, not scrollTop, so this box is never a
     scroll target (an overflow:hidden scroller would swallow the wheel). */
  overflow: hidden;
}
/* the next section slides over the empty peek area once the last card lands */
.whatwedo + section {
  position: relative;
  z-index: 2;
}
/* Figma: the second card peeks in under the first and fades to white */
.wwd-list.has-fade {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--wwd-card, 344px) + 40px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--wwd-card, 344px) + 40px), transparent 100%);
}
.wwd-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--wwd-card, 344px);
  flex: 0 0 var(--wwd-card, 344px);
  transform: translate3d(0, calc(-1 * var(--wwd-offset, 0px)), 0);
  will-change: transform;
}
.wwd-img {
  flex: 0 1 580px; /* exact 580 at 1440, shrinks in step below */
  width: 580px;
  height: var(--wwd-card, 344px);
  border-radius: 22.1px;
  overflow: hidden;
}
/* Figma rounds rows 2 and 4 a little harder than rows 1 and 3 */
.wwd-row:nth-child(2) .wwd-img,
.wwd-row:nth-child(4) .wwd-img {
  border-radius: 32px;
}
.wwd-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition:
    opacity 0.5s ease,
    filter 0.5s ease;
}
.wwd-text {
  flex: 0 1 620px;
  width: 620px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
}
.wwd-text h3 {
  align-self: stretch;
  font-size: 48px;
  font-weight: 500;
  line-height: 57.6px;
  letter-spacing: -0.96px;
  margin: 0;
  color: #03020b;
  transition: color 0.5s ease;
}
.wwd-text p {
  align-self: stretch;
  margin: 0;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 150%;
  color: #767676;
  transition: color 0.5s ease;
}
.link-more {
  display: inline-block;
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  background: linear-gradient(180deg, #3f20be, #190c4d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity 0.25s ease;
}
.link-more:hover {
  opacity: 0.75;
}

/* ==========================================================================
   CHOOSE (PARTNER TABS)
   ========================================================================== */
/* Figma: Section (1348:1143) — 1440x4729, bg #010214, 1px #222 top rule,
   padding 100, gap 80. Left rail 360 (sticky), right column 800. */
.choose {
  background: #010214;
  border-top: 1px solid #222;
  color: #f5f5f5;
}
.choose-grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 100px;
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

/* --- sticky rail (Figma Container 360x628) --- */
.choose-nav {
  position: sticky;
  top: 108px;
  flex: 0 0 360px;
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.choose-nav h2 {
  font-family: var(--font-tight);
  font-size: 65px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.0225em;
  margin: 0;
}
/* One sentence, one size: "Choose Singularity Hypertech as a strategic AI
   partner" is a single heading (no small lead under a big word). The 360px rail
   cannot hold it at 65px, so the whole line is set at 45px. */
.choose-nav h2.choose-h2-long {
  font-size: 45px;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
@media (max-width: 1080px) {
  .choose-nav h2.choose-h2-long {
    font-size: 35px;
    line-height: 1.1;
  }
}
@media (max-width: 560px) {
  .choose-nav h2.choose-h2-long {
    font-size: 30px;
  }
}
/* the lead finishes the heading sentence, so it is set at the same size
   and face as the h2 above it rather than as body copy */
.choose-lead {
  /* Figma: a small lead under the big "Choose", not a second heading line.
     .choose-nav spaces its children 60px apart; pull this to a 20px gap */
  margin: -40px 0 0;
  font-family: var(--font-inter);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: #f5f5f5;
  max-width: 320px;
}
.choose-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 16px;
}
.choose-menu li {
  align-self: stretch;
  border-bottom: 0;
}
/* 258px hairline between rows, matching Figma's Line vectors */
.choose-menu li:not(:last-child)::after {
  content: "";
  display: block;
  width: 258px;
  height: 1px;
  margin-top: 20px;
  background: #222;
}
.choose-item {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-inter);
  font-size: 20px;
  font-weight: 500;
  line-height: 27px;
  color: #888;
  transition:
    color 0.25s ease,
    font-size 0.25s ease;
}
.choose-item:hover {
  color: #c9c9d4;
}
/* the active item and the heading of the panel it opens share one size */
.choose-item.is-active {
  font-size: 27px;
  color: #fff;
}

/* --- panels: 800 wide, 128px apart, all visible --- */
.choose-panels {
  flex: 0 0 800px;
  width: 800px;
  display: flex;
  flex-direction: column;
  gap: 128px;
}
.choose-panel {
  width: 800px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  scroll-margin-top: 120px;
}
.choose-img {
  align-self: stretch;
}
.choose-img img {
  width: 100%;
  height: 320px;
  border-radius: 16px;
  object-fit: cover;
  margin: 0;
}
/* copy block under the image: title, then the two columns 20px below.
   Figma nests the title in the left column with a matching spacer in the
   right one; a full-width title renders identically and lets the two
   columns stay side by side on mobile. */
.choose-body {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.choose-panel h3 {
  align-self: stretch;
  font-family: var(--font-inter);
  font-size: 27px;
  font-weight: 500;
  line-height: 32px;
  margin: 0;
}
.choose-cols {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.choose-cols > div {
  flex: 0 0 380px;
  width: 380px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.choose-cols h4 {
  align-self: stretch;
  margin: 0;
  font-family: var(--font-inter);
  font-size: 12px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 0.05em;
  color: #c2c2c2;
  text-transform: none;
}
.choose-cols ul {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.choose-cols li {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 1.6;
  color: #f5f5f5;
}
.choose-cols li::before {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 9999px;
  background: #8584ff;
}

/* ==========================================================================
   INDUSTRIES ORBIT
   ========================================================================== */
.industries {
  position: relative;
  background: var(--dark);
  color: #fff;
  padding: 0;
  /* NB: no overflow here - it would make this a scroll container and kill the
     sticky stage. The rail's own padding keeps the cards inside the section. */
}

/* --- heading in flow, orb pinned, cards scrolling over it ---
   The heading is deliberately NOT pinned: it scrolls away before the orb
   locks, so a card can never collide with the type. The stage sits in normal
   flow and the rail is pulled back up over it with a negative TOP margin.
   Never use a negative BOTTOM margin on the sticky stage - sticky clamps
   against the margin box, so it would run a whole viewport past the section
   and paint over the next one. */
.ind-head {
  padding: 100px 0 0;
}
.ind-stage {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 0 40px;
}
.ind-title {
  text-align: center;
  font-size: 65px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
}

/* Figma: frosted-white "Explore all industries" pill centred under the orb */
.ind-actions {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.ind-actions .btn {
  min-height: 60px;
  min-width: 225px;
  padding: 0 28px;
}

/* --- the orb ---
   main.js sets --wrapH from the room the heading leaves, and --k scales the
   graphic to match, so the pinned view always fits one screen. */
.orbit-wrap {
  position: relative;
  height: var(--wrapH, 600px);
}
.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 660px;
  height: 660px;
  transform: translate(-50%, -50%) scale(var(--k, 1));
}
/* Figma "Group 1707481265" (850x836), scaled x0.964 so its outer ring
   (r319.5) sits on our 308px chip track. Centre = a soft 30% glow, two
   gradient-stroked rings, a small logo badge and two radar quarter-wedges. */
.orbit-ring {
  position: absolute;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid;
}
/* inner ring: white at the top fading to violet (Figma stroke, 30%) */
.orbit-ring-1 {
  width: 336px;
  height: 336px;
  border-color: rgba(255, 255, 255, 0.3) rgba(170, 150, 255, 0.2)
    rgba(102, 70, 235, 0.17) rgba(170, 150, 255, 0.2);
}
/* outer ring: violet at the top fading to soft white */
.orbit-ring-2 {
  width: 616px;
  height: 616px;
  border-color: rgba(102, 70, 235, 0.3) rgba(180, 170, 255, 0.2)
    rgba(255, 255, 255, 0.15) rgba(180, 170, 255, 0.2);
}
/* Figma glow: r411.5 radial, cyan -> blue (29%) -> clear, whole layer at 30% */
.orbit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 794px;
  height: 794px;
  margin: -397px 0 0 -397px;
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    rgba(71, 233, 255, 0.3) 0%,
    rgba(71, 89, 255, 0.3) 29%,
    rgba(3, 0, 10, 0) 100%
  );
  pointer-events: none;
}
/* Figma magenta haze: #C521FF r132 blob, blur 109, lower-right of centre */
.orbit::after {
  content: "";
  position: absolute;
  left: calc(50% + 82px);
  top: calc(50% + 39px);
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    rgba(197, 33, 255, 0.28),
    rgba(197, 33, 255, 0.1) 45%,
    rgba(197, 33, 255, 0) 100%
  );
  pointer-events: none;
}
/* the two radar quarter-wedges from the Figma file, turning slowly */
.orbit-radar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 386px;
  height: 386px;
  margin: -193px 0 0 -193px;
  z-index: 2;
  background: url(../../images/home/orbit-sweep-figma.svg) center / contain no-repeat;
  animation: spin 16s linear infinite;
  will-change: transform;
  pointer-events: none;
}
/* Figma logo badge (gradient disc, glows, white -> lavender mark) */
.orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 116px;
  height: 116px;
  margin: -58px 0 0 -58px;
  z-index: 3;
}
.orbit-core img {
  width: 100%;
  height: 100%;
  display: block;
}
/* The icon ring turns on its own, independent of the scroll. Only two plain
   rotations are animated - the ring one way, the glyphs the other - so the
   compositor can carry the whole thing without recalculating layout. */
/* Two rings, both turning the same way at the rates the reference site uses:
   outer 36s a revolution, inner 56s. Zero-sized pivots - a full-width square
   would sweep a bigger bounding box as it turns and push the page wide. */
.orbit-spin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 4;
  will-change: transform;
}
.orbit-spin-out {
  animation: spin 36s linear infinite;
}
.orbit-spin-in {
  animation: spin 44s linear infinite;
}
.orbit-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* solid-ish instead of backdrop-filter: five blurred layers moving every
     frame is the single most expensive thing in this section */
  /* Figma: white 15% glass, no rim */
  background: rgba(255, 255, 255, 0.15);
  border: 0;
  /* fixed position on its ring, then un-rotated so the chip box stays
     axis-aligned (a rotated square sweeps a wider box and can push the page
     sideways). The ring itself does the turning. */
  transform: rotate(var(--a)) translateY(calc(-1 * var(--r, 308px)))
    rotate(calc(-1 * var(--a)));
}
/* the inner pair rides closer in and a touch smaller */
.orbit-spin-in .orbit-icon {
  --r: 166px;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
}
.orbit-spin-in .orbit-icon img {
  width: 28px;
  height: 28px;
}
.orbit-icon img {
  width: 32px;
  height: 32px;
  filter: brightness(0) invert(1);
  /* Figma icons fade from white at the top to clear at the bottom */
  -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0.15) 100%);
  mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0.15) 100%);
  /* held upright by counter-turning at exactly its own ring's rate */
  will-change: transform;
}
.orbit-spin-out .orbit-icon img {
  animation: spinBack 36s linear infinite;
}
.orbit-spin-in .orbit-icon img {
  animation: spinBack 44s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes spinBack {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

/* --- the rail: cards in normal flow, alternating sides, scrolling past --- */
.ind-rail {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  pointer-events: none; /* the gaps must not swallow clicks on the stage */
}
.ind-rail .container {
  display: flex;
  flex-direction: column;
  /* the first card starts below the fold and rises from there; the trailing
     space lets the last one clear the top before the stage unpins. Spacing
     matches the reference: roughly 0.8 of a screen between cards, so only
     one is in the frame at a time. */
  padding-top: 85vh;
  padding-bottom: 85vh;
  gap: 60vh;
}
/* Figma "card-1": 320 wide, 40px padding, frosted violet-to-navy glass,
   hairline white border, 30px icon + 20px Inter title, 16/25.6 white copy */
.ind-card {
  width: 320px;
  max-width: 100%;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 14.9px;
  padding: 40px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(102, 69, 235, 0.15), rgba(21, 22, 38, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  color: #fff;
}
/* alternating columns, inset from the grid edge like the reference */
.ind-rail .ind-card:nth-child(odd) {
  align-self: flex-start;
  margin-left: 8%;
}
.ind-rail .ind-card:nth-child(even) {
  align-self: flex-end;
  margin-right: 8%;
}
.ind-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-inter);
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}
.ind-card-head img {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1);
}
.ind-card p {
  margin: 0;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 25.6px;
  color: #fff;
}

/* ==========================================================================
   PROCESS TIMELINE
   ========================================================================== */
/* Figma: Section (1348:1619) — 1440x895, bg #15132b, 1px #222 top rule,
   padding 100. Left copy 426.67, gap 80, right rail 733. */
.process {
  position: relative;
  background: #15132b;
  border-top: 1px solid #222;
  color: #f5f5f5;
  padding: 100px 0;
}
.process-grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 100px;
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

/* --- left copy column: sticky, so the copy holds while the rail scrolls --- */
.process-intro {
  position: sticky;
  top: 120px;
  isolation: isolate;
  flex: 0 0 426.67px;
  width: 426.67px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.process-intro h2 {
  align-self: stretch;
  margin: 0;
  font-family: var(--font-tight);
  font-size: 65px;
  font-weight: 500;
  line-height: 1; /* Figma 72/72 */
  letter-spacing: -0.05em;
  color: #f5f5f5;
}
.process-intro p {
  align-self: stretch;
  margin: 0;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 26px;
  color: #c2c2c2;
}
/* faint grid plate, bleeding off the left edge; anchored under the copy so it
   travels with the sticky column instead of sitting at the section floor */
.process-shape {
  position: absolute;
  top: 400px;
  left: -156px;
  width: 369.1px;
  height: 316.4px;
  z-index: 1;
  pointer-events: none;
}

/* --- right rail: 48px marker column + 653px card, 32px apart --- */
.timeline {
  position: relative;
  isolation: isolate;
  flex: 0 0 733px;
  width: 733px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  font-family: var(--font-inter);
  font-size: 12px;
  color: #888;
}
/* the unlit rail, centred on the 48px marker column */
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0.5px;
  left: 24px;
  width: 1px;
  background: #2f2f47;
  z-index: 0;
}
/* the lit rail: fills top-down as the section scrolls (--tl-progress, 0-1) */
.timeline::after {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 1px;
  height: calc(var(--tl-progress, 0) * 100%);
  background: linear-gradient(180deg, #cacaca, #3e3e3e) /* Figma rail */;
  z-index: 0;
  transition: height 0.15s linear;
}
.tl-item {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  z-index: 1;
}
.tl-num {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #1b193d;
  border: 1px solid #333;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: inherit;
  transition: border-color 0.45s ease, box-shadow 0.45s ease, color 0.45s ease;
}
/* the lit fill rides on a pseudo-element so it can cross-fade (gradients
   themselves are not animatable) */
.tl-num::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(151.12deg, #38336d, #05083b);
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: -1;
}
.tl-card {
  position: relative;
  flex: 0 0 653px;
  width: 653px;
  height: 155.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(151.42deg, #282450, #01031a);
  text-align: left;
  transition: box-shadow 0.45s ease, transform 0.45s ease;
}
.tl-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(151.12deg, #38336d, #05083b);
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: 0;
}
/* the travelling highlight: a soft sheen that sweeps the lit card */
.tl-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    120% 150% at 12% 0%,
    rgba(126, 116, 245, 0.42),
    rgba(126, 116, 245, 0) 62%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: 0;
}
.tl-card-inner {
  position: relative;
  z-index: 1;
  width: 587px;
  max-width: 100%;
}
.tl-card h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  color: #d1d1d1;
  transition: color 0.45s ease;
}
.tl-card p {
  margin: 11px 0 0; /* Figma places the copy 42.88px below the title top */
  font-size: 16px;
  line-height: 1.6;
  color: #888;
  transition: color 0.45s ease;
}

/* the step the scroll position is on: brighter gradient, glow, white copy.
   main.js moves .is-lit down the list as the rail scrolls. */
.tl-item.is-lit {
  color: #f5f5f5;
}
.tl-item.is-lit .tl-num {
  /* Figma: gradient fill + #4c4c4c rim, no glow */
  border-color: #4c4c4c;
}
/* Figma's active step is the flat #38336d -> #05083b plate: no sheen, no glow */
.tl-item.is-lit .tl-num::before,
.tl-item.is-lit .tl-card::before {
  opacity: 1;
}
.tl-item.is-lit .tl-card h3 {
  color: #f5f5f5;
}
.tl-item.is-lit .tl-card p {
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .timeline::after,
  .tl-num,
  .tl-num::before,
  .tl-card,
  .tl-card::before,
  .tl-card::after,
  .tl-card h3,
  .tl-card p {
    transition: none;
  }
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* WHY CHOOSE display type now lives with the component in css/shared.css */

/* Latest insights heading (65px desktop) now lives in css/shared.css */

/* Final CTA (Figma) styles moved to css/shared.css so every page can use them */