/* ============================================================
   RESTORE AI — BRAND OVERRIDES
   Loads after /shared/css/base.css and /shared/css/components.css.
   Restore AI runs on a DARK inversion of the parent palette:
   Near-Black (#0A0A0A) is the primary ground, Deep Navy (#000099)
   the secondary; Off-White (#F9F8F3) is the default text and UI
   color. Electric Blue (#054FF0) and Teal (#00FFFF) remain the
   accent colors used exactly as before.
   ============================================================ */

/* ============================================================
   PERSISTENT SITE HEADER
   Fixed frosted-glass band above every section. Near-Black at
   60% opacity + 12px backdrop blur keeps content behind faintly
   readable while the header text and R mark stay legible on any
   ground (including the dark hero directly beneath it).
   ============================================================ */

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: rgba(10, 10, 10, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(249, 248, 243, 0.08);
}
/* Fallback for browsers without backdrop-filter: solid Near-Black at 90%. */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  #site-header {
    background: rgba(10, 10, 10, 0.9);
    border-bottom-color: rgba(249, 248, 243, 0.08);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(16px, 3vw, 32px);
  max-width: 1400px;
  margin: 0 auto;
}

/* Brand lockup: R mark + "RESTORE AI" text */
#brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #F9F8F3;
  text-decoration: none;
}
#brand-lockup .brand-lockup__mark {
  height: 22px;
  width: auto;
  display: block;
  /* r-icon-white.png is already the white parent-brand mark — no filter
     needed; it stays Off-White against the frosted dark backdrop. */
}
#brand-lockup .brand-lockup__text {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.22em;
  line-height: 1;
  white-space: nowrap;
  color: #F9F8F3;
}
@media (min-width: 640px) {
  #brand-lockup .brand-lockup__mark { height: 26px; }
  #brand-lockup .brand-lockup__text { font-size: 11px; }
}
/* Sub-480px collapse: R mark only, hide the text label. */
@media (max-width: 479px) {
  #brand-lockup .brand-lockup__text { display: none; }
  #brand-lockup .brand-lockup__mark { height: 24px; }
}

/* Discovery-call CTA — Electric Blue background, Off-White text.
   Legible against the frosted dark band and any dark section behind. */
#floating-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #054FF0;
  color: #F9F8F3;
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 500;
  border-radius: 9999px;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.005em;
  box-shadow: 0 6px 20px rgba(5, 79, 240, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: background 200ms ease, transform 200ms ease;
  white-space: nowrap;
  text-decoration: none;
}
#floating-cta:hover { background: #003fbf; transform: translateY(-1px); }
#floating-cta:active { background: #002d99; }
@media (min-width: 640px) {
  #floating-cta { padding: 11px 22px; font-size: 14px; }
}
/* Sub-480px: tighter pill so the R mark + CTA both fit comfortably. */
@media (max-width: 479px) {
  #floating-cta { padding: 7px 12px; font-size: 11px; }
}

/* Push page content below the fixed header so the first section isn't
   crossed by the frosted band. Sections handle their own top padding
   via Tailwind utilities; this variable is here for reference. */
:root { --site-header-height: 56px; }
@media (min-width: 640px) { :root { --site-header-height: 64px; } }

/* ============================================================
   HERO SCROLL INDICATOR
   Off-White at low opacity so it reads against the near-black hero
   ground without competing with the headline.
   ============================================================ */
.scroll-indicator {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(249, 248, 243, 0.55);
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.28em;
  animation: scrollIndicatorBob 2.4s ease-in-out infinite;
  z-index: 40;
  pointer-events: none;
}
.scroll-indicator svg { display: block; }
@keyframes scrollIndicatorBob {
  0%, 100% { transform: translate(-50%, 0);   opacity: 0.55; }
  50%      { transform: translate(-50%, 6px); opacity: 1; }
}

/* ============================================================
   HERO — LAYER 1: BREATHING HEXAGON GRID
   The wrapper carries the breathing scale/opacity loop (unchanged
   from the previous atmosphere layer). The inline SVG paints a
   flat-top hex-outline field masked to a vertical color wash —
   Teal / Electric Blue / Deep Navy rising from the lower third,
   fading to transparent up top. Same color story and tempo as the
   previous radial-gradient atmosphere; different rendering.
   ============================================================ */
