/* =====================================================================
   The Architect's Array — homepage (index.html only)

   Loaded after styles.css, which owns the tokens (--accent, --teal, --bg)
   and every shared component: .nav, .btn, .card, .cta, .footer. Nothing
   here redefines those; it adds the pieces that only the company page has.

   Two conventions worth knowing before editing:

   • Pointer effects are driven by custom properties that home.js writes
     (--rx/--ry and --mx/--my for tilt and glare, --mag-x/--mag-y for
     magnetic buttons). The transforms themselves live here, so the rest
     state, the easing and the reduced-motion behaviour are all CSS. If JS
     never runs, every one of those properties falls back to its neutral
     value and the page is simply still.

   • The WebGL field sits behind everything as a fixed layer, so .page has
     to be transparent on this page and let it through.
   ===================================================================== */

/* ---------- the WebGL field (array3d.js) ----------
   Fixed to the viewport and behind the page. pointer-events:none is not a
   detail: array3d.js listens on the window, so the field can react to the
   cursor over a button without ever swallowing the click on it. */
.array-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.array-field.is-on {
  opacity: 1;
}
.array-field canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* The page must not paint over the field. The body keeps the background. */
.home .page {
  position: relative;
  z-index: 1;
  background: transparent;
}
.home .ambient-glow {
  opacity: 0.75;
}

/* ---------- cursor spotlight ----------
   600px square translated by home.js so the transform is the only thing
   that changes per frame. Hidden until the pointer first moves, and never
   shown on touch (home.js only starts it for fine pointers). */
.spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--accent), transparent 88%),
    transparent 62%
  );
}
.spotlight.is-on {
  opacity: 1;
}

/* ---------- scroll progress ---------- */
.progress-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.progress-bar {
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--teal));
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent), transparent 40%);
}

/* ---------- nav additions ---------- */
.nav {
  transition:
    padding 0.25s ease,
    background 0.25s ease;
}
.nav.is-scrolled {
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(10, 10, 10, 0.78);
}
.nav-link {
  position: relative;
  padding: 4px 0;
}
/* The underline grows from the centre, and stays put once the section is
   the one you are reading. */
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -2px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--accent);
  transition:
    left 0.22s ease,
    right 0.22s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after {
  left: 0;
  right: 0;
}
.nav-link.is-active {
  color: var(--text);
}

/* ---------- magnetic buttons ----------
   home.js writes the offsets; the spring back to zero is the transition. */
/* The colour transitions are repeated from .btn on purpose: this rule has
   the same specificity and comes later, so a lone `transition: transform`
   here would silently drop the button's own hover easing. */
[data-magnet] {
  transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1),
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
  will-change: transform;
}

/* ---------- hero ---------- */
.home-hero {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(56px, 11vh, 120px) clamp(20px, 5vw, 40px)
    clamp(80px, 12vh, 140px);
  min-height: min(88vh, 880px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home-hero-inner {
  max-width: 860px;
}
.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #b6b6bd;
}
.home-kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(20, 184, 154, 0.16);
  animation: aa-pulse 2.4s ease-in-out infinite;
}
.home-title {
  font-size: clamp(40px, 7.4vw, 78px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 26px 0 24px;
  text-wrap: balance;
}
.home-sub {
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.62;
  color: #a6a6ae;
  max-width: 640px;
  text-wrap: pretty;
}
.home-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.home-hint {
  margin-top: 26px;
  font-size: 13px;
  line-height: 1.5;
  color: #63636b;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 520px;
}
.home-hint-key {
  color: var(--accent);
  line-height: 1.5;
}
.home-hint-coarse {
  display: none;
}
@media (hover: none), (pointer: coarse) {
  .home-hint-fine {
    display: none;
  }
  .home-hint-coarse {
    display: inline;
  }
}

/* ---------- the hero array readout ----------
   The brand's own data structure, printed. Each chip is a slot and a link;
   home.js keeps one "live" and writes the caption under the line. */
.readout {
  margin-top: 34px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(14, 14, 17, 0.55);
  backdrop-filter: blur(8px);
  max-width: 720px;
}
.readout-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 2px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(12px, 2.6vw, 14px);
  line-height: 1.9;
}
.readout-var {
  color: #d4d4dc;
  font-weight: 600;
}
.readout-eq,
.readout-comma {
  color: #5c5c64;
}
.readout-bracket {
  color: var(--accent);
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1;
  margin: 0 4px;
}
.readout-chip {
  padding: 4px 10px;
  margin: 0 1px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  color: color-mix(in oklab, var(--accent), white 25%);
  background: color-mix(in oklab, var(--accent), transparent 88%);
  border: 1px solid transparent;
  transition:
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease;
}
.readout-chip:hover,
.readout-chip:focus-visible {
  transform: translateY(-2px);
}
.readout-chip.is-live {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 16px color-mix(in oklab, var(--accent), transparent 62%);
}
/* The empty slot reads as a hole in the array, not as another entry. */
.readout-chip-open {
  color: #6a6a72;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  border-style: dashed;
  padding-inline: 14px;
}
.readout-chip-open.is-live {
  color: var(--teal);
  background: rgba(20, 184, 154, 0.08);
  border-color: rgba(20, 184, 154, 0.5);
  box-shadow: none;
}
.readout-caption {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13.5px;
  color: #8e8e96;
  min-height: 20px;
}
.readout-caption strong {
  color: #d4d4dc;
  font-weight: 700;
}
.readout-slot {
  font-family: ui-monospace, monospace;
  color: var(--accent);
  margin-right: 6px;
}

