/* ==========================================================================
   LegalOS — sections
   Order follows the page. The product-surface system (.ui*) sits in the
   middle because six sections render one; it scales entirely from a single
   font-size on .ui, so every interior measurement below is in em.
   ========================================================================== */

/* ==========================================================================
   NAV
   ========================================================================== */
/* The bar condenses without animating its own height: the box stays --nav-h
   (so scroll-padding-top keeps matching it) and the blurred plate behind it
   scales from the top edge while the row slides up. Transform and opacity
   only, no layout on every scroll frame. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  isolation: isolate;
}
.nav::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  transform-origin: top;
  transform: scaleY(1);
  opacity: 0;
  background: rgba(8, 9, 11, 0.72);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition: transform 0.5s var(--ease), opacity 0.45s var(--ease);
}
.nav.is-stuck::before { opacity: 1; transform: scaleY(calc(62 / 76)); }
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  transition: transform 0.5s var(--ease);
}
.nav.is-stuck .nav-inner { transform: translate3d(0, -7px, 0); }

.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; }
.wordmark-mark { width: 27px; height: 27px; color: var(--ink); flex: none; }
.wordmark-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -0.035em;
}
.wordmark-os { color: var(--brass); }

.nav-links {
  display: flex;
  gap: 0.35rem;
  justify-self: center;
}
.nav-links a {
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav-links a:hover { color: var(--ink); background: rgba(255,255,255,0.06); }

.nav-actions { display: flex; align-items: center; gap: 0.85rem; justify-self: end; }
.nav-signin { font-size: 0.9rem; font-weight: 600; color: var(--ink-2); transition: color 0.3s var(--ease); }
.nav-signin:hover { color: var(--ink); }
.nav-burger { display: none; padding: 0.45rem; color: var(--ink); }
.nav-burger .ico { width: 24px; height: 24px; }

/* Mobile drawer */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  padding: 1.35rem var(--shell-pad) 2.5rem;
  background: rgba(8, 9, 11, 0.94);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.mobile-menu.is-open { opacity: 1; }
.mobile-menu[hidden] { display: none; }
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; }
.mobile-close { padding: 0.5rem; color: var(--ink); }
.mobile-close .ico { width: 24px; height: 24px; }
.mobile-links { display: flex; flex-direction: column; flex: 1; padding-top: 1rem; }
.mobile-links a {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--hairline);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--nav-h) + clamp(3.5rem, 10vh, 8rem));
  padding-bottom: clamp(3rem, 6vw, 6rem);
  overflow: clip;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--ground-deep); }

.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero-video.is-ready { opacity: 1; }
/* When a real film is playing there is no reason to keep painting the
   authored loop underneath it. */
.hero-bg:has(.hero-video.is-ready) .amb { opacity: 0 !important; animation: none; }

/* Top and bottom gradient, plus a wash over the left third where the copy
   sits. The middle-right band stays open so the footage — authored or real —
   is actually visible rather than washed to black. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,6,8,0.92) 0%, rgba(5,6,8,0.30) 24%, rgba(5,6,8,0.28) 54%, rgba(5,6,8,0.82) 86%, var(--ground) 100%),
    linear-gradient(90deg, rgba(5,6,8,0.9) 0%, rgba(5,6,8,0.72) 26%, rgba(5,6,8,0.22) 58%, rgba(5,6,8,0.06) 82%);
}
.hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 78% at 50% 42%, transparent 38%, rgba(3,4,6,0.62) 88%, rgba(3,4,6,0.85) 100%);
}
.hero-field-a { width: 68vw; height: 68vw; max-width: 900px; max-height: 900px; top: -22%; right: -12%; opacity: 0.5; }
.hero-field-b { width: 80vw; height: 60vw; max-width: 1100px; max-height: 760px; bottom: -26%; left: -14%; opacity: 0.8; }

/* --- Ambient product loop ------------------------------------------------
   Three scenes cross-dissolving on a 27s cycle: the matter board breathing,
   a clause resolving to its article of law, a matter timeline drawing. This
   is the hero's motion until a film is supplied; it is not a placeholder.
   -------------------------------------------------------------------------- */
/* The scenes occupy the open right region, and a mask concentrates them there:
   whatever the cycle is showing, it falls away toward the headline column
   instead of surfacing behind the type. A supplied film still plays full-bleed;
   this is a composition rule for the authored loop, whose job is to be read
   past, not through. */
/* Pinned to the first viewport's open right region — right of the lede and
   buttons, below the nav, above the dashboard — rather than to the whole hero,
   whose height includes the mockup and would put half of each scene behind it.
   The radial mask then falls the layer away toward the headline column. */
.amb {
  position: absolute;
  top: 0; right: 0; left: 30%;
  height: min(100svh, 980px);
  mask-image: radial-gradient(66% 62% at 78% 52%, #000 8%, rgba(0,0,0,0.3) 54%, transparent 84%);
  -webkit-mask-image: radial-gradient(66% 62% at 78% 52%, #000 8%, rgba(0,0,0,0.3) 54%, transparent 84%);
  opacity: 0;
  animation: ambCycle 27s linear infinite;
  will-change: opacity, transform;
}
.amb--1 { animation-delay: -1s; }
.amb--2 { animation-delay: -10s; }
.amb--3 { animation-delay: -19s; }

@keyframes ambCycle {
  0%   { opacity: 0; transform: scale(1.06) translate3d(0,0,0); }
  4%   { opacity: 1; }
  29%  { opacity: 1; }
  35%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.14) translate3d(0,-1.5%,0); }
}

.amb-rows {
  position: absolute; left: 46%; top: 46%; width: 50%;
  display: flex; flex-direction: column; gap: 1.6vh;
}
.amb-rows span {
  height: 1.35vh; min-height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.4), rgba(142,124,255,0.24));
  width: var(--w);
  transform-origin: left;
  animation: ambRow 9s var(--ease) infinite;
  animation-delay: var(--d);
}
@keyframes ambRow {
  0%, 100% { transform: scaleX(0.86); opacity: 0.35; }
  22%      { transform: scaleX(1);    opacity: 0.95; }
  70%      { transform: scaleX(1);    opacity: 0.6; }
}
.amb-bars {
  position: absolute; right: 5%; bottom: 6%;
  width: 40%; height: 21%;
  display: flex; align-items: flex-end; gap: 1.6%;
}
.amb-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, rgba(142,124,255,0.72), rgba(142,124,255,0.08));
  transform-origin: bottom;
  animation: ambBar 7s var(--ease) infinite;
  animation-delay: var(--d);
}
@keyframes ambBar {
  0%, 100% { transform: scaleY(0.55); }
  40%      { transform: scaleY(1); }
}

.amb-doc {
  position: absolute; right: 4%; top: 45%;
  width: min(58%, 440px);
  font-family: var(--font-ar-doc);
  font-size: clamp(0.9rem, 1.2vw, 1.2rem);
  line-height: 2.2;
  color: rgba(255,255,255,0.42);
}
.amb-line { opacity: 0; animation: ambLine 9s var(--ease) infinite; animation-delay: var(--d); }
@keyframes ambLine {
  0%       { opacity: 0; transform: translateY(8px); }
  10%, 78% { opacity: 1; transform: none; }
  92%      { opacity: 0; }
  100%     { opacity: 0; }
}
.amb-line--mark { color: rgba(255,255,255,0.78); position: relative; }
.amb-line--mark::after {
  content: "";
  position: absolute; inset-inline: -0.3em; bottom: 0.42em; height: 2px;
  background: linear-gradient(90deg, var(--brass), rgba(224,164,76,0));
  transform: scaleX(0); transform-origin: right;
  animation: ambUnderline 9s var(--ease) infinite;
  animation-delay: 1.1s;
}
@keyframes ambUnderline {
  0%, 12%  { transform: scaleX(0); }
  30%, 80% { transform: scaleX(1); }
  92%,100% { transform: scaleX(0); }
}
.amb-cite {
  position: absolute; right: 5%; top: 76%;
  padding: 0.5em 0.9em;
  border-radius: 9px;
  border: 1px solid rgba(224,164,76,0.35);
  background: rgba(224,164,76,0.09);
  color: rgba(240,190,118,0.9);
  font-family: var(--font-ar-ui);
  font-size: clamp(0.72rem, 1vw, 0.95rem);
  direction: rtl;
  opacity: 0;
  animation: ambCite 9s var(--ease) infinite;
  animation-delay: 2s;
}
@keyframes ambCite {
  0%, 14%  { opacity: 0; transform: translateY(10px) scale(0.96); }
  26%, 78% { opacity: 1; transform: none; }
  90%,100% { opacity: 0; }
}