.hero-atmosphere {
  position: absolute;
  inset: -6% -6% -5% -6%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  transform-origin: 50% 100%;
  animation: heroAtmosphereBreathe 18s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes heroAtmosphereBreathe {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.06); opacity: 1;    }
}
.hero-hex-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Overall dial — keeps hex strokes as a background texture that
     never fights with hero copy. Multiplies with wash + breathing. */
  opacity: 0.68;
}
@media (prefers-reduced-motion: reduce) {
  .hero-atmosphere { animation: none; opacity: 0.9; }
}

/* Kinetic reveal — each headline word becomes an inline-block so
   translateY / scale can apply without breaking line-wrap. */
.hero-kinetic-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* Pre-paint gate for the hero reveal targets. Piggybacks on the
   shared animations-pending class so nothing flashes before
   hero.js applies GSAP initial states. */
html.animations-pending #hero [data-hero-reveal] { opacity: 0; }
html.animations-pending #hero [data-hero-reveal="subhead"]  { transform: translateY(16px); }
html.animations-pending #hero [data-hero-reveal="terminal"] { transform: translateY(12px); }
html.animations-pending #hero [data-hero-reveal="ctas"]     { transform: translateY(16px); }
html.animations-pending #hero [data-hero-reveal="eyebrow"] > :first-child { transform: scaleX(0); transform-origin: left center; }
html.animations-pending #hero [data-hero-reveal="eyebrow"] > :nth-child(2) { transform: translateX(-16px); opacity: 0; }

/* ============================================================
   HERO — LAYER 4: TERMINAL CYCLER
   Small monospace status line. Quiet ambient detail, clearly
   secondary to the headline/subhead in weight.
   ============================================================ */
.hero-terminal {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: rgba(249, 248, 243, 0.7);
  min-height: 1.6em;
  max-width: 100%;
}
.hero-terminal__prompt {
  color: #00FFFF;
  font-weight: 700;
}
.hero-terminal__text { white-space: pre; }
.hero-terminal__cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: #00FFFF;
  vertical-align: -2px;
  animation: heroTerminalBlink 1s steps(2, end) infinite;
  margin-left: 1px;
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.55);
}
@keyframes heroTerminalBlink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@media (min-width: 640px) {
  .hero-terminal { font-size: 13.5px; margin-top: 32px; }
}

/* Respect reduced-motion preference for all ambient hero motion. */
@media (prefers-reduced-motion: reduce) {
  .hero-atmosphere { animation: none; }
  .hero-terminal__cursor { animation: none; opacity: 1; }
}

/* ============================================================
   CLOSING SECTION
   Guarantee a minimum horizontal gap between the wordmark column
   and the floating R mark so the two never collide at any width.
   ============================================================ */
.closing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
@media (min-width: 768px) {
  .closing-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(64px, 8vw, 160px);
  }
}

/* ============================================================
   BODY-COPY LIGATURE RULE EXTENSION
   Restore AI copy classes; base.css already covers p/body.
   ============================================================ */
.ai-body,
.ai-body p,
.pull-quote {
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0, "dlig" 0;
  font-feature-settings: "liga" 0, "dlig" 0;
}

/* ============================================================
   STAGE 2 — WHAT WE BUILD SECTION
   Indexed vertical list, four rows, teal hairline separators.
   Numeral in Electric Blue sits left of each row's body on
   desktop, above on mobile.
   ============================================================ */
.build-headline {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: #F9F8F3;
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  max-width: 22ch;
  margin: 0;
}

