/* ==========================================================================
   About — "Onda": giant outlined OMNI, contained neural orb, editorial chapters
   Scoped with .about-… ; logical properties only (RTL safe).
   ========================================================================== */

/* ---------- Hero ---------- */
.about-hero {
  /* Visible crop of the 1600×580 letter artwork: a "horizon" of the upper half of the glyphs. */
  --omni-ratio: 1600 / 290;
  --omni-width: 116%;
  --omni-shift: -8%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: max(100svh, 760px);
  display: flex;
  flex-direction: column;
  padding-block-start: calc(var(--header-h) + clamp(28px, 4vw, 56px));
}
.about-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.about-hero__bg .grid-lines {
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 72%);
  opacity: 0.4;
}
.about-hero__glow--a { width: 62vw; height: 62vw; inset-block-start: -26vw; inset-inline-end: -18vw; opacity: 0.34; }
.about-hero__glow--b { width: 38vw; height: 38vw; inset-block-end: 4vw; inset-inline-start: -14vw; opacity: 0.2; }

.about-hero__top {
  position: relative;
  z-index: 2;
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding-block-end: clamp(8px, 1.5vw, 20px);
}
.about-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.about-hero__title { font-size: clamp(50px, 7vw, 108px); }
.about-hero__title .accent,
.about-mission__title .accent,
.about-principles__title .accent,
.about-building__title .accent { white-space: nowrap; }
.about-hero__lead { max-width: 50ch; }
.about-hero__actions { --cluster-gap: 14px; margin-block-start: 4px; }

