/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — TECH HUB
   Page styles for /en/tech-hub/  (namespace: .th-)
   Built on Signal Core tokens in global.css.
   ============================================================================ */

html,
body {
  background-color: var(--wr-black) !important;
  color: var(--wr-white);
  overflow-x: hidden;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Kill the grey tap flash on iOS/Android for all interactive surfaces. */
.th-page a,
.th-page button,
.th-page summary {
  -webkit-tap-highlight-color: transparent;
}

#th-why,
#th-proof,
#th-integ {
  scroll-margin-top: 48px;
}

.th-hero {
  position: relative;
  z-index: 2;
  background-color: var(--wr-black);
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@keyframes fadeBlurIn {
  from {
    opacity: 0;
    transform: scale(1.05);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeBlurInRays {
  from {
    opacity: 0;
    transform: translate(-25%, -15vh) scale(1.05);
  }

  to {
    opacity: 1;
    transform: translate(-25%, -15vh) scale(1);
  }
}

@keyframes fadeDustIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ── Hero ambient top glow (replaces top light.svg) ─────── */
.th-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
  background: radial-gradient(ellipse at 50% 0%,
    #FFD80038 0%,
    #F049231A 45%,
    transparent 72%);
  filter: blur(32px);
  pointer-events: none;
  z-index: 0;
  animation: fadeBlurIn 3.5s var(--wr-ease-out) 0.2s both;
}

.th-hero__rays {
  position: absolute;
  top: 0;
  left: 0;
  width: 130%;
  height: 130vh;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
  transform: translateZ(0);
  filter: blur(18px);
  -webkit-mask-image: linear-gradient(to bottom, #0D0A07 0%, #0D0A07 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #0D0A07 0%, #0D0A07 70%, transparent 100%);
  animation: fadeBlurInRays 3.8s var(--wr-ease-out) 2.6s forwards;
}

.th-hero__text {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: clamp(100px, 20vh, 220px);
  padding-left: var(--wr-pad-x);
  padding-right: var(--wr-pad-x);
  max-width: var(--wr-max-width);
  width: 100%;
  margin: 0 auto;
  pointer-events: none;
  /* Let clicks pass through empty spacing to the 3D carousel */
}

@keyframes charReveal {
  0% {
    opacity: 0;
    transform: translateY(15px) scale(1.1);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes subReveal {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.th-hero__h1 {
  font-size: clamp(40px, 5vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--wr-white);
  margin-bottom: 20px;
  opacity: 0;
  pointer-events: auto;
}

.th-hero__h1.is-visible {
  opacity: 1;
}

.th-word {
  display: inline-block;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.th-char {
  display: inline-block;
  opacity: 0;
  vertical-align: top;
  white-space: nowrap !important;
}

.th-gradient-char {
  background: var(--wr-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.th-hero__h1.is-visible .th-char {
  animation: charReveal 0.77s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* 1.1s * 0.7 */
}

.th-hero__sub {
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 400;
  line-height: 1.75;
  color: var(--wr-white-65);
  max-width: 620px;
  margin: 0 auto;
  opacity: 0;
  pointer-events: auto;
}

.th-hero__sub.is-visible {
  animation: subReveal 1.54s cubic-bezier(0.2, 0.8, 0.2, 1) 0.07s forwards; /* 2.2s * 0.7, 0.1s * 0.7 */
}

.th-carousel-wrap {
  position: relative;
  width: 100vw;
  flex: 1;
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Secret trick to expand the clipping bounding box so 3D elements don't get horizontally sliced by the tight flex layout mask. */
  margin-top: -150px;
  margin-bottom: -150px;
  padding-top: 150px;
  padding-bottom: 150px;

  z-index: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
}

@keyframes fadeGlowIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.55;
  }
}

.th-carousel-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 150px;
  transform: translate3d(-50%, -50%, 0);
  background-color: #F04923;
  border-radius: 50%;
  filter: blur(90px);
  -webkit-filter: blur(90px);
  opacity: 0;
  animation: fadeGlowIn 2.1s var(--wr-ease-out) 2.6s forwards; /* 3s * 0.7, 3.8s * 0.7 */
  z-index: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

.th-carousel-track {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  perspective: 1100px;
  /* Click-through: the track plane sits at z:0 while the front cards are pushed
     behind it in 3D, so without this it swallowed clicks. Cards re-enable it. */
  pointer-events: none;
}

.th-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 270px;
  margin-top: -135px;
  margin-left: -120px;
  background-color: #140F08;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--wr-radius-card);
  border: 1px solid #F2F2F20D;
  box-shadow:
    0 8px 32px #0000004D,
    inset 0 1px 0 #F2F2F21A;
  overflow: visible;
  will-change: transform;
  backface-visibility: visible;
  opacity: 0;
  transform: translateZ(0);
}

/* ── Per-card spark canvas (child of card, inherits 3D transforms) ── */
.th-card-spark {
  position: absolute;
  top: -30px;
  left: -30px;
  pointer-events: none;
  z-index: 4;
}

.th-card.th-pc {
  z-index: 2;
  pointer-events: auto;   /* re-enable clicks on the cards (track is click-through) */
  text-decoration: none;
  color: var(--wr-white);
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  transition: background 0.3s ease;
  /* Do NOT transition transform here; let the JS loop handle 16ms framing natively */
}

/* Solid dark tint over the card photo — keeps product name + CTA readable. */
.th-card.th-pc::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(13, 10, 7, 0.72);
  z-index: 1;
  pointer-events: none;
  transition: background 0.35s ease;
}

.th-card__content {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
}

.th-pc__resting,
.th-pc__hover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  text-align: center;
  transition: opacity 0.5s var(--wr-ease-out), transform 0.5s var(--wr-ease-out);
}

.th-pc__resting {
  opacity: 1;
  transform: scale(1);
}

.th-pc__hover {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

.th-card.th-pc:hover::before {
  background: rgba(13, 10, 7, 0.86);
}

.th-card.th-pc:hover .th-pc__resting {
  opacity: 0;
  transform: scale(1.05);
}

.th-card.th-pc:hover .th-pc__hover {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.th-pc__name {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--wr-white);
  letter-spacing: -0.01em;
  hyphens: none;
  overflow-wrap: normal;
  /* Centered in card via flex-center parent */
}

.th-pc__desc {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--wr-white-75);
  line-height: 1.6;
  hyphens: none;
  overflow-wrap: normal;
}

.th-pc__cta {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--wr-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShimmerSlow 3s ease-in-out infinite alternate;
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.th-pc__cta svg {
  width: 14px;
  height: 14px;
  stroke: var(--wr-orange);
  stroke-width: 3;
  fill: none;
}

.th-features {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--wr-pad-x) clamp(40px, 6vh, 80px);
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  pointer-events: none;
  /* Let clicks pass through empty spacing to the 3D carousel */
}

.th-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: auto;
  /* Re-enable clicking on feature links */
  transition: opacity 1.1s var(--wr-ease-out), transform 1.1s var(--wr-ease-out); /* 1.6s * 0.7 */
}

.th-features.is-visible .th-feat {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered entrance: first left, then middle, then right (2x slower) */
.th-features.is-visible .th-feat:nth-child(1) { transition-delay: 0.14s; }
.th-features.is-visible .th-feat:nth-child(2) { transition-delay: 0.42s; }
.th-features.is-visible .th-feat:nth-child(3) { transition-delay: 0.7s; }

.th-feat__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--wr-white-45);
}

.th-feat__link {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  background: linear-gradient(90deg, #FFD800 0%, #F04923 35%, #FFD800 70%, #F04923 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShimmer 3s ease-in-out infinite alternate;
  line-height: 1.4;
}

.th-feat:nth-child(1) .th-feat__link {
  animation-delay: 0s;
}

.th-feat:nth-child(2) .th-feat__link {
  animation-delay: -2s;
}

.th-feat:nth-child(3) .th-feat__link {
  animation-delay: -4s;
}

.th-feat__link svg {
  width: 10px;
  height: 10px;
  stroke: #F04923;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 1px;
}

@media (hover: hover) and (pointer: fine) {
  .th-feat__link:hover {
    opacity: 0.75;
  }
}

.th-why {
  position: relative;
  z-index: 2;
  background-color: var(--wr-black);
  padding: 0 0 clamp(16px, 3vh, 48px);
}

/* ── Star Wars crawl — centred copy receding into deep space ──────────────
   The stage is pinned by tech-hub.js while the crawl scrubs from below the
   fold up toward a vanishing point, then the scroll releases into the pills. */
.th-crawl-stage {
  position: relative;
  z-index: 2;
  background-color: var(--wr-black);
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  perspective: 400px;
  perspective-origin: 50% 30%;
  -webkit-mask-image: linear-gradient(to top, #0D0A07 0%, #0D0A07 30%, rgba(13, 10, 7, 0.6) 58%, transparent 85%);
  mask-image: linear-gradient(to top, #0D0A07 0%, #0D0A07 30%, rgba(13, 10, 7, 0.6) 58%, transparent 85%);
}

/* The plane: a fixed, tilted surface. The copy inside scrolls "up" along the
   tilt (translateY on .th-crawl-inner), so each line recedes toward the
   vanishing point — the classic opening-crawl read. */
.th-crawl {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(90%, 800px);
  transform: translateX(-50%) rotateX(30deg);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}

.th-crawl-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  will-change: transform;
}

.th-crawl .wr-section-label {
  display: inline-flex;
  justify-content: center;
  margin-bottom: 6px;
}

.th-crawl__title {
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 14px 0 40px;
  background: var(--wr-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-wrap: balance;
}

.th-crawl__body {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.th-crawl__body p {
  font-size: clamp(20px, 2.3vw, 30px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--wr-yellow);
  text-wrap: pretty;
  margin: 0;
}

.th-crawl__body strong {
  color: var(--wr-white);
  font-weight: 800;
}

/* ── SVG star field — used in hero + why section ─────────── */
.th-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: fadeDustIn 4.5s var(--wr-ease-out) 1.0s forwards;
  -webkit-mask-image: linear-gradient(to bottom, #0D0A07 0%, #0D0A07 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, #0D0A07 0%, #0D0A07 65%, transparent 100%);
}

.th-stars--why {
  opacity: 0;
  animation: fadeDustIn 1s ease 0.3s forwards;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #0D0A07 14%, #0D0A07 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #0D0A07 14%, #0D0A07 86%, transparent 100%);
}

.th-why__h2 {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--wr-white);
  margin-bottom: 24px;
  hyphens: none;
  overflow-wrap: normal;
}

.wr-section-label {
  color: var(--wr-white-45);
}

.th-reveal-text {
  position: relative;
  height: clamp(510px, 66vh, 780px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #0D0A07 0%, #0D0A07 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #0D0A07 0%, #0D0A07 80%, transparent 100%);
}

.th-reveal-fade-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, #0D0A07 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
  opacity: 0; /* JS animates this in once scrolling starts */
}

.th-reveal-text__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.th-why p {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.8;
  margin-bottom: 0; /* Box scroller uses flex gap */
}

.th-why-word {
  opacity: 0;
  color: var(--wr-white);
  display: inline-block;
  margin-right: 0.25em;
  will-change: opacity;
}

.th-why p:last-child {
  margin-bottom: 0;
}

.th-why strong {
  color: var(--wr-white);
  font-weight: 700;
}

.th-origin-shapes {
  position: relative;
  /* Above the pinned crawl stage (z-index 2): the pills are pulled up under it
     via the -70vh margin, so a lower z-index let the opaque crawl panel clip
     their tops (the "cut"). The pills only reach opacity>0 as they slide in
     from the bottom, after the crawl has receded, so lifting them reads clean. */
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3vh, 36px);
  max-width: 1100px;
  margin: -70vh auto 0;
  /* Big breathing space below the last pill before the next section. */
  padding: clamp(40px, 8vh, 110px) 0 clamp(260px, 42vh, 620px);
  overflow: visible;
}

/* ── Continuous star field behind the pills — the space carries on past the
   crawl so the cards float on top of it (masked to blend top + bottom). ── */
.th-stars--os {
  position: absolute;
  top: 0;
  /* Full viewport width — break out of the 1100px container so the star field
     spans edge to edge (no dark starless boxes on the sides). */
  left: 50%;
  right: auto;
  width: 100vw;
  margin-left: -50vw;
  height: calc(100% + 26vh);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: fadeDustIn 1.4s var(--wr-ease-out) 0.15s forwards;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #0D0A07 9%, #0D0A07 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #0D0A07 9%, #0D0A07 84%, transparent 100%);
}

.th-os {
  position: relative;
  z-index: 2;
  align-self: center;
  width: 86%;
  max-width: 760px;
  height: clamp(190px, 26vw, 320px);
  border-radius: calc(clamp(190px, 26vw, 320px) / 2);
  will-change: transform, opacity;
  margin: 0;
  overflow: visible;
  /* No own fill — the star field from the crawl reads straight through the
     pill; only the ring outline + text define it. */
  background: transparent;
}

/* Brand hairline edge — a CONTINUOUS ring (no transparent stops) so the whole
   pill outline reads evenly all the way around. A conic brand sweep keeps the
   full perimeter lit; the Signal Trace spark rides brighter passes on top. */
.th-os::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: conic-gradient(from 210deg,
    #FFD800, #F04923 25%, #FFD800 50%, #F04923 75%, #FFD800 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
}

/* nth-child now counts: stars(1), spark canvas(2), pills(3–5).
   All centred; width steps down the stack — first (APEX) biggest, second (RRM)
   a bit wider than the last, last (Restream) the baseline. */
.th-os:nth-child(3) { width: 94%; max-width: 1060px; }  /* first — APEX — biggest */
.th-os:nth-child(4) { width: 72%; max-width: 800px; }   /* second — RRM — medium */
.th-os:nth-child(5) { width: 50%; max-width: 560px; }   /* last — Restream — smallest */

/* ── Pill spark canvas ───────────────────────────────────── */
#th-os-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.7s ease; /* 1s * 0.7 */
}

/* ── Glow blob wrapper — removed: pills are clean frosted glass now, so the
   filling brand gradient is disabled (kept in DOM but not painted). ───────── */
.th-os-glow-wrap {
  display: none;
}

/* ── Glow blobs — oversized so gradient fills every corner ── */
.th-os-glow {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 160%;
  height: 160%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease; /* 1.4s * 0.7 */
  animation-play-state: paused;
  will-change: transform, opacity;
}

.th-os-glow.is-active {
  opacity: 0.65;
  animation-play-state: running;
}

/* ── Primary blobs — drift through upper zone ────────────── */
.th-os-glow--a {
  background: radial-gradient(ellipse at 45% 50%, #FFD800 0%, #F04923 55%, transparent 78%);
  filter: blur(27px);
  animation: th-glow-a 10s ease-in-out infinite;
}

.th-os-glow--b {
  background: radial-gradient(ellipse at 55% 50%, #F04923 0%, #FFD800 52%, transparent 78%);
  filter: blur(28px);
  animation: th-glow-b 12s ease-in-out infinite;
  animation-delay: -5s;
}

.th-os-glow--c {
  background: radial-gradient(ellipse at 50% 45%, #FFD800 0%, #F04923 48%, transparent 78%);
  filter: blur(25px);
  animation: th-glow-c 11s ease-in-out infinite;
  animation-delay: -3s;
}

/* ── Secondary blobs — drift through lower zone ───────────── */
.th-os-glow--d {
  background: radial-gradient(ellipse at 60% 50%, #F04923 0%, #FFD800 50%, transparent 78%);
  filter: blur(29px);
  animation: th-glow-d 9s ease-in-out infinite;
  animation-delay: -6s;
}

.th-os-glow--e {
  background: radial-gradient(ellipse at 40% 50%, #FFD800 0%, #F04923 48%, transparent 78%);
  filter: blur(31px);
  animation: th-glow-e 13s ease-in-out infinite;
  animation-delay: -2s;
}

.th-os-glow--f {
  background: radial-gradient(ellipse at 52% 50%, #F04923 0%, #FFD800 55%, transparent 78%);
  filter: blur(28px);
  animation: th-glow-f 8s ease-in-out infinite;
  animation-delay: -7s;
}

/*
  Primary Y values stay in -10 to -28px range (upper half).
  Secondary Y values stay in +10 to +28px range (lower half).
  They occasionally approach centre (±10px) giving a crossing / switching feel.
  X drifts wide (±40-52px) for the side-to-side sweep.
*/
@keyframes th-glow-a {
  0%   { transform: translate(-20px, -22px); }
  25%  { transform: translate( 44px, -10px); }
  52%  { transform: translate( 12px, -26px); }
  78%  { transform: translate(-48px, -12px); }
  100% { transform: translate(-20px, -22px); }
}

@keyframes th-glow-b {
  0%   { transform: translate( 30px, -12px); }
  28%  { transform: translate(-42px, -24px); }
  58%  { transform: translate( 18px, -10px); }
  84%  { transform: translate(-16px, -26px); }
  100% { transform: translate( 30px, -12px); }
}

@keyframes th-glow-c {
  0%   { transform: translate(  6px, -24px); }
  30%  { transform: translate( 50px, -10px); }
  58%  { transform: translate(-10px, -28px); }
  82%  { transform: translate(-46px, -12px); }
  100% { transform: translate(  6px, -24px); }
}

@keyframes th-glow-d {
  0%   { transform: translate(-38px,  22px); }
  24%  { transform: translate( 16px,  10px); }
  50%  { transform: translate( 52px,  26px); }
  76%  { transform: translate( -6px,  12px); }
  100% { transform: translate(-38px,  22px); }
}

@keyframes th-glow-e {
  0%   { transform: translate( 42px,  12px); }
  22%  { transform: translate(-16px,  24px); }
  50%  { transform: translate(-52px,  10px); }
  74%  { transform: translate( 24px,  28px); }
  100% { transform: translate( 42px,  12px); }
}

@keyframes th-glow-f {
  0%   { transform: translate( -6px,  28px); }
  20%  { transform: translate(-50px,  12px); }
  46%  { transform: translate( 28px,  24px); }
  72%  { transform: translate( 48px,  10px); }
  100% { transform: translate( -6px,  28px); }
}

@media (prefers-reduced-motion: reduce) {
  .th-os-glow {
    animation: none;
    transition: none;
  }
}

.th-os__overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(100deg, #0D0A07D1 0%, #0D0A077A 60%, #0D0A071F 100%);
}

.th-os__grad {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(to right, #0D0A0799 0%, transparent 80%);
  opacity: 0.7;
  transition: opacity 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
  .th-os:hover .th-os__grad {
    opacity: 0.4;
  }
}

.th-os__cnt {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px clamp(40px, 6vw, 80px);
}

.th-os__product {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  background: var(--wr-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  display: block;
  animation: gradientShimmer 3s ease-in-out infinite alternate;
}

.th-os__fact {
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 400;
  color: var(--wr-white-65);
  line-height: 1.6;
  max-width: 36ch;
}

.th-os__fact strong {
  color: var(--wr-white);
  font-weight: 700;
}

.th-proof {
  position: relative;
  z-index: 10;
  margin-top: 0;
  background-color: var(--wr-black);
  padding: 180px var(--wr-pad-x) 120px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: visible;
  contain: layout style;
  /* Top corners rounded — gives the section a "card arriving" feel matching the scale animation */
  border-radius: 28px 28px 0 0;
  box-shadow: none !important; /* Force remove any shadow lines */
  transform-style: preserve-3d;
  will-change: transform, opacity;
  --th-glow-opacity: 0;
  --th-glow-sx: 0.1;
  --th-glow-sy: 0.1;
  --th-glow-y: 20px;
}

/* Section-arrival glow removed per request (huge orange flare at the section
   peak). The Signal Trace edge animation on .th-proof-spark-canvas stays. */
.th-proof::before {
  display: none;
}

.th-proof-spark-canvas {
  position: absolute;
  top: -100px; /* Straddle the top edge */
  left: 0;
  width: 100%;
  height: 200px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 1s ease;
}

.th-proof__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(48px, 6vw, 100px);
  max-width: var(--wr-max-width);
  margin: 0 auto;
  width: 100%;
  padding-top: 50px;
}

.th-proof__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  order: 2;
  position: relative;
}

.th-proof__left .wr-section-label {
  margin-bottom: 0;
}

.th-proof__h2 {
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--wr-white);
  margin: 0;
  hyphens: none;
  overflow-wrap: normal;
}

.th-proof__sub {
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--wr-white-65);
  line-height: 1.75;
  margin: 0;
}

.th-proof .th-reveal-text {
  height: clamp(110px, 6vh, 180px);
}

.th-proof__right {
  flex: 1;
  order: 1;
  position: relative;
  overflow: hidden;
  height: clamp(440px, 54vh, 600px);
  padding: 0 16px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #0D0A07 15%, #0D0A07 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #0D0A07 15%, #0D0A07 85%, transparent 100%);
}

.th-scroll-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  height: 100%;
  perspective: 900px;
  perspective-origin: 50% 40%;
}

.th-scroll-col {
  position: relative;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.5s ease;
}

/* Outer columns tilt inward — creates a concave 3D depth stage */
.th-scroll-col--1 {
  transform: rotateY(8deg);
  transform-origin: left center;
  opacity: 0.75;
}

.th-scroll-col--3 {
  transform: rotateY(-8deg);
  transform-origin: right center;
  opacity: 0.75;
}

@media (hover: hover) and (pointer: fine) {
  .th-scroll-col:hover {
    z-index: 10;
  }

  /* Hover: outer columns face forward and brighten */
  .th-scroll-col--1:hover {
    transform: rotateY(0deg);
    opacity: 1;
  }

  .th-scroll-col--3:hover {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

@keyframes th-scroll-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.th-scroll-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: th-scroll-up 18s linear infinite;
  will-change: transform;
}

.th-scroll-col--1 .th-scroll-track {
  animation-duration: 28s;
  animation-delay: 0s;
}

.th-scroll-col--2 .th-scroll-track {
  animation-duration: 16s;
  animation-delay: -5.3s;
}

.th-scroll-col--3 .th-scroll-track {
  animation-duration: 23s;
  animation-delay: -7.7s;
}

.th-sc {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background-color: #140F0880; /* Brand Plate surface (image-ready) */
  background-size: cover;
  background-position: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 6px 20px #0000008C;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.3s ease;
}

.th-sc.is-loaded {
  background-image: url('../img/hero/contact-desktop.jpg');
}

.th-sc__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #0D0A07E0 0%, #0D0A0714 55%);
}

.th-sc__cnt {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 11px;
}

.th-sc__prod {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--wr-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 3px;
  display: block;
}

.th-sc__client {
  font-size: 11px;
  font-weight: 700;
  color: var(--wr-white);
  line-height: 1.3;
}

@media (hover: hover) and (pointer: fine) {
  .th-sc:hover {
    transform: scale(1.25);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95);
    z-index: 20;
    position: relative;
  }
}

.th-integ {
  position: relative;
  z-index: 2;
  background-color: var(--wr-black);
  padding: calc(var(--wr-section-pad-y) + 50px) var(--wr-pad-x) var(--wr-section-pad-y);
  min-height: 100vh;
  border-radius: 0 0 28px 28px;
  contain: layout style;
  will-change: transform;
}

/* ── Bottom glow: lives on the footer mount (z-index 1), below section 4 (z-index 2) ── */
#site-footer-mount::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 10%;
  width: 80%;
  height: 140px;
  background: radial-gradient(ellipse at 50% 100%, rgba(240, 73, 35, 0.5) 0%, rgba(255, 200, 80, 0.18) 45%, transparent 72%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 2;
}

.th-integ-spark-canvas {
  position: absolute;
  bottom: -100px;
  height: 200px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 1s ease;
}

.th-integ .th-reveal-text {
  height: auto;
  overflow: visible;
}

.th-integ .section-inner {
  max-width: var(--wr-max-width);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(48px, 6vw, 100px);
}

.th-integ__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.th-integ__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.th-integ__h2 {
  font-size: clamp(26px, 2.5vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--wr-white);
  margin: 0;
  hyphens: none;
  overflow-wrap: normal;
}

.th-integ p {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--wr-white-65);
  line-height: 1.8;
  margin-bottom: 16px;
}

.th-integ strong {
  color: var(--wr-white);
  font-weight: 600;
}

/* --- Strict Fits-Column Workflow Layout --- */
.th-workflow {
  display: grid;
  grid-template-columns: 100px minmax(130px, 1fr) minmax(130px, 1fr);
  grid-auto-rows: min-content;
  gap: 20px 24px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.th-wf-node {
  background: var(--wr-glass-05, rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--wr-glass-10, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.th-wf-node.is-tall {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 14px;
  height: 100%;
  padding: 16px 10px;
}

/* Base Node Alignments */
.th-wb-1  { grid-column: 1; grid-row: 1 / 3; }
.th-wb-2  { grid-column: 2; grid-row: 1; }
.th-wb-s1 { grid-column: 3; grid-row: 1; }
.th-wb-3  { grid-column: 2; grid-row: 2; }
.th-wb-4  { grid-column: 2; grid-row: 3; }
.th-wb-s2 { grid-column: 3; grid-row: 3; }

/* Straight Line Connections */
.th-wb-2::before {
  content: ''; position: absolute;
  top: 50%; right: 100%; width: 24px;
  border-top: 2px dotted var(--wr-white-45, rgba(255,255,255,0.45));
}
.th-wb-s1::before {
  content: ''; position: absolute;
  top: 50%; right: 100%; width: 24px;
  border-top: 2px dashed var(--wr-white-45, rgba(255,255,255,0.45));
}
.th-wb-3::before {
  content: ''; position: absolute;
  bottom: 100%; left: 50%; height: 20px;
  border-left: 2px solid var(--wr-white-20, rgba(255, 255, 255, 0.2));
}
.th-wb-4::before {
  content: ''; position: absolute;
  bottom: 100%; left: 50%; height: 20px;
  border-left: 2px solid var(--wr-white-20, rgba(255, 255, 255, 0.2));
}
.th-wb-s2::before {
  content: ''; position: absolute;
  top: 50%; right: 100%; width: 24px;
  border-top: 2px solid var(--wr-white-20, rgba(255, 255, 255, 0.2));
}

/* Icon Resizing */
.th-wf-icon-box {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  flex-shrink: 0;
}
.th-wf-icon-box svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}
.th-wf-node.is-tall .th-wf-icon-box {
  width: 32px; height: 32px;
}
.th-wf-node.is-tall .th-wf-icon-box svg {
  width: 26px; height: 26px;
}

/* Typography perfectly scaled for columns */
.th-wf-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.th-wf-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--wr-white);
  line-height: 1.25;
}
.th-wf-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--wr-white-45, rgba(255, 255, 255, 0.45));
  line-height: 1.3;
}

/* Staggered animation */
.th-ib-reveal {
  opacity: 0;
  transform: translateY(16px) scale(0.95);
  transition: opacity 0.5s var(--wr-ease-spring), transform 0.5s var(--wr-ease-spring);
}
.section-inner.is-visible .th-ib-reveal {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.section-inner.is-visible .th-wb-1 { transition-delay: 0.1s; }
.section-inner.is-visible .th-wb-2 { transition-delay: 0.2s; }
.section-inner.is-visible .th-wb-s1 { transition-delay: 0.3s; }
.section-inner.is-visible .th-wb-3 { transition-delay: 0.4s; }
.section-inner.is-visible .th-wb-4 { transition-delay: 0.5s; }
.section-inner.is-visible .th-wb-s2 { transition-delay: 0.6s; }

.th-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 40px;
  border-radius: var(--wr-radius-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wr-white);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--wr-yellow) 0%, var(--wr-orange) 50%, var(--wr-yellow) 100%);
  background-size: 200% auto;
  box-shadow: 0 4px 24px rgba(240, 73, 35, 0.35);
  animation: gradientShimmer 3s ease-in-out infinite alternate;
  transition: transform 0.2s ease, box-shadow 0.3s;
}