.build-rows {
  border-bottom: 1px solid rgba(0, 255, 255, 0.10);
  transition: border-color 300ms ease;
}
.build-row {
  display: grid;
  grid-template-columns: minmax(6rem, 8rem) 1fr;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.75rem, 3vw, 2.75rem) 0;
  border-top: 1px solid rgba(0, 255, 255, 0.10);
  align-items: baseline;
  transition: border-color 300ms ease;
}
@media (hover: hover) and (pointer: fine) {
  /* Hovering a row brightens the hairline directly above it (that row's
     own top border) AND the hairline directly below (the next row's top
     border, or the container's bottom border on the last row). */
  .build-row:hover              { border-top-color: rgba(0, 255, 255, 0.85); }
  .build-row:hover + .build-row { border-top-color: rgba(0, 255, 255, 0.85); }
  .build-rows:has(.build-row:last-child:hover) { border-bottom-color: rgba(0, 255, 255, 0.85); }
}

.build-numeral {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: #054FF0;
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  /* Keep the numeral column visually anchored to the top of the row's
     baseline grid rather than tracking the statement's font baseline. */
  align-self: start;
}

.build-statement {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: #054FF0;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0;
}

.build-outcome {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  color: rgba(249, 248, 243, 0.70);
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  line-height: 1.6;
  margin: 0.75rem 0 0;
  max-width: 60ch;
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0, "dlig" 0;
  font-feature-settings: "liga" 0, "dlig" 0;
}

@media (max-width: 767px) {
  .build-row {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
    padding: 1.75rem 0;
  }
  .build-numeral { font-size: clamp(2rem, 9vw, 2.75rem); }
}

.build-closing {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  color: rgba(249, 248, 243, 0.90);
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.6;
  text-align: center;
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0, "dlig" 0;
  font-feature-settings: "liga" 0, "dlig" 0;
}

/* Pre-paint gates for the Stage 2 reveal targets. Piggybacks on the
   shared animations-pending class so nothing flashes before sections.js
   applies GSAP initial states. */
html.animations-pending [data-build-row] .build-numeral,
html.animations-pending [data-build-row] .build-statement,
html.animations-pending [data-build-row] .build-outcome { opacity: 0; }

/* ============================================================
   STAGE 3 — THE SYSTEMS WE BUILD
   14 cards in a responsive grid, each with a small terminal-styled
   animated icon, bold name, and one-line description. Icons run as
   pure-CSS animations except the funnel counter and the two typer
   patterns (patterns B and H), which need a lightweight JS tick to
   update text. All animations respect prefers-reduced-motion and
   pause when the section is out of view (JS toggles a class).
   ============================================================ */
.systems-headline {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: #F9F8F3;
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  max-width: 22ch;
  margin: 0;
}
.systems-subhead {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  color: rgba(249, 248, 243, 0.80);
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.55;
  max-width: 60ch;
  margin-bottom: 0;
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0, "dlig" 0;
  font-feature-settings: "liga" 0, "dlig" 0;
}

.systems-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid rgba(0, 255, 255, 0.10);
}
@media (min-width: 768px)  { .systems-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .systems-grid { grid-template-columns: 1fr 1fr 1fr; } }