/* Orb: rings + neural particles (fx) + glowing brand mark as the poster. It rises over the letter horizon. */
.about-hero__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  align-self: end;
  margin-block-end: calc(-1 * clamp(40px, 6vw, 96px));
}
.about-orb {
  position: relative;
  width: min(100%, clamp(260px, 27vw, 400px));
  aspect-ratio: 1;
}
.about-orb__halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 42%, rgba(61, 139, 255, 0.34), transparent 60%),
    radial-gradient(circle at 62% 60%, rgba(240, 169, 30, 0.22), transparent 58%);
  filter: blur(34px);
  animation: about-breathe 9s var(--ease-in-out) infinite;
}
.about-orb__ring { position: absolute; border-radius: 50%; border: 1px solid var(--line); pointer-events: none; }
.about-orb__ring--outer { inset: 0; border-color: var(--line-strong); animation: about-spin 48s linear infinite; }
.about-orb__ring--mid { inset: 10%; border-style: dashed; border-color: rgba(207, 226, 255, 0.1); animation: about-spin 80s linear infinite reverse; }
.about-orb__ring--inner {
  inset: 20%;
  border-color: rgba(207, 226, 255, 0.07);
  background: radial-gradient(circle, transparent 58%, rgba(207, 226, 255, 0.05));
}
.about-orb__spark {
  position: absolute;
  inset-block-start: -4px;
  inset-inline: 0;
  margin-inline: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 16px 3px rgba(255, 201, 90, 0.75);
}
.about-orb__core { position: absolute; inset: 16%; display: grid; place-items: center; }
.about-orb .about-orb__fx { inset: -18%; border-radius: 50%; }
.about-orb__mark {
  position: relative;
  width: 64%;
  max-width: 175px;
  height: auto;
  filter: drop-shadow(0 0 22px rgba(61, 139, 255, 0.45)) drop-shadow(0 0 64px rgba(240, 169, 30, 0.28));
  animation: about-float 8s var(--ease-in-out) infinite;
  transition: opacity 1.4s var(--ease-out), scale 1.4s var(--ease-out);
}
.about-orb:has(.fx.is-live) .about-orb__mark { opacity: 0; scale: 0.86; }
.about-orb__label {
  position: absolute;
  z-index: 1;
  width: max-content;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: rgba(6, 12, 24, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: var(--text-3);
}
.about-orb__label--n, .about-orb__label--s { inset-inline: 0; margin-inline: auto; }
.about-orb__label--n { inset-block-start: -11px; color: var(--ice); }
.about-orb__label--s { inset-block-end: -11px; color: var(--gold-2); }
.about-orb__label--e, .about-orb__label--w { inset-block: 0; margin-block: auto; height: max-content; }
.about-orb__label--e { inset-inline-end: -6%; }
.about-orb__label--w { inset-inline-start: -6%; }

/* Giant outlined letters: a horizon of the upper glyph halves, riding a slow wave, with a travelling light. */
.about-omni {
  position: relative;
  z-index: 1;
  margin-block-start: calc(-1 * clamp(20px, 3.4vw, 56px));
  pointer-events: none;
}
.about-omni__horizon {
  position: absolute;
  inset-block-start: -20%;
  inset-inline-end: 4%;
  width: 46%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 201, 90, 0.16), rgba(61, 139, 255, 0.08) 55%, transparent);
  filter: blur(20px);
}
.about-omni__drift {
  will-change: transform;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, 0.2) 100%);
  mask-image: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, 0.2) 100%);
}
.about-omni__svg {
  display: block;
  width: var(--omni-width);
  max-width: none;
  height: auto;
  aspect-ratio: var(--omni-ratio);
  margin-inline-start: var(--omni-shift);
  overflow: hidden;
}
.about-omni__glyphs--base { fill: url(#about-omni-fill); stroke: var(--ice); stroke-opacity: 0.2; stroke-width: 1; }
.about-omni__glyphs--mask { fill: none; stroke: white; stroke-width: 1.8; }
.about-omni__glyphs--echo { fill: none; stroke: var(--ice); stroke-width: 1; }
.about-omni__glyphs--echo-1 { stroke-opacity: 0.09; }
.about-omni__glyphs--echo-2 { stroke-opacity: 0.045; }
.about-omni__glyphs--echo .about-omni__l { animation-delay: calc(var(--i, 0) * -1.9s - 0.5s); }
.about-omni__glyphs--echo-2 .about-omni__l { animation-delay: calc(var(--i, 0) * -1.9s - 1s); }
.about-omni__l {
  vector-effect: non-scaling-stroke;
  animation: about-wave 12s var(--ease-in-out) infinite;
  animation-delay: calc(var(--i, 0) * -1.9s);
}
.about-omni__sweep { animation: about-sweep 16s linear infinite; }
.about-omni__pointer { opacity: 0; transition: opacity 600ms var(--ease-out); }
.about-omni.is-lit .about-omni__pointer { opacity: 1; }
/* Gradient stops take their colours from the design tokens. */
.about-omni__stop--fill-a { stop-color: var(--ice); stop-opacity: 0.1; }
.about-omni__stop--fill-b { stop-color: var(--blue-2); stop-opacity: 0.02; }
.about-omni__stop--fill-c { stop-color: var(--blue-2); stop-opacity: 0; }
.about-omni__stop--clear { stop-color: var(--blue-2); stop-opacity: 0; }
.about-omni__stop--blue { stop-color: var(--blue-2); stop-opacity: 0.9; }
.about-omni__stop--ice { stop-color: var(--ice-2); }
.about-omni__stop--gold { stop-color: var(--gold-2); }
.about-omni__stop--fade { stop-color: var(--gold); stop-opacity: 0; }
.about-omni__stop--p0 { stop-color: var(--gold-3); }
.about-omni__stop--p1 { stop-color: var(--gold-2); stop-opacity: 0.55; }
.about-omni__stop--p2 { stop-color: var(--gold-2); stop-opacity: 0; }

/* ---------- Mission (opens with the chapter index, on the hero's ground line) ---------- */
.about-mission {
  padding-block: 0 clamp(88px, 10vw, 150px);
  border-block-start: 1px solid var(--line);
}
.about-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block-end: clamp(72px, 9vw, 136px);
  border-block-end: 1px solid var(--line);
}
.about-index__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 20px;
  padding-inline-end: 18px;
  font-size: 14.5px;
  color: var(--text-2);
  transition: color var(--dur) var(--ease-out);
}
.about-index__link + .about-index__link { padding-inline-start: 18px; border-inline-start: 1px solid var(--line); }
.about-index__link::before {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-2), rgba(255, 201, 90, 0));
  transition: width 700ms var(--ease-out);
}
[dir="rtl"] .about-index__link::before { background: linear-gradient(270deg, var(--gold-2), rgba(255, 201, 90, 0)); }
.about-index__link:hover { color: var(--text); }
.about-index__link:hover::before { width: 88%; }
.about-index__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--gold-2); }
.about-index__arrow { width: 16px; height: 16px; flex-shrink: 0; margin-inline-start: auto; color: var(--text-3); rotate: 90deg; transition: translate var(--dur) var(--ease-out), color var(--dur); }
.about-index__link:hover .about-index__arrow { color: var(--gold-2); translate: 0 3px; }