.amb-time { position: absolute; right: 2%; top: 40%; width: 80%; height: 38%; }
.amb-axis path { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 1; }
.amb-spine { fill: none; stroke: rgba(255,255,255,0.2); stroke-width: 1.5; stroke-dasharray: 700; stroke-dashoffset: 700; animation: ambDraw 9s var(--ease) infinite; }
.amb-trend { fill: none; stroke: rgba(142,124,255,0.85); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: ambDraw 9s var(--ease) infinite; animation-delay: 0.7s; }
@keyframes ambDraw {
  0%       { stroke-dashoffset: 900; opacity: 0; }
  8%       { opacity: 1; }
  46%, 80% { stroke-dashoffset: 0; opacity: 1; }
  95%,100% { stroke-dashoffset: 0; opacity: 0; }
}
.amb-nodes circle { fill: var(--violet-lit); opacity: 0; animation: ambNode 9s var(--ease) infinite; animation-delay: var(--d); }
@keyframes ambNode {
  0%, 8%   { opacity: 0; r: 2; }
  24%, 80% { opacity: 0.9; }
  95%,100% { opacity: 0; }
}
.amb-motes { position: absolute; inset: 0; }
.amb-motes i {
  position: absolute; left: var(--x); top: var(--y);
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(167,155,255,0.85);
  box-shadow: 0 0 14px 3px rgba(142,124,255,0.35);
  animation: ambMote 11s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes ambMote {
  0%, 100% { opacity: 0; transform: translate3d(0,14px,0); }
  30%, 62% { opacity: 0.85; transform: translate3d(6px,-10px,0); }
}

/* --- Hero content --------------------------------------------------------- */
.hero-content { position: relative; z-index: 2; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.46rem 1rem 0.46rem 0.8rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(142,124,255,0.32);
  background: rgba(109,91,255,0.13);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: #C9C0FF;
  margin-bottom: 1.9rem;
}
.hero-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--violet-lit);
  box-shadow: 0 0 0 0 rgba(142,124,255,0.6);
  animation: pulse 3.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(142,124,255,0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(142,124,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(142,124,255,0); }
}

.hero-h1 { max-width: 17ch; }
.hero-lede { margin-top: 1.7rem; max-width: 56ch; font-size: clamp(1.05rem, 1.28vw, 1.2rem); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; }
.hero-proof {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.9rem;
  margin-top: 2.4rem;
  font-size: 0.87rem; font-weight: 600; color: var(--ink-3);
}
.hero-proof li { display: flex; align-items: center; gap: 0.5rem; }
.hero-proof .ico { width: 15px; height: 15px; color: var(--brass); flex: none; }

/* --- Floating dashboard --------------------------------------------------- */
.hero-stage {
  position: relative;
  z-index: 2;
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
  margin-bottom: clamp(-9rem, -7vw, -3.5rem);
  perspective: 2200px;
}
.hero-stage-glow {
  position: absolute;
  left: 8%; right: 8%; bottom: -4%;
  height: 62%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(109,91,255,0.55), rgba(109,91,255,0) 72%);
  filter: blur(56px);
  z-index: -1;
}
.hero-mockup {
  transform-style: preserve-3d;
  transform: rotateX(9deg) rotateZ(-0.5deg) scale(0.985);
  transition: transform 1.2s var(--ease);
}
.hero-mockup .ui { font-size: clamp(0.62rem, 0.82vw, 0.82rem); }

/* ==========================================================================
   PRODUCT SURFACES (.ui) — ten instances across five sections
   Everything inside scales from .ui's font-size, so one clamp resizes a
   whole screenshot without touching a single interior rule.
   ========================================================================== */
.ui {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: linear-gradient(178deg, #12141A 0%, #0A0B0F 62%);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
  font-size: clamp(0.72rem, 0.86vw, 0.8rem);
  line-height: 1.45;
  color: var(--ink);
  user-select: none;
}
.ui::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
}
.ui--sm { font-size: clamp(0.68rem, 0.72vw, 0.7rem); }
.ui--wide { font-size: clamp(0.7rem, 0.78vw, 0.76rem); }

.ui-bar {
  display: flex; align-items: center; gap: 1em;
  padding: 0.9em 1.15em;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
}
.ui-bar--rtl { direction: rtl; }
.ui-dots { display: inline-flex; gap: 0.45em; flex: none; }
.ui-dots i { width: 0.62em; height: 0.62em; border-radius: 50%; background: rgba(255,255,255,0.16); }
.ui-crumb {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 700; font-size: 0.95em; color: var(--ink-2); white-space: nowrap;
}
.ui-crumb .ico { width: 1.15em; height: 1.15em; color: var(--ink-3); }
.ui-crumb em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.ui-search {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  min-width: 0;
  padding: 0.42em 0.7em;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.28);
  color: var(--ink-3);
  overflow: hidden;
}
.ui-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-search kbd {
  font-family: inherit; font-size: 0.85em; font-weight: 700;
  padding: 0.1em 0.4em; border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.1); color: var(--ink-3); flex: none;
}
.ui-pill {
  margin-inline-start: auto; flex: none;
  padding: 0.3em 0.72em; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  font-size: 0.9em; font-weight: 700; color: var(--ink-2);
}
.ui-pill--ok { border-color: rgba(78,216,160,0.3); background: rgba(78,216,160,0.1); color: var(--ok); }

.ui-avs { display: inline-flex; flex: none; }
.ui-avs .ui-av + .ui-av { margin-inline-start: -0.35em; }
.ui-av {
  width: 2em; height: 2em; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78em; font-weight: 700; letter-spacing: 0.02em;
  background: #262A35; color: #B7BDCC;
  border: 1.5px solid #12141A; flex: none;
}
.ui-av--2 { background: #2F2A3A; color: #C2B8D2; }
.ui-av--3 { background: #233034; color: #AFC6CC; }

.ui-frame { display: grid; grid-template-columns: 12.5em 1fr; }
.ui-rail {
  display: flex; flex-direction: column; gap: 0.18em;
  padding: 1.1em 0.8em;
  border-inline-end: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.22);
}
.ui-rail-label {
  font-size: 0.8em; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-3); padding: 0.9em 0.7em 0.45em;
}
.ui-rail-item {
  display: flex; align-items: center; gap: 0.65em;
  padding: 0.52em 0.7em; border-radius: 7px;
  font-weight: 600; color: var(--ink-2);
}
.ui-rail-item .ico { width: 1.25em; height: 1.25em; color: var(--ink-3); flex: none; }
.ui-rail-item.is-on { background: rgba(142,124,255,0.15); color: var(--ink); }
.ui-rail-item.is-on .ico { color: var(--violet-lit); }
.ui-rail-item b {
  margin-inline-start: auto; font-size: 0.85em; font-weight: 700;
  padding: 0.05em 0.42em; border-radius: 5px;
  background: rgba(255,255,255,0.08); color: var(--ink-2);
}
.ui-rail-item b.is-warn { background: rgba(242,193,78,0.18); color: var(--warn); }