.system-card {
  --icon-speed: 1;
  position: relative;
  padding: clamp(1.75rem, 2.5vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem)
           clamp(2rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(0, 255, 255, 0.10);
  transition: border-color 260ms ease;
}
/* Vertical hairline between columns on tablet/desktop */
@media (min-width: 768px) {
  .system-card + .system-card { border-left: 1px solid rgba(0, 255, 255, 0.10); }
  .system-card:nth-child(2n + 1) { border-left: none; }
}
@media (min-width: 1024px) {
  .system-card + .system-card { border-left: 1px solid rgba(0, 255, 255, 0.10); }
  .system-card:nth-child(2n + 1) { border-left: 1px solid rgba(0, 255, 255, 0.10); }
  .system-card:nth-child(3n + 1) { border-left: none; }
}
@media (hover: hover) and (pointer: fine) {
  .system-card:hover { border-top-color: rgba(0, 255, 255, 0.85); }
  .system-card:hover + .system-card { border-top-color: rgba(0, 255, 255, 0.85); }
  .system-card:hover { --icon-speed: 0.55; }
}

.system-card__icon {
  width: 56px;
  height: 56px;
  position: relative;
  margin-bottom: 1.25rem;
}
.system-card__name {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: #F9F8F3;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin: 0 0 0.5rem;
}
.system-card__desc {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  color: rgba(249, 248, 243, 0.70);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
  max-width: 42ch;
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0, "dlig" 0;
  font-feature-settings: "liga" 0, "dlig" 0;
}

/* ----- Icon library — 9 distinct patterns share one base -----
   All icons are 56x56 px. Animations play only when the section
   is visible (JS toggles .is-visible on #the-systems).           */
#the-systems .ico { position: absolute; inset: 0; }
#the-systems:not(.is-visible) .ico *,
#the-systems:not(.is-visible) .ico { animation-play-state: paused !important; }

/* Pattern A — Stopwatch */
.ico--stopwatch { border: 1.5px solid rgba(0, 255, 255, 0.35); border-radius: 50%; }
.ico--stopwatch .ico-tick { position: absolute; width: 3px; height: 3px; background: rgba(0, 255, 255, 0.7); border-radius: 50%; }
.ico--stopwatch .ico-tick--12 { top: 2px;    left: 50%; transform: translateX(-50%); }
.ico--stopwatch .ico-tick--3  { top: 50%;    right: 2px; transform: translateY(-50%); }
.ico--stopwatch .ico-tick--6  { bottom: 2px; left: 50%; transform: translateX(-50%); }
.ico--stopwatch .ico-tick--9  { top: 50%;    left: 2px;  transform: translateY(-50%); }
.ico--stopwatch .ico-hand {
  position: absolute; top: 50%; left: 50%;
  width: 1.5px; height: 18px; background: #00FFFF;
  transform-origin: 50% 100%;
  animation: swRotate calc(3s * var(--icon-speed)) linear infinite;
}
.ico--stopwatch .ico-center {
  position: absolute; top: 50%; left: 50%;
  width: 5px; height: 5px; border-radius: 50%; background: #00FFFF;
  transform: translate(-50%, -50%);
}
@keyframes swRotate {
  from { transform: translate(-50%, -100%) rotate(0deg); }
  to   { transform: translate(-50%, -100%) rotate(360deg); }
}

/* Pattern B — Funnel (variants: counter, slow) */
.ico--funnel .ico-tier {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  height: 4px; background: rgba(0, 255, 255, 0.35); border-radius: 1px;
}
.ico--funnel .ico-tier--1 { top: 8px;  width: 46px; }
.ico--funnel .ico-tier--2 { top: 22px; width: 30px; }
.ico--funnel .ico-tier--3 { top: 36px; width: 14px; }
.ico--funnel .ico-pulse {
  position: absolute; top: 8px; left: 50%;
  width: 5px; height: 5px; background: #054FF0; border-radius: 50%;
  box-shadow: 0 0 6px rgba(5, 79, 240, 0.7);
  animation: funnelDrop calc(2.4s * var(--icon-speed)) ease-in-out infinite;
}
.ico--funnel[data-mode="slow"] .ico-pulse {
  animation-duration: calc(4.2s * var(--icon-speed));
  background: #00FFFF; box-shadow: 0 0 6px rgba(0, 255, 255, 0.55);
}
.ico--funnel .ico-counter {
  position: absolute; right: 0; bottom: 0;
  font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
  font-size: 10px; line-height: 1;
  color: rgba(0, 255, 255, 0.85);
}
.ico--funnel[data-mode="slow"] .ico-counter { display: none; }
@keyframes funnelDrop {
  0%   { top: 8px;  transform: translateX(-50%) scale(1);   opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 44px; transform: translateX(-50%) scale(0.6); opacity: 0; }
}

/* Pattern C — Calendar (sequential, wave) */
.ico--calendar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  padding: 4px;
}
.ico--calendar .cal-cell {
  background: rgba(249, 248, 243, 0.14);
  border-radius: 1px;
  animation: calFill calc(7.2s * var(--icon-speed)) linear infinite;
}
.ico--calendar[data-mode="sequential"] .cal-cell {
  animation-delay: calc(var(--i) * calc(0.55s * var(--icon-speed)));
}
.ico--calendar[data-mode="wave"] .cal-cell {
  animation-duration: calc(3.6s * var(--icon-speed));
  animation-delay: calc((var(--r) + var(--c)) * calc(0.32s * var(--icon-speed)));
}
@keyframes calFill {
  0%, 55% { background: rgba(249, 248, 243, 0.14); }
  60%     { background: #00FFFF; box-shadow: 0 0 5px rgba(0, 255, 255, 0.55); }
  100%    { background: rgba(249, 248, 243, 0.14); box-shadow: 0 0 0 rgba(0, 255, 255, 0); }
}

/* Pattern D — Node diagram (linear, triangular) */
.ico--nodes .node {
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid rgba(0, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.3);
}
.ico--nodes .edge {
  position: absolute;
  background: rgba(0, 255, 255, 0.30);
}
.ico--nodes .pulse {
  position: absolute;
  width: 5px; height: 5px; border-radius: 50%;
  background: #00FFFF;
  box-shadow: 0 0 5px rgba(0, 255, 255, 0.8);
}

/* -- linear: 4 nodes in a row -- */
.ico--nodes[data-arrangement="linear"] .node--a { top: 50%; left: 4px;  transform: translateY(-50%); }
.ico--nodes[data-arrangement="linear"] .node--b { top: 50%; left: 34%;  transform: translateY(-50%); }
.ico--nodes[data-arrangement="linear"] .node--c { top: 50%; left: 60%;  transform: translateY(-50%); }
.ico--nodes[data-arrangement="linear"] .node--d { top: 50%; right: 4px; transform: translateY(-50%); }
.ico--nodes[data-arrangement="linear"] .edge--ab { top: 50%; left: 14px;  width: calc(34% - 14px + 5px); height: 1px; transform: translateY(-50%); }
.ico--nodes[data-arrangement="linear"] .edge--bc { top: 50%; left: calc(34% + 10px); width: calc(60% - 34% - 10px + 5px); height: 1px; transform: translateY(-50%); }
.ico--nodes[data-arrangement="linear"] .edge--cd { top: 50%; left: calc(60% + 10px); right: 14px; height: 1px; transform: translateY(-50%); }
.ico--nodes[data-arrangement="linear"] .pulse {
  top: 50%;
  animation: nodePulseLinear calc(3.4s * var(--icon-speed)) ease-in-out infinite;
}
@keyframes nodePulseLinear {
  0%   { left: 9px;   transform: translateY(-50%); opacity: 0; }
  8%   { opacity: 1; }
  33%  { left: calc(34% + 5px); }
  66%  { left: calc(60% + 5px); }
  92%  { opacity: 1; }
  100% { left: calc(100% - 9px); transform: translateY(-50%); opacity: 0; }
}

/* -- triangular: 3 nodes in a triangle -- */
.ico--nodes[data-arrangement="triangular"] .node--tri-a { top: 5px;    left: 50%; transform: translateX(-50%); }
.ico--nodes[data-arrangement="triangular"] .node--tri-b { bottom: 5px; left: 8px; }
.ico--nodes[data-arrangement="triangular"] .node--tri-c { bottom: 5px; right: 8px; }
.ico--nodes[data-arrangement="triangular"] .edge--tri-ab {
  top: 10px; left: 50%;
  width: 1px; height: 32px;
  transform-origin: top left;
  transform: translateX(4px) rotate(58deg);
  background: rgba(0, 255, 255, 0.30);
}
.ico--nodes[data-arrangement="triangular"] .edge--tri-bc {
  bottom: 9px; left: 18px; right: 18px;
  height: 1px;
}
.ico--nodes[data-arrangement="triangular"] .edge--tri-ca {
  top: 10px; right: 50%;
  width: 1px; height: 32px;
  transform-origin: top right;
  transform: translateX(-4px) rotate(-58deg);
  background: rgba(0, 255, 255, 0.30);
}
.ico--nodes[data-arrangement="triangular"] .pulse--tri {
  animation: nodePulseTri calc(3.8s * var(--icon-speed)) ease-in-out infinite;
}
@keyframes nodePulseTri {
  0%   { top: 10px; left: 50%; transform: translate(-50%, 0); opacity: 0; }
  6%   { opacity: 1; }
  32%  { top: calc(100% - 12px); left: 14px; transform: translate(0, 0); }
  66%  { top: calc(100% - 12px); left: calc(100% - 14px); transform: translate(-100%, 0); }
  95%  { top: 10px; left: 50%; transform: translate(-50%, 0); opacity: 1; }
  100% { top: 10px; left: 50%; transform: translate(-50%, 0); opacity: 0; }
}

/* Pattern E — Chart (growing bars) */
.ico--chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 6px 4px;
}
.ico--chart .bar {
  flex: 1;
  height: var(--h);
  background: linear-gradient(to top, rgba(5, 79, 240, 0.5), rgba(0, 255, 255, 0.85));
  transform-origin: bottom;
  animation: chartGrow calc(4.5s * var(--icon-speed)) ease-in-out infinite;
  animation-delay: calc(var(--i) * calc(0.18s * var(--icon-speed)));
}
@keyframes chartGrow {
  0%   { transform: scaleY(0.04); }
  30%  { transform: scaleY(1); }
  70%  { transform: scaleY(1); }
  100% { transform: scaleY(0.04); }
}

