/* TAMAX sections: hero, page headers, product visuals, finder, tables, prose. */

/* ============================================================
   Hero
   ============================================================ */

.tx-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(86% 66% at 76% 14%, rgba(11, 123, 208, 0.42) 0%, rgba(11, 123, 208, 0) 62%),
    radial-gradient(66% 58% at 10% 94%, rgba(86, 217, 249, 0.2) 0%, rgba(86, 217, 249, 0) 60%),
    linear-gradient(155deg, var(--tx-navy) 0%, var(--tx-midnight) 100%);
  color: var(--tx-on-dark);
  padding-block: clamp(3rem, 2rem + 6vw, 7rem) clamp(3.5rem, 2rem + 6vw, 7rem);
}

/* Layer 1: the measured grid. It is what makes the section read Swiss rather
   than merely dark. */
.tx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(41, 184, 238, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 184, 238, 0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(115% 95% at 50% 8%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(115% 95% at 50% 8%, #000 0%, transparent 78%);
  pointer-events: none;
}

/* Layer 2: a slow colour drift. Two very large, very soft blobs, moved by
   transform only so the compositor can own them. */
.tx-hero__aurora {
  position: absolute;
  inset: -25%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 22% 30%, rgba(41, 184, 238, 0.16) 0%, transparent 70%),
    radial-gradient(34% 38% at 78% 68%, rgba(86, 217, 249, 0.13) 0%, transparent 70%);
  filter: blur(12px);
  animation: tx-aurora 26s var(--tx-ease) infinite alternate;
  will-change: transform;
}

@keyframes tx-aurora {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  50% {
    transform: translate3d(2%, 2%, 0) scale(1.06);
  }
  100% {
    transform: translate3d(-1%, 2%, 0) scale(1.02);
  }
}

/* Layer 3: the live node field. Decorative, and the only thing on the page
   that paints continuously. */
.tx-hero__net {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms var(--tx-ease);
}

.js .tx-hero__net {
  opacity: 1;
}

.tx-hero > .tx-container {
  position: relative;
  z-index: 3;
}

.tx-hero h1,
.tx-hero h2 {
  color: var(--tx-white);
}

.tx-hero p {
  color: var(--tx-on-dark-muted);
}

.tx-hero__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  align-items: center;
}

@media (min-width: 62em) {
  .tx-hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }
}

/* A soft scrim under the copy. The node field is deliberately busy, and this
   is what keeps the headline and the lead reading cleanly on top of it
   without dimming the animation everywhere else. */
.tx-hero__copy {
  position: relative;
  isolation: isolate;
}

.tx-hero__copy::before {
  content: "";
  position: absolute;
  inset: -10% -14%;
  z-index: -1;
  background: radial-gradient(65% 58% at 32% 48%, rgba(4, 16, 31, 0.62) 0%, rgba(4, 16, 31, 0) 72%);
  pointer-events: none;
}

.tx-hero__eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 var(--tx-4);
  padding: 0.45rem 0.95rem;
  border-radius: var(--tx-r-pill);
  border: 1px solid rgba(41, 184, 238, 0.32);
  background: rgba(41, 184, 238, 0.08);
  color: var(--tx-cyan);
  font-size: var(--tx-fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.tx-hero__eyebrow .tx-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.tx-hero__title {
  font-size: var(--tx-fs-display);
  margin-bottom: var(--tx-4);
  max-width: 16ch;
}

.tx-hero__title .tx-accent-text {
  background: linear-gradient(100deg, var(--tx-cyan) 0%, var(--tx-sky) 55%, var(--tx-blue) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tx-gradient-shift 14s ease-in-out infinite alternate;
}

@keyframes tx-gradient-shift {
  to {
    background-position: 100% 0;
  }
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .tx-hero__title .tx-accent-text {
    color: var(--tx-cyan);
    animation: none;
  }
}

.tx-hero__sub {
  font-family: var(--tx-font-display);
  font-size: var(--tx-fs-xl);
  font-weight: 700;
  color: var(--tx-sky);
  margin: 0 0 var(--tx-3);
  letter-spacing: -0.01em;
}

.tx-hero__lead {
  font-size: var(--tx-fs-lg);
  max-width: 38rem;
  margin-bottom: var(--tx-6);
}

/* Labels on the hero emblem's five satellites: decorative text inside an
   svg[role="img"][aria-label], so assistive tech reads the label instead of
   this markup and it is safe to keep purely visual. */
.tx-viz-label {
  font-family: var(--tx-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: #bfe6f7;
  paint-order: stroke;
  stroke: rgba(4, 16, 31, 0.85);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.tx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tx-3);
}

.tx-hero__actions .tx-btn {
  flex: 1 1 14rem;
}

@media (min-width: 30em) {
  .tx-hero__actions .tx-btn {
    flex: 0 0 auto;
  }
}

.tx-trust {
  display: grid;
  gap: var(--tx-2);
  list-style: none;
  margin: var(--tx-7) 0 0;
  padding: var(--tx-5) 0 0;
  border-top: 1px solid rgba(148, 195, 226, 0.2);
}

@media (min-width: 40em) {
  .tx-trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tx-4);
  }
}

.tx-trust li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: var(--tx-fs-sm);
  font-weight: 600;
  color: var(--tx-on-dark);
}

.tx-trust li svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--tx-sky);
}

