/* ==========================================================================
   Section landings. Every main section opens with its own scene and the headline takes
   part in it: lit by a passing sun, split around a stack, typed into a console, drawn in
   dots. Each page places its text differently. Motion lives in js/heroes.js; with reduced
   motion each scene shows its final state.
   Type: Unbounded for headlines and big numbers, Syne for everything else, Fraunces
   italic for short accents. Text colours: ivory, gold, and the company blue and green.
   ========================================================================== */

.hx {
  --pool: radial-gradient(64% 66% at 50% 48%, rgba(4, 8, 18, 0.86), rgba(4, 8, 18, 0.52) 62%, rgba(4, 8, 18, 0.2));
  position: relative; isolation: isolate; display: flex; align-items: center;
  min-height: 100vh; min-height: 100svh; padding: calc(var(--header-h) + 36px) 0 56px; overflow: hidden;
}
/* A dark pool behind the text so the city never fights it. Each scene moves it to where its text sits. */
.hx::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--pool), linear-gradient(180deg, rgba(4, 8, 18, 0) 72%, rgba(4, 8, 18, 0.74));
}
.hx > .container { position: relative; }
:where(.hx) h1 { margin: 0; text-wrap: balance; }
.hx .eyebrow { margin-bottom: 18px; }
.hx-eyebrow-center { display: flex; justify-content: center; }
.hx-eyebrow-center::after { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.hx-eyebrow-right { display: flex; flex-direction: row-reverse; }

/* Big numbers in Unbounded, labels in Syne. */
.hx-facts { display: flex; flex-wrap: wrap; gap: 14px clamp(22px, 3vw, 40px); margin: 0; }
.hx-facts div { min-width: 0; }
.hx-facts dt { font: 600 0.68rem/1.3 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hx-facts dd { margin: 8px 0 0; font: 500 clamp(1.2rem, 1.7vw, 1.5rem)/1 var(--font-hero); letter-spacing: 0.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.hx-facts--lg dd { font-size: clamp(1.7rem, 3.4vw, 3rem); }
.hx-facts .is-gold { color: var(--gold-300); }

.hx [data-in] { opacity: 0; transform: translateY(16px); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.hx.is-in [data-in] { opacity: 1; transform: none; }
.no-js .hx [data-in] { opacity: 1; transform: none; }

/* Typed headlines: characters are split by js/heroes.js and revealed one by one. */
.hx .ch.is-hidden { visibility: hidden; }
.hx .is-caret::after {
  content: ""; display: inline-block; width: 0.08em; height: 0.9em; margin-left: 0.04em; vertical-align: -0.08em;
  background: var(--gold-300); animation: hx-blink 1s steps(1) infinite;
}
@keyframes hx-blink { 50% { opacity: 0; } }

@media (max-width: 900px) {
  .hx { min-height: 0; padding-top: calc(var(--header-h) + 28px); }
}

/* ============================================================== company: follow the sun
   Centred. The sun rises over Hyderabad (east, right), crosses the sky above the headline
   and sets over Tampa (west, left); the words light up as it passes. */
.hx--sun { text-align: center; --pool: radial-gradient(60% 58% at 50% 50%, rgba(4, 8, 18, 0.86), rgba(4, 8, 18, 0.5) 64%, rgba(4, 8, 18, 0.22)); }
.hx-sun { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hx-sun__sky { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hx-sun__arc { fill: none; stroke: rgba(230, 207, 152, 0.26); stroke-width: 1.2; stroke-dasharray: 2 8; }
.hx-sun__trail { fill: none; stroke: var(--gold-300); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.hx-sun__orb {
  position: absolute; left: 0; top: 0; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: radial-gradient(circle, #fff8e8 0 26%, #f2d99c 42%, rgba(215, 180, 108, 0.42) 58%, rgba(215, 180, 108, 0) 71%);
  box-shadow: 0 0 70px 22px rgba(215, 180, 108, 0.22); opacity: 0; transform: translate(-200px, -200px); will-change: transform, opacity;
}
.hx-sun__inner { position: relative; z-index: 1; display: grid; justify-items: center; }
.hx-sun__title { font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: 1.08; max-width: 16ch; margin: 0 0 28px; }
.hx-sun__title .w { transition: opacity 0.25s linear; }
.hx-sun__lead { max-width: 60ch; margin: 0 auto; }
.hx-sun__horizon {
  position: relative; width: 100%; margin-top: clamp(40px, 7vh, 72px); padding-top: 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 22px 28px;
  border-top: 1px solid rgba(230, 207, 152, 0.3);
}
.hx-sun__horizon .hx-facts { justify-content: center; }
.hx-sun__office { position: relative; margin: 0; display: grid; gap: 7px; justify-items: start; text-align: left; }
.hx-sun__office--east { justify-items: end; text-align: right; }
.hx-sun__pin {
  position: absolute; left: 0; top: -29px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink-850); border: 2px solid var(--blue-300); transition: background 0.5s, border-color 0.5s, box-shadow 0.5s;
}
.hx-sun__office--east .hx-sun__pin { left: auto; right: 0; }
.hx-sun__office.is-sun .hx-sun__pin { background: var(--gold-300); border-color: var(--gold-300); box-shadow: 0 0 0 6px rgba(230, 207, 152, 0.16); }
.hx-sun__office span { font: 600 0.7rem/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hx-sun__office b { font: 500 clamp(1.5rem, 2.4vw, 2rem)/1 var(--font-hero); color: var(--text); font-variant-numeric: tabular-nums; }
.hx-sun__office em { font: italic 400 1rem/1.2 var(--font-accent); color: var(--gold-300); }

@media (max-width: 760px) {
  .hx--sun { padding-top: calc(var(--header-h) + 104px); }
  .hx-sun__horizon { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hx-sun__horizon .hx-facts { grid-column: 1 / -1; order: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: center; padding-top: 18px; border-top: 1px solid var(--line); }
  .hx-sun__office--east { order: 2; }
}

/* ============================================================== services: Apps × services
   The headline splits around the stack of practices. A pulse climbs from cloud to AI and
   lands on the ×; the matching practice lights up in the legend. */
.hx--stack { --pool: radial-gradient(70% 62% at 50% 50%, rgba(4, 8, 18, 0.86), rgba(4, 8, 18, 0.48) 64%, rgba(4, 8, 18, 0.2)); }
.hx-split {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: clamp(16px, 2.6vw, 40px);
  grid-template-areas: "eyebrow eyebrow eyebrow" "left stack right" ". end ." "legend legend legend" "foot foot foot";
}
.hx-split__eyebrow { grid-area: eyebrow; }
.hx-split__word { margin: 0; font: 500 clamp(2.4rem, 4.7vw, 4.6rem)/1 var(--font-hero); letter-spacing: 0.005em; color: var(--text); }
.hx-split__word--l { grid-area: left; text-align: right; }
.hx-split__word--r { grid-area: right; text-align: left; }
.hx-split__end { grid-area: end; margin: 4px 0 0; text-align: center; font-size: clamp(1.6rem, 2.7vw, 2.5rem); line-height: 1.2; }
.hx.is-in .hx-split__word--l { animation: hx-from-left 1.2s var(--ease) both; }
.hx.is-in .hx-split__word--r { animation: hx-from-right 1.2s var(--ease) both; }
@keyframes hx-from-left { from { opacity: 0; transform: translateX(-48px); } }
@keyframes hx-from-right { from { opacity: 0; transform: translateX(48px); } }
html:not(.no-js) .hx:not(.is-in) .hx-split__word { opacity: 0; }

.hx-stack {
  --size: clamp(150px, 17vw, 250px); --gap: clamp(30px, 3.9vw, 50px);
  grid-area: stack; position: relative; width: calc(var(--size) * 1.48); height: calc(var(--size) * 0.74 + 4 * var(--gap) + 74px);
}
.hx-stack__x {
  position: absolute; left: 50%; top: 0; z-index: 5; transform: translateX(-50%);
  font: 300 clamp(2.6rem, 4.4vw, 4rem)/1 var(--font-hero); color: var(--gold-300); transition: color 0.4s, transform 0.5s var(--ease);
}
.hx-stack__x.is-lit { color: var(--text); transform: translateX(-50%) scale(1.18) rotate(90deg); }
.hx-stack__scene { position: absolute; inset: 0; }
.hx-stack__layer { position: absolute; left: 50%; bottom: calc(var(--size) * 0.37); width: 0; height: 0; text-decoration: none; }
.hx-stack__slab {
  position: absolute; left: calc(var(--size) / -2); top: calc(var(--size) / -2); width: var(--size); height: var(--size);
  transform-style: preserve-3d; transform: translateY(calc(var(--i) * var(--gap) * -1 - var(--lift, 0px))) rotateX(60deg) rotateZ(-42deg);
  transition: transform 0.6s var(--ease);
}
.hx-stack__slab i { position: absolute; display: block; }
.hx-stack__slab .top {
  inset: 0; border-radius: 10px; border: 1px solid rgba(127, 177, 239, 0.5);
  background: linear-gradient(135deg, rgba(0, 96, 200, 0.46), rgba(7, 14, 31, 0.9) 62%),
    repeating-linear-gradient(0deg, rgba(230, 207, 152, 0.07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(230, 207, 152, 0.07) 0 1px, transparent 1px 22px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 0 40px -12px rgba(0, 96, 200, 0.7);
  transition: background 0.45s, border-color 0.45s, box-shadow 0.45s;
}
.hx-stack__slab .front { left: 0; right: 0; bottom: 0; height: 12px; transform-origin: bottom; transform: rotateX(-90deg); background: linear-gradient(90deg, #0d4aa0, #082c66); border-radius: 0 0 6px 6px; }
.hx-stack__slab .side { top: 0; bottom: 0; right: 0; width: 12px; transform-origin: right; transform: rotateY(90deg); background: linear-gradient(180deg, #0a347a, #061a3e); border-radius: 0 6px 6px 0; }
.hx-stack__layer.is-hot { --lift: 14px; }
.hx-stack__layer.is-hot .top {
  border-color: var(--gold-300);
  background: linear-gradient(135deg, rgba(215, 180, 108, 0.44), rgba(7, 14, 31, 0.9) 62%),
    repeating-linear-gradient(0deg, rgba(230, 207, 152, 0.1) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(230, 207, 152, 0.1) 0 1px, transparent 1px 22px);
  box-shadow: 0 0 56px -8px rgba(215, 180, 108, 0.62);
}
/* The pulse passing through a layer lights it in the company green. */
.hx-stack__layer.is-pass:not(.is-hot) .top {
  border-color: var(--green-300);
  background: linear-gradient(135deg, rgba(122, 194, 27, 0.4), rgba(7, 14, 31, 0.9) 62%),
    repeating-linear-gradient(0deg, rgba(163, 214, 92, 0.1) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(163, 214, 92, 0.1) 0 1px, transparent 1px 22px);
  box-shadow: 0 0 56px -8px rgba(122, 194, 27, 0.6);
}
.hx-stack__pulse {
  position: absolute; left: 50%; bottom: calc(var(--size) * 0.37); width: var(--size); height: var(--size); margin: 0 0 calc(var(--size) / -2) calc(var(--size) / -2);
  pointer-events: none; border-radius: 10px; border: 2px solid #eaffcf; box-shadow: 0 0 22px rgba(122, 194, 27, 0.85), inset 0 0 22px rgba(122, 194, 27, 0.45);
  transform: translateY(calc(var(--p, 0) * var(--gap) * (var(--n, 5) - 1) * -1)) rotateX(60deg) rotateZ(-42deg); opacity: var(--o, 0);
}
.hx-stack__legend {
  grid-area: legend; list-style: none; margin: clamp(18px, 3vh, 30px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.hx-stack__legend a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-pill);
  font: 600 0.86rem/1.2 var(--font-display); color: var(--text-2); text-decoration: none;
  border: 1px solid var(--glass-border); background: rgba(8, 14, 31, 0.7); transition: color 0.35s, border-color 0.35s, background 0.35s;
}
.hx-stack__legend a span { color: var(--blue-300); font-variant-numeric: tabular-nums; }
.hx-stack__legend a:is(:hover, :focus-visible, .is-hot) { color: var(--text); border-color: rgba(230, 207, 152, 0.65); background: rgba(215, 180, 108, 0.12); }
.hx-stack__legend a:is(:hover, :focus-visible, .is-hot) span { color: var(--gold-300); }
.hx-stack__legend a.is-pass:not(.is-hot):not(:hover) { color: var(--text); border-color: rgba(122, 194, 27, 0.7); background: rgba(122, 194, 27, 0.12); }
.hx-stack__legend a.is-pass:not(.is-hot):not(:hover) span { color: var(--green-300); }
.hx-split__foot { grid-area: foot; display: grid; justify-items: center; gap: 22px; text-align: center; margin-top: clamp(20px, 3.4vh, 34px); }
.hx-split__foot .lead { max-width: 66ch; margin: 0; }

@media (max-width: 900px) {
  /* Phones: a diagonal. "Apps" top left, the stack, "services" bottom right. */
  .hx-split { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "left" "stack" "right" "end" "legend" "foot"; }
  .hx-split__word { font-size: clamp(2.4rem, 11vw, 4rem); }
  .hx-split__word--l { text-align: left; }
  .hx-split__word--r { text-align: right; margin-top: -10px; }
  .hx-stack { justify-self: center; margin-top: -12px; }
  .hx-split__end { text-align: right; }
}

/* ============================================================== products: the agents
   The agents orbit across the top. The title sits bottom left; the agent in front speaks
   its introduction bottom right. */
.hx--orbit { align-items: stretch; --pool: radial-gradient(80% 52% at 50% 82%, rgba(4, 8, 18, 0.9), rgba(4, 8, 18, 0.46) 70%, rgba(4, 8, 18, 0.12)); }
.hx-orbit__wrap { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 18px; min-height: calc(100svh - var(--header-h) - 92px); }
.hx-orbit { position: relative; min-height: clamp(250px, 40vh, 430px); }
.hx-orbit__ring { position: absolute; left: 7%; right: 7%; top: 20%; bottom: 14%; border-radius: 50%; border: 1px solid rgba(230, 207, 152, 0.16); }
.hx-orbit__agent { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 10px; text-decoration: none; will-change: transform; }
/* Orbiting items stay hidden until the script has placed them on their ring, then fade in. */
html:not(.no-js) :is(.hx-orbit, .hx-eco):not(.is-placed) :is(.hx-orbit__agent, .hx-eco__tile) { visibility: hidden; }
:is(.hx-orbit, .hx-eco).is-placed { animation: hx-fade-in 0.8s ease both; }
@keyframes hx-fade-in { from { opacity: 0; } }
.hx-orbit__orb {
  width: clamp(62px, 6.6vw, 94px); aspect-ratio: 1; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 36% 30%, #fff8ea 0, var(--c) 18%, color-mix(in srgb, var(--c) 52%, #050b18) 52%, #050b18 76%);
  box-shadow: 0 0 44px -6px var(--c), 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent) inset;
}
.hx-orbit__orb::after { content: ""; position: absolute; inset: -14%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); transform: rotateX(70deg) rotateZ(var(--spin, 0deg)); }
.hx-orbit__name { font: 700 0.72rem/1.15 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); text-align: center; max-width: 13ch; opacity: var(--label, 1); transition: opacity 0.3s; }
.hx-orbit__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(32px, 5vw, 80px); align-items: end; }
.hx-orbit__title { font-size: clamp(2.6rem, 6.2vw, 5.8rem); line-height: 1.04; }
.hx-orbit__title .hx-accent { font-size: 1.1em; }
.hx-orbit__speech { --c: var(--gold-300); padding-left: clamp(18px, 2vw, 28px); border-left: 2px solid var(--c); transition: border-color 0.5s; }
.hx-orbit__who { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 6px 10px; margin: 0 0 12px; font: 600 0.74rem/1.2 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hx-orbit__who i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); transition: background 0.5s; }
.hx-orbit__who b { color: var(--text); font-weight: 700; }
.hx-orbit__line { margin: 0 0 16px; min-height: 2.7em; font: italic 400 clamp(1.3rem, 2vw, 1.75rem)/1.35 var(--font-accent); color: var(--text); font-variation-settings: "opsz" 72, "SOFT" 50; }
.hx-orbit__lead { margin: 0 0 22px; color: var(--muted); max-width: 52ch; }

@media (max-width: 900px) {
  .hx-orbit__wrap { min-height: 0; }
  .hx-orbit { min-height: 250px; }
  .hx-orbit__foot { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================== industries: the hive
   Mirrored: the honeycomb on the left, the text right-aligned on the right. Each industry
   rises in turn and is stitched into the sentence. */
.hx--hive { --pool: radial-gradient(58% 72% at 74% 50%, rgba(4, 8, 18, 0.88), rgba(4, 8, 18, 0.5) 62%, rgba(4, 8, 18, 0.2)); }
.hx-hive__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.hx-hive__copy { display: grid; justify-items: end; text-align: right; }
.hx-hive__title { font-size: clamp(2.1rem, 3.9vw, 3.6rem); max-width: 17ch; margin: 0 0 26px; }
.hx-hive__tailor { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 0.6em; margin: 0 0 26px; min-height: 2.6em; }
.hx-hive__for { font: 600 0.76rem/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hx-hive__word { position: relative; display: inline-block; padding-bottom: 12px; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.15; }
.hx-hive__word b { display: inline-block; font-weight: 400; transition: opacity 0.3s, transform 0.4s var(--ease); }
.hx-hive__word b.is-out { opacity: 0; transform: translateY(-0.35em); }
.hx-hive__seam { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 8px; overflow: visible; clip-path: inset(0 0 0 100%); }
.hx-hive__seam.is-sewn { clip-path: inset(0); transition: clip-path 1.1s var(--ease) 0.1s; }
.hx-hive__seam path { fill: none; stroke: var(--gold-300); stroke-width: 2; stroke-dasharray: 7 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hx-hive__copy .lead { max-width: 50ch; margin: 0; }

.hx-hive { position: relative; aspect-ratio: 1 / 1; max-height: min(76vh, 640px); perspective: 1400px; }
.hx-hive__plane { position: absolute; inset: 6%; transform-style: preserve-3d; transform: rotateX(52deg) rotateZ(-8deg); }
.hx-hive__cell {
  --w: clamp(70px, 8.6vw, 118px); position: absolute; left: calc(50% + var(--x) * var(--w) * 1.05 - var(--w) / 2); top: calc(50% + var(--y) * var(--w) * 0.92 - var(--w) * 0.5775);
  width: var(--w); height: calc(var(--w) * 1.155); transform-style: preserve-3d; transform: translateZ(var(--z, 0px)); transition: transform 0.7s var(--ease);
  text-decoration: none; color: #9fb0cc;
}
.hx-hive__cell::before {
  content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, rgba(0, 96, 200, 0.62), rgba(7, 14, 31, 0.94)); transition: background 0.6s;
}
.hx-hive__cell::after {
  content: ""; position: absolute; inset: 2px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: rgba(6, 11, 25, 0.88); transition: background 0.6s;
}
.hx-hive__cell .icon { position: absolute; left: 50%; top: 50%; width: 38%; height: 38%; transform: translate(-50%, -50%); z-index: 1; transition: color 0.6s; }
.hx-hive__cell.is-core::before { background: linear-gradient(160deg, var(--blue-300), var(--blue-700)); }
.hx-hive__cell.is-core::after { background: radial-gradient(circle, rgba(0, 96, 200, 0.55), rgba(6, 11, 25, 0.94)); }
.hx-hive__cell.is-core .icon { color: #fff; }
.hx-hive__cell.is-on { --z: 34px; color: #fff8ea; }
.hx-hive__cell.is-on::before { background: linear-gradient(160deg, var(--green-300), var(--green-700)); }
.hx-hive__cell.is-on::after { background: radial-gradient(circle at 50% 40%, rgba(122, 194, 27, 0.36), rgba(6, 11, 25, 0.92) 70%); }
.hx-hive__cell:hover { --z: 22px; color: #fff; }

@media (max-width: 900px) {
  .hx-hive__grid { grid-template-columns: minmax(0, 1fr); }
  .hx-hive { max-width: 460px; width: 100%; justify-self: start; margin-left: -4%; }
  .hx-hive__copy { margin-top: -6%; }
}

/* ============================================================== partners: the ecosystem
   The headline sits in the middle; partner and client logos orbit it, passing behind the
   words at the back of the ring and in front at the bottom. */
.hx--eco { text-align: center; --pool: radial-gradient(46% 48% at 50% 46%, rgba(4, 8, 18, 0.92), rgba(4, 8, 18, 0.56) 62%, rgba(4, 8, 18, 0.22)); }
.hx-eco__wrap { display: grid; justify-items: center; gap: clamp(10px, 2vh, 22px); }
.hx-eco { position: relative; width: 100%; height: clamp(380px, 54vh, 600px); }
.hx-eco__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hx-eco__svg ellipse { fill: none; stroke: rgba(230, 207, 152, 0.18); stroke-dasharray: 2 7; }
.hx-eco__center { position: absolute; left: 50%; top: 50%; z-index: 50; width: min(60%, 780px); transform: translate(-50%, -50%); }
.hx-eco__title { font-size: clamp(1.75rem, 4.2vw, 3.8rem); }
.hx-eco__tile {
  position: absolute; left: 0; top: 0; width: clamp(66px, 7.2vw, 100px); height: clamp(38px, 4vw, 52px); display: grid; place-items: center; padding: 7px 10px;
  border-radius: 12px; background: #fbf7ef; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.9); will-change: transform, opacity;
}
.hx-eco__tile img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.hx-eco__foot { display: grid; justify-items: center; gap: 18px; max-width: 760px; }
.hx-eco__foot .lead { margin: 0; }
.hx-eco__foot .hx-facts { justify-content: center; }

@media (max-width: 760px) {
  .hx-eco { height: 500px; }
  .hx-eco__center { width: 74%; }
}

/* ============================================================== insights: the feed
   The opening is a newsroom console. The headline is typed into it, then the latest
   articles print underneath. */
.hx--feed { --pool: radial-gradient(60% 60% at 50% 46%, rgba(4, 8, 18, 0.84), rgba(4, 8, 18, 0.46) 64%, rgba(4, 8, 18, 0.16)); }
.hx-feed__wrap { display: grid; justify-items: center; gap: 26px; }
.hx-console {
  width: min(100%, 1020px); border-radius: 22px; border: 1px solid var(--glass-border); overflow: hidden;
  background: linear-gradient(180deg, rgba(9, 17, 37, 0.95), rgba(5, 10, 21, 0.97));
  box-shadow: var(--glass-shine), 0 40px 90px -40px rgba(0, 0, 0, 0.95), 0 0 90px -46px rgba(0, 96, 200, 0.8);
}
.hx-console__bar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.hx-console__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(127, 177, 239, 0.28); }
.hx-console__bar span { margin-left: 8px; font: 600 0.72rem/1 var(--font-display); letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.hx-console__bar .hx-status { margin-left: auto; }
.hx-console__body { padding: clamp(22px, 3.4vw, 44px) clamp(20px, 3.4vw, 44px) clamp(18px, 2.6vw, 30px); display: grid; gap: 2px; }
.hx-console__cmd { margin: 0 0 12px; font: 500 0.92rem/1.5 var(--font-display); letter-spacing: 0.02em; color: var(--muted); }
.hx-console__cmd b { color: var(--green-500); font-weight: 700; margin-right: 4px; }
.hx-feed__title { font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1.06; max-width: 15ch; margin: 0 0 30px; }
.hx-feedline {
  display: grid; grid-template-columns: 11rem 7.5rem minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 11px 12px; margin: 0 -12px;
  border-radius: 12px; border-top: 1px solid rgba(234, 214, 166, 0.08); text-decoration: none; color: var(--text); transition: background 0.25s;
}
.hx-feedline:hover { background: rgba(127, 177, 239, 0.08); color: #fff; }
.hx-feedline .cat { font: 600 0.72rem/1.4 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-300); }
.hx-feedline time { font: 500 0.86rem/1.4 var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.hx-feedline .title { font: 500 1rem/1.45 var(--font-body); }
.hx-status { display: inline-flex; align-items: center; gap: 8px; font: 600 0.72rem/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-300); }
.hx-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); animation: hx-breathe 1.6s ease-in-out infinite; }
@keyframes hx-breathe { 50% { opacity: 0.3; } }
.hx-cursor { display: inline-block; width: 0.55em; height: 1.05em; background: var(--gold-300); vertical-align: -0.2em; animation: hx-blink 1s steps(1) infinite; }
html:not(.no-js) .hx--feed:not(.is-done) .hx-cursor { display: none; }
.hx-feed__foot { width: min(100%, 1020px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.hx-feed__foot .lead { margin: 0; max-width: 48ch; }
/* Hidden until the console types them (js/heroes.js adds is-on). */
html:not(.no-js) .hx--feed:not(.is-done) :is([data-feed-show], .hx-feedline, .hx-console__cmd):not(.is-on) { opacity: 0; }
html:not(.no-js) .hx--feed:not(.is-done) [data-feed-title]:not(.is-split) { visibility: hidden; }
.hx--feed :is([data-feed-show], .hx-feedline, .hx-console__cmd).is-on { opacity: 1; transition: opacity 0.35s, background 0.25s; }

@media (max-width: 760px) {
  .hx-feedline { grid-template-columns: auto minmax(0, 1fr); }
  .hx-feedline .title { grid-column: 1 / -1; }
  .hx-feedline time { text-align: right; }
}

/* ============================================================== careers: the team
   The headline is drawn in dots, one for each person, and the dots scatter around the
   pointer. The real heading stays in the page for search and screen readers. */
.hx--team { --pool: radial-gradient(70% 60% at 50% 44%, rgba(4, 8, 18, 0.88), rgba(4, 8, 18, 0.5) 64%, rgba(4, 8, 18, 0.2)); }
.hx-team__canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.hx-team__inner { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; }
.hx-team__title { font-size: clamp(2.6rem, 7.4vw, 7.2rem); font-weight: 600; line-height: 1.04; max-width: 12ch; margin: 0 0 clamp(30px, 6vh, 64px); }
.hx-team__title .hx-accent { font-weight: 640; }
.hx--team.is-dots .hx-team__title, .hx--team.is-dots .hx-team__title .hx-accent { color: transparent; }
html:not(.no-js) .hx--team:not(.is-dots):not(.is-static) .hx-team__title { opacity: 0; }
.hx-team__foot { display: grid; grid-template-columns: auto minmax(0, 54ch); gap: 26px clamp(32px, 5vw, 72px); align-items: center; text-align: left; }
.hx-team__foot .lead { margin: 0 0 20px; }

@media (max-width: 900px) {
  .hx-team__foot { grid-template-columns: minmax(0, 1fr); }
  .hx-team__foot .hx-facts { justify-content: space-between; }
}

/* ============================================================== contact: the conversation
   "Let's talk." is typed as your message on the right; QuadricIT's reply arrives on the
   left. The offices show their local time. */
.hx--chat { --pool: radial-gradient(72% 70% at 56% 46%, rgba(4, 8, 18, 0.86), rgba(4, 8, 18, 0.48) 64%, rgba(4, 8, 18, 0.18)); }
.hx-chat { display: grid; gap: clamp(16px, 2.6vh, 26px); }
.hx-chat > .eyebrow { justify-self: end; flex-direction: row-reverse; margin-bottom: 0; }
.hx-chat__row { display: flex; align-items: flex-end; gap: 14px; flex-direction: row-reverse; }
.hx-chat__row--us { justify-content: flex-end; }
.hx-chat__bubble { position: relative; min-width: 0; padding: clamp(18px, 2.4vw, 30px) clamp(22px, 3.2vw, 44px); border-radius: 36px; }
.hx-chat__bubble--you { background: linear-gradient(160deg, rgba(0, 96, 200, 0.58), rgba(12, 30, 66, 0.72)); border: 1px solid rgba(127, 177, 239, 0.42); border-bottom-right-radius: 10px; }
.hx-chat__bubble--us { max-width: 50ch; background: rgba(8, 14, 31, 0.9); border: 1px solid var(--glass-border); border-bottom-left-radius: 10px; }
.hx-chat__title { font-size: clamp(2.6rem, 9.4vw, 8.6rem); font-weight: 600; line-height: 1.02; letter-spacing: 0; }
.hx-chat__reply { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--text-2); }
.hx-chat__reply .hx-accent { font-size: 1.35em; margin-right: 0.2em; }
.hx-chat__avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font: 700 0.7rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blue-300); background: rgba(0, 96, 200, 0.2); border: 1px solid rgba(127, 177, 239, 0.4);
}
.hx-chat__avatar--us { background: #fbf7ef; border-color: transparent; padding: 7px; }
.hx-chat__avatar--us img { width: 100%; height: 100%; object-fit: contain; }
/* Typing dots sit over the bubble, which keeps its final size, so nothing below it moves. */
.hx-chat__dots { position: absolute; left: clamp(22px, 3.2vw, 44px); top: 50%; transform: translateY(-50%); display: none; gap: 7px; align-items: center; }
.hx-chat__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--blue-300); animation: hx-dot 1.1s ease-in-out infinite; }
.hx-chat__dots i:nth-child(2) { animation-delay: 0.15s; }
.hx-chat__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hx-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-6px); opacity: 1; } }
html:not(.no-js) .hx-chat__bubble.is-typing .hx-chat__dots { display: inline-flex; }
html:not(.no-js) .hx-chat__bubble.is-typing > :not(.hx-chat__dots) { visibility: hidden; }
html:not(.no-js) .hx--chat:not(.is-done) .hx-chat__row--us:not(.is-on) { opacity: 0; transform: translateY(14px); }
html:not(.no-js) .hx--chat:not(.is-done) [data-chat-title]:not(.is-split) { visibility: hidden; }
.hx-chat__row--us { transition: opacity 0.5s, transform 0.6s var(--ease); }
.hx-chat__reply .w { transition: opacity 0.4s; }
.hx-chat__reply .w.is-hidden { opacity: 0; }
.hx-chat__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; margin-top: clamp(10px, 3vh, 34px); }
.hx-chat__offices { display: flex; gap: clamp(22px, 3vw, 44px); }
.hx-chat__offices p { margin: 0; display: grid; gap: 6px; }
.hx-chat__offices span { font: 600 0.7rem/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hx-chat__offices b { font: 500 clamp(1.3rem, 2vw, 1.7rem)/1 var(--font-hero); color: var(--text); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .hx-chat__avatar { width: 36px; height: 36px; font-size: 0.6rem; }
  .hx-chat__bubble { border-radius: 26px; }
}

/* ============================================================== service pages: the drawing sheet
   Every service page opens on the same blueprint. The name is plotted in the middle (outline
   first, then inked by a pen sweep), the page's highlights are numbered callouts with leader
   lines to the letters, and a title block closes the sheet. Blueprint lines in the company
   blue, callout numbers in gold, the stamp in the company green. */
.hx--sheet { align-items: stretch; padding: calc(var(--header-h) + 22px) 0 34px; --pool: radial-gradient(72% 70% at 50% 46%, rgba(4, 8, 18, 0.86), rgba(4, 8, 18, 0.6) 64%, rgba(4, 8, 18, 0.32)); }
.hx-sheet__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 96, 200, 0.2) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, rgba(0, 96, 200, 0.2) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(0, 96, 200, 0.08) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(0, 96, 200, 0.08) 0 1px, transparent 1px 24px);
  -webkit-mask-image: radial-gradient(80% 85% at 50% 50%, #000 35%, transparent 100%);
  mask-image: radial-gradient(80% 85% at 50% 50%, #000 35%, transparent 100%);
}
.hx--sheet .container { display: flex; }
.hx-sheet {
  position: relative; flex: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: calc(100svh - var(--header-h) - 56px); padding: 12px clamp(16px, 2.4vw, 30px) 16px;
  border: 1px solid rgba(127, 177, 239, 0.3); background: rgba(4, 9, 20, 0.34);
}
.hx-sheet__corner { position: absolute; width: 18px; height: 18px; border: 2px solid var(--blue-300); pointer-events: none; }
.hx-sheet__corner.tl { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.hx-sheet__corner.tr { right: -2px; top: -2px; border-left: 0; border-bottom: 0; }
.hx-sheet__corner.bl { left: -2px; bottom: -2px; border-right: 0; border-top: 0; }
.hx-sheet__corner.br { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.hx-sheet__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-bottom: 12px; border-bottom: 1px solid rgba(127, 177, 239, 0.2); }
.hx-sheet__head nav { flex: 1 1 320px; min-width: 0; }
.hx-sheet__path { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font: 600 0.7rem/1.4 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hx-sheet__path li + li::before { content: "/"; margin-right: 8px; color: rgba(127, 177, 239, 0.6); }
.hx-sheet__path a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.hx-sheet__path a:hover { color: var(--text); }
.hx-sheet__path [aria-current] { color: var(--blue-300); }
.hx-sheet__no { margin: 0; font: 600 0.7rem/1.4 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-300); font-variant-numeric: tabular-nums; }

.hx-sheet__drawing {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr) minmax(0, 1fr);
  align-content: center; align-items: center; gap: clamp(18px, 3.4vh, 34px) clamp(18px, 3vw, 48px); padding: clamp(26px, 5vh, 60px) 0;
}
.hx-sheet__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hx-sheet__leader { fill: none; stroke: rgba(127, 177, 239, 0.75); stroke-width: 1.2; transition: stroke 0.25s, stroke-width 0.25s; }
.hx-sheet__target { fill: var(--blue-300); transition: fill 0.25s, r 0.25s; }
.hx-sheet__leader.is-hot { stroke: var(--gold-300); stroke-width: 1.8; }
.hx-sheet__target.is-hot { fill: var(--gold-300); r: 4.5; }
.hx-sheet__centre { grid-column: 2; grid-row: 1 / span 3; display: grid; justify-items: center; text-align: center; position: relative; z-index: 1; }
.hx-sheet__title {
  position: relative; font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: 1.1; max-width: 15ch; margin: 0 0 20px;
  color: transparent; -webkit-text-stroke: 1.2px rgba(127, 177, 239, 0.95);
}
.hx-sheet__ink { position: absolute; inset: 0; color: var(--text); -webkit-text-stroke: 0; clip-path: inset(-0.2em calc(100% - var(--plot, 1) * 100%) -0.3em -0.1em); }
.hx-sheet__pen { position: absolute; top: -12px; bottom: -12px; left: calc(var(--plot, 1) * 100%); width: 2px; margin-left: -1px; background: var(--green-500); opacity: var(--pen, 0); }
.hx-sheet__pen::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; border: 2px solid var(--green-500); }
html:not(.no-js) .hx--sheet:not(.is-drawn) .hx-sheet__ink { clip-path: inset(0 100% 0 0); }
.hx-sheet__note { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; max-width: 48ch; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.3; }
.hx-sheet__note > span:first-child { font: 600 0.68rem/1 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

.hx-sheet__callouts { display: contents; list-style: none; }
.hx-sheet__callouts li { grid-column: 1; justify-self: end; max-width: 25ch; position: relative; z-index: 1; }
.hx-sheet__callouts li:nth-child(even) { grid-column: 3; justify-self: start; }
.hx-sheet__callouts a {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-2);
  font: 600 0.92rem/1.35 var(--font-display); transition: color 0.25s, opacity 0.5s, transform 0.6s var(--ease);
}
.hx-sheet__callouts li:nth-child(odd) a { flex-direction: row-reverse; text-align: right; }
.hx-sheet__callouts b {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--gold-300); color: var(--gold-300); background: rgba(4, 9, 20, 0.85);
  font: 500 0.82rem/1 var(--font-hero); transition: background 0.25s, color 0.25s;
}
.hx-sheet__callouts a:is(:hover, :focus-visible, .is-hot) { color: var(--text); }
.hx-sheet__callouts a:is(:hover, :focus-visible, .is-hot) b { background: var(--gold-300); color: #1a1206; }
html:not(.no-js) .hx--sheet:not(.is-drawn) .hx-sheet__callouts a { opacity: 0; }
html:not(.no-js) .hx--sheet .hx-sheet__callouts a:not(.is-on) { opacity: 0; transform: translateY(6px); }
.hx--sheet.is-done .hx-sheet__callouts a { opacity: 1; transform: none; }

.hx-sheet__block { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 32px; padding-top: 14px; border-top: 1px solid rgba(127, 177, 239, 0.2); }
.hx-sheet__cells { display: flex; flex-wrap: wrap; margin: 0; border: 1px solid rgba(127, 177, 239, 0.24); width: fit-content; max-width: 100%; }
.hx-sheet__cells > div { padding: 9px 16px 10px; border-right: 1px solid rgba(127, 177, 239, 0.24); min-width: 0; }
.hx-sheet__cells > div:last-child { border-right: 0; }
.hx-sheet__cells dt { font: 600 0.62rem/1.2 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hx-sheet__cells dd { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; font: 600 0.92rem/1.2 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.hx-sheet__layers { display: inline-flex; flex-direction: column-reverse; gap: 2px; }
.hx-sheet__layers i { display: block; width: 18px; height: 3px; border-radius: 1px; background: rgba(127, 177, 239, 0.35); }
.hx-sheet__layers i.is-on { background: var(--green-500); }
.hx-sheet__meta { display: flex; align-items: center; gap: 14px; }
.hx-sheet__platform { height: 26px; width: auto; max-width: 130px; object-fit: contain; padding: 3px 8px; border-radius: 5px; background: #fbf7ef; }
.hx-sheet__stamp {
  position: absolute; right: clamp(4px, 2vw, 24px); top: -78px; margin: 0; display: grid; justify-items: center; gap: 2px;
  padding: 8px 16px; border: 2px solid var(--green-500); border-radius: 8px; color: var(--green-300);
  box-shadow: inset 0 0 0 3px rgba(4, 9, 20, 0.9), inset 0 0 0 4px rgba(122, 194, 27, 0.6);
  transform: rotate(-9deg); pointer-events: none;
}
.hx-sheet__stamp span { font: 600 0.58rem/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; }
.hx-sheet__stamp b { font: 600 1.05rem/1 var(--font-hero); letter-spacing: 0.04em; }
html:not(.no-js) .hx--sheet:not(.is-done) .hx-sheet__stamp { opacity: 0; transform: rotate(-9deg) scale(1.5); }
.hx--sheet.is-done .hx-sheet__stamp { transition: opacity 0.25s, transform 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }

/* The pointer's crosshair and coordinates (pointer devices only). */
.hx-sheet__cross { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.hx-sheet__cross.is-on { opacity: 1; }
.hx-sheet__cross i { position: absolute; background: rgba(127, 177, 239, 0.28); }
.hx-sheet__cross .h { left: 0; right: 0; top: 0; height: 1px; transform: translateY(var(--cy, -10px)); }
.hx-sheet__cross .v { top: 0; bottom: 0; left: 0; width: 1px; transform: translateX(var(--cx, -10px)); }
.hx-sheet__cross span { position: absolute; left: 0; top: 0; transform: translate(calc(var(--cx, 0px) + 12px), calc(var(--cy, 0px) + 10px)); font: 600 0.62rem/1 var(--font-display); letter-spacing: 0.14em; color: var(--blue-300); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 900px) {
  .hx--sheet { padding-top: calc(var(--header-h) + 16px); }
  .hx-sheet { min-height: 0; }
  .hx-sheet__drawing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 26px 0; }
  .hx-sheet__centre { grid-column: 1 / -1; grid-row: 1; }
  .hx-sheet__callouts li, .hx-sheet__callouts li:nth-child(even) { grid-column: auto; justify-self: stretch; max-width: none; }
  .hx-sheet__callouts li:nth-child(odd) a { flex-direction: row; text-align: left; }
  .hx-sheet__callouts a { font-size: 0.84rem; gap: 10px; }
  .hx-sheet__callouts b { width: 28px; height: 28px; font-size: 0.74rem; }
  .hx-sheet__block { grid-template-columns: minmax(0, 1fr); }
  .hx-sheet__stamp { position: static; justify-self: end; margin-top: 4px; transform: rotate(-6deg); }
  html:not(.no-js) .hx--sheet:not(.is-done) .hx-sheet__stamp { transform: rotate(-6deg) scale(1.5); }
}

/* ============================================================== industries: the deck
   After the honeycomb, the industries form a deck. On wide screens it pins under the
   navigation and scrolling slides sideways through it, one industry per panel, each with its
   own animated line drawing; the honeycomb map, counter and progress line follow along.
   Phones and reduced motion show the same panels one under another. */
.ind-deck { position: relative; background: linear-gradient(180deg, rgba(4, 8, 18, 0.84), rgba(4, 8, 18, 0.76)); border-top: 1px solid var(--line); }
.ind-deck__hud { display: flex; align-items: center; gap: 18px 28px; padding-top: 16px; padding-bottom: 16px; }
.ind-deck__count { margin: 0; display: flex; align-items: baseline; gap: 8px; font-family: var(--font-hero); }
.ind-deck__count b { font-weight: 500; font-size: 1.7rem; color: var(--text); font-variant-numeric: tabular-nums; }
.ind-deck__count span { font-size: 0.86rem; color: var(--muted); }
.ind-deck__map { position: relative; width: 74px; height: 50px; flex: none; }
.ind-deck__cell {
  position: absolute; left: calc(50% + var(--x, 0) * 17px - 7px); top: calc(50% + var(--y, 0) * 15px - 8px); width: 14px; height: 16px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: rgba(127, 177, 239, 0.28); transition: background 0.3s, transform 0.3s;
}
.ind-deck__cell.is-core { background: var(--blue-500); }
.ind-deck__cell:hover { background: rgba(127, 177, 239, 0.6); }
.ind-deck__cell.is-active { background: var(--green-500); transform: scale(1.18); }
.ind-deck__name { margin: 0; flex: 1; min-width: 0; font: 600 0.78rem/1.3 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-deck__arrows { display: flex; gap: 8px; }
.ind-deck__arrows button {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  color: var(--text); background: rgba(8, 14, 31, 0.8); border: 1px solid var(--glass-border); transition: background 0.25s, border-color 0.25s, opacity 0.25s;
}
.ind-deck__arrows button:first-child .icon { transform: rotate(180deg); }
.ind-deck__arrows button:hover { border-color: rgba(122, 194, 27, 0.7); background: rgba(122, 194, 27, 0.14); }
.ind-deck__arrows button:disabled { opacity: 0.35; cursor: default; }
.ind-deck__progress { height: 3px; background: rgba(127, 177, 239, 0.14); }
.ind-deck__progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-500), var(--green-500)); transform-origin: left; transform: scaleX(var(--p, 0)); }

.ind-panel { padding: clamp(40px, 7vh, 80px) 0; }
.ind-panel + .ind-panel { border-top: 1px solid var(--line); }
.ind-panel__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.ind-panel--flip .ind-panel__art { order: 2; }
.ind-panel__art { position: relative; isolation: isolate; }
.ind-panel__no { position: absolute; left: -2%; top: -14%; z-index: -1; font: 600 clamp(6rem, 13vw, 12rem)/1 var(--font-hero); color: transparent; -webkit-text-stroke: 1.5px rgba(127, 177, 239, 0.2); pointer-events: none; }
.ind-panel--flip .ind-panel__no { left: auto; right: -2%; }
.ind-panel__kicker { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; font: 600 0.74rem/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-300); }
.ind-panel__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--green-300); background: rgba(122, 194, 27, 0.12); border: 1px solid rgba(122, 194, 27, 0.35); }
.ind-panel__title { margin: 0 0 14px; font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 600; line-height: 1.12; }
.ind-panel__lead { margin: 0 0 22px; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.6; color: var(--muted); max-width: 56ch; }
.ind-panel__label { margin: 0 0 10px; font: 600 0.7rem/1.2 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-300); }
.ind-panel__list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.ind-panel__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; color: var(--text-2); font-size: 0.95rem; line-height: 1.45; }
.ind-panel__list .icon { color: var(--green-500); margin-top: 2px; }
.ind-panel__chips { margin: 0; }

@media (min-width: 901px) {
  /* Pinned deck (js/heroes.js adds is-pinned and sizes it). */
  .ind-deck.is-pinned { height: var(--deck-h, auto); }
  .ind-deck.is-pinned .ind-deck__pin { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; overflow: clip; }
  .ind-deck.is-pinned .ind-deck__viewport { overflow: clip; min-height: 0; }
  .ind-deck.is-pinned .ind-deck__track { display: flex; height: 100%; width: max-content; will-change: transform; }
  .ind-deck.is-pinned .ind-panel { flex: none; width: var(--panel-w, 100vw); height: 100%; display: flex; align-items: center; padding: 0; border: 0; }
  .ind-deck.is-pinned .ind-panel__art .vg { max-height: min(58vh, 520px); }
}
.ind-deck:not(.is-pinned) .ind-deck__hud { display: none; }
.ind-deck:not(.is-pinned) .ind-deck__progress { display: none; }
@media (max-width: 900px) {
  .ind-panel__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ind-panel--flip .ind-panel__art { order: 0; }
  .ind-panel__art { max-width: 440px; }
}

/* The drawings: line art in the company blue, with green and gold accents. Each one moves only
   while its panel is the active one. */
.vg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: var(--blue-300); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vg .soft { stroke: rgba(127, 177, 239, 0.32); stroke-width: 1.6; }
.vg .g { stroke: var(--green-500); }
.vg .au { stroke: var(--gold-300); }
.vg .fg { fill: var(--green-500); stroke: none; }
.vg .fb { fill: var(--blue-300); stroke: none; }
.vg .ink { fill: rgba(5, 10, 21, 0.94); }
.vg :is(.vg-dna-a, .vg-dna-b, .vg-rung, .vg-bubble, .vg-spin, .vg-spin-rev, .vg-belt, .vg-beat, .vg-drop, .vg-scan, .vg-ping, .vg-candle, .vg-flag, .vg-page, .vg-tassel, .vg-eq, .vg-signal, .vg-progress) { transform-box: fill-box; transform-origin: center; }
.vg-dna-a { animation: vg-dna-a 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.27s); }
.vg-dna-b { animation: vg-dna-b 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.27s); }
.vg-rung { animation: vg-rung 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.27s); }
@keyframes vg-dna-a { 0%, 100% { transform: translateX(-46px); } 50% { transform: translateX(46px); } }
@keyframes vg-dna-b { 0%, 100% { transform: translateX(46px); } 50% { transform: translateX(-46px); } }
@keyframes vg-rung { 0%, 50%, 100% { transform: scaleX(1); } 25%, 75% { transform: scaleX(0.06); } }
.vg-bubble { animation: vg-bubble 2.4s ease-in infinite; animation-delay: calc(var(--i) * 0.8s); }
@keyframes vg-bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-56px); opacity: 0; } }
.vg-spin { animation: vg-spin 16s linear infinite; }
.vg-spin-rev { animation: vg-spin 10.7s linear infinite reverse; }
@keyframes vg-spin { to { transform: rotate(360deg); } }
.vg-belt { animation: vg-belt 3.6s linear infinite; animation-delay: calc(var(--i) * -1.2s); }
@keyframes vg-belt { 0% { transform: translateX(0); opacity: 0; } 10%, 85% { opacity: 1; } 100% { transform: translateX(270px); opacity: 0; } }
.vg-ecg { stroke-dasharray: 480; animation: vg-ecg 2.8s linear infinite; }
@keyframes vg-ecg { 0% { stroke-dashoffset: 480; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -480; } }
.vg-beat { animation: vg-beat 1.1s ease-in-out infinite; }
@keyframes vg-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }
.vg-drop { animation: vg-drop 3.6s cubic-bezier(0.5, 0, 0.6, 1) infinite; animation-delay: calc(var(--i) * 0.5s); }
@keyframes vg-drop { 0% { transform: translateY(-80px); opacity: 0; } 20% { opacity: 1; } 40%, 80% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
.vg-scan { animation: vg-scan 1.8s ease-in-out infinite alternate; }
@keyframes vg-scan { from { transform: translateY(0); } to { transform: translateY(80px); } }
.vg-flow { stroke-dasharray: 6 16; animation: vg-flow 1.2s linear infinite; }
@keyframes vg-flow { to { stroke-dashoffset: -22; } }
.vg-ping { animation: vg-ping 2.4s ease-out infinite; animation-delay: calc(var(--i, 0) * 1.2s); }
@keyframes vg-ping { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.vg-candle { transform-origin: center bottom; animation: vg-candle 5s var(--ease) infinite; animation-delay: calc(var(--i) * 0.12s); }
@keyframes vg-candle { 0% { transform: scaleY(0); opacity: 0; } 18%, 86% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.vg-trend { stroke-dasharray: 340; animation: vg-trend 5s var(--ease) infinite; }
@keyframes vg-trend { 0%, 15% { stroke-dashoffset: 340; } 50%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.vg-tick { stroke-dasharray: 30; animation: vg-tick 3s ease-out infinite; }
@keyframes vg-tick { 0%, 25% { stroke-dashoffset: 30; } 45%, 100% { stroke-dashoffset: 0; } }
.vg-flag { transform-origin: left center; animation: vg-flag 1.6s ease-in-out infinite alternate; }
@keyframes vg-flag { from { transform: skewY(-6deg) scaleX(0.92); } to { transform: skewY(5deg) scaleX(1); } }
.vg-page { transform-origin: left center; animation: vg-page 4s ease-in-out infinite; }
@keyframes vg-page { 0%, 15% { transform: scaleX(1); opacity: 1; } 55% { transform: scaleX(-1); opacity: 1; } 70%, 100% { transform: scaleX(-1); opacity: 0; } }
.vg-tassel { transform-origin: center top; animation: vg-tassel 2.6s ease-in-out infinite alternate; }
@keyframes vg-tassel { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.vg-progress { transform-origin: left center; animation: vg-progress 6s linear infinite; }
@keyframes vg-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vg-eq { transform-origin: center bottom; animation: vg-eq 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.17s); }
@keyframes vg-eq { 0% { transform: scaleY(0.25); } 100% { transform: scaleY(1.35); } }
.vg-signal { animation: vg-signal 2.1s ease-out infinite; animation-delay: calc(var(--i) * 0.35s); }
@keyframes vg-signal { 0% { opacity: 0; } 25% { opacity: 1; } 70%, 100% { opacity: 0; } }
.ind-panel:not(.is-active) .vg * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hx-status::before, .hx-cursor, .hx .is-caret::after, .hx-chat__dots i { animation: none; }
  .hx--sheet .hx-sheet__callouts a, .hx--sheet .hx-sheet__stamp { transition: none; }
  /* Drawings hold still on a well-composed frame instead of moving. */
  .vg * { animation-play-state: paused !important; }
  .vg .vg-bubble { animation-delay: calc(var(--i) * -0.6s - 0.8s); }
  .vg .vg-drop { animation-delay: calc(-1.8s - var(--i) * 0.1s); }
  .vg .vg-candle { animation-delay: -2.5s; }
  .vg .vg-trend { animation-delay: -3.5s; }
  .vg .vg-tick { animation-delay: -2s; }
  .vg .vg-signal { animation-delay: calc(var(--i) * -0.2s - 0.6s); }
  .vg .vg-ecg { animation-delay: -1.6s; }
  .vg .vg-progress { animation-delay: -3.6s; }
  .vg .vg-belt { animation-delay: calc(var(--i) * -1.2s - 0.6s); }
  .hx.is-in .hx-split__word--l, .hx.is-in .hx-split__word--r { animation: none; }
}