/* Pattern F — Grid lighting (row, diagonal) */
.ico--grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
  padding: 4px;
}
.ico--grid .cell {
  background: rgba(249, 248, 243, 0.14);
  animation: gridLight calc(4.4s * var(--icon-speed)) ease-in-out infinite;
}
.ico--grid[data-sequence="row"] .cell {
  animation-delay: calc(var(--i) * calc(0.12s * var(--icon-speed)));
}
.ico--grid[data-sequence="diagonal"] .cell {
  animation-delay: calc((var(--r) + var(--c)) * calc(0.16s * var(--icon-speed)));
}
@keyframes gridLight {
  0%, 70% { background: rgba(249, 248, 243, 0.14); }
  80%     { background: #054FF0; box-shadow: 0 0 4px rgba(5, 79, 240, 0.6); }
  100%    { background: rgba(249, 248, 243, 0.14); box-shadow: 0 0 0 rgba(5, 79, 240, 0); }
}

/* Pattern G — Waveform */
.ico--wave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 6px;
}
.ico--wave .bar {
  width: 3px;
  height: 30%;
  background: #00FFFF;
  border-radius: 1px;
  animation: waveBar calc(1.4s * var(--icon-speed)) ease-in-out infinite;
  animation-delay: calc(var(--i) * calc(0.14s * var(--icon-speed)));
  transform-origin: center;
}
@keyframes waveBar {
  0%, 100% { height: 20%; opacity: 0.55; }
  50%      { height: 88%; opacity: 1; }
}