/* ---------- Hero core emblem ---------- */

.tx-hero__visual {
  position: relative;
  margin-inline: auto;
  width: 100%;
  max-width: 32rem;
  perspective: 1100px;
}

.tx-hero__visual svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform: translate3d(var(--tx-parallax-x, 0), var(--tx-parallax-y, 0), 0)
    rotateX(var(--tx-parallax-rx, 0deg)) rotateY(var(--tx-parallax-ry, 0deg));
  transition: transform 600ms var(--tx-ease);
  will-change: transform;
}

@media (max-width: 61.99em) {
  .tx-hero__visual {
    max-width: 24rem;
  }
}

/* ---------- Emblem animation ---------- */

.tx-viz-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: tx-node-pulse 4.2s var(--tx-ease) infinite;
}

.tx-viz-node--b {
  animation-delay: -1.4s;
}
.tx-viz-node--c {
  animation-delay: -2.8s;
}
.tx-viz-node--d {
  animation-delay: -0.7s;
}

@keyframes tx-node-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

.tx-viz-link {
  stroke-dasharray: 5 9;
  animation: tx-dash 3.4s linear infinite;
}

.tx-viz-link--slow {
  animation-duration: 5.6s;
}

@keyframes tx-dash {
  to {
    stroke-dashoffset: -56;
  }
}

/* The satellites breathe on staggered delays so the ring never reads as one
   synchronised object. */
.tx-viz-sat {
  transform-box: fill-box;
  transform-origin: center;
  animation: tx-sat 5.4s var(--tx-ease) infinite;
}

.tx-viz-sat--2 {
  animation-delay: -0.9s;
}
.tx-viz-sat--3 {
  animation-delay: -1.8s;
}
.tx-viz-sat--4 {
  animation-delay: -2.7s;
}
.tx-viz-sat--5 {
  animation-delay: -3.6s;
}
.tx-viz-sat--6 {
  animation-delay: -4.5s;
}

@keyframes tx-sat {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

.tx-viz-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: tx-ring 6.4s var(--tx-ease) infinite;
}

.tx-viz-ring--b {
  animation-delay: -3.2s;
}