/* ---------- scroll cue ---------- */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(40px, 7vh, 72px);
  text-decoration: none;
  color: #5c5c64;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  align-self: flex-start;
  transition: color 0.2s ease;
}
.scroll-cue:hover {
  color: #b6b6bd;
}
.scroll-cue-line {
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  animation: aa-sweep 2.2s ease-in-out infinite;
}
@keyframes aa-sweep {
  0% {
    transform: translateX(-100%);
  }
  60%,
  100% {
    transform: translateX(100%);
  }
}

/* ---------- capability ticker ---------- */
.ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(6px);
  padding: 14px 0;
  /* Fade both ends so the loop point never lands in the reader's eye. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: aa-ticker 42s linear infinite;
}
/* Two identical sets, so translating by exactly half the track loops
   seamlessly however wide the viewport is. */
.ticker-set {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #76767e;
  white-space: nowrap;
}
.ticker-dot {
  color: var(--accent);
  font-size: 8px;
}
@keyframes aa-ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- section lead ---------- */
.section-lead {
  margin-top: 18px;
  font-size: 16.5px;
  line-height: 1.65;
  color: #9a9aa2;
  max-width: 620px;
  text-wrap: pretty;
}
.section-head-center .section-lead {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- the array: product slots ----------
   Cards that lean away from the cursor with a sheen tracking it. The tilt
   values come from home.js; --rx/--ry/--lift default to a flat, still card
   so the layout is identical with JS off. */
/* Slot [0] takes the full first row as a wide card; [1] [2] [3] share the
   second. A plain auto-fit grid left slot [3] stranded next to a hole. */
.slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.slot {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3.4vw, 34px);
  border-radius: 22px;
  background: linear-gradient(165deg, #131317, #0f0f11);
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-decoration: none;
  color: inherit;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry))
    translate3d(0, var(--lift), 0);
  transform-style: preserve-3d;
  transition:
    transform 0.5s cubic-bezier(0.2, 0.85, 0.25, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
/* While the pointer is on the card, track it closely; the slow easing above
   is what makes letting go feel like a spring. */
.slot.is-tilting {
  transition-duration: 0.09s, 0.3s, 0.3s;
}
.slot:hover {
  --lift: -6px;
  border-color: color-mix(in oklab, var(--accent), transparent 55%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.slot-flagship {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  border-color: color-mix(in oklab, var(--accent), transparent 62%);
  background: linear-gradient(160deg, #14161f, #0f0f11 62%);
}
.slot-main,
.slot-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  /* Without this the wrapper flattens its children and the depth layers
     below have nothing to lift off. */
  transform-style: preserve-3d;
}
.slot-aside {
  gap: 20px;
}
.slot-flagship .slot-name {
  font-size: clamp(26px, 3vw, 32px);
}
.slot-flagship .slot-text {
  font-size: 16px;
}
.slot-flagship .slot-go {
  margin-top: 0;
}

/* The glare. It sits at z 0 in the preserve-3d stack, under the content
   layers, and follows --mx/--my written by home.js. */
.slot-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.09),
    transparent 62%
  );
}
.slot:hover .slot-sheen {
  opacity: 1;
}
.slot-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  height: 62%;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at 78% 18%,
    color-mix(in oklab, var(--accent), transparent 82%),
    transparent 62%
  );
}