.th-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.32) 50%, transparent 100%);
  animation: gradientShimmerSlow 3s ease-in-out infinite alternate;
}

.th-btn span {
  position: relative;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .th-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(240, 73, 35, 0.5);
  }
}

/* Ghost Button with Animated Gradient Border & Text */
.th-btn-ghost {
  background: transparent;
  border: none;
  box-shadow: none;
  animation: none;
  overflow: visible; /* ensure pseudo borders work */
}

/* Gradient Stroke Mask */
.th-btn-ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, var(--wr-yellow) 0%, var(--wr-orange) 50%, var(--wr-yellow) 100%);
  background-size: 200% auto;
  animation: gradientShimmer 3s ease-in-out infinite alternate;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Gradient Text Mask */
.th-btn-ghost span {
  display: inline-block;
  background: linear-gradient(90deg, var(--wr-yellow) 0%, var(--wr-orange) 50%, var(--wr-yellow) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradientShimmer 3s ease-in-out infinite alternate;
  position: relative;
  z-index: 2;
}

.th-btn-ghost::after {
  content: none; /* Disable default sweeping glow */
}

@media (hover: hover) and (pointer: fine) {
  .th-btn.th-btn-ghost:hover {
    box-shadow: 0 4px 20px rgba(240, 73, 35, 0.2);
    transform: translateY(-2px);
  }
}

.th-cta-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap; /* Forces side-by-side */
  margin-top: 36px;
  transform: translateY(14px);
  transition: transform 0.5s var(--wr-ease-out);
  transition-delay: 0.65s;
}