@keyframes tx-ring {
  0% {
    opacity: 0.45;
    transform: scale(0.86);
  }
  70% {
    opacity: 0;
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.tx-viz-spin {
  transform-box: view-box;
  transform-origin: 260px 260px;
  animation: tx-spin-slow 48s linear infinite;
}

.tx-viz-spin--reverse {
  animation-duration: 72s;
  animation-direction: reverse;
}

@keyframes tx-spin-slow {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tx-hero__aurora,
  .tx-viz-node,
  .tx-viz-link,
  .tx-viz-ring,
  .tx-viz-sat,
  .tx-viz-spin,
  .tx-hero__title .tx-accent-text {
    animation: none !important;
  }
  .tx-hero__visual svg {
    transform: none !important;
  }
  .tx-viz-ring {
    opacity: 0.22;
  }
  .tx-viz-ring--b {
    opacity: 0;
  }
}

/* ============================================================
   Page header (interior pages)
   ============================================================ */

.tx-pagehead {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(85% 80% at 85% 0%, rgba(11, 123, 208, 0.38) 0%, rgba(11, 123, 208, 0) 60%),
    linear-gradient(160deg, var(--tx-navy) 0%, var(--tx-midnight) 100%);
  color: var(--tx-on-dark);
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.tx-pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(41, 184, 238, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 184, 238, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(110% 90% at 60% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(110% 90% at 60% 0%, #000 0%, transparent 72%);
}

.tx-pagehead h1 {
  color: var(--tx-white);
  max-width: 20ch;
}

.tx-pagehead p {
  color: var(--tx-on-dark-muted);
}

.tx-pagehead__inner {
  padding-top: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  align-items: center;
}

@media (min-width: 62em) {
  .tx-pagehead__inner--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.tx-pagehead__lead {
  font-size: var(--tx-fs-lg);
  max-width: 44rem;
  margin-bottom: var(--tx-6);
}

/* ============================================================
   Split content blocks
   ============================================================ */

.tx-split {
  display: grid;
  gap: clamp(2rem, 1.5rem + 4vw, 4rem);
  align-items: center;
}

@media (min-width: 62em) {
  .tx-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tx-split--wide-first {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
  .tx-split--wide-last {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
  .tx-split__media--first {
    order: -1;
  }
}

/* ============================================================
   Endpoint protection layer visual
   ============================================================ */

.tx-shield-viz-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--tx-4);
}

.tx-layers {
  display: grid;
  gap: var(--tx-2);
  padding: var(--tx-4);
  border: 1px solid rgba(148, 195, 226, 0.22);
  border-radius: var(--tx-r-lg);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
}

.tx-layer {
  display: flex;
  align-items: center;
  gap: var(--tx-3);
  padding: var(--tx-3) var(--tx-4);
  border: 1px solid rgba(148, 195, 226, 0.18);
  border-radius: var(--tx-r);
  background: linear-gradient(100deg, rgba(11, 123, 208, 0.16), rgba(7, 42, 84, 0.1));
  font-size: var(--tx-fs-sm);
  color: var(--tx-on-dark);
}

.tx-layer__index {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--tx-r-sm);
  background: rgba(41, 184, 238, 0.16);
  border: 1px solid rgba(41, 184, 238, 0.3);
  color: var(--tx-cyan);
  font-family: var(--tx-font-mono);
  font-size: var(--tx-fs-xs);
  font-weight: 700;
}

.tx-layer strong {
  display: block;
  color: var(--tx-white);
  font-size: var(--tx-fs-base);
  line-height: 1.35;
}

.tx-layer span {
  color: var(--tx-on-dark-muted);
  font-size: var(--tx-fs-xs);
}

.tx-layer__status {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--tx-fs-xs);
  font-weight: 700;
  color: var(--tx-sky);
}

.tx-layer__status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(86, 217, 249, 0.18);
}

/* The lifecycle loops back to Assess: state that explicitly rather than
   implying a finished checklist. */
.tx-layers__cycle {
  display: flex;
  align-items: center;
  gap: var(--tx-2);
  margin: var(--tx-1) 0 0;
  padding-top: var(--tx-3);
  border-top: 1px dashed rgba(148, 195, 226, 0.22);
  font-size: var(--tx-fs-xs);
  font-weight: 600;
  color: var(--tx-on-dark-muted);
}

.tx-layers__cycle svg {
  flex: none;
  color: var(--tx-sky);
  animation: tx-spin-slow 10s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tx-layers__cycle svg {
    animation: none;
  }
}

/* ---------- Cybersecurity service cards: EDR/XDR, Penetration Testing,
   Vulnerability Management, sitting below the lifecycle split. ---------- */

.tx-cyber-grid {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.tx-cyber-grid .tx-eco-panel__title {
  line-height: 1.3;
}

.tx-eco-panel__benefit {
  margin: auto 0 0;
  padding-top: var(--tx-2);
  font-family: var(--tx-font-mono);
  font-size: var(--tx-fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tx-sky);
}

/* ============================================================
   Service cards
   ============================================================ */

.tx-svc-group + .tx-svc-group {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.tx-svc-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tx-2) var(--tx-4);
  margin-bottom: var(--tx-5);
  padding-bottom: var(--tx-3);
  border-bottom: 1px solid var(--tx-border);
}

.tx-svc-group__head h3 {
  margin: 0;
  font-size: var(--tx-fs-h3);
}

.tx-svc-group__head p {
  margin: 0;
  font-size: var(--tx-fs-sm);
  color: var(--tx-muted);
}

.tx-svc-grid {
  display: grid;
  gap: var(--tx-4);
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .tx-svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68em) {
  .tx-svc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tx-svc {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--tx-3);
  padding: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-r-lg);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  transition: transform var(--tx-dur) var(--tx-ease), box-shadow var(--tx-dur) var(--tx-ease),
    border-color var(--tx-dur) var(--tx-ease);
}

/* A single cyan wash in the corner, revealed on hover. Cheaper and calmer
   than a coloured border on every card. */
.tx-svc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(80% 62% at 0% 0%, rgba(41, 184, 238, 0.16) 0%, rgba(41, 184, 238, 0) 62%);
  opacity: 0.55;
  transition: opacity var(--tx-dur) var(--tx-ease);
}

/* The glowing hairline. It is a gradient border drawn with a mask, so it
   never affects layout and costs one composited layer. */
.tx-svc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(41, 184, 238, 0.8), rgba(11, 123, 208, 0.35) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--tx-dur) var(--tx-ease);
  pointer-events: none;
}

.tx-svc:hover,
.tx-svc:focus-within {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--tx-shadow-lg);
}

.tx-svc:hover::before,
.tx-svc:focus-within::before {
  opacity: 1;
}

.tx-svc:hover::after,
.tx-svc:focus-within::after {
  opacity: 1;
}

.tx-svc__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: var(--tx-r);
  border: 1px solid rgba(11, 123, 208, 0.24);
  background: linear-gradient(140deg, rgba(41, 184, 238, 0.2), rgba(11, 123, 208, 0.1));
  color: var(--tx-blue);
  transition: transform var(--tx-dur) var(--tx-ease), color var(--tx-dur) var(--tx-ease);
}

.tx-svc:hover .tx-svc__icon {
  transform: translateY(-2px) scale(1.04);
  color: var(--tx-cyan-700);
}

.tx-svc__title {
  margin: 0;
  font-size: var(--tx-fs-h4);
  color: var(--tx-ink);
}

.tx-svc__text {
  margin: 0;
  font-size: var(--tx-fs-sm);
  color: var(--tx-muted);
}

@media (prefers-reduced-motion: reduce) {
  .tx-svc:hover,
  .tx-svc:focus-within,
  .tx-svc:hover .tx-svc__icon {
    transform: none;
  }
}

/* ============================================================
   IT Solutions ecosystem — an asymmetric bento grid instead of
   identical cards, so five real services read as one connected
   technology practice rather than a catalogue.
   ============================================================ */

.tx-eco-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(9.5rem, auto);
  gap: var(--tx-4);
  position: relative;
}

@media (min-width: 40em) {
  .tx-eco-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tx-eco-panel--lg {
    grid-column: span 2;
  }
}

@media (min-width: 68em) {
  .tx-eco-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row dense;
  }
  .tx-eco-panel {
    grid-column: span 4;
    grid-row: span 1;
  }
  .tx-eco-panel--lg {
    grid-column: span 5;
    grid-row: span 2;
  }
  .tx-eco-panel--tall {
    grid-column: span 3;
    grid-row: span 2;
  }
  .tx-eco-panel--sm {
    grid-column: span 2;
    grid-row: span 1;
  }
}