.ui-main, .ui-pad { padding: 1.3em 1.4em 1.5em; }
.ui-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; margin-bottom: 1.15em; }
.ui-title { display: block; font-family: var(--font-display); font-size: 1.45em; font-weight: 600; letter-spacing: -0.03em; }
.ui-sub { display: block; font-size: 0.92em; color: var(--ink-3); font-weight: 500; }
.ui-btn {
  flex: none;
  padding: 0.5em 0.95em; border-radius: 999px;
  background: var(--ink); color: #0A0B0E;
  font-size: 0.92em; font-weight: 800; white-space: nowrap;
}
.ui-btn--wide { display: block; text-align: center; padding: 0.72em; margin-top: 1em; }

.ui-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7em; margin-bottom: 1.25em; }
.ui-kpis--3 { grid-template-columns: repeat(3, 1fr); }
.ui-kpi {
  padding: 0.85em 0.9em; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.028);
  display: flex; flex-direction: column; gap: 0.18em;
}
.ui-kpi-l { font-size: 0.88em; font-weight: 600; color: var(--ink-3); }
.ui-kpi-v { font-family: var(--font-display); font-size: 1.5em; font-weight: 600; letter-spacing: -0.035em; }
.ui-kpi-v em { font-style: normal; font-size: 0.62em; color: var(--ink-3); margin-inline-start: 0.1em; }
/* Coloured by whether the movement is good for the firm, not by its sign:
   receivables ageing down and WIP over 90 days down are both wins, and
   painting them red because the number fell would misread the data. */
.ui-kpi-d { font-size: 0.85em; font-weight: 700; color: var(--ink-3); }
.ui-kpi-d.is-good { color: var(--ok); }
.ui-kpi-d.is-bad { color: var(--risk); }

.ui-split { display: grid; grid-template-columns: 1fr 15.5em; gap: 0.9em; align-items: start; }

.ui-list { display: flex; flex-direction: column; border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); overflow: hidden; }
.ui-list--flat { border: 0; border-radius: 0; }
.ui-row {
  display: grid;
  grid-template-columns: 4.6em 1fr auto auto;
  align-items: center; gap: 0.9em;
  padding: 0.72em 0.9em;
  border-bottom: 1px solid rgba(255,255,255,0.055);
}
.ui-row:last-child { border-bottom: 0; }
.ui-row:nth-child(odd) { background: rgba(255,255,255,0.014); }
.ui-row-key { font-size: 0.86em; font-weight: 700; color: var(--ink-3); letter-spacing: 0.02em; }
.ui-row-main { min-width: 0; }
.ui-row-main b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-row-main b.ar { font-weight: 500; }
.ui-amt { font-family: var(--font-display); font-weight: 600; font-size: 1.02em; letter-spacing: -0.02em; }

.ui-tag {
  padding: 0.24em 0.62em; border-radius: 5px;
  font-size: 0.85em; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.tag-ok   { background: rgba(78,216,160,0.12);  color: #7FE6BC; border-color: rgba(78,216,160,0.24); }
.tag-warn { background: rgba(242,193,78,0.12);  color: #F5D384; border-color: rgba(242,193,78,0.24); }
.tag-risk { background: rgba(255,122,107,0.12); color: #FF9E92; border-color: rgba(255,122,107,0.26); }
.tag-idle { background: rgba(255,255,255,0.06); color: var(--ink-2); border-color: rgba(255,255,255,0.1); }
.is-ok { color: var(--ok); }
.is-warn { color: var(--warn); }

.ui-side { display: flex; flex-direction: column; gap: 0.7em; }
.ui-card {
  display: flex; flex-direction: column; gap: 0.5em;
  padding: 0.9em; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.028);
}
.ui-card-h {
  display: flex; align-items: center; gap: 0.45em;
  font-size: 0.86em; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3);
}
.ui-card-h .ico { width: 1.15em; height: 1.15em; }
.ui-card--ai { background: linear-gradient(160deg, rgba(109,91,255,0.16), rgba(255,255,255,0.02)); border-color: rgba(142,124,255,0.24); }
.ui-card--ai .ui-card-h { color: #B8ACFF; }
.ui-ai-q { font-weight: 600; color: var(--ink-2); }
.ui-ai-a { color: var(--ink); }

.ui-mini {
  display: flex; align-items: center; gap: 0.6em;
  font-size: 0.94em; color: var(--ink-2);
}
.ui-mini i { font-style: normal; font-size: 0.9em; font-weight: 700; color: var(--ink-3); flex: none; min-width: 3.4em; }
.ui-mini b { margin-inline-start: auto; font-weight: 700; color: var(--ink); }
.ui-mini--sum { padding-top: 0.5em; border-top: 1px solid rgba(255,255,255,0.08); font-weight: 700; color: var(--ink); }
.ui-mini > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Matter record */
.ui-matter-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; margin-bottom: 1em; }
.ui-matter-title { display: block; font-size: 1.25em; font-weight: 600; letter-spacing: -0.01em; }
.ui-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75em 1em;
  padding: 0.95em; margin-bottom: 1em;
  border-radius: 9px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.025);
}
.ui-meta span { display: flex; flex-direction: column; gap: 0.1em; font-weight: 600; }
.ui-meta i { font-style: normal; font-size: 0.85em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ui-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5em; position: relative; }
.ui-tl-item { display: flex; flex-direction: column; gap: 0.35em; font-weight: 600; color: var(--ink-3); font-size: 0.94em; }
.ui-tl-item i {
  display: block; height: 3px; border-radius: 999px; background: rgba(255,255,255,0.1); margin-bottom: 0.25em;
}
.ui-tl-item em { font-style: normal; font-size: 0.9em; color: var(--ink-3); }
.ui-tl-item.is-done { color: var(--ink-2); }
.ui-tl-item.is-done i { background: rgba(78,216,160,0.55); }
.ui-tl-item.is-now { color: var(--ink); }
.ui-tl-item.is-now i { background: var(--violet-lit); box-shadow: 0 0 12px rgba(142,124,255,0.5); }

/* Documents */
.ui-docsplit { display: grid; grid-template-columns: 13em 1fr; min-height: 15em; }
.ui-doclist { display: flex; flex-direction: column; gap: 0.15em; padding: 0.8em; border-inline-end: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.2); }
.ui-docitem { display: grid; grid-template-columns: auto 1fr; gap: 0.2em 0.55em; padding: 0.55em 0.6em; border-radius: 7px; color: var(--ink-2); }
.ui-docitem .ico { width: 1.2em; height: 1.2em; grid-row: span 2; color: var(--ink-3); }
.ui-docitem b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-docitem em { font-style: normal; font-size: 0.86em; color: var(--ink-3); }
.ui-docitem.is-on { background: rgba(255,255,255,0.06); color: var(--ink); }
.ui-docview { padding: 1.2em 1.3em; display: flex; flex-direction: column; gap: 0.7em; }
.ui-docview .ar-doc { color: var(--ink-2); font-size: 1.02em; }
.ui-clause mark {
  background: rgba(224,164,76,0.13);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 rgba(224,164,76,0.65);
  padding: 0.05em 0.15em;
  border-radius: 2px;
}

/* Client portal */
.ui--portal { background: linear-gradient(178deg, #14161D 0%, #0B0C11 62%); }
.ui-portal-status { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35em; margin-bottom: 1em; }
.ui-portal-rows { display: flex; flex-direction: column; gap: 0.35em; }
.ui-portal-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7em;
  padding: 0.7em 0.85em; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.025);
  font-weight: 600;
}
.ui-portal-row .ico { width: 1.25em; height: 1.25em; color: var(--ink-3); }
.ui-portal-row em { font-style: normal; font-size: 0.9em; color: var(--ink-3); font-weight: 600; }