@media (max-width: 1024px) {
  .th-workflow { grid-template-columns: 90px minmax(130px, 1fr) minmax(130px, 1fr); gap: 16px; }
  
  .th-why {
    padding-right: 0;
  }

  .th-why .section-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Pills stack full-width with content-driven height. Fixed heights + the
     stepped desktop widths (incl. the 50% last pill) overflowed the copy and
     overlapped on narrow screens. Rounded-rect instead of stadium here. */
  .th-os,
  .th-os:nth-child(3),
  .th-os:nth-child(4),
  .th-os:nth-child(5) {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    min-height: 0;
    border-radius: 30px;
  }

  .th-os__cnt {
    height: auto;
    padding: 32px clamp(26px, 6vw, 44px);
  }

  /* The spark canvas traces a full-stadium outline (radius = half height); the
     mobile pills are 30px rounded-rects, so it painted a mismatched double
     outline. It's decorative — drop it on mobile (the conic ring is the edge). */
  #th-os-canvas {
    display: none;
  }

  /* Proof is a flex row on desktop — stack it (the auto-scroll montage rail
     drops below the copy). Reset order so the text reads first. */
  .th-proof {
    padding-top: 130px;
    padding-bottom: 100px;
  }

  .th-proof__inner {
    flex-direction: column;
    gap: 48px;
  }

  .th-proof__left {
    order: 1;
    align-items: flex-start;
  }

  .th-proof__right {
    order: 2;
    width: 100%;
    height: clamp(380px, 50vh, 520px);
  }

  .th-integ .section-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .th-features {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .th-workflow {
    grid-template-columns: 80px minmax(100px, 1fr) minmax(100px, 1fr);
    gap: 12px 10px;
  }
  .th-wf-node {
    padding: 8px 10px;
  }
  .th-wf-title {
    font-size: 11px;
  }
  .th-wf-sub {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .th-workflow {
    grid-template-columns: 70px minmax(90px, 1fr) minmax(90px, 1fr);
    gap: 10px 8px;
  }
  .th-wf-node.is-tall .th-wf-icon-box {
    width: 24px; height: 24px;
  }
  .th-wf-node.is-tall .th-wf-icon-box svg {
    width: 18px; height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .th-hero__h1,
  .th-hero__sub,
  .th-features {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .th-btn,
  .th-btn::after {
    animation: none;
  }

  .th-scroll-track {
    animation: none !important;
  }

  /* No pin/perspective without motion — show the copy as a normal centred block. */
  .th-crawl-stage {
    height: auto;
    overflow: visible;
    perspective: none;
    -webkit-mask-image: none;
    mask-image: none;
    padding: clamp(60px, 12vh, 140px) var(--wr-pad-x);
  }

  .th-crawl {
    position: static;
    left: auto;
    width: min(92%, 760px);
    margin: 0 auto;
    transform: none !important;
  }

  .th-crawl-inner {
    position: static;
    transform: none !important;
  }

  .th-crawl__body p {
    color: var(--wr-white);
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 400;
    line-height: 1.7;
  }
}

/* ── Reveal Lift footer ──────────────────────────────── */
/* Footer is fixed beneath the page sections; body padding-bottom is the scroll
   room that lets sections slide away and gradually uncover the footer. */
#site-footer-mount {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

body {
  padding-bottom: 55vh; /* fallback — overridden by JS with exact footer height */
}

/* ============================================================================
   RESPONSIVE CASCADE — phones → tablet → laptop → ultrawide, all devices.
   Built on the layered breakpoints used site-wide. Pins/scroll choreography in
   tech-hub.js are width-agnostic; these rules only reflow layout + type.
   ============================================================================ */

/* ── Ultrawide: grow the content frame so copy doesn't strand at 1280 in a
   sea of margin, and lift the type ceilings the vw-clamps cap into. ──────── */
@media (min-width: 1700px) {
  .th-page { --wr-max-width: 1480px; }
  .th-hero__h1   { font-size: clamp(46px, 4vw, 58px); }
  .th-hero__sub  { max-width: 720px; font-size: clamp(16px, 1vw, 19px); }
  .th-features   { max-width: 1180px; }
  .th-why__h2    { font-size: clamp(44px, 3vw, 56px); }
  .th-proof__h2  { font-size: clamp(42px, 2.8vw, 54px); }
  .th-integ__h2  { font-size: clamp(38px, 2.5vw, 48px); }
}

@media (min-width: 2200px) {
  .th-page { --wr-max-width: 1680px; }
  .th-hero__sub { max-width: 800px; }
  .th-features  { max-width: 1320px; }
}

/* ── Small tablet / large phone: ease section rhythm before the full stack. ── */
@media (max-width: 768px) {
  .th-why {
    min-height: 0;
    padding-top: var(--wr-section-pad-y);
  }

  .th-proof {
    padding-top: 110px;
    padding-bottom: 80px;
  }

  .th-proof__right {
    height: clamp(340px, 48vh, 460px);
  }

  .th-integ {
    padding-top: var(--wr-section-pad-y);
  }
}

/* ── Phones: stack the integration CTAs full-width, tighten the hero. ────── */
@media (max-width: 600px) {
  .th-hero__text {
    padding-top: clamp(96px, 16vh, 150px);
  }

  .th-hero__h1 {
    font-size: clamp(30px, 8vw, 42px);
  }

  .th-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
  }

  .th-cta-row .th-btn {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
  }

  .th-proof .th-btn,
  .th-proof__left {
    width: 100%;
  }

  .th-proof .th-btn {
    justify-content: center;
  }
}

/* ── Compact phones: keep the workflow diagram + numerals from overflowing. ── */
@media (max-width: 380px) {
  .th-proof__right {
    height: clamp(300px, 44vh, 380px);
  }

  .th-os__cnt {
    padding: 22px clamp(24px, 6vw, 40px);
  }
}

/* ── Touch devices: give links/buttons comfortable tap targets. ──────────── */
@media (pointer: coarse) {
  .th-feat__link {
    padding: 8px 4px;
  }

  .th-cta-row .th-btn,
  .th-proof .th-btn {
    min-height: 48px;
  }
}

/* ============================================================================
   TH-OS SIGNATURE MARKS — a per-product motif on the right of each pill
   (APEX live switcher · RRM review frame · Restream signal fan-out).
   Brand colours only; decorative (aria-hidden), respects reduced motion.
   ========================================================================== */
.th-os__cnt { padding-right: clamp(148px, 12vw, 208px); }   /* reserve the mark zone */
.th-os__mark {
  position: absolute;
  top: 50%;
  right: clamp(22px, 3vw, 66px);
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  pointer-events: none;
}
.thm-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, Menlo, monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--wr-white-75);
}
.thm-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--wr-yellow);
  box-shadow: 0 0 8px #FFD80088; animation: thmBlink 1.7s ease-in-out infinite; }