/* Five equal cubes on one engineered grid. Every row shares a single height
   and the last row is centred, so five services read as one system rather
   than a bento of leftovers. */

.tx-eco-grid--uniform {
  grid-auto-rows: 1fr;
}

.tx-eco-grid--uniform > .tx-eco-panel {
  justify-content: flex-start;
}

.tx-eco-grid--uniform .tx-eco-panel__title {
  line-height: 1.3;
}

@media (min-width: 40em) {
  .tx-eco-grid--uniform {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .tx-eco-grid--uniform > .tx-eco-panel {
    grid-column: span 2;
  }
  .tx-eco-grid--uniform > .tx-eco-panel:last-child {
    grid-column: 2 / span 2;
  }
}

@media (min-width: 68em) {
  .tx-eco-grid--uniform {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .tx-eco-grid--uniform > .tx-eco-panel {
    grid-column: span 2;
  }
  .tx-eco-grid--uniform > .tx-eco-panel:nth-child(4) {
    grid-column: 2 / span 2;
  }
  .tx-eco-grid--uniform > .tx-eco-panel:last-child {
    grid-column: span 2;
  }
}

/* Build / Manage kicker: the same mono voice as the cybersecurity benefit
   lines, so the three sections speak one language. */
.tx-eco-panel__kicker {
  margin: 0 0 calc(var(--tx-2) * -0.5);
  font-family: var(--tx-font-mono);
  font-size: var(--tx-fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-cyan);
}

.tx-eco-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--tx-2);
  justify-content: center;
  padding: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-r-lg);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  transition: transform var(--tx-dur) var(--tx-ease), box-shadow var(--tx-dur) var(--tx-ease),
    border-color var(--tx-dur) var(--tx-ease);
}

.tx-eco-panel--lg,
.tx-eco-panel--tall {
  justify-content: flex-start;
}

.tx-eco-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(80% 62% at 0% 0%, rgba(41, 184, 238, 0.14) 0%, rgba(41, 184, 238, 0) 62%);
  opacity: 0.5;
  transition: opacity var(--tx-dur) var(--tx-ease);
}

.tx-eco-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(41, 184, 238, 0.75), rgba(11, 123, 208, 0.3) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--tx-dur) var(--tx-ease);
  pointer-events: none;
}

.tx-eco-panel:hover,
.tx-eco-panel:focus-within {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--tx-shadow-lg);
}

.tx-eco-panel:hover::before,
.tx-eco-panel:focus-within::before,
.tx-eco-panel:hover::after,
.tx-eco-panel:focus-within::after {
  opacity: 1;
}

/* AI gets a standing accent, not just a hover state — it's the brand's
   clearest differentiator, so the panel should read as "special" at rest. */
.tx-eco-panel--accent {
  border-color: rgba(41, 184, 238, 0.35);
  background: linear-gradient(160deg, rgba(41, 184, 238, 0.1), rgba(255, 255, 255, 0.03) 55%);
}

.tx-eco-panel--accent::before {
  opacity: 0.85;
}

.tx-eco-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: var(--tx-r);
  border: 1px solid rgba(41, 184, 238, 0.28);
  background: linear-gradient(140deg, rgba(41, 184, 238, 0.22), rgba(11, 123, 208, 0.12));
  color: var(--tx-cyan);
  transition: transform var(--tx-dur) var(--tx-ease);
}

.tx-eco-panel:hover .tx-eco-panel__icon {
  transform: translateY(-2px) scale(1.04);
}

.tx-eco-panel__title {
  margin: 0;
  font-size: var(--tx-fs-h4);
  color: var(--tx-ink);
}

.tx-eco-panel__text {
  margin: 0;
  font-size: var(--tx-fs-sm);
  color: var(--tx-muted);
  max-width: 30rem;
}

.tx-eco-panel__note {
  margin: 0.2rem 0 0;
  font-size: var(--tx-fs-xs);
  color: var(--tx-cyan);
  max-width: 30rem;
}

@media (prefers-reduced-motion: reduce) {
  .tx-eco-panel:hover,
  .tx-eco-panel:focus-within,
  .tx-eco-panel:hover .tx-eco-panel__icon {
    transform: none;
  }
}

/* ============================================================
   Application cubes
   ============================================================ */

/* The apps band gets its own surface so the four cubes read as one product
   family rather than as four more service cards. */
.tx-section--apps {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--tx-bg) 0%, var(--tx-midnight) 100%);
}

.tx-section--apps::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(41, 184, 238, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 184, 238, 0.09) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(90% 70% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 0%, #000 0%, transparent 78%);
  pointer-events: none;
}

.tx-cubes {
  display: grid;
  gap: var(--tx-4);
  grid-template-columns: 1fr;
  perspective: 1200px;
}

@media (min-width: 34em) {
  .tx-cubes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68em) {
  .tx-cubes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.tx-cube {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Every cube shares one centre line: icon, name, description, badges and
     the trigger. Four cards of unequal copy length read as one set. */
  text-align: center;
  gap: var(--tx-3);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-r-lg);
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform var(--tx-dur-slow) var(--tx-ease), box-shadow var(--tx-dur) var(--tx-ease),
    border-color var(--tx-dur) var(--tx-ease);
}