/* Time capture */
.ui-cap-sum { display: grid; grid-template-columns: auto 1fr; gap: 0.15em 0.7em; align-items: baseline; margin-bottom: 1.1em; }
.ui-cap-sum b { font-family: var(--font-display); font-size: 2.1em; font-weight: 600; letter-spacing: -0.04em; grid-row: span 2; }
.ui-cap-sum > span:first-of-type { font-weight: 600; color: var(--ink-2); }
.ui-cap-bar { grid-column: 2; display: block; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.09); overflow: hidden; }
.ui-cap-bar u { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--violet-lit), var(--violet)); }
.ui-cap-sum .ui-sub { grid-column: 2; }
.ui-caps { display: flex; flex-direction: column; gap: 0.35em; }
.ui-cap {
  display: grid; grid-template-columns: 3.4em auto 1fr auto auto; align-items: center; gap: 0.75em;
  padding: 0.62em 0.8em; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.022);
}
.ui-cap-t { font-style: normal; font-size: 0.88em; font-weight: 700; color: var(--ink-3); }
.ui-cap .ico { width: 1.2em; height: 1.2em; color: var(--ink-3); }
.ui-cap b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ui-cap em { font-style: normal; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.ui-cap u {
  text-decoration: none; font-size: 0.86em; font-weight: 700;
  padding: 0.22em 0.55em; border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.12); color: var(--ink-2);
}
.ui-cap u.ui-ok { border-color: rgba(78,216,160,0.3); background: rgba(78,216,160,0.12); color: var(--ok); padding: 0.22em 0.4em; display: inline-flex; }
.ui-cap u.ui-ok .ico { width: 1em; height: 1em; color: inherit; }
.ui-cap.is-pending { border-color: rgba(242,193,78,0.22); background: rgba(242,193,78,0.05); }
.ui-cap.is-pending u { border-color: rgba(242,193,78,0.35); color: var(--warn); }

/* Receivables */
.ui-aged { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7em; align-items: end; height: 8.5em; margin-bottom: 1.1em; }
.ui-aged-col { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3em; height: 100%; }
.ui-aged-col i {
  display: block; height: var(--h); border-radius: 7px 7px 2px 2px;
  background: linear-gradient(180deg, rgba(142,124,255,0.75), rgba(142,124,255,0.14));
}
.ui-aged-col i.is-warn { background: linear-gradient(180deg, rgba(242,193,78,0.75), rgba(242,193,78,0.12)); }
.ui-aged-col i.is-risk { background: linear-gradient(180deg, rgba(255,122,107,0.8), rgba(255,122,107,0.12)); }
.ui-aged-col b { font-size: 0.88em; font-weight: 700; color: var(--ink-3); }
.ui-aged-col em { font-style: normal; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }

/* Client funds */
.ui-vault { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7em; margin-bottom: 1em; }
.ui-vault span {
  display: flex; flex-direction: column; gap: 0.15em;
  padding: 0.8em 0.9em; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.028);
}
.ui-vault i { font-style: normal; font-size: 0.86em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ui-vault b { font-family: var(--font-display); font-size: 1.22em; font-weight: 600; letter-spacing: -0.03em; }
.ui-ledger { display: flex; flex-direction: column; border-radius: 9px; border: 1px solid rgba(255,255,255,0.07); overflow: hidden; margin-bottom: 1em; }
.ui-led, .ui-led-h { display: grid; grid-template-columns: 4.6em 1fr 5em 5em 6em; gap: 0.6em; padding: 0.6em 0.9em; align-items: center; }
.ui-led-h { background: rgba(255,255,255,0.035); }
.ui-led-h i { font-style: normal; font-size: 0.85em; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.ui-led { border-top: 1px solid rgba(255,255,255,0.05); }
.ui-led i { font-style: normal; font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-led i:nth-child(n+3) { text-align: end; font-family: var(--font-display); letter-spacing: -0.02em; }
.ui-led i:last-child { color: var(--ink); font-weight: 600; }
.ui-guard {
  display: grid; grid-template-columns: auto 1fr; gap: 0.2em 0.7em;
  padding: 0.85em 0.95em; border-radius: 9px;
  border: 1px solid rgba(255,122,107,0.24); background: rgba(255,122,107,0.07);
}
.ui-guard .ico { width: 1.35em; height: 1.35em; color: var(--risk); grid-row: span 2; }
.ui-guard b { font-weight: 700; color: #FFB3A9; }

/* Insights / reports charts */
.ui-graph { position: relative; margin-bottom: 1em; }
.ui-graph svg { width: 100%; height: 9em; display: block; }
.ui-grid-l { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.ui-legend { display: flex; align-items: center; gap: 0.45em; font-size: 0.88em; font-weight: 600; color: var(--ink-3); }
.ui-legend i { width: 0.7em; height: 0.7em; border-radius: 2px; display: inline-block; }
.ui-legend i.is-v { background: #A79BFF; }
.ui-legend i.is-d { background: rgba(255,255,255,0.3); margin-inline-start: 0.9em; }
.ui-legend i.is-b { background: var(--warn); margin-inline-start: 0.9em; }
.ui-report-main .ui-graph svg { height: 5.5em; }
.ui-report-main .ui-report-h--sm { margin-top: 1.3em; }
.ui-earners { display: flex; flex-direction: column; gap: 0.45em; }
.ui-earner { display: grid; grid-template-columns: 7em 1fr 2.6em; align-items: center; gap: 0.7em; font-weight: 600; }
.ui-earner i { display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.ui-earner u { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--violet-lit), var(--violet)); }
.ui-earner u.is-warn { background: linear-gradient(90deg, #F5D384, var(--warn)); }
.ui-earner em { font-style: normal; text-align: end; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }

.ui-report { display: grid; grid-template-columns: 1fr 15em; gap: 1.4em; }
.ui-report-h { display: block; font-size: 0.86em; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9em; }
.ui-report-h--sm { margin-top: 1.1em; }
.ui-hbars { display: flex; flex-direction: column; gap: 0.7em; }
.ui-hbar { display: grid; grid-template-columns: 13.5em minmax(0, 1fr) 5.5em; align-items: center; gap: 0.8em; font-weight: 600; }
.ui-hbar b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-hbar i { display: block; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.ui-hbar u { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, rgba(142,124,255,0.55), var(--violet-lit)); }
.ui-hbar u.is-warn { background: linear-gradient(90deg, rgba(242,193,78,0.45), var(--warn)); }
.ui-hbar em { font-style: normal; text-align: end; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; }
.ui-report-side { display: flex; flex-direction: column; gap: 0.4em; padding-inline-start: 1.4em; border-inline-start: 1px solid rgba(255,255,255,0.07); }
.ui-donut { position: relative; width: 100%; max-width: 11em; margin: 0 auto 0.6em; }
.ui-donut svg { width: 100%; height: auto; }
.ui-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ui-donut-c b { font-family: var(--font-display); font-size: 1.8em; font-weight: 600; letter-spacing: -0.04em; }
.ui-donut-c i { font-style: normal; font-size: 0.88em; font-weight: 600; color: var(--ink-3); }
.ui-report-note { display: flex; align-items: center; gap: 0.5em; font-size: 0.9em; font-weight: 600; color: var(--ink-3); }
.ui-report-note i { width: 0.7em; height: 0.7em; border-radius: 2px; flex: none; }
.ui-report-note i.is-v { background: #8E7CFF; }
.ui-report-note i.is-b { background: var(--warn); }

/* AI review */
.ui-review { display: grid; grid-template-columns: minmax(0, 1fr) 17.5em; min-height: 14em; }
.ui-review-doc { min-width: 0; padding: 1.2em 1.3em; display: flex; flex-direction: column; gap: 0.7em; border-inline-end: 1px solid rgba(255,255,255,0.06); }
.ui-review-doc .ar-doc { color: var(--ink-2); font-size: 1.02em; }
.ui-flag mark { background: transparent; color: var(--ink); padding: 0.05em 0.15em; border-radius: 2px; }
.ui-flag--risk mark { background: rgba(255,122,107,0.12); box-shadow: inset 0 -2px 0 rgba(255,122,107,0.6); }
.ui-flag--warn mark { background: rgba(242,193,78,0.12); box-shadow: inset 0 -2px 0 rgba(242,193,78,0.6); }
.ui-findings { min-width: 0; display: flex; flex-direction: column; gap: 0.55em; padding: 1em; background: rgba(0,0,0,0.24); }
.ui-find {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25em 0.6em;
  padding: 0.7em 0.8em; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03);
}
.ui-find > b, .ui-find > em { min-width: 0; }
.ui-find i { width: 0.55em; height: 0.55em; border-radius: 50%; margin-top: 0.45em; grid-row: span 3; }
.ui-find--risk i { background: var(--risk); box-shadow: 0 0 8px rgba(255,122,107,0.6); }
.ui-find--warn i { background: var(--warn); box-shadow: 0 0 8px rgba(242,193,78,0.5); }
.ui-find--miss i { background: var(--ink-3); }
.ui-find b { font-weight: 700; }
.ui-find em { font-style: normal; font-size: 0.94em; color: var(--ink-3); line-height: 1.5; }
.ui-find .cite { margin-top: 0.35em; justify-self: start; max-width: 100%; font-family: var(--font-ar-ui); }
/* The seal wraps rather than clipping: an article reference that runs off the
   edge of its own panel is the opposite of what this mark is for. */
.cite { white-space: normal; }
.ui-card > .cite { align-self: flex-start; }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee-sec { padding-top: clamp(7rem, 12vw, 12rem); }
.marquee-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 2.6rem;
}
.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

.firm {
  display: inline-flex; align-items: center; gap: 0.7rem;
  color: var(--ink-3);
  flex: none;
  transition: color 0.5s var(--ease);
}
.marquee .firm:hover { color: var(--ink-2); }
.firm svg { width: 30px; height: 30px; flex: none; opacity: 0.85; }
.firm b {
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap;
}
.firm b.ar { font-family: var(--font-ar-ui); font-weight: 500; }
.firm em { font-style: normal; font-weight: 400; opacity: 0.72; }

/* ==========================================================================
   MISSION
   ========================================================================== */
.mission { overflow: clip; }
.mission-field { width: 92vw; height: 60vw; max-width: 1300px; max-height: 780px; top: -18%; left: -22%; opacity: 0.55; }
.mission .shell { position: relative; z-index: 1; }
.mission-statement {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.35vw, 3rem);
  line-height: 1.24;
  letter-spacing: -0.032em;
  font-weight: 500;
  max-width: 24ch;
  color: var(--ink-2);
  text-wrap: pretty;
}
.mission-hi { color: var(--ink); }
.mission-close { margin-top: 2.6rem; max-width: 52ch; font-size: 1.05rem; }

/* ==========================================================================
   PRODUCT OVERVIEW
   ========================================================================== */
.tabs { margin-top: clamp(2.5rem, 5vw, 4rem); }
.tabs-bar {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.35rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin-bottom: 2.2rem;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-bar::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.66rem 1.15rem;
  border-radius: var(--r-pill);
  font-size: 0.92rem; font-weight: 700;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color 0.4s var(--ease), background 0.4s var(--ease);
}
.tab .ico { width: 17px; height: 17px; }
.tab:hover { color: var(--ink-2); }
.tab[aria-selected="true"] { background: rgba(255,255,255,0.1); color: var(--ink); }

.ov-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.ov-panel[hidden] { display: none; }
/* Panels ship visible so a script failure leaves all of them readable. This
   hides the inactive ones for the moment between first paint and init; the
   flag is set inline in <head> and removed by script once the tablists own
   visibility, so a no-JS reader keeps every panel. */
.js-boot [data-initial-hidden] { display: none; }
.ov-copy .body-2 { margin-top: 1.1rem; }
.ov-shot { min-width: 0; }

/* ==========================================================================
   FEATURES
   ========================================================================== */
.features { overflow: clip; }
.features-field { width: 76vw; height: 76vw; max-width: 1000px; max-height: 1000px; top: 4%; right: -26%; opacity: 0.42; }
.features .shell { position: relative; z-index: 1; }

.feat { margin-top: clamp(2.5rem, 5vw, 4rem); }
.feat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
}
.feat-tab {
  position: relative;
  padding: 1.05rem 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 1.15vw, 1.08rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-3);
  transition: color 0.4s var(--ease);
}
.feat-tab::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--violet-lit);
  transform: scaleX(0);
  transition: transform 0.55s var(--ease);
  box-shadow: 0 0 16px rgba(142,124,255,0.55);
}
.feat-tab:hover { color: var(--ink-2); }
.feat-tab[aria-selected="true"] { color: var(--ink); }
.feat-tab[aria-selected="true"]::after { transform: scaleX(1); }

.feat-panel { display: grid; }
.feat-panel[hidden] { display: none; }
.feat-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}
.feat-copy .body-2 { margin-top: 1.15rem; }
.feat-list { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.7rem; }
.feat-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; color: var(--ink-2); font-size: 0.95rem; }
.feat-list .ico { width: 16px; height: 16px; color: var(--ink-3); margin-top: 0.28rem; }
.feat-quote {
  margin-top: 2rem;
  padding-inline-start: 1.3rem;
  border-inline-start: 1px solid var(--hairline-strong);
}
.feat-quote p { font-family: var(--font-display); font-size: 1.08rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.45; }
.feat-quote cite {
  display: block; margin-top: 0.7rem;
  font-style: normal; font-size: 0.86rem; font-weight: 700; color: var(--ink-2);
}
.feat-quote cite span { display: block; font-weight: 500; color: var(--ink-3); }
.feat-shot { min-width: 0; }

/* Accordion mode (mobile) — set by script below 900px */
.feat.is-acc .feat-bar { display: none; }
.feat.is-acc .feat-panel {
  display: grid;
  grid-template-rows: 0fr;
  border-bottom: 1px solid var(--hairline);
  transition: grid-template-rows 0.6s var(--ease);
}
.feat.is-acc .feat-panel[hidden] { display: grid; }
.feat.is-acc .feat-panel.is-open { grid-template-rows: 1fr; }
.feat.is-acc .feat-inner { overflow: hidden; visibility: hidden; grid-template-columns: 1fr; gap: 1.6rem;
  transition: visibility 0s linear 0.6s; }
.feat.is-acc .feat-panel.is-open .feat-inner { visibility: visible; transition-delay: 0s; }
.feat.is-acc .feat-panel.is-open .feat-inner { padding-bottom: 2.2rem; }
.feat-acc { display: none; }
.feat.is-acc .feat-acc {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: 1.12rem; font-weight: 600; letter-spacing: -0.025em;
  color: var(--ink-2);
  text-align: start;
}
.feat-acc .ico { width: 20px; height: 20px; color: var(--ink-3); transition: transform 0.5s var(--ease), color 0.4s var(--ease); flex: none; }
.feat-acc[aria-expanded="true"] { color: var(--ink); border-bottom-color: transparent; }
.feat-acc[aria-expanded="true"] .ico { transform: rotate(180deg); color: var(--ink); }

/* ==========================================================================
   SOLUTIONS
   ========================================================================== */