@keyframes thmBlink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* APEX — mini live switcher (2×2 multiview, live ring cycles cell to cell) */
.thm-sw { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; width: clamp(88px, 9vw, 120px); }
.thm-cam { position: relative; aspect-ratio: 16/9; border-radius: 4px;
  background: linear-gradient(150deg, #1b1209, #0c0806); border: 1px solid var(--wr-white-10); overflow: hidden; }
.thm-cam::before { content:''; position:absolute; inset:0;
  background: repeating-linear-gradient(0deg, #F2F2F20D 0 1px, transparent 1px 3px); }
.thm-cam::after { content:''; position:absolute; inset:0; border-radius:4px;
  border: 1.5px solid var(--wr-yellow); box-shadow: 0 0 10px #FFD80066, inset 0 0 8px #FFD80033;
  opacity: 0; animation: thmLive 4.8s steps(1, end) infinite; }
.thm-cam:nth-child(1)::after { animation-delay: 0s; }
.thm-cam:nth-child(2)::after { animation-delay: 1.2s; }
.thm-cam:nth-child(4)::after { animation-delay: 2.4s; }
.thm-cam:nth-child(3)::after { animation-delay: 3.6s; }
@keyframes thmLive { 0%,17%{opacity:1} 24%,100%{opacity:0} }

/* RRM — review frame (corner brackets) + replay scrub line */
.thm-frame { position: relative; width: clamp(92px, 9vw, 116px); aspect-ratio: 4/3; }
.thm-c { position: absolute; width: 15px; height: 15px; }
.thm-c--tl { top:0; left:0; border-top:2px solid var(--wr-orange); border-left:2px solid var(--wr-orange); }
.thm-c--tr { top:0; right:0; border-top:2px solid var(--wr-orange); border-right:2px solid var(--wr-orange); }
.thm-c--bl { bottom:0; left:0; border-bottom:2px solid var(--wr-orange); border-left:2px solid var(--wr-orange); }
.thm-c--br { bottom:0; right:0; border-bottom:2px solid var(--wr-orange); border-right:2px solid var(--wr-orange); }
.thm-scan { position: absolute; left: 7px; right: 7px; height: 2px; top: 10%;
  background: linear-gradient(90deg, transparent, var(--wr-yellow), transparent);
  box-shadow: 0 0 10px #FFD80088; animation: thmScrub 3.4s ease-in-out infinite; }
@keyframes thmScrub { 0%{top:8%;opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{top:88%;opacity:0} }

/* Restream — signal fan-out (source → 3 destinations, travelling pulses) */
.thm-net { width: clamp(100px, 10vw, 124px); height: auto; overflow: visible; }
.thm-base line { stroke: var(--wr-white-16); stroke-width: 1.3; }
.thm-flow line { stroke: var(--wr-orange); stroke-width: 1.8; stroke-linecap: round;
  stroke-dasharray: 6 96; animation: thmFlow 2.3s linear infinite; }
.thm-flow line:nth-child(2) { animation-delay: 0.5s; }
.thm-flow line:nth-child(3) { animation-delay: 1s; }
@keyframes thmFlow { from { stroke-dashoffset: 96; } to { stroke-dashoffset: 0; } }
.thm-src { fill: #0c0806; stroke: var(--wr-yellow); stroke-width: 2; }
.thm-dst { fill: var(--wr-orange); }

@media (prefers-reduced-motion: reduce) {
  .thm-tag i, .thm-cam::after, .thm-scan, .thm-flow line { animation: none; }
  .thm-cam:nth-child(1)::after { opacity: 1; }   /* show one live cell at rest */
}

/* Phones: motif drops below the copy would crowd — hide on very narrow pills */
@media (max-width: 720px) {
  .th-os__cnt { padding-right: clamp(40px, 6vw, 80px); }
  .th-os__mark { display: none; }
}