/* Content layers lift off the card face on hover, which is what sells the
   tilt as depth rather than as a skew. */
.slot-top,
.slot-brand,
.slot-text,
.slot-meta,
.slot-go,
.slot-preview,
.slot-push,
.slot-name {
  position: relative;
  transition: transform 0.35s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.slot.is-tilting .slot-top {
  transform: translateZ(22px);
}
.slot.is-tilting .slot-brand,
.slot.is-tilting .slot-name {
  transform: translateZ(36px);
}
.slot.is-tilting .slot-text {
  transform: translateZ(14px);
}
.slot.is-tilting .slot-meta,
.slot.is-tilting .slot-preview,
.slot.is-tilting .slot-push {
  transform: translateZ(20px);
}
.slot.is-tilting .slot-go {
  transform: translateZ(30px);
}

.slot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.slot-index {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.tag-open {
  color: #6a6a72;
}
.slot-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.slot-avatar {
  width: 44px;
  height: 34px;
  object-fit: contain;
}
.slot-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.slot-icon-teal {
  border: 1px solid rgba(20, 184, 154, 0.3);
  background: rgba(20, 184, 154, 0.1);
}
.slot-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.slot-name-muted {
  color: #cfcfd6;
}
.slot-name-open {
  color: #d4d4dc;
}
.slot-text {
  font-size: 15.5px;
  line-height: 1.62;
  color: #9a9aa2;
  text-wrap: pretty;
}
.slot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.slot-meta span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #8e8e96;
  padding: 5px 10px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.slot-go {
  margin-top: auto;
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent);
}
.slot-go span {
  transition: transform 0.2s ease;
}
.slot:hover .slot-go span {
  transform: translateX(4px);
}
.slot-preview {
  margin-top: auto;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.025) 0 11px,
    transparent 11px 22px
  );
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: #6a6a72;
}
.slot-dev {
  cursor: default;
}

/* The open slot: a push() that completes when you point at it. */
.slot-open {
  background: transparent;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.14);
}
.slot-open:hover {
  border-color: rgba(20, 184, 154, 0.5);
  background: rgba(20, 184, 154, 0.03);
}
.slot-push {
  display: flex;
  align-items: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  color: #5c5c64;
  white-space: nowrap;
  overflow: hidden;
}
.slot-push-call {
  flex: none;
}
.slot-push-chip {
  flex: none;
  color: var(--teal);
  background: rgba(20, 184, 154, 0.12);
  border-radius: 6px;
  padding: 3px 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-width 0.45s cubic-bezier(0.2, 0.85, 0.25, 1),
    opacity 0.3s ease,
    padding 0.45s ease,
    margin 0.45s ease;
}
.slot-open:hover .slot-push-chip,
.slot-open:focus-visible .slot-push-chip {
  max-width: 220px;
  opacity: 1;
  padding: 3px 8px;
  margin: 0 2px;
}
.slot-go-open {
  color: var(--teal);
}