.sol-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
  grid-template-rows: auto auto;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.sol-hero {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.8rem, 3vw, 2.8rem);
  padding: clamp(1.6rem, 2.8vw, 2.6rem);
  background: linear-gradient(165deg, rgba(109,91,255,0.13), rgba(255,255,255,0.02) 46%);
}
.sol-tag {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #B8ACFF;
  margin-bottom: 1.1rem;
}
.sol-tag .ico { width: 15px; height: 15px; }
.sol-hero-copy .body-2 { margin-top: 1.1rem; margin-bottom: 1.9rem; }
.sol-hero-shot { min-width: 0; }

.sol-card { padding: clamp(1.5rem, 2.4vw, 2rem); display: flex; flex-direction: column; }
.sol-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--hairline-strong);
  background: rgba(255,255,255,0.05);
  color: var(--ink-2);
  margin-bottom: 1.2rem;
}
.sol-ico .ico { width: 21px; height: 21px; }
.sol-card-h {
  font-family: var(--font-display);
  font-size: 1.24rem; font-weight: 600; letter-spacing: -0.028em;
  margin-bottom: 0.7rem;
  text-wrap: balance;
}
.sol-mini { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 1.2rem; }
.sol-mini li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; font-size: 0.9rem; color: var(--ink-3); }
.sol-mini .ico { width: 15px; height: 15px; color: var(--ink-3); margin-top: 0.24rem; }

/* ==========================================================================
   TESTIMONIAL
   ========================================================================== */
.testimonial {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) 15.5rem;
  gap: clamp(1.8rem, 3.4vw, 3.4rem);
  align-items: center;
  padding: clamp(1.8rem, 3vw, 3rem);
  background: linear-gradient(150deg, rgba(22,34,92,0.42), rgba(255,255,255,0.02) 52%);
}
.testimonial-field { width: 46rem; height: 34rem; top: -40%; left: -14%; opacity: 0.7; }
/* :not(.field) matters: the glow is absolutely positioned, and forcing every
   child to position:relative would drop it back into the grid as a fourth
   track — 46rem wide — which blows the quote column out of the card. */
.testimonial > *:not(.field) { position: relative; z-index: 1; }

.tm-portrait { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; }
.tm-plate {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem;
  padding: 1.5rem 1rem;
  text-align: center;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02) 48%, rgba(0,0,0,0.4)),
    linear-gradient(180deg, #16171C, #0B0C0F);
  border: 1px solid var(--hairline-strong);
  border-radius: inherit;
}
.tm-plate::after {
  content: "";
  position: absolute; inset: 0.55rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.tm-plate-ar { font-family: var(--font-ar-doc); font-size: 1.75rem; color: var(--ink); line-height: 1.5; }
.tm-plate-en { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); }
.tm-plate-rule { width: 2.6rem; height: 1px; background: var(--hairline-bright); margin: 0.3rem 0; }
.tm-plate-role { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.tm-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.tm-firm { color: var(--ink-2); margin-bottom: 1.5rem; }
.tm-firm svg { width: 26px; height: 26px; }
.tm-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.85vw, 1.72rem);
  line-height: 1.36;
  letter-spacing: -0.028em;
  font-weight: 500;
  text-wrap: pretty;
}
.tm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem; margin-top: 2rem; }
.tm-cite { font-style: normal; font-weight: 700; font-size: 0.95rem; }
.tm-cite span { display: block; font-weight: 500; font-size: 0.88rem; color: var(--ink-3); margin-top: 0.15rem; }

.tm-stat {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: clamp(1.3rem, 2vw, 1.7rem);
  border-radius: var(--r-lg);
  border: 1px solid rgba(142,124,255,0.28);
  background: linear-gradient(160deg, rgba(109,91,255,0.16), rgba(109,91,255,0.02));
}
.tm-stat-v {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4vw, 3.5rem);
  font-weight: 600; letter-spacing: -0.04em; line-height: 1;
  color: var(--ink);
}
.tm-stat-l { font-weight: 700; font-size: 0.98rem; }
.tm-stat-note { font-size: 0.84rem; color: #A9A4C4; line-height: 1.5; margin-top: 0.4rem; }

/* ==========================================================================
   STATS BAND
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 5vw, 4.5rem);
  text-align: center;
}
.stat { position: relative; padding-inline: 1rem; }
.stat + .stat::before {
  content: "";
  position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--hairline) 30%, var(--hairline) 70%, transparent);
}
.stat-v {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.4rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-l { display: block; margin-top: 0.9rem; color: var(--ink-3); font-weight: 600; font-size: 0.95rem; }

/* ==========================================================================
   INTEGRATIONS
   ========================================================================== */
.int-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.6rem) 0.6rem;
  margin-top: clamp(3rem, 5vw, 4.5rem);
}
.int { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center; }
.int-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(48px, 5.2vw, 62px); aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ink-2);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), color 0.5s var(--ease), background 0.5s var(--ease);
}
.int-badge svg { width: 52%; height: 52%; }
/* No hover lift: these badges are labels, not controls. */
.int b { font-size: 0.76rem; font-weight: 600; color: var(--ink-3); line-height: 1.3; }

.int-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
  margin-top: clamp(3rem, 5vw, 4.5rem);
}
.int-card { display: flex; flex-direction: column; }
.int-card .body-2 { margin-bottom: 1.4rem; }
.int-card .link-arrow { margin-top: auto; align-self: flex-start; padding-top: 1.5rem; }
.code {
  padding: 1.05rem 1.15rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: rgba(0,0,0,0.4);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--ink-2);
  overflow-x: auto;
}
.code b { color: #A79BFF; font-weight: 700; }
.code i { color: #A9A4C4; font-style: normal; }

/* ==========================================================================
   PLATFORM SHOWCASE
   ========================================================================== */
.showcase { overflow: clip; }
.showcase-field { width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; top: 12%; left: -22%; opacity: 0.4; }
.showcase .shell { position: relative; z-index: 1; }
.showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.showcase-copy .lede { margin-top: 1.2rem; margin-bottom: 1.9rem; }
.showcase-shot { min-width: 0; }

/* ==========================================================================
   SECURITY
   ========================================================================== */
.sec-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(1.8rem, 3.4vw, 3.4rem);
}
.sec-copy .display--section { font-size: clamp(1.9rem, 3vw, 2.7rem); }
.sec-copy .lede { margin-top: 1.2rem; }
.sec-ai {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem;
  margin-top: 1.9rem; padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
  color: var(--ink-2); font-size: 0.94rem; line-height: 1.62;
}
.sec-ai .ico { width: 19px; height: 19px; color: var(--ink-2); margin-top: 0.2rem; }
.sec-ai b { color: var(--ink); }

.sec-badges { display: flex; flex-direction: column; gap: 0.8rem; }
.sec-badge {
  display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1.1rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--surface-1);
}
.sec-badge-mark {
  grid-row: span 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--hairline-strong);
  background: rgba(255,255,255,0.05);
  color: var(--ink-2);
}
.sec-badge-mark .ico { width: 20px; height: 20px; }
.sec-badge b { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; }
.sec-badge em { font-style: normal; font-size: 0.88rem; color: var(--ink-3); line-height: 1.5; }

/* ==========================================================================
   CASE STUDY
   ========================================================================== */