/* The cube reads as one tile: a corner wash rather than a coloured header,
   so four of them side by side stay calm. */
.tx-cube::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 0% 0%, rgba(41, 184, 238, 0.14) 0%, rgba(41, 184, 238, 0) 60%);
  pointer-events: none;
  transition: opacity var(--tx-dur) var(--tx-ease);
}

/* The glow sits outside the border and only appears on hover, so a page of
   four cubes is quiet until the visitor points at one. */
.tx-cube::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(41, 184, 238, 0.9), rgba(86, 217, 249, 0.45) 40%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--tx-dur) var(--tx-ease);
  pointer-events: none;
}

.tx-cube > * {
  position: relative;
}

.tx-cube:hover,
.tx-cube:focus-within {
  /* A slight lift and tilt: enough to feel physical, small enough that four
     of them moving at once never looks like a game menu. */
  transform: translateY(-6px) rotateX(3deg) rotateY(-3deg);
  border-color: rgba(11, 123, 208, 0.4);
  box-shadow: 0 24px 48px rgba(7, 42, 84, 0.16), 0 0 32px rgba(41, 184, 238, 0.18);
}

.tx-cube:hover::after,
.tx-cube:focus-within::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tx-cube:hover,
  .tx-cube:focus-within {
    transform: none;
  }
}

.tx-cube__icon {
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--tx-r-lg);
  background: linear-gradient(150deg, var(--tx-blue) 0%, var(--tx-cyan) 100%);
  box-shadow: 0 8px 20px rgba(11, 123, 208, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transition: transform var(--tx-dur) var(--tx-ease);
}

.tx-cube:hover .tx-cube__icon {
  transform: translateZ(18px);
}

.tx-cube__name {
  font-size: var(--tx-fs-h4);
  margin: 0;
}

.tx-cube__text {
  margin: 0;
  color: var(--tx-muted);
  font-size: var(--tx-fs-sm);
}

.tx-cube__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--tx-2);
  margin-top: auto;
  padding-top: var(--tx-1);
}

/* One click target for the whole cube: the button is where the pointer goes,
   its stretched pseudo-element is where the click lands. */
.tx-cube__open {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: center;
  min-height: 2.5rem;
  margin-top: var(--tx-1);
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(11, 123, 208, 0.3);
  border-radius: var(--tx-r-pill);
  background: var(--tx-blue-100);
  color: var(--tx-blue-700);
  font-family: inherit;
  font-size: var(--tx-fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--tx-dur-fast) var(--tx-ease),
    color var(--tx-dur-fast) var(--tx-ease), border-color var(--tx-dur-fast) var(--tx-ease);
}

.tx-cube__open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--tx-r-lg);
}

.tx-cube__open svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
}

.tx-cube:hover .tx-cube__open,
.tx-cube__open:hover {
  background: var(--tx-blue);
  border-color: var(--tx-blue);
  color: var(--tx-white);
}

.tx-cube__open:focus-visible {
  outline: var(--tx-focus);
  outline-offset: var(--tx-focus-offset);
}

/* Opening a <dialog> needs scripting. If the scripts never run, the trigger is
   hidden rather than left as a control that does nothing; everything the cube
   says about the application is already on the page. Hiding it changes no
   geometry that was ever painted, so this is safe to apply unconditionally. */
html.no-js .tx-cube__open {
  display: none !important;
}

.tx-platforms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tx-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.tx-platforms li {
  margin: 0;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-r-sm);
  background: var(--tx-bg);
  font-size: var(--tx-fs-xs);
  font-weight: 600;
  color: var(--tx-muted);
}

.tx-on-dark .tx-platforms li {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(148, 195, 226, 0.22);
  color: var(--tx-on-dark-muted);
}

.tx-version {
  font-family: var(--tx-font-mono);
  font-size: var(--tx-fs-xs);
  color: var(--tx-muted);
  letter-spacing: 0.02em;
}

/* ============================================================
   Download dialog
   ============================================================ */

.tx-modal {
  width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--tx-r-xl);
  background: transparent;
  color: var(--tx-on-dark);
  overflow: visible;
}

.tx-modal::backdrop {
  background: rgba(4, 12, 22, 0.72);
  backdrop-filter: blur(5px);
}

.tx-modal[open] {
  animation: tx-modal-in 260ms var(--tx-ease);
}

.tx-modal[open]::backdrop {
  animation: tx-fade-in 260ms var(--tx-ease);
}

@keyframes tx-modal-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}

@keyframes tx-fade-in {
  from {
    opacity: 0;
  }
}

.tx-modal__panel {
  position: relative;
  display: grid;
  gap: var(--tx-2);
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  border: 1px solid rgba(41, 184, 238, 0.28);
  border-radius: var(--tx-r-xl);
  background:
    radial-gradient(90% 70% at 10% 0%, rgba(41, 184, 238, 0.18) 0%, rgba(41, 184, 238, 0) 60%),
    linear-gradient(155deg, var(--tx-navy) 0%, var(--tx-midnight) 100%);
  box-shadow: 0 32px 80px rgba(4, 12, 22, 0.6);
}