/* ---------- what we build ---------- */
.craft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.craft {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  padding: 30px;
  border-radius: 18px;
  background: rgba(17, 17, 19, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(6px);
  overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:
    transform 0.5s cubic-bezier(0.2, 0.85, 0.25, 1),
    border-color 0.3s ease,
    background 0.3s ease;
}
.craft.is-tilting {
  transition-duration: 0.09s, 0.3s, 0.3s;
}
.craft:hover {
  border-color: color-mix(in oklab, var(--accent), transparent 58%);
  background: rgba(20, 20, 23, 0.85);
}
.craft-sheen {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in oklab, var(--accent), transparent 86%),
    transparent 60%
  );
}
.craft:hover .craft-sheen {
  opacity: 1;
}
.craft-num {
  position: relative;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.craft-title {
  position: relative;
  font-size: 18.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 14px 0 10px;
}
.craft-text {
  position: relative;
  font-size: 15px;
  line-height: 1.62;
  color: #9a9aa2;
  text-wrap: pretty;
}

/* ---------- how we work ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  list-style: none;
  counter-reset: none;
}
.step {
  position: relative;
}
/* The rail runs from the index disc across the gap into the next step. */
.step-rail {
  position: absolute;
  top: 23px;
  left: 60px;
  right: -34px;
  height: 1px;
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--accent), transparent 55%),
    rgba(255, 255, 255, 0.06)
  );
}
.step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(10, 10, 10, 0.9);
  border: 1px solid color-mix(in oklab, var(--accent), transparent 62%);
  transition:
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}
.step:hover .step-index {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent), transparent 88%);
}
.step-heading {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 20px 0 10px;
}
.step-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: #9a9aa2;
  text-wrap: pretty;
}

/* ---------- company ---------- */
.company {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  padding: clamp(28px, 4vw, 46px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(160deg, rgba(19, 19, 23, 0.85), rgba(15, 15, 17, 0.8));
  backdrop-filter: blur(8px);
}
.company-title {
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 16px 0 20px;
  text-wrap: balance;
}
.company-text {
  font-size: 15.5px;
  line-height: 1.68;
  color: #9a9aa2;
  margin-bottom: 16px;
  text-wrap: pretty;
}
.company-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent), transparent 88%);
  padding: 2px 7px;
  border-radius: 6px;
}
.company-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.founder-chip {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.22s ease,
    transform 0.22s ease,
    background 0.22s ease;
}
.founder-chip:hover {
  border-color: color-mix(in oklab, var(--accent), transparent 55%);
  background: rgba(255, 255, 255, 0.045);
  transform: translateX(4px);
}
.founder-ini {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
}
.founder-ini-ceo {
  background: linear-gradient(
    140deg,
    var(--accent),
    color-mix(in oklab, var(--accent), black 30%)
  );
}
.founder-ini-coo {
  background: linear-gradient(
    140deg,
    var(--teal),
    color-mix(in oklab, var(--teal), black 32%)
  );
}
.founder-nm {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.founder-rl {
  display: block;
  font-size: 12.5px;
  color: #8e8e96;
  margin-top: 2px;
}
.company-facts {
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.company-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 13.5px;
}
.company-fact-k {
  color: #6a6a72;
  letter-spacing: 0.02em;
}
.company-fact-v {
  color: #cfcfd6;
  font-weight: 600;
  text-align: right;
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .slots {
    grid-template-columns: repeat(2, 1fr);
  }
  .slot-flagship {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: stretch;
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 28px;
  }
  /* Rails would point off the end of each row, so drop them entirely. */
  .step-rail {
    display: none;
  }
}
@media (max-width: 900px) {
  .company {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .home-hero {
    min-height: 0;
    padding-top: clamp(36px, 8vh, 64px);
  }
  .slots {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .readout {
    padding: 14px;
  }
  /* A finger cannot hover, so the push() plays as soon as the card is on
     screen rather than never. */
  .slot-open .slot-push-chip {
    max-width: 220px;
    opacity: 1;
    padding: 3px 8px;
    margin: 0 2px;
  }
}

/* ---------- reduced motion ----------
   array3d.js and the pointer effects in home.js already opt out on their
   own; this covers the purely decorative CSS loops. */
@media (prefers-reduced-motion: reduce) {
  .ticker-track,
  .scroll-cue-line::after,
  .home-kicker-dot {
    animation: none !important;
  }
  .slot,
  .craft,
  .founder-chip,
  [data-magnet] {
    transition: border-color 0.2s ease, background 0.2s ease !important;
    transform: none !important;
  }
  .spotlight {
    display: none;
  }
  /* array3d.js does not start at all under reduced motion, so there is no
     field to point at. */
  .home-hint {
    display: none;
  }
}