.cs-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(1.8rem, 3.4vw, 3.4rem);
  align-items: center;
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
}
.cs-art {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: linear-gradient(160deg, #100E1C, #0A0A0C 62%);
}
.cs-art-inner { position: absolute; inset: 0; padding: 1.4rem 1.5rem; display: flex; flex-direction: column; }
.cs-art-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.cs-chart { position: absolute; inset: auto 0 22% 0; width: 100%; height: 58%; }
.cs-art-bars { position: absolute; inset: auto 1.5rem 1.4rem 1.5rem; height: 26%; display: flex; align-items: flex-end; gap: 5px; }
.cs-art-bars i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, rgba(142,124,255,0.45), rgba(142,124,255,0.05)); }
.cs-copy .body-2 { margin-top: 1.1rem; margin-bottom: 1.7rem; }
.cs-card:hover .link-arrow::after { transform: scaleX(1); }
.cs-card:hover .link-arrow .ico { transform: translateX(4px); }

/* ==========================================================================
   INSIGHTS
   ========================================================================== */
.ins-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.ins-controls { display: flex; gap: 0.6rem; flex: none; }
.ins-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-1);
  color: var(--ink-2);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.ins-btn:hover { background: var(--surface-3); color: var(--ink); border-color: var(--hairline-bright); }
.ins-btn[disabled] { opacity: 0.32; pointer-events: none; }
.ins-btn .ico { width: 20px; height: 20px; }

/* The rail bleeds to both viewport edges while its first card still lines up
   with the section heading, so a gutter-width padding stands in for the shell
   rather than a max-width the flex track would fight. */