/* Pattern H — Cursor typer
   The default 56 x 56 icon footprint is too narrow for words like
   "assembling" or "responding" at 11 px monospace (each glyph
   ~6.5 px wide → the padding-box edge clips at ~7–8 chars). Typer
   cards get a wider content area (~80 px), smaller font, and a
   slimmer cursor so any string up to ~12 chars types out fully
   without truncation. Other icon patterns are unaffected. */
.system-card[data-icon^="typer"] .system-card__icon {
  width: 80px;
}
.ico--typer {
  display: flex;
  align-items: center;
  padding: 4px 4px;
  font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
  font-size: 10px;
  line-height: 1;
  color: rgba(0, 255, 255, 0.90);
  white-space: nowrap;
  overflow: hidden;
}
.ico--typer .ico-typer__text { white-space: pre; }
.ico--typer .ico-typer__cursor {
  display: inline-block;
  width: 4px;
  height: 10px;
  margin-left: 1px;
  background: #00FFFF;
  vertical-align: -1px;
  animation: typerBlink calc(1s * var(--icon-speed)) steps(2, end) infinite;
  box-shadow: 0 0 4px rgba(0, 255, 255, 0.5);
  flex-shrink: 0;
}
@keyframes typerBlink {
  50% { opacity: 0; }
}