.tx-modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(148, 195, 226, 0.24);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--tx-on-dark);
  cursor: pointer;
  transition: background-color var(--tx-dur-fast) var(--tx-ease),
    border-color var(--tx-dur-fast) var(--tx-ease);
}

.tx-modal__close:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--tx-cyan);
}

.tx-modal__close:focus-visible {
  outline: 3px solid var(--tx-cyan);
  outline-offset: 2px;
}

.tx-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--tx-r);
  border: 1px solid rgba(41, 184, 238, 0.35);
  background: linear-gradient(140deg, rgba(41, 184, 238, 0.22), rgba(11, 123, 208, 0.14));
  color: var(--tx-cyan);
  margin-bottom: var(--tx-2);
}

.tx-modal__eyebrow {
  margin: 0;
  font-size: var(--tx-fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-sky);
}

.tx-modal__title {
  margin: 0;
  font-size: var(--tx-fs-h3);
  color: var(--tx-white);
}

.tx-modal__text {
  margin: 0 0 var(--tx-2);
  font-size: var(--tx-fs-sm);
  color: var(--tx-on-dark-muted);
}

.tx-modal__stores {
  display: grid;
  gap: var(--tx-2);
}

.tx-store {
  display: flex;
  align-items: center;
  gap: var(--tx-3);
  min-height: 3.5rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(148, 195, 226, 0.24);
  border-radius: var(--tx-r);
  background: rgba(255, 255, 255, 0.05);
  color: var(--tx-on-dark);
  text-decoration: none;
  transition: transform var(--tx-dur-fast) var(--tx-ease),
    border-color var(--tx-dur-fast) var(--tx-ease), background-color var(--tx-dur-fast) var(--tx-ease);
}

.tx-on-dark a.tx-store,
a.tx-store {
  color: var(--tx-on-dark);
}

a.tx-store:hover {
  transform: translateY(-2px);
  border-color: var(--tx-cyan);
  background: rgba(41, 184, 238, 0.12);
  color: var(--tx-white);
}

.tx-store svg {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  color: var(--tx-cyan);
}

.tx-store__text {
  display: grid;
  font-weight: 700;
  font-size: var(--tx-fs-sm);
  line-height: 1.3;
  white-space: nowrap;
}

.tx-store__text small {
  font-size: var(--tx-fs-xs);
  font-weight: 500;
  color: var(--tx-on-dark-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tx-store__go {
  margin-left: auto;
  display: inline-flex;
  color: var(--tx-sky);
}

.tx-store--soon {
  opacity: 0.55;
  cursor: not-allowed;
}

.tx-store--soon svg {
  color: var(--tx-on-dark-muted);
}

.tx-store__soon {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-on-dark-muted);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .tx-modal[open],
  .tx-modal[open]::backdrop {
    animation: none;
  }
  a.tx-store:hover {
    transform: none;
  }
}

/* ============================================================
   About
   ============================================================ */

.tx-about {
  display: grid;
  gap: var(--tx-5);
  align-items: start;
  max-width: 58rem;
  padding: clamp(1.5rem, 1.2rem + 2vw, 2.75rem);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-r-xl);
  background: linear-gradient(150deg, rgba(11, 123, 208, 0.16) 0%, rgba(4, 16, 31, 0.6) 62%);
}

@media (min-width: 46em) {
  .tx-about {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--tx-6);
  }
}

.tx-about__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: var(--tx-r-lg);
  border: 1px solid rgba(41, 184, 238, 0.28);
  background: var(--tx-midnight);
  box-shadow: 0 0 32px rgba(41, 184, 238, 0.14);
}

/* The full mark carries hairline circuit traces, so give it enough room to
   resolve them. Its natural aspect is 512:530, so height follows width. */
.tx-about__mark img {
  width: 4rem;
  height: auto;
}

.tx-about h2 {
  margin-bottom: var(--tx-3);
}

.tx-about__text {
  font-size: var(--tx-fs-lg);
  max-width: 42rem;
  margin-bottom: var(--tx-5);
}

.tx-about__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tx-2) var(--tx-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tx-about__points li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--tx-fs-sm);
  font-weight: 700;
  color: var(--tx-ink);
}

.tx-about__points svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  color: var(--tx-cyan);
}

/* ---------- Device mockup (pure CSS/SVG frame) ---------- */