.about-mission__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 24px);
  row-gap: 28px;
  margin-block-end: clamp(56px, 8vw, 112px);
}
.about-mission__head .eyebrow { grid-column: 1 / -1; }
.about-mission__title { grid-column: 1 / span 11; }
.about-mission__lead { grid-column: 7 / -1; max-width: 52ch; }

.about-pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block-start: 1px solid var(--line);
}
.about-pillar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(28px, 3.6vw, 52px) clamp(20px, 2.8vw, 44px);
  border-inline-end: 1px solid var(--line);
}
.about-pillar:first-child { padding-inline-start: 0; }
.about-pillar:last-child { padding-inline-end: 0; border-inline-end: 0; }
.about-pillar__word {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-block-end: clamp(16px, 2.4vw, 32px);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
}
.about-pillar__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 201, 90, 0.28);
  background: radial-gradient(circle at 50% 30%, rgba(240, 169, 30, 0.16), transparent 70%);
  color: var(--gold-2);
}
.about-pillar__icon .icon { width: 20px; height: 20px; }
.about-pillar__title { font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
.about-pillar__text { max-width: 38ch; font-size: 15.5px; color: var(--text-2); }

/* ---------- The name: the page's full-bleed band ---------- */
.about-name {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(88px, 10vw, 150px);
  border-block: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(207, 226, 255, 0.025), transparent 30%, transparent 70%, rgba(207, 226, 255, 0.02)),
    var(--bg-1);
}
.about-name__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.about-name__bg .grid-lines {
  -webkit-mask-image: radial-gradient(ellipse 46% 70% at 26% 50%, #000 10%, transparent 76%);
  mask-image: radial-gradient(ellipse 46% 70% at 26% 50%, #000 10%, transparent 76%);
  opacity: 0.55;
}
[dir="rtl"] .about-name__bg .grid-lines {
  -webkit-mask-image: radial-gradient(ellipse 46% 70% at 74% 50%, #000 10%, transparent 76%);
  mask-image: radial-gradient(ellipse 46% 70% at 74% 50%, #000 10%, transparent 76%);
}
.about-name__glow--a { width: 44vw; height: 44vw; inset-block-start: 8%; inset-inline-start: -10vw; opacity: 0.2; }
.about-name__glow--b { width: 36vw; height: 36vw; inset-block-start: -14vw; inset-inline-end: -8vw; opacity: 0.26; }
.about-name__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: start;
}
.about-name__entry-wrap { position: sticky; inset-block-start: calc(var(--header-h) + 48px); }
.about-entry {
  margin: 0;
  padding: clamp(30px, 4vw, 56px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(31, 111, 209, 0.18), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(240, 169, 30, 0.1), transparent 60%),
    linear-gradient(180deg, rgba(207, 226, 255, 0.05), rgba(207, 226, 255, 0.01)),
    var(--glass);
}
.about-entry__corner { position: absolute; width: 22px; height: 22px; border: 1px solid rgba(255, 201, 90, 0.5); pointer-events: none; }
.about-entry__corner--a { inset-block-start: 18px; inset-inline-start: 18px; border-inline-end: 0; border-block-end: 0; }
.about-entry__corner--b { inset-block-end: 18px; inset-inline-end: 18px; border-inline-start: 0; border-block-start: 0; }
.about-entry__word {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(96px, 13vw, 196px);
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.about-entry__letters {
  padding-inline-end: 0.08em;
  background: linear-gradient(100deg, var(--gold-3) 0%, var(--gold-2) 35%, var(--gold) 70%, var(--amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-entry__dash { color: rgba(207, 226, 255, 0.3); }
.about-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-block: 18px 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-3);
}
.about-entry__phonetic { color: var(--ice); }
.about-entry__kind .accent { font-size: 1.2em; }
.about-entry__def {
  margin-block-start: 28px;
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
.about-entry__sense { font-family: var(--font-mono); font-size: 0.5em; vertical-align: 0.35em; color: var(--gold-2); margin-inline-end: 0.3em; }
.about-entry__example { margin-block-start: 16px; font-size: 15px; color: var(--text-3); }

.about-name__copy { display: flex; flex-direction: column; gap: 22px; padding-block-start: 8px; }
.about-alls { list-style: none; margin: clamp(20px, 3vw, 36px) 0 0; padding: 0; display: grid; }
.about-all {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 22px;
  padding-block: 28px;
  border-block-start: 1px solid var(--line);
}
.about-all:last-child { border-block-end: 1px solid var(--line); }
.about-all__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(61, 139, 255, 0.3);
  background: linear-gradient(180deg, rgba(61, 139, 255, 0.18), rgba(61, 139, 255, 0.03));
  color: var(--ice);
}
.about-all__icon .icon { width: 22px; height: 22px; }
.about-all__label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--gold-2); }
.about-all__title { margin-block: 10px 8px; font-size: var(--fs-h3); font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); }
.about-all__text { max-width: 54ch; color: var(--text-2); }

/* ---------- Principles ---------- */
.about-principles { padding-block: clamp(88px, 10vw, 150px) clamp(48px, 6vw, 96px); }
.about-principles__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  align-items: end;
  gap: 28px clamp(32px, 6vw, 96px);
  margin-block-end: clamp(48px, 6vw, 84px);
}
.about-principles__lead { max-width: 40ch; }
.about-principles__list { list-style: none; margin: 0; padding: 0; border-block-end: 1px solid var(--line); }
.about-principle {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1.1fr) minmax(0, 1fr) 52px;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding-block: clamp(26px, 3.2vw, 44px);
  border-block-start: 1px solid var(--line);
}
.about-principle::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-2), rgba(61, 139, 255, 0.6) 60%, transparent);
  transition: width 900ms var(--ease-out);
}
[dir="rtl"] .about-principle::before { background: linear-gradient(270deg, var(--gold-2), rgba(61, 139, 255, 0.6) 60%, transparent); }
.about-principle::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 120% at 30% 50%, rgba(240, 169, 30, 0.06), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.about-principle:hover::before { width: 100%; }
.about-principle:hover::after { opacity: 1; }
.about-principle__num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--text-3); transition: color var(--dur); }
.about-principle__title {
  font-size: clamp(24px, 2.9vw, 42px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--text);
}
.about-principle__text { max-width: 46ch; color: var(--text-2); }
.about-principle__icon {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text-3);
  transition: color var(--dur), border-color var(--dur), background-color var(--dur), rotate var(--dur-slow) var(--ease-out);
}
.about-principle__icon .icon { width: 20px; height: 20px; }
.about-principle:hover .about-principle__num { color: var(--gold-2); }
.about-principle:hover .about-principle__icon { color: var(--gold-2); border-color: rgba(255, 201, 90, 0.45); background: rgba(240, 169, 30, 0.07); rotate: -12deg; }