/* Pattern I — Inbox stack */
.ico--inbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 6px;
}
.ico--inbox .msg {
  height: 4px;
  background: rgba(249, 248, 243, 0.35);
  border-radius: 1px;
  transform-origin: left center;
  animation: inboxSlide calc(4.5s * var(--icon-speed)) ease-in-out infinite;
}
.ico--inbox .msg--1 { animation-delay: calc(0.0s * var(--icon-speed)); background: rgba(0, 255, 255, 0.65); }
.ico--inbox .msg--2 { animation-delay: calc(1.1s * var(--icon-speed)); }
.ico--inbox .msg--3 { animation-delay: calc(2.2s * var(--icon-speed)); }
.ico--inbox .msg--4 { animation-delay: calc(3.3s * var(--icon-speed)); }
@keyframes inboxSlide {
  0%, 60% { transform: translateX(0); opacity: 1; }
  75%     { transform: translateX(50px); opacity: 0; }
  76%     { transform: translateX(0); opacity: 0; }
  100%    { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #the-systems .ico *,
  #the-systems .ico { animation: none !important; }
}

/* ============================================================
   FAQ ACCORDION
   Uses native <details>/<summary>. Default disclosure marker is
   hidden and replaced with a Teal + that rotates 45° to become
   an × when open. Keyboard behavior comes from the browser:
   Tab focuses the summary, Enter/Space toggles, focus ring is
   drawn only on :focus-visible so mouse clicks don't leave it.
   ============================================================ */
.faq-item {
  border-top: 1px solid rgba(249, 248, 243, 0.10);
}
.faq-item:last-child {
  border-bottom: 1px solid rgba(249, 248, 243, 0.10);
}
.faq-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 4px;
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: #F9F8F3;
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::marker { content: ''; }
.faq-summary:focus-visible {
  outline: 2px solid #00FFFF;
  outline-offset: 4px;
  border-radius: 2px;
}
.faq-marker {
  color: #00FFFF;
  font-weight: 400;
  flex-shrink: 0;
  display: inline-block;
  font-size: 1.5em;
  line-height: 1;
  padding-top: 2px;
  transition: transform 0.28s cubic-bezier(0.65, 0, 0.35, 1);
  transform-origin: center center;
}
.faq-item[open] .faq-marker { transform: rotate(45deg); }
.faq-a {
  padding: 0 4px 26px 44px; /* left-indent aligns answer under question, past marker + gap */
  color: rgba(249, 248, 243, 0.75);
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.7;
  font-size: clamp(0.975rem, 1.15vw, 1.0625rem);
  max-width: 62ch;
}
.faq-a p + p { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .faq-marker { transition: none; }
}

/* ============================================================
   SYSTEMS WE BUILD — ambient continuous marquee.
   Two identical groups of the 14 system names sit side-by-side
   inside the track. The track translates from 0 to -50%, which
   is exactly the width of one group, so at loop-end the second
   group is where the first began. Loop restart is invisible.
   Right-to-left scroll (negative translate). ~50s per loop keeps
   the motion ambient, not stock-ticker-y. Hover pauses only on
   real pointer devices; touch/reduced-motion behavior handled
   below.
   ============================================================ */
.systems-marquee {
  overflow: hidden;
  margin-top: 40px;
  margin-bottom: 8px; /* systems-grid brings its own mt-14 below */
  /* Soft fade at both edges so items enter/exit against the
     Deep Navy ground instead of hard-cutting at the container. */
  mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.systems-marquee__track {
  display: flex;
  width: max-content;
  animation: systems-marquee-scroll 50s linear infinite;
  will-change: transform;
}
.systems-marquee__group {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
  padding-right: 22px; /* keeps the rhythm across the two-group seam */
}
.systems-marquee__item {
  color: rgba(249, 248, 243, 0.60);
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1;
  white-space: nowrap;
}
.systems-marquee__sep {
  color: rgba(249, 248, 243, 0.30);
  font-size: 0.85em;
  line-height: 1;
  user-select: none;
}
@keyframes systems-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Pause on hover — only on true pointer devices, so touchscreens
   don't get a sticky "paused" state from a first tap. */
@media (hover: hover) {
  .systems-marquee:hover .systems-marquee__track {
    animation-play-state: paused;
  }
}
@media (prefers-reduced-motion: reduce) {
  .systems-marquee__track { animation: none !important; }
}