/* =====================================================================
   Components shared by more than one page
   ===================================================================== */

/* ---------- PAGE HERO EXTRAS ---------- */
.page-hero {
  overflow: clip;
}

.crumbs {
  display: flex;
  gap: 10px;
  margin-bottom: 26px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.crumbs a:hover {
  color: var(--blue-ink);
}

.crumbs span::before {
  content: "·";
  margin-right: 10px;
}

/* raised discs drifting behind the headline */
/* the brand mark drawn as an outline, drifting behind the page hero */
.orb {
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  overflow: visible;
  pointer-events: none;
  will-change: transform;
  animation: orb-drift 14s ease-in-out infinite;
}

.orb--a {
  width: clamp(320px, 44vw, 640px);
  right: -9vw;
  top: -10vw;
}

.orb--b {
  /* small echo of the mark, kept clear of the heading and the intro text */
  width: clamp(70px, 8vw, 120px);
  right: 31%;
  top: 96px;
  animation-duration: 10s;
  animation-direction: reverse;
}

@keyframes orb-drift {
  50% {
    transform: translate(-14px, 18px);
  }
}

.page-hero__row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px 64px;
  align-items: end;
}

.page-hero__row .display {
  margin: 0;
}

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.jump a,
.numchip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  font-family: var(--f-display);
  font-size: 14.5px;
  font-weight: 600;
  transition: transform 0.35s var(--ease), color 0.25s ease;
}

.jump a:hover {
  transform: translateY(-3px);
  color: var(--blue-ink);
}

.jump b,
.numchip b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue-soft);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--blue-ink);
}

/* ---------- 3D TILT ---------- */
/* motion.js publishes the pointer position as --tx / --ty (-0.5 … 0.5) */
.tilt {
  position: relative;
  transform: perspective(1000px) rotateY(calc(var(--tx, 0) * 18deg)) rotateX(calc(var(--ty, 0) * -18deg));
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease);
}

.tilt.is-tilting {
  transition-duration: 0.15s;
}

/* children float above the card face by --lift pixels */
.tilt__lift {
  transform: translateZ(calc(var(--lift, 30) * 1px));
}

.tilt__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at calc(50% + var(--tx, 0) * 100%) calc(50% + var(--ty, 0) * 100%),
    rgba(255, 255, 255, 0.7),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.tilt.is-tilting .tilt__glare {
  opacity: 0.75;
}

/* ---------- SMALL PARTS ---------- */
.tag {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--blue-soft);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-ink);
  white-space: nowrap;
}

.ticks {
  display: grid;
  gap: 9px;
  margin-bottom: 28px;
  font-size: 15.5px;
  color: var(--ink-2);
}

.ticks li {
  position: relative;
  padding-left: 22px;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(21, 104, 255, 0.15);
}

.ticks strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--ink);
}

.fits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.fits span {
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 13px;
  color: var(--ink-2);
}

/* ---------- MOCK WINDOWS ---------- */
.mock {
  position: relative;
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 26px 52px rgba(1, 25, 55, 0.16);
  overflow: hidden;
  font-size: 13.5px;
}

.mock--dark {
  background: var(--navy);
  color: var(--on-dark);
}

.mock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
}

.mock--dark .mock__head,
.mock--dark .mock__row {
  border-color: rgba(255, 255, 255, 0.1);
}

.mock__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--blue-soft);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--blue-ink);
}

.mock__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  animation: live-pulse 1.6s ease-in-out infinite;
}

.mock__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}

.mock__row:last-child {
  border-bottom: 0;
}

.mock__row > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.mock__row i {
  font-size: 17px;
  color: var(--blue);
}

.mock__row small {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--muted);
}

.mock--dark .mock__row small {
  color: var(--on-dark-muted);
}

.pill {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--blue-soft);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--blue-ink);
}

.pill--ok {
  background: #dcf5e6;
  color: #137a42;
}

.mock__bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 96px;
  padding: 16px 18px 0;
  border-bottom: 1px solid var(--line);
}

.mock__bars i {
  flex: 1;
  height: var(--h);
  border-radius: 6px 6px 0 0;
  background: linear-gradient(var(--blue), #8db6ff);
  transform-origin: bottom;
}

.mock__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 26px 18px;
  border-bottom: 1px solid var(--line);
}