/* ---------- What we're building ---------- */
.about-building { padding-block: clamp(48px, 6vw, 96px) 0; }
.about-building__head { display: flex; flex-direction: column; gap: 20px; max-width: 820px; margin-block-end: clamp(48px, 6vw, 80px); }
.about-surfaces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.about-surfaces__item { display: flex; min-width: 0; }
.about-surface {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(20px, 2.4vw, 32px);
  width: 100%;
  min-height: 300px;
  color: inherit;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur);
}
.about-surface:hover { border-color: rgba(207, 226, 255, 0.26); }
.about-surface__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.about-surface__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--gold-2);
}
.about-surface__tag .icon { width: 18px; height: 18px; color: var(--ice); }
.about-surface__name { margin-block-start: 6px; font-size: clamp(26px, 2.6vw, 36px); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; color: var(--text); }
.about-surface__text { color: var(--text-2); font-size: 15.5px; }
.about-surface__link { margin-block-start: auto; padding-block-start: 12px; font-size: 15px; }
.about-surface:hover .about-surface__link { color: var(--gold-2); }
.about-surface:hover .about-surface__link .icon { transform: translateX(4px); }
[dir="rtl"] .about-surface:hover .about-surface__link .icon { transform: scaleX(-1) translateX(4px); }
.about-surface__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 210px;
  overflow: hidden;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background:
    radial-gradient(80% 70% at 50% 110%, rgba(31, 111, 209, 0.2), transparent 70%),
    rgba(3, 6, 13, 0.55);
}
.about-surface__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(207, 226, 255, 0.1) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
  opacity: 0.6;
}