.tx-device {
  position: relative;
  width: 100%;
  max-width: 15rem;
  margin-inline: auto;
  aspect-ratio: 9 / 17;
  border: 8px solid #12283f;
  border-radius: 2rem 2rem 0 0;
  border-bottom: 0;
  background: linear-gradient(180deg, #0d1e33 0%, #0a1728 100%);
  box-shadow: 0 -8px 40px rgba(41, 184, 238, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  padding: 0.85rem 0.7rem 0;
}

.tx-device::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3.2rem;
  height: 0.28rem;
  border-radius: var(--tx-r-pill);
  background: rgba(148, 195, 226, 0.28);
}

.tx-device__screen {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.6rem;
}

.tx-ui-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.6rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(148, 195, 226, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

.tx-ui-row--accent {
  border-color: rgba(41, 184, 238, 0.35);
  background: linear-gradient(100deg, rgba(41, 184, 238, 0.16), rgba(11, 123, 208, 0.08));
}

.tx-ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 0.5rem;
  background: rgba(41, 184, 238, 0.14);
  border: 1px solid rgba(41, 184, 238, 0.3);
  color: var(--tx-cyan);
}

.tx-ui-icon svg {
  width: 1rem;
  height: 1rem;
}

.tx-ui-row--accent .tx-ui-icon {
  background: rgba(86, 217, 249, 0.2);
  border-color: rgba(86, 217, 249, 0.4);
  color: var(--tx-sky);
}

.tx-ui-bar {
  height: 0.4rem;
  border-radius: var(--tx-r-pill);
  background: rgba(167, 190, 210, 0.35);
}

.tx-ui-bar--sm {
  width: 40%;
}
.tx-ui-bar--md {
  width: 65%;
}
.tx-ui-bar--lg {
  width: 85%;
}

.tx-ui-stack {
  display: grid;
  gap: 0.3rem;
  flex: 1;
}

/* ============================================================
   Guided solution finder
   ============================================================ */

.tx-finder {
  max-width: 52rem;
  margin-inline: auto;
}

.tx-finder__question {
  margin: 0 0 var(--tx-4);
  font-size: var(--tx-fs-h3);
}

.tx-result {
  display: grid;
  gap: var(--tx-4);
}

.tx-result__card {
  display: grid;
  gap: var(--tx-3);
  padding: var(--tx-5);
  border: 1px solid rgba(11, 123, 208, 0.35);
  border-radius: var(--tx-r-lg);
  background: linear-gradient(150deg, var(--tx-blue-100) 0%, var(--tx-white) 70%);
}

.tx-result__card h4 {
  margin: 0;
  font-size: var(--tx-fs-h4);
}

.tx-result__card p {
  margin: 0;
  font-size: var(--tx-fs-sm);
}

.tx-result__rank {
  font-size: var(--tx-fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-blue-700);
}

.tx-result__card--alt {
  background: var(--tx-white);
  border-color: var(--tx-border);
}

.tx-result__card--alt .tx-result__rank {
  color: var(--tx-muted);
}

.tx-noscript-list {
  display: grid;
  gap: var(--tx-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

/* ============================================================
   Comparison / criteria table
   ============================================================ */

.tx-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-r-lg);
  background: var(--tx-white);
  -webkit-overflow-scrolling: touch;
}

.tx-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  margin: 0;
  font-size: var(--tx-fs-sm);
}

.tx-table caption {
  padding: var(--tx-4);
  text-align: left;
  font-size: var(--tx-fs-sm);
  color: var(--tx-muted);
  border-bottom: 1px solid var(--tx-border);
}

.tx-table th,
.tx-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--tx-border);
}

.tx-table thead th {
  background: var(--tx-bg);
  color: var(--tx-ink);
  font-weight: 700;
  white-space: nowrap;
}

.tx-table tbody th {
  font-weight: 700;
  color: var(--tx-ink);
  width: 32%;
}

.tx-table td {
  color: var(--tx-muted);
}

.tx-table tbody tr:last-child th,
.tx-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ============================================================
   Principles / stat-free highlight grid
   ============================================================ */

.tx-principles {
  display: grid;
  gap: var(--tx-4);
  counter-reset: tx-principle;
}

@media (min-width: 46em) {
  .tx-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68em) {
  .tx-principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tx-principles > :first-child {
    grid-column: span 1;
  }
}

.tx-principle {
  position: relative;
  padding: var(--tx-5);
  border: 1px solid var(--tx-surface-border);
  border-radius: var(--tx-r-lg);
  background: var(--tx-surface);
  overflow: hidden;
}

.tx-principle::after {
  content: "";
  position: absolute;
  right: -3rem;
  top: -3rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41, 184, 238, 0.16) 0%, rgba(41, 184, 238, 0) 70%);
  pointer-events: none;
}

.tx-principle h3 {
  display: flex;
  align-items: center;
  gap: var(--tx-3);
  font-size: var(--tx-fs-h4);
  margin-bottom: var(--tx-2);
}

.tx-principle h3 svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--tx-accent);
  flex: none;
}

.tx-on-dark .tx-principle h3 svg {
  color: var(--tx-cyan);
}

.tx-principle p {
  margin: 0;
  font-size: var(--tx-fs-sm);
}

/* ============================================================
   Prose (privacy, legal)
   ============================================================ */

.tx-prose {
  max-width: 46rem;
}

.tx-prose h2 {
  font-size: var(--tx-fs-h3);
  margin-top: var(--tx-8);
  padding-top: var(--tx-5);
  border-top: 1px solid var(--tx-border);
}

.tx-prose > h2:first-of-type {
  margin-top: var(--tx-6);
}

.tx-prose h3 {
  font-size: var(--tx-fs-h4);
  margin-top: var(--tx-5);
}

.tx-prose ul,
.tx-prose ol {
  padding-left: 1.35rem;
}

.tx-prose dl {
  display: grid;
  gap: var(--tx-2);
  margin: 0 0 var(--tx-4);
}

.tx-prose dt {
  font-weight: 700;
  color: var(--tx-ink);
}

.tx-prose dd {
  margin: 0 0 var(--tx-3);
  color: var(--tx-muted);
}

.tx-toc {
  padding: var(--tx-5);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-r-lg);
  background: var(--tx-bg);
  margin-bottom: var(--tx-6);
}