.mock__flow span {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow-press);
  color: var(--navy);
  font-size: 28px;
}

.mock__flow span:last-child {
  background: var(--blue);
  box-shadow: 0 10px 22px rgba(21, 104, 255, 0.35);
  color: var(--white);
}

.mock__flow > i {
  font-size: 22px;
  color: var(--blue);
  animation: nudge 1.4s ease-in-out infinite;
}

.mock__chat {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  background: var(--paper);
  font-size: 13.5px;
  line-height: 1.45;
}

.bubble--out {
  justify-self: end;
  border-radius: 16px 16px 4px 16px;
  background: var(--blue);
  color: var(--white);
}

@keyframes live-pulse {
  50% {
    opacity: 0.25;
  }
}

@keyframes nudge {
  50% {
    transform: translateX(6px);
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bar-up {
  from {
    transform: scaleY(0);
  }
}

/* mock contents play once their block scrolls into view */
[data-inview] .mock__row,
[data-inview] .bubble,
[data-inview] .mock__flow {
  opacity: 0;
}

[data-inview].is-inview .mock__row,
[data-inview].is-inview .bubble,
[data-inview].is-inview .mock__flow {
  animation: pop-in 0.6s var(--ease) both;
  animation-delay: calc(0.15s + var(--n, 0) * 0.14s);
}

[data-inview].is-inview .mock__bars i {
  animation: bar-up 0.9s var(--ease) both;
  animation-delay: calc(0.2s + var(--n, 0) * 0.07s);
}

/* ---------- ACCORDION ---------- */
.faq__list {
  display: grid;
  gap: 14px;
}

.faq__item {
  border-radius: 22px;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.4s var(--ease);
}

.faq__item.is-open {
  box-shadow: var(--shadow-raise);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 18px 18px 18px 22px;
  text-align: left;
  font-family: var(--f-display);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.faq__q span {
  display: flex;
  align-items: center;
  gap: 14px;
}

.faq__q span i {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--paper);
  box-shadow: var(--shadow-press);
  color: var(--blue);
  font-size: 20px;
}

.faq__q > i {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-press);
  font-size: 18px;
  transition: transform 0.45s var(--ease), background-color 0.3s ease, color 0.3s ease,
    box-shadow 0.3s ease;
}

.faq__item.is-open .faq__q > i {
  transform: rotate(135deg);
  background: var(--blue);
  box-shadow: none;
  color: var(--white);
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}

.faq__a > div {
  overflow: hidden;
}

.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}

@media (max-width: 1024px) {
  .page-hero__row {
    grid-template-columns: 1fr;
  }

  .orb--b {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orb,
  .mock__flow > i,
  .mock__live::before {
    animation: none;
  }

  [data-inview] .mock__row,
  [data-inview] .bubble,
  [data-inview] .mock__flow {
    opacity: 1;
    animation: none;
  }
}

/* ---------- 3D SOLIDS ---------- */
/* A solid is a stack of thin slices, each lifted a little further off its plane,
   so rounded shapes get real thickness from any angle. */
.stack {
  position: absolute;
  transform-style: preserve-3d;
}

.stack > * {
  position: absolute;
  inset: 0;
  transform: translateZ(calc(var(--i) * var(--step, 2px)));
}

.stack > :nth-child(1) { --i: 0; }
.stack > :nth-child(2) { --i: 1; }
.stack > :nth-child(3) { --i: 2; }
.stack > :nth-child(4) { --i: 3; }
.stack > :nth-child(5) { --i: 4; }
.stack > :nth-child(6) { --i: 5; }
.stack > :nth-child(7) { --i: 6; }
.stack > :nth-child(8) { --i: 7; }
.stack > :nth-child(9) { --i: 8; }
.stack > :nth-child(10) { --i: 9; }

/* ---------- PERFORMANCE ---------- */
/* perf.js marks animated blocks that are off screen; their animations wait until they are back */
.is-offscreen,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after,
.is-hidden-tab *,
.is-hidden-tab *::before,
.is-hidden-tab *::after,
.xp__item:not(.is-open) .xp__body *,
.xp__item:not(.is-open) .xp__body *::before,
.xp__item:not(.is-open) .xp__body *::after {
  animation-play-state: paused !important;
}