/* Chat viz */
.about-viz-chat { position: relative; width: 80%; display: flex; flex-direction: column; gap: 12px; }
.about-viz-chat__bubble { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px; border-radius: 14px; }
.about-viz-chat__bubble--user {
  align-self: flex-end;
  width: 58%;
  height: 34px;
  border: 1px solid rgba(255, 201, 90, 0.3);
  border-end-end-radius: 4px;
  background: linear-gradient(120deg, rgba(240, 169, 30, 0.3), rgba(240, 169, 30, 0.1));
}
.about-viz-chat__think { display: flex; gap: 6px; padding-inline-start: 8px; }
.about-viz-chat__think i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-2); animation: about-dot 1.4s var(--ease-in-out) infinite; }
.about-viz-chat__think i:nth-child(2) { animation-delay: 0.18s; }
.about-viz-chat__think i:nth-child(3) { animation-delay: 0.36s; }
.about-viz-chat__bubble--bot { width: 90%; border: 1px solid var(--glass-border); border-end-start-radius: 4px; background: rgba(207, 226, 255, 0.06); }
.about-viz-chat__bubble--bot i { display: block; height: 6px; border-radius: 3px; background: rgba(207, 226, 255, 0.24); }
.about-viz-chat__bubble--bot i:nth-child(1) { width: 92%; }
.about-viz-chat__bubble--bot i:nth-child(2) { width: 74%; }
.about-viz-chat__bubble--bot i:nth-child(3) { width: 46%; }

/* Code viz */
.about-viz-code {
  position: relative;
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(6, 12, 24, 0.85);
}
.about-viz-code i { display: block; width: var(--w, 50%); height: 7px; margin-inline-start: calc(var(--x, 0) * 14px); border-radius: 4px; background: rgba(207, 226, 255, 0.18); }
.about-viz-code i.is-del { background: rgba(255, 120, 100, 0.42); }
.about-viz-code i.is-add { background: rgba(80, 220, 150, 0.55); box-shadow: 0 0 14px rgba(80, 220, 150, 0.35); }
.about-viz-code__ok {
  position: absolute;
  inset-block-end: -14px;
  inset-inline-end: -14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--bg-0);
  background: radial-gradient(circle at 35% 30%, var(--ice-2), var(--gold-3) 50%, var(--gold-2));
  box-shadow: 0 0 22px rgba(255, 201, 90, 0.5);
}
.about-viz-code__ok .icon { width: 18px; height: 18px; stroke-width: 2.2; }

/* Create viz */
.about-viz-create { position: relative; width: 64%; aspect-ratio: 4 / 3; isolation: isolate; }
.about-viz-create__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(110% 80% at 15% 110%, rgba(240, 169, 30, 0.8), transparent 55%),
    radial-gradient(90% 80% at 95% 0%, rgba(61, 139, 255, 0.85), transparent 60%),
    radial-gradient(60% 50% at 60% 60%, rgba(207, 226, 255, 0.35), transparent 70%),
    linear-gradient(160deg, var(--navy), var(--bg-2));
  box-shadow: var(--shadow-1);
}
.about-viz-create__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 48%, transparent 62%);
  translate: -120% 0;
  animation: about-shine 6s var(--ease-in-out) infinite;
}
.about-viz-create__frame--b { z-index: -1; opacity: 0.45; rotate: -7deg; translate: -10% 8%; filter: saturate(0.7); }
.about-viz-create__frame--b::after { display: none; }
.about-viz-create__play {
  position: absolute;
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(3, 6, 13, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text);
}
.about-viz-create__play .icon { width: 16px; height: 16px; fill: currentColor; margin-inline-start: 2px; }

/* Agents viz */
.about-viz-agents { width: 82%; height: auto; overflow: visible; }
.about-viz-agents circle { fill: var(--ice); filter: drop-shadow(0 0 6px rgba(207, 226, 255, 0.6)); }
.about-viz-agents .about-viz-agents__hub { fill: var(--gold-2); filter: drop-shadow(0 0 10px rgba(255, 201, 90, 0.8)); }
.about-viz-agents__links path { stroke: rgba(207, 226, 255, 0.35); stroke-dasharray: 3 5; animation: about-flow 3s linear infinite; }