.tx-toc h2 {
  margin: 0 0 var(--tx-3);
  padding: 0;
  border: 0;
  font-size: var(--tx-fs-base);
  font-family: var(--tx-font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tx-toc ol {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: var(--tx-1);
}

.tx-toc li {
  margin: 0;
  font-size: var(--tx-fs-sm);
}

/* The table of contents is navigation, not running text, so give its links a
   comfortable target instead of a bare text line. */
.tx-toc a {
  display: inline-block;
  padding-block: 0.3rem;
}

/* ============================================================
   CTA band
   ============================================================ */

.tx-cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--tx-r-xl);
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
  text-align: center;
  background:
    radial-gradient(80% 120% at 20% 0%, rgba(41, 184, 238, 0.28) 0%, rgba(41, 184, 238, 0) 60%),
    linear-gradient(140deg, var(--tx-navy) 0%, var(--tx-midnight) 100%);
  color: var(--tx-on-dark);
}

.tx-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(41, 184, 238, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 184, 238, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(100% 80% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(100% 80% at 50% 0%, #000 0%, transparent 75%);
}

.tx-cta-band h2 {
  color: var(--tx-white);
  max-width: 22ch;
  margin-inline: auto;
}

.tx-cta-band p {
  color: var(--tx-on-dark-muted);
  max-width: 46rem;
  margin-inline: auto;
  font-size: var(--tx-fs-lg);
}

.tx-cta-band .tx-btn-row {
  margin-top: var(--tx-6);
  justify-content: center;
}

/* ============================================================
   Contact detail block
   ============================================================ */

.tx-contact-aside {
  display: grid;
  gap: var(--tx-4);
  align-content: start;
}

.tx-contact-item {
  display: grid;
  gap: 0.25rem;
  padding: var(--tx-4);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-r);
  background: var(--tx-white);
}

.tx-contact-item h3 {
  margin: 0;
  font-size: var(--tx-fs-sm);
  font-family: var(--tx-font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-muted);
}

.tx-contact-item p,
.tx-contact-item a {
  margin: 0;
  font-size: var(--tx-fs-base);
  color: var(--tx-ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tx-contact-item a {
  display: inline-block;
  padding-block: 0.25rem;
  min-height: 1.75rem;
}

/* ============================================================
   404
   ============================================================ */

.tx-404 {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 60vh;
  padding-block: var(--tx-9);
}

.tx-404__code {
  font-family: var(--tx-font-mono);
  font-size: clamp(3.5rem, 2rem + 9vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(120deg, var(--tx-blue) 0%, var(--tx-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--tx-3);
}

/* ---------- The mark at the centre of the hero emblem ---------- */

/* The eight elbows arrive in sequence, then hold. --i is set per element by
   markGeometry(), so the stagger needs no extra selectors. */
/* These groups already carry a rotate() transform attribute that positions
   them by four-fold symmetry, so they must NOT get transform-box: it would
   re-resolve that rotation around each shape's own centre and collapse the
   eight elbows on top of each other. Animate opacity only. */
.tx-viz-elbow {
  animation: tx-elbow 7s var(--tx-ease) infinite;
  animation-delay: calc(var(--i, 1) * -0.55s);
}

/* The eight elbows and four stubs are siblings in source order, so their
   stagger index comes from the document rather than from a style attribute:
   style-src 'self' blocks inline styles, which silently flattened this
   animation in production. */
.tx-viz-elbow:nth-of-type(1) {
  --i: 1;
}

.tx-viz-elbow:nth-of-type(2) {
  --i: 2;
}

.tx-viz-elbow:nth-of-type(3) {
  --i: 3;
}

.tx-viz-elbow:nth-of-type(4) {
  --i: 4;
}

.tx-viz-elbow:nth-of-type(5) {
  --i: 5;
}

.tx-viz-elbow:nth-of-type(6) {
  --i: 6;
}

.tx-viz-elbow:nth-of-type(7) {
  --i: 7;
}

.tx-viz-elbow:nth-of-type(8) {
  --i: 8;
}

.tx-viz-stub:nth-of-type(9) {
  --i: 1;
}

.tx-viz-stub:nth-of-type(10) {
  --i: 2;
}

.tx-viz-stub:nth-of-type(11) {
  --i: 3;
}

.tx-viz-stub:nth-of-type(12) {
  --i: 4;
}


@keyframes tx-elbow {
  0%,
  70%,
  100% {
    opacity: 0.92;
  }
  35% {
    opacity: 1;
  }
}

/* The four bars read as the signal running in from each arm. */
/* Same constraint as the elbows: rotation comes from the transform attribute. */
.tx-viz-stub {
  animation: tx-stub 3.6s var(--tx-ease) infinite;
  animation-delay: calc(var(--i, 1) * -0.9s);
}

@keyframes tx-stub {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

/* The node is the one part with no transform attribute of its own, so it is
   the one part that can safely be scaled. */
.tx-viz-core {
  transform-box: fill-box;
  transform-origin: center;
  animation: tx-core 3.6s var(--tx-ease) infinite;
}

/* Scale only. A 45 degree turn would square the diamond off and change the
   mark's character, which the hero must never do. */
@keyframes tx-core {
  0%,
  100% {
    opacity: 0.82;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tx-viz-elbow,
  .tx-viz-stub,
  .tx-viz-core {
    animation: none !important;
    opacity: 1;
  }
  .tx-viz-core {
    transform: none !important;
  }
}