.ins-rail {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding-block: 0.5rem;
  padding-inline: max(var(--shell-pad), (100% - var(--shell)) / 2 + var(--shell-pad));
  scroll-padding-inline-start: max(var(--shell-pad), (100% - var(--shell)) / 2 + var(--shell-pad));
}
.ins-rail::-webkit-scrollbar { display: none; }
.ins-track { display: flex; gap: clamp(1rem, 1.6vw, 1.5rem); width: max-content; padding: 0; max-width: none; }
.ins-card {
  flex: 0 0 clamp(255px, 27vw, 330px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 0.75rem 0.75rem 1.4rem;
}
.ins-thumb {
  display: block;
  aspect-ratio: 5 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 1.15rem;
  border: 1px solid var(--hairline);
}
.ins-thumb svg { width: 100%; height: 100%; }
.ins-thumb--1 { background: linear-gradient(158deg, #131320, #0A0A0D); }
.ins-thumb--2 { background: linear-gradient(158deg, #14122A, #0A0A0D); }
.ins-thumb--3 { background: linear-gradient(158deg, #0E1A18, #0A0A0D); }
.ins-thumb--4 { background: linear-gradient(158deg, #141220, #0A0A0D); }
.ins-cat {
  display: inline-block; align-self: flex-start;
  margin-inline: 0.55rem;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.7rem;
}
.ins-title {
  font-family: var(--font-display);
  font-size: 1.12rem; font-weight: 600; letter-spacing: -0.028em; line-height: 1.32;
  margin-inline: 0.55rem;
  text-wrap: pretty;
}
.ins-meta {
  display: flex; align-items: center; gap: 0.6rem;
  margin: auto 0.55rem 0;
  padding-top: 1.2rem;
  font-size: 0.84rem; font-weight: 600; color: var(--ink-3);
}
.ins-meta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.ins-foot { margin-top: clamp(2rem, 3.5vw, 3rem); }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-2xl);
  border: 1px solid rgba(255,255,255,0.13);
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1.5rem, 5vw, 5rem);
  text-align: center;
  background: linear-gradient(152deg, #1B1442 0%, #100E2C 42%, #0A0B14 100%);
}
.cta-tex { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.cta-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--ease); }
.cta-video.is-ready { opacity: 0.42; }
/* Authored texture: a slow weave of light that reads as film grain in motion,
   replaced automatically when a real texture file is supplied. */
.cta-weave {
  position: absolute; inset: -30%;
  background:
    repeating-linear-gradient(115deg, rgba(142,124,255,0.09) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(65deg, rgba(142,124,255,0.05) 0 2px, transparent 2px 34px);
  mask-image: radial-gradient(58% 58% at 50% 45%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(58% 58% at 50% 45%, #000, transparent 72%);
  animation: ctaWeave 34s linear infinite;
}
@keyframes ctaWeave {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(2%,-2%,0) rotate(1.5deg) scale(1.06); }
  100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
}
.cta-sheen {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,0.07) 48%, transparent 62%);
  animation: ctaSheen 11s var(--ease-soft) infinite;
}
@keyframes ctaSheen {
  0%, 62% { transform: translateX(-60%); opacity: 0; }
  72%     { opacity: 1; }
  100%    { transform: translateX(60%); opacity: 0; }
}
.cta-field-a { width: 46rem; height: 34rem; top: -46%; left: 6%; opacity: 0.55; z-index: -1; }
.cta-field-b { width: 52rem; height: 34rem; bottom: -52%; right: 2%; opacity: 0.75; z-index: -1; }

.cta-body { position: relative; max-width: 44rem; margin-inline: auto; }
.cta-h { max-width: 15ch; margin-inline: auto; }
.cta-lede { margin: 1.35rem auto 0; max-width: 46ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 2.4rem; }
.cta-note { margin-top: 1.6rem; font-size: 0.86rem; color: var(--ink-3); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { position: relative; padding-top: clamp(4rem, 7vw, 7rem); overflow: clip; }
.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
  gap: clamp(2.5rem, 5vw, 5rem);
}
.foot-mark { margin-bottom: 1.3rem; }
.foot-news-copy { color: var(--ink-3); font-size: 0.94rem; line-height: 1.6; max-width: 38ch; margin-bottom: 1.6rem; }
.news-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.news input {
  flex: 1 1 13rem;
  min-width: 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.news input::placeholder { color: var(--ink-3); }
.news input:hover { border-color: var(--hairline-bright); }
.news input:focus-visible { outline: 2px solid var(--violet-lit); outline-offset: 2px; background: rgba(255,255,255,0.07); }
.news input[aria-invalid="true"] { border-color: rgba(255,122,107,0.6); }
.news-msg { margin-top: 0.75rem; font-size: 0.85rem; font-weight: 600; min-height: 1.2rem; color: var(--ink-3); }
.news-msg.is-err { color: #FF9E92; }
.news-msg.is-ok { color: var(--ok); }

.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.foot-h {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 1.1rem;
}
.foot-col ul { display: flex; flex-direction: column; gap: 0.72rem; }
.foot-col a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.92rem; color: var(--ink-2);
  transition: color 0.3s var(--ease);
}
.foot-col a:hover { color: var(--ink); }
.foot-col .ico { width: 13px; height: 13px; opacity: 0.55; }

.foot-rule { margin-block: clamp(2.5rem, 4vw, 3.5rem) 1.8rem; }
.foot-legal { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: start; }
.foot-compliance { font-size: 0.875rem; line-height: 1.65; color: var(--ink-2); max-width: 68ch; }
.foot-meta { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.82rem; color: var(--ink-3); justify-self: end; text-align: end; }
/* text-align on .foot-meta cannot reach these two: as flex items they are
   blockified to full-width flex containers, so the alignment has to be
   justify-content or they hang left while the copyright sits right. */
.foot-locale { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.45rem; }
.foot-locale .ico { width: 14px; height: 14px; }
.foot-locale i { font-style: normal; opacity: 0.4; }
.foot-locale a:hover { color: var(--ink); }

/* Colophon. The heart takes the line's own colour rather than a red of its
   own: brass is reserved for material that resolves to a source, and one
   14px glyph is not worth a new hue on a page this controlled. */
.foot-credit { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.4rem; }
.foot-heart { width: 13px; height: 13px; flex: none; }
.foot-credit a {
  color: var(--ink-2);
  font-weight: 600;
  transition: color 0.3s var(--ease);
}
.foot-credit a:hover { color: var(--ink); }

.foot-watermark {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  line-height: 0.78;
  pointer-events: none;
}
/* The wordmark sinks into the page edge. The fade is a mask on the element,
   not a gradient painted into the glyphs — same result, and the letterforms
   keep a single solid fill and a single solid stroke. */
.foot-watermark span {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(4.5rem, 19.5vw, 19rem);
  letter-spacing: -0.04em;
  text-align: center;
  color: rgba(255,255,255,0.045);
  -webkit-text-stroke: 1px rgba(255,255,255,0.085);
  transform: translateY(16%);
  mask-image: linear-gradient(180deg, #000 8%, rgba(0,0,0,0.25) 74%, transparent 96%);
  -webkit-mask-image: linear-gradient(180deg, #000 8%, rgba(0,0,0,0.25) 74%, transparent 96%);
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.lightbox[hidden] { display: none; }
.lightbox-scrim {
  position: absolute; inset: 0;
  background: rgba(4, 5, 7, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.lightbox.is-open .lightbox-scrim { opacity: 1; }
.lightbox-inner {
  position: relative;
  width: min(1000px, 100%);
  opacity: 0; transform: translateY(14px) scale(0.985);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.lightbox.is-open .lightbox-inner { opacity: 1; transform: none; }
.lightbox-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.lightbox-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }
.lightbox-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--hairline-strong); background: var(--surface-1); color: var(--ink-2);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.lightbox-close:hover { background: var(--surface-3); color: var(--ink); }
.lightbox-close .ico { width: 20px; height: 20px; }
.lightbox-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  background: #0A0B0F;
  box-shadow: var(--shadow-deep);
}
.lightbox-video { width: 100%; height: 100%; object-fit: cover; }
.lightbox-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9rem; padding: clamp(1.5rem, 4vw, 3rem); text-align: center;
  background: radial-gradient(70% 90% at 50% 30%, rgba(109,91,255,0.2), transparent 70%), #0A0B0F;
}
.lightbox-fallback[hidden] { display: none; }
.lightbox-fallback .body-2 { max-width: 46ch; font-size: 0.94rem; }
.lightbox-fallback-h { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.03em; }
.lightbox-fallback-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  border: 1px solid var(--hairline-strong); background: rgba(255,255,255,0.05);
  color: var(--ink-2); margin-bottom: 0.4rem;
}
.lightbox-fallback-mark .ico { width: 24px; height: 24px; }
.lightbox-fallback .btn { margin-top: 0.6rem; }
body.is-locked { overflow: hidden; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-inner { grid-template-columns: auto 1fr; }
  .nav-actions { gap: 0.7rem; }
  .testimonial { grid-template-columns: 12rem minmax(0, 1fr); }
  .tm-stat { grid-column: 1 / -1; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
  .tm-stat-note { width: 100%; margin-top: 0; }
  .int-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .ov-panel, .showcase-grid, .sec-wrap, .cs-card { grid-template-columns: 1fr; }
  .ov-panel { gap: 2rem; }
  .sol-grid { grid-template-columns: 1fr; }
  .sol-hero { grid-row: auto; }
  .cs-art { order: -1; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-legal { grid-template-columns: 1fr; }
  .foot-meta { justify-self: start; text-align: start; }
  .foot-locale, .foot-credit { justify-content: flex-start; }
  .ui-report { grid-template-columns: 1fr; }
  .ui-report-side { padding-inline-start: 0; border-inline-start: 0; padding-top: 1.2em; border-top: 1px solid rgba(255,255,255,0.07); }
}

@media (max-width: 860px) {
  .nav-signin { display: none; }
  .nav-burger { display: inline-flex; }
  .hero-h1 { max-width: 100%; }
  .hero-stage { margin-bottom: clamp(-4rem, -6vw, -2rem); }
  .testimonial { grid-template-columns: 1fr; text-align: start; }
  .tm-portrait { max-width: 15rem; aspect-ratio: 1; }
  .int-cards { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 2.5rem; text-align: start; }
  .stat + .stat::before { top: -1.25rem; bottom: auto; left: 0; right: 0; width: auto; height: 1px;
    background: linear-gradient(90deg, var(--hairline), transparent 70%); }
  .stat { padding-inline: 0; }
  .ins-head { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .ui-split { grid-template-columns: 1fr; }
  .ui-frame { grid-template-columns: 1fr; }
  .ui-rail { display: none; }
  .ui-review, .ui-docsplit { grid-template-columns: 1fr; }
  .ui-review-doc { border-inline-end: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .ui-doclist { flex-direction: row; overflow-x: auto; border-inline-end: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .ui-docitem { flex: 0 0 11em; }
}

@media (max-width: 680px) {
  :root { --nav-h: 66px; }
  .hero { padding-top: calc(var(--nav-h) + 2.5rem); }
  .hero-proof { flex-direction: column; gap: 0.55rem; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .hero-stage { perspective: none; }
  .hero-mockup { transform: none !important; }
  /* Phones get the poster frame, per the brief: no film is fetched, and the
     ambient loop is switched off rather than left running behind the headline,
     where the statute text it renders would compete with the copy for the same
     pixels. The poster is the whole background here. */
  .amb { display: none; }
  .hero-video { opacity: 1; object-fit: cover; object-position: 78% 42%; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(5,6,8,0.9) 0%, rgba(5,6,8,0.62) 28%, rgba(5,6,8,0.74) 62%, var(--ground) 100%);
  }
  .int-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem 0.4rem; }
  .int b { font-size: 0.68rem; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-kpis { grid-template-columns: repeat(2, 1fr); }
  .ui-meta { grid-template-columns: repeat(2, 1fr); }
  .ui-timeline { grid-template-columns: repeat(2, 1fr); gap: 0.8em; }
  .ui-row { grid-template-columns: 1fr auto; gap: 0.5em 0.7em; }
  .ui-row-key { grid-column: 1; font-size: 0.82em; }
  .ui-row-main { grid-column: 1 / -1; grid-row: 2; }
  .ui-row .ui-av { display: none; }
  .ui-led, .ui-led-h { grid-template-columns: 3.8em 1fr 4.4em 4.4em; }
  .ui-led i:nth-child(5), .ui-led-h i:nth-child(5) { display: none; }
  .ui-cap { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .ui-cap .ico { display: none; }
  .ui-cap u { justify-self: end; }
  .ui-cap b { white-space: normal; }
  .ui-avs { display: none; }
  .ui-hbar { grid-template-columns: 8em 1fr 4.6em; }
  .ui-earner { grid-template-columns: 5.5em 1fr 2.4em; }
  .ui-search { display: none; }
  .marquee-track { gap: 2.5rem; animation-duration: 34s; }
  .ins-card { flex: 0 0 80vw; }
  .sec-badge { grid-template-columns: 1fr; gap: 0.5rem; }
  .sec-badge-mark { grid-row: auto; }
}

@media (max-width: 540px) {
  /* The overview tab bar carries three labels; dropping the icons is cheaper
     than a scroller that hides the third one behind a fade. */
  .tabs-bar { width: 100%; justify-content: space-between; overflow: visible; }
  .tab { padding: 0.6rem 0.7rem; font-size: 0.82rem; }
  .tab .ico { display: none; }
}

@media (max-width: 420px) {
  .int-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tm-quote p { font-size: 1.12rem; }
}

/* ==========================================================================
   REDUCED MOTION
   The hero swaps to its static poster frame, exactly as a paused film would
   look: the ambient loop is removed rather than frozen mid-dissolve, and the
   <video> element — which carries the poster and has no source yet — becomes
   the visible layer.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .amb { display: none; }
  .hero-video { opacity: 1; object-fit: cover; object-position: 78% 42%; }
  .marquee-track { animation: none; transform: none; }
  .marquee { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
  .cta-weave, .cta-sheen { animation: none; }
  .hero-eyebrow-dot { animation: none; }
}