/* ---------- Keyframes ---------- */
@keyframes about-spin { to { rotate: 360deg; } }
@keyframes about-sweep { to { transform: translateX(1600px); } }
@keyframes about-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes about-breathe { 0%, 100% { opacity: 0.9; scale: 1; } 50% { opacity: 1; scale: 1.06; } }
@keyframes about-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes about-dot { 0%, 100% { opacity: 0.25; translate: 0 0; } 40% { opacity: 1; translate: 0 -3px; } }
@keyframes about-shine { 0%, 55% { translate: -120% 0; } 100% { translate: 120% 0; } }
@keyframes about-flow { to { stroke-dashoffset: -16; } }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .about-hero__top { grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr); }
  .about-surface { grid-template-columns: minmax(0, 1fr); }
  .about-surface__visual { order: -1; min-height: 180px; }
  .about-principle { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); }
  .about-principle__icon { display: none; }
}

@media (max-width: 820px) {
  .about-hero { min-height: 0; --omni-ratio: 1600 / 400; --omni-width: 120%; --omni-shift: -9%; }
  .about-hero__top { grid-template-columns: minmax(0, 1fr); row-gap: clamp(48px, 9vw, 72px); }
  .about-hero__visual { order: 2; align-self: center; margin-block-end: calc(-1 * clamp(12px, 4vw, 32px)); }
  .about-orb { width: min(76vw, 360px); }
  .about-omni__horizon { inset-inline: 10%; width: auto; }
  .about-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-index__link:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .about-index__link:nth-child(n + 3) { border-block-start: 1px solid var(--line); }

  .about-mission__title, .about-mission__lead { grid-column: 1 / -1; }
  .about-principles__head { grid-template-columns: minmax(0, 1fr); }
  .about-pillars { grid-template-columns: minmax(0, 1fr); }
  .about-pillar, .about-pillar:first-child, .about-pillar:last-child { padding-inline: 0; border-inline-end: 0; }
  .about-pillar + .about-pillar { border-block-start: 1px solid var(--line); }

  .about-name__grid { grid-template-columns: minmax(0, 1fr); }
  .about-name__entry-wrap { position: static; order: 2; }
  .about-name__bg .grid-lines, [dir="rtl"] .about-name__bg .grid-lines {
    -webkit-mask-image: radial-gradient(ellipse 80% 40% at 50% 78%, #000 10%, transparent 76%);
    mask-image: radial-gradient(ellipse 80% 40% at 50% 78%, #000 10%, transparent 76%);
  }

  .about-principle { grid-template-columns: 44px minmax(0, 1fr); row-gap: 12px; align-items: start; }
  .about-principle__num { padding-block-start: 0.7em; }
  .about-principle__text { grid-column: 2; }

  .about-surfaces { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  /* Mobile: the whole glyphs, larger than the viewport so O and I still bleed off the edges. */
  .about-hero { padding-block-start: calc(var(--header-h) + 40px); --omni-ratio: 1600 / 560; --omni-width: 118%; --omni-shift: -8.5%; }
  .about-hero__actions { width: 100%; }
  .about-hero__actions .btn { flex: 1 1 auto; }
  .about-omni { margin-block-start: -28px; }
  .about-orb__label { font-size: 9.5px; padding: 4px 8px; }
  .about-orb__label--e { inset-inline-end: -2%; }
  .about-orb__label--w { inset-inline-start: -2%; }
  .about-index__link { font-size: 13.5px; gap: 10px; padding-inline-end: 10px; }
  .about-index__link + .about-index__link { padding-inline-start: 12px; }
  .about-index__link:nth-child(3) { padding-inline-start: 0; }
  .about-entry__word { font-size: clamp(80px, 26vw, 120px); }
  .about-all { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
  .about-all__icon { width: 40px; height: 40px; border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-omni__sweep, .about-omni__l, .about-orb__ring, .about-orb__halo, .about-orb__mark,
  .about-viz-chat__think i, .about-viz-create__frame::after, .about-viz-agents__links path { animation: none; }
}

/* Company */
.about-company__panel { display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 4vw, 56px); }
.about-company__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 8px 0 0; }
.about-company__facts > div { padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: rgba(207, 226, 255, 0.03); }
.about-company__facts dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.about-company__facts dd { margin: 6px 0 0; font-size: 18px; color: var(--text); }
@media (max-width: 640px) { .about-company__facts { grid-template-columns: minmax(0, 1fr); } }