/* ==========================================================================
   AnvesionTech — Solutions (custom enterprise software)
   Sections: hero (blueprint → running system) · delivered work (railway VoIP)
   · car shed story · what we build (bento) · how we work (scroll rail)
   · why AnvesionTech · FAQ · CTA
   ========================================================================== */

main { --space-section: clamp(56px, 7.5vw, 120px); }
.subnav { margin-top: var(--header-h); }

/* Mono caption style shared by small labels */
:where(.csb__thr-l, .sys__bp, .sys__h, .sys__status, .st, .sys-meter span, .sys-int span, .shero__built-label, .case__kicker, .case__facts span, .case__reuse-label,
  .vo__head, .vo__tag, .vo__end span, .vo__app-k, .vo__ari span, .vo__core-k span, .cs__num, .csb__head, .csb__tag, .csb__col span, .tok,
  .csb__ih, .csb__counts span, .csb__checks li, .csb__task, .csb__note, .csb__pchip, .bx__kicker, .cam__head, .cam__box em, .cam__foot,
  .stock span, .pipe__col span, .intg__src span, .pr__n) { font-family: var(--font-mono); font-feature-settings: normal; text-transform: uppercase; }

/* ===== 1. HERO ===== */
.shero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: calc(100svh - var(--header-h) - 52px);
  display: grid;
  grid-template-rows: 1fr auto;
}
.shero__grid { background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 45%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 72% 45%, #000 10%, transparent 75%); }
.shero__glow {
  position: absolute; z-index: -1; pointer-events: none;
  right: -10%; top: 4%;
  width: min(980px, 120vw); aspect-ratio: 1.25;
  background: radial-gradient(closest-side, rgba(var(--pa-rgb), 0.2), rgba(var(--pa-rgb), 0.05) 50%, transparent 72%);
  filter: blur(18px);
}
.shero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4.5vw, 80px);
  align-items: center;
  padding-top: clamp(32px, 6vh, 72px);
  padding-bottom: clamp(32px, 6vh, 64px);
}
.shero__title { font-size: clamp(2.5rem, 1.1rem + 4.1vw, 5.1rem); letter-spacing: -0.05em; line-height: 0.97; max-width: 11.5ch; }
.shero__title .serif-i { display: inline; padding-right: 0.05em; text-shadow: 0 0 60px rgba(var(--pa-rgb), 0.4); }
.shero__lead { margin-top: clamp(18px, 2.6vh, 28px); max-width: 48ch; }
.shero__ctas { margin-top: clamp(22px, 3.6vh, 36px); }

.shero__built {
  min-width: 0;
  display: flex; align-items: center; gap: 26px;
  padding: 16px var(--gutter) 18px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(5, 7, 11, 0.3), rgba(5, 7, 11, 0.85));
}
.shero__built-label { flex: none; font-size: var(--fs-2xs); letter-spacing: 0.16em; color: var(--text-3); }
.shero__built .marquee { --gap: 0px; flex: 1; min-width: 0; }
.shero__built .marquee__track { list-style: none; padding: 0; justify-content: flex-start; }
.shero__built li { display: flex; align-items: center; white-space: nowrap; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--text-2); }
.shero__built li::after { content: ""; width: 4px; height: 4px; margin: 0 22px; border-radius: 50%; background: var(--pa); opacity: 0.6; }

/* --- Hero visual: blueprint modules that build into a running system --- */
.sys { position: relative; margin: 0; min-width: 0; }
.sys::before {
  content: ""; position: absolute; inset: -8% -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--pa-rgb), 0.16), transparent 70%);
}
.sys__frame { background: linear-gradient(180deg, #0c111b, #080b12); }
.sys__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 0.85fr;
  grid-template-areas: "crm ord face" "crm inv face" "rep rep int";
  gap: 10px;
  padding: 12px;
  aspect-ratio: 16 / 10.5;
}
.sys__mod {
  --bd: var(--line-strong);
  position: relative;
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--bd);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  overflow: hidden;
}
.sys__mod--crm { grid-area: crm; }
.sys__mod--ord { grid-area: ord; }
.sys__mod--face { grid-area: face; }
.sys__mod--inv { grid-area: inv; }
.sys__mod--rep { grid-area: rep; }
.sys__mod--int { grid-area: int; }
.sys__h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.1em; color: var(--text-2); white-space: nowrap; }
.sys__h b { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; color: var(--pa); font-size: 9.5px; }
.sys__h .dot { width: 6px; height: 6px; color: var(--ok); }
.sys__body { flex: 1; min-height: 0; }

/* blueprint overlay */
.sys__bp {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 11px;
  border-radius: inherit;
  border: 1px dashed rgba(var(--pa-rgb), 0.55);
  background:
    repeating-linear-gradient(135deg, rgba(var(--pa-rgb), 0.06) 0 1px, transparent 1px 9px),
    #0a0e16;
  font-size: 10px; letter-spacing: 0.08em; text-transform: lowercase; color: rgba(var(--pa-rgb), 0.85);
  opacity: 0;
  pointer-events: none;
}
.sys__bp em { font-style: normal; color: var(--text-3); }
.sys__bp::before, .sys__bp::after {
  content: ""; position: absolute; width: 10px; height: 10px; border-color: rgba(var(--pa-rgb), 0.8); border-style: solid;
}
.sys__bp::before { right: 6px; bottom: 6px; border-width: 0 1px 1px 0; }
.sys__bp::after { left: 6px; bottom: 6px; border-width: 0 0 1px 1px; }

/* build sequence (motion only) */
html.motion .sys__bp { animation: bp-out 0.7s var(--ease-out) both; animation-delay: calc(0.45s + var(--i) * 0.24s); }
html.motion .sys__h, html.motion .sys__body { animation: mod-in 0.9s var(--ease-out) both; animation-delay: calc(0.6s + var(--i) * 0.24s); }
@keyframes bp-out { 0%, 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.03); } }
@keyframes mod-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }

.sys__status {
  position: relative;
  height: 30px;
  border-top: 1px solid var(--line);
  font-size: 10px; letter-spacing: 0.12em; color: var(--text-3);
}
.sys__phase { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sys__phase--a { color: rgba(var(--pa-rgb), 0.85); opacity: 0; }
.sys__phase--b .dot { color: var(--ok); width: 6px; height: 6px; }
.sys__phase--b { color: var(--text-2); }
html.motion .sys__phase--a { animation: phase-a 2.3s linear both; }
html.motion .sys__phase--b { animation: mod-in 0.8s var(--ease-out) 2.2s both; }
@keyframes phase-a { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* module bodies */
.st {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 9px; letter-spacing: 0.06em; color: var(--text-3);
  white-space: nowrap;
}
.st--ok { color: var(--ok); border-color: rgba(62, 230, 154, 0.35); background: rgba(62, 230, 154, 0.07); }
.st--pa { color: var(--pa); border-color: rgba(var(--pa-rgb), 0.35); background: rgba(var(--pa-rgb), 0.07); }
.st--info { color: var(--info); border-color: rgba(110, 168, 255, 0.35); background: rgba(110, 168, 255, 0.07); }

.sys-crm { display: grid; align-content: start; gap: 9px; }
.sys-crm p { display: flex; align-items: center; gap: 8px; }
.sys-crm .av { width: 18px; height: 18px; border-radius: 50%; flex: none; background: linear-gradient(135deg, rgba(var(--pa-rgb), 0.5), rgba(110, 168, 255, 0.35)); }
.sys-crm b { flex: 1; height: 6px; border-radius: 4px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.18) var(--w), rgba(255, 255, 255, 0.05) var(--w)); }
.sys-crm p:nth-child(2) .av { background: linear-gradient(135deg, rgba(62, 230, 154, 0.45), rgba(var(--pa-rgb), 0.3)); }
.sys-crm p:nth-child(3) .av { background: linear-gradient(135deg, rgba(255, 181, 71, 0.45), rgba(var(--pa-rgb), 0.25)); }

.sys-bars { display: flex; align-items: flex-end; gap: 6%; padding-top: 4px; }
.sys-bars i {
  flex: 1; height: 100%; border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, rgba(var(--pa-rgb), 0.85), rgba(var(--pa-rgb), 0.25));
  transform-origin: bottom; transform: scaleY(var(--h));
}
html.motion .sys-bars i { animation: bar-breathe 3.6s ease-in-out infinite; animation-delay: calc(var(--h) * -4s); }
@keyframes bar-breathe { 0%, 100% { transform: scaleY(var(--h)); } 50% { transform: scaleY(calc(var(--h) * 0.72 + 0.12)); } }

/* face-detection module + shared silhouette / detection box */
.sil { position: absolute; display: block; }
.sil::before, .sil::after { content: ""; position: absolute; background: linear-gradient(180deg, rgba(169, 179, 194, 0.34), rgba(169, 179, 194, 0.1)); }
.sil::before { left: 31%; width: 38%; top: 6%; height: 30.4%; border-radius: 50% 50% 46% 46%; }
.sil::after { left: 6%; right: 6%; top: 40%; height: 70%; border-radius: 48% 48% 10% 10% / 42% 42% 10% 10%; }
.fbox {
  --c: var(--pa);
  position: absolute; display: block;
  border: 1px solid rgba(var(--pa-rgb), 0.28);
  border-radius: 3px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 9px 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px 9px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 9px 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 9px,
    linear-gradient(var(--c), var(--c)) 0 100% / 9px 2px, linear-gradient(var(--c), var(--c)) 0 100% / 2px 9px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 9px 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 9px;
  background-repeat: no-repeat;
  box-shadow: 0 0 14px -4px rgba(var(--pa-rgb), 0.7);
}
.sys-face { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.sys-face .st { align-self: flex-start; }
.sys-face__view { position: relative; flex: 1; min-height: 44px; border-radius: 8px; border: 1px solid var(--line); background: radial-gradient(ellipse at 50% 110%, rgba(110, 168, 255, 0.1), transparent 65%), #0a0e16; overflow: hidden; }
.sys-face .sil { aspect-ratio: 4 / 5; }
.sys-face .sil--a { left: 12%; top: 16%; width: 32%; }
.sys-face .sil--b { left: 56%; top: 30%; width: 27%; }
.sys-face .fbox { left: 22%; width: 56%; top: 1%; height: 40%; }
html.motion .sys-face .fbox { animation: lock-on 0.7s var(--ease-out) both; animation-delay: 1.35s; }
html.motion .sys-face .sil--b .fbox { animation-delay: 1.6s; }
@keyframes lock-on { from { opacity: 0; transform: scale(1.7); } to { opacity: 1; transform: none; } }

.sys-meter { display: grid; align-content: center; gap: 9px; }
.sys-meter p { display: flex; align-items: center; gap: 8px; }
.sys-meter span { font-size: 9px; color: var(--text-3); width: 10px; }
.sys-meter b { flex: 1; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.sys-meter b i { display: block; height: 100%; border-radius: inherit; background: var(--ok); transform-origin: left; transform: scaleX(var(--w)); }
.sys-meter b.is-low i { background: var(--warn); }

.sys-spark svg { width: 100%; height: 100%; overflow: visible; }
.sys-spark__area { fill: rgba(var(--pa-rgb), 0.12); stroke: none; }
.sys-spark__line { fill: none; stroke: var(--pa); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
html.motion .sys-spark__line { animation: spark-draw 1.6s var(--ease-in-out) both; animation-delay: 1.5s; }
@keyframes spark-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.sys-int { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.sys-int span { flex: none; padding: 5px 7px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); font-size: 9px; color: var(--text-2); }
.sys-int i { flex: 1; height: 1px; min-width: 6px; background: linear-gradient(90deg, rgba(var(--pa-rgb), 0.7) 50%, transparent 50%) 0 0 / 6px 1px; }
html.motion .sys-int i { animation: dash-run 0.8s linear infinite; }
@keyframes dash-run { to { background-position: 6px 0; } }

.is-paused, .is-paused *, .is-paused ::after { animation-play-state: paused !important; }

/* ===== 2. DELIVERED WORK — case 01 ===== */
.work { padding-bottom: calc(var(--space-section) * 0.6); }
.case {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
}
.case__kicker { display: flex; align-items: center; gap: 12px; font-size: var(--fs-xs); letter-spacing: 0.14em; color: var(--text-3); margin-bottom: 14px; }
.case__kicker span { color: var(--pa); padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(var(--pa-rgb), 0.4); background: rgba(var(--pa-rgb), 0.08); }
.case .h3 { max-width: 20ch; }
.case__p { margin-top: 14px; color: var(--text-2); max-width: 52ch; }
.case__facts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case__facts li { display: grid; gap: 4px; padding: 14px 12px 14px 0; }
.case__facts li + li { padding-left: 16px; border-left: 1px solid var(--line); }
.case__facts b { font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.case__facts span { font-size: var(--fs-2xs); letter-spacing: 0.1em; color: var(--text-3); }
.case__reuse-label { margin-top: 22px; font-size: var(--fs-2xs); letter-spacing: 0.14em; color: var(--text-3); }
.case__reuse { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.case__reuse .chip { font-size: 0.72rem; padding: 6px 12px; color: var(--text); }
.case__cta { margin-top: 26px; }
.case__cta .btn { white-space: normal; text-align: left; line-height: 1.25; }

/* --- VoIP architecture: builds as it scrolls into view --- */
.vo {
  --a: clamp(0, calc((var(--p) - 0.12) * 6), 1);
  --b: clamp(0, calc((var(--p) - 0.3) * 6), 1);
  --c: clamp(0, calc((var(--p) - 0.45) * 6), 1);
  --d: clamp(0, calc((var(--p) - 0.6) * 6), 1);
  --e: clamp(0, calc((var(--p) - 0.72) * 5), 1);
  position: relative;
  margin: 0;
  padding: clamp(16px, 2vw, 26px);
  border-radius: var(--radius-l);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(var(--pa-rgb), 0.1), transparent 70%),
    linear-gradient(180deg, #0c111a, #080b11);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.9), 0 30px 90px -50px rgba(var(--pa-rgb), 0.5);
  overflow: hidden;
  isolation: isolate;
}
.vo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
}
.vo__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: var(--fs-2xs); letter-spacing: 0.12em; color: var(--text-2); margin-bottom: 18px; }
.vo__head span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.vo__head .dot { color: var(--ok); }
.vo__tag { padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-3); }

.vo__ends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; opacity: var(--a); transform: translate3d(0, calc((1 - var(--a)) * 14px), 0); }
.vo__end {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 8px;
  border-radius: 14px; border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
}
.vo__end svg { width: 20px; height: 20px; color: var(--text); }
.vo__end span { font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-2); }

.vo__wires { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; height: 40px; }
.vo__wires i, .vo__ari i {
  position: relative; justify-self: center; width: 1px; height: 100%;
  background: linear-gradient(180deg, rgba(var(--pa-rgb), 0.75), rgba(var(--pa-rgb), 0.25));
  transform-origin: top; transform: scaleY(var(--b));
}
.vo__wires i::after, .vo__ari i::after {
  content: ""; position: absolute; left: -2.5px; top: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pa); box-shadow: 0 0 10px var(--pa);
  opacity: 0;
}
html.motion .vo__wires i::after { animation: pkt-down 2.2s cubic-bezier(.5, 0, .5, 1) infinite; }
.vo__wires i:nth-child(2)::after { animation-delay: -0.7s; }
.vo__wires i:nth-child(3)::after { animation-delay: -1.4s; }
@keyframes pkt-down { 0% { transform: translateY(-3px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(37px); opacity: 0; } }

.vo__app {
  position: relative;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(var(--pa-rgb), 0.55);
  background: linear-gradient(180deg, rgba(var(--pa-rgb), 0.14), rgba(var(--pa-rgb), 0.04));
  box-shadow: 0 0 0 4px rgba(var(--pa-rgb), 0.06), 0 18px 50px -20px rgba(var(--pa-rgb), 0.55);
  text-align: center;
  opacity: var(--c);
  transform: scale(calc(0.94 + var(--c) * 0.06));
}
.vo__app-k { font-size: var(--fs-2xs); letter-spacing: 0.14em; color: var(--pa); }
.vo__app-t { margin-top: 4px; font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem); font-weight: 600; letter-spacing: -0.02em; }
.vo__app-s { margin-top: 2px; font-size: 0.85rem; color: var(--text-2); }

.vo__ari { position: relative; display: grid; height: 48px; }
.vo__ari i { transform: scaleY(var(--d)); }
html.motion .vo__ari i::after { animation: pkt-ari 1.8s ease-in-out infinite; }
@keyframes pkt-ari { 0% { transform: translateY(0); opacity: 0; } 15%, 85% { opacity: 1; } 50% { transform: translateY(42px); } 100% { transform: translateY(0); opacity: 0; } }
.vo__ari span {
  position: absolute; left: calc(50% + 12px); top: 50%; transform: translateY(-50%);
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; letter-spacing: 0.14em; color: var(--pa);
  border: 1px solid rgba(var(--pa-rgb), 0.45); background: #0b0f17;
  opacity: var(--d);
}

.vo__core {
  padding: 14px 16px 16px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  opacity: var(--e);
  transform: translate3d(0, calc((1 - var(--e)) * 16px), 0);
}
.vo__core-k { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.vo__core-k span { font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0.12em; color: var(--ok); }
.vo__servers { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.vo__pair { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-radius: 12px; border: 1px dashed var(--line-strong); }
.vo__srv {
  position: relative; height: 34px; border-radius: 8px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, transparent 47%, var(--line-strong) 47%, var(--line-strong) 53%, transparent 53%),
    linear-gradient(180deg, #121826, #0d121c);
}
.vo__srv i { position: absolute; left: 9px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok), 0 13px 0 var(--ok); }
html.motion .vo__srv i { animation: led 2.4s steps(2) infinite; }
.vo__srv:nth-child(2) i { animation-delay: -0.6s; }
.vo__pair + .vo__plus + .vo__pair .vo__srv:nth-child(1) i { animation-delay: -1.2s; }
.vo__pair + .vo__plus + .vo__pair .vo__srv:nth-child(2) i { animation-delay: -1.8s; }
@keyframes led { 50% { opacity: 0.35; } }
.vo__plus { font-size: 1.1rem; color: var(--text-3); font-weight: 500; }

/* ===== 3. CAR SHED — sticky story ===== */
.cs { --step-h: 78svh; }
.cs__copy { position: relative; min-width: 0; }
.cs .eyebrow span { color: var(--text); }
.cs__title { font-size: clamp(1.8rem, 1.1rem + 2.2vw, 3.1rem); max-width: 15ch; margin-bottom: clamp(18px, 4vh, 40px); }
.cs__num { font-size: var(--fs-xs); letter-spacing: 0.14em; color: var(--pa); margin-bottom: 12px; }
.cs__num--warn { color: var(--warn); }
.cs .story__panel .h3 { max-width: 20ch; }
.cs__p { margin-top: 12px; color: var(--text-2); max-width: 44ch; line-height: 1.6; }

.csb {
  container-type: inline-size;
  border-radius: 20px;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(var(--pa-rgb), 0.08), transparent 70%),
    linear-gradient(180deg, #0c111a, #080b11);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.9), 0 30px 90px -50px rgba(var(--pa-rgb), 0.45);
  overflow: hidden;
}
.csb__head {
  position: absolute; left: 3.5cqw; right: 3.5cqw; top: 3cqw;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: clamp(10px, 1.9cqw, 12px); letter-spacing: 0.12em; color: var(--text-2);
}
.csb__head span:first-child { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.csb__head .dot { color: var(--ok); }
.csb__tag { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-3); white-space: nowrap; }

.csb__cols { position: absolute; left: 3cqw; right: 3cqw; top: 10.5cqw; height: calc(25cqw + 18px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6cqw; }
.csb__col {
  border-radius: 2.2cqw;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.022);
  padding-top: 1.6cqw;
  text-align: center;
  transition: border-color 0.6s, background-color 0.6s;
}
.csb__col span { display: block; font-size: clamp(10px, 1.8cqw, 12px); line-height: 1.3; letter-spacing: 0.08em; color: var(--text-3); white-space: nowrap; }
.cs[data-step="1"] .csb__col:nth-child(2),
.cs[data-step="2"] .csb__col:nth-child(3) { border-color: rgba(var(--pa-rgb), 0.4); background: rgba(var(--pa-rgb), 0.05); }
.cs[data-step="1"] .csb__col:nth-child(2) span,
.cs[data-step="2"] .csb__col:nth-child(3) span { color: var(--pa); }
.cs[data-step="3"] .csb__col:nth-child(4) { border-color: rgba(255, 181, 71, 0.35); background: rgba(255, 181, 71, 0.04); }

/* tokens (rakes). Column/row per step via custom properties. */
.tok {
  --col: 0; --row: 0;
  position: absolute;
  left: 4.2cqw;
  top: calc(13cqw + 18px);
  transform: translate3d(calc(var(--col) * 23.95cqw), calc(var(--row) * 10cqw), 0);
  width: 20cqw; height: 8cqw;
  display: flex; align-items: center; justify-content: center; gap: 1.4cqw;
  border-radius: 1.8cqw;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #161d2b, #10151f);
  font-size: clamp(10px, 2.1cqw, 13px); letter-spacing: 0.06em; color: var(--text);
  transition: transform 0.9s var(--ease-out), border-color 0.5s, box-shadow 0.5s, color 0.5s;
}
.tok i { width: 3.6cqw; height: 2.2cqw; min-width: 12px; min-height: 7px; border-radius: 3px; border: 1.5px solid currentColor; opacity: 0.6; position: relative; }
.tok i::after { content: ""; position: absolute; left: 18%; right: 18%; top: 28%; height: 1.5px; background: currentColor; }
.tok__flag {
  position: absolute; right: -1.2cqw; top: -1.4cqw;
  width: 3.4cqw; height: 3.4cqw; min-width: 14px; min-height: 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--warn); color: #1a1205;
  font-size: clamp(9px, 1.9cqw, 12px); font-weight: 700;
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.4s, transform 0.6s var(--ease-spring);
}
.tok--1 { --col: 0; --row: 0; }
.tok--5 { --col: 0; --row: 1; }
.tok--2 { --col: 1; --row: 0; }
.tok--3 { --col: 2; --row: 0; }
.tok--4 { --col: 3; --row: 0; }
.cs[data-step="1"] .tok--1 { --col: 1; --row: 1; }
.cs[data-step="1"] .tok--5 { --row: 0; }
.cs:is([data-step="2"], [data-step="3"]) .tok--1 { --col: 2; --row: 1; }
.cs:is([data-step="2"], [data-step="3"]) .tok--5 { --row: 0; }
.cs:is([data-step="2"], [data-step="3"]) .tok--3 { --col: 3; --row: 1; }
.cs[data-step="3"] .tok--2 { --col: 2; --row: 0; }
.cs:is([data-step="1"], [data-step="2"]) .tok--1 { border-color: rgba(var(--pa-rgb), 0.75); color: var(--pa); box-shadow: 0 0 0 3px rgba(var(--pa-rgb), 0.14), 0 0 24px -4px rgba(var(--pa-rgb), 0.7); }
.cs[data-step="2"] .tok--3 { border-color: rgba(62, 230, 154, 0.6); color: var(--ok); }
.cs[data-step="3"] .tok--4 { border-color: rgba(255, 181, 71, 0.8); color: var(--warn); box-shadow: 0 0 0 3px rgba(255, 181, 71, 0.14), 0 0 26px -4px rgba(255, 181, 71, 0.7); }
.cs[data-step="3"] .tok--4 .tok__flag { opacity: 1; transform: scale(1); }
html.motion .cs[data-step="3"] .tok--4 { animation: tok-pulse 2s ease-in-out infinite; }
@keyframes tok-pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 181, 71, 0.06), 0 0 30px -2px rgba(255, 181, 71, 0.8); } }

/* bottom info card — one per step */
.csb__info {
  position: absolute; left: 3cqw; right: 3cqw; top: calc(38cqw + 18px); bottom: 3cqw;
  padding: 2.4cqw 3cqw;
  border-radius: 2.4cqw;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  display: flex; flex-direction: column; justify-content: center; gap: 1.8cqw;
}
html.motion .csb__info:not(.is-on) { transform: translate3d(0, 10px, 0); }
.csb__ih { font-size: clamp(10px, 1.9cqw, 12px); letter-spacing: 0.12em; color: var(--text-2); }
.csb__counts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6cqw; }
.csb__counts li { display: grid; gap: 2px; }
.csb__counts b { font-size: clamp(1rem, 4.4cqw, 1.9rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.csb__counts span { font-size: clamp(10px, 1.7cqw, 11px); letter-spacing: 0.06em; color: var(--text-3); }
.csb__checks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1.4cqw 2.2cqw; }
.csb__checks li { display: inline-flex; align-items: center; gap: 1.2cqw; font-size: clamp(10px, 1.85cqw, 12px); letter-spacing: 0.06em; color: var(--text-3); white-space: nowrap; }
.csb__checks li::before { content: ""; width: 2.6cqw; height: 2.6cqw; min-width: 11px; min-height: 11px; border-radius: 4px; border: 1px solid var(--line-strong); }
.csb__checks li.is-done { color: var(--text); }
.csb__checks li.is-done::before { border-color: rgba(62, 230, 154, 0.6); background: rgba(62, 230, 154, 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ee69a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat; }
.csb__task { display: flex; align-items: center; gap: 2cqw; font-size: clamp(10px, 1.8cqw, 12px); letter-spacing: 0.06em; color: var(--text-3); }
.csb__task b { flex: 1; height: 1.2cqw; min-height: 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.csb__task b i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--pa), var(--pa-2)); transform-origin: left; transform: scaleX(0.62); }
html.motion .csb__info--2.is-on .csb__task b i { animation: task-fill 1.6s var(--ease-out) both; }
@keyframes task-fill { from { transform: scaleX(0.08); } to { transform: scaleX(0.62); } }
.csb__task em { font-style: normal; color: var(--pa); white-space: nowrap; }
.csb__note { display: inline-flex; align-items: center; gap: 1.4cqw; font-size: clamp(10px, 1.8cqw, 12px); letter-spacing: 0.06em; color: var(--ok); }
.csb__note .dot { width: 6px; height: 6px; }
.csb__note--warn { color: var(--warn); text-transform: none; font-family: var(--font-sans); letter-spacing: 0; font-size: clamp(11px, 2cqw, 13.5px); }
.csb__pred-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.csb__pchip { padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255, 181, 71, 0.45); background: rgba(255, 181, 71, 0.08); color: var(--warn); font-size: clamp(9px, 1.7cqw, 11px); letter-spacing: 0.08em; white-space: nowrap; }
.csb__info--3 { justify-content: space-between; }
.csb__chart { position: relative; flex: 1 1 auto; min-height: 30px; }
.csb__spark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.csb__area { fill: url(#csbGrad); stroke: none; }
.csb__thr-l { position: absolute; left: 0; top: 20%; transform: translateY(5px); font-size: clamp(9px, 1.5cqw, 10.5px); letter-spacing: 0.08em; color: rgba(255, 181, 71, 0.8); }
.csb__now { position: absolute; left: 87.5%; top: 30%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 4px rgba(255, 181, 71, 0.18), 0 0 14px var(--warn); }
.csb__thr { fill: none; stroke: rgba(255, 181, 71, 0.55); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.csb__trend { fill: none; stroke: #d6dce6; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.csb__fore { fill: none; stroke: var(--warn); stroke-width: 2; stroke-dasharray: 0.12 0.08; vector-effect: non-scaling-stroke; }
html.motion .csb__info--3.is-on .csb__trend { animation: spark-draw 1.2s var(--ease-in-out) both; }
html.motion .csb__info--3.is-on .csb__fore { animation: mod-in 0.6s var(--ease-out) 1.1s both; }

/* No-JS / reduced motion: show the final board state and only the predictive card */
html:not(.motion) .csb__info:not(.csb__info--3) { display: none; }
html:not(.motion) .tok--4 { border-color: rgba(255, 181, 71, 0.8); color: var(--warn); }
html:not(.motion) .tok--4 .tok__flag { opacity: 1; transform: none; }

/* ===== 4. WHAT WE BUILD — bento ===== */
.build { padding-top: calc(var(--space-section) * 0.9); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.bx {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  padding: clamp(18px, 2vw, 28px);
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), var(--bg-elev);
  overflow: hidden;
  isolation: isolate;
}
.bx--vision { grid-column: 1 / span 7; grid-row: span 2; }
.bx--crm, .bx--inv { grid-column: span 5; }
.bx--mgmt, .bx--int, .bx--apps { grid-column: span 4; }
.bx--vision::after {
  content: ""; position: absolute; z-index: -1; width: 80%; height: 70%; right: -25%; top: -30%;
  background: radial-gradient(closest-side, rgba(var(--pa-rgb), 0.16), transparent); pointer-events: none;
}
.bx--vision { border-color: rgba(var(--pa-rgb), 0.28); }
.bx__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bx__top .icon-box { margin: 0; }
.bx__kicker { font-size: var(--fs-2xs); letter-spacing: 0.14em; color: var(--pa); }
.bx .h3 { max-width: 18ch; }
.bx .h4 { max-width: 26ch; }
.bx__p { margin-top: 10px; color: var(--text-2); font-size: 0.95rem; line-height: 1.55; max-width: 52ch; }
.bx__p a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(var(--pa-rgb), 0.6); text-underline-offset: 3px; }
.bx__p a:hover { color: var(--pa); }

/* AI face detection camera view */
.cam { margin-top: 22px; border-radius: 18px; border: 1px solid var(--line-strong); background: #080b11; overflow: hidden; }
.cam__head, .cam__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; font-size: var(--fs-2xs); letter-spacing: 0.1em; color: var(--text-2); white-space: nowrap; }
.cam__head { border-bottom: 1px solid var(--line); }
.cam__live { display: inline-flex; align-items: center; gap: 8px; }
.cam__live .dot { color: var(--bad); }
.cam__tag { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-3); }
.cam__foot { border-top: 1px solid var(--line); color: var(--text-3); }
.cam__foot b { color: var(--text); font-weight: 500; margin-left: 6px; }
.cam__view {
  position: relative; aspect-ratio: 16 / 8.2; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 70% 90% at 50% 115%, rgba(110, 168, 255, 0.12), transparent 65%), linear-gradient(180deg, #0e131d, #090c13);
}
.cam__view::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.cam__view::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.75); }
.cam__scan { position: absolute; left: 0; right: 0; top: 0; height: 26%; background: linear-gradient(180deg, transparent, rgba(var(--pa-rgb), 0.12), transparent); transform: translateY(-100%); }
html.motion .cam__scan { animation: cam-scan 4.5s linear infinite; }
@keyframes cam-scan { to { transform: translateY(400%); } }
.cam__p { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 4 / 5; }
.cam__p .sil { inset: 0; }
.cam__box { left: 21%; width: 58%; top: 0; height: 42%; }
.cam__box em {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -6px);
  padding: 2px 7px; border-radius: 999px;
  font-style: normal; font-size: 10px; letter-spacing: 0.06em; white-space: nowrap;
  color: var(--ok); border: 1px solid rgba(62, 230, 154, 0.45); background: rgba(8, 11, 17, 0.88);
}
html.motion .cam .cam__box { opacity: 0; transform: scale(1.7); transition: opacity 0.4s var(--ease-out), transform 0.8s var(--ease-out); }
html.motion .cam .cam__box em { opacity: 0; transition: opacity 0.5s var(--ease-out); }
html.motion .cam.is-in .cam__box { opacity: 1; transform: none; transition-delay: calc(0.5s + var(--k) * 0.55s); }
html.motion .cam.is-in .cam__box em { opacity: 1; transition-delay: calc(1.1s + var(--k) * 0.55s); }
html.motion .cam[data-reveal] { transform: none; }
.cam__uses { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cam__uses li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--pa); box-shadow: 0 0 8px rgba(var(--pa-rgb), 0.8); }
.cam__note { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 0.88rem; line-height: 1.5; color: var(--text-2); }
.cam__note svg { width: 18px; height: 18px; flex: none; color: var(--ok); margin-top: 1px; }

/* inventory stock levels */
.stock { list-style: none; padding: 0; margin-top: auto; padding-top: 18px; display: grid; gap: 10px; }
.stock li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 76px; gap: 10px; align-items: center; }
.stock span { font-size: 10px; letter-spacing: 0.06em; color: var(--text-3); white-space: nowrap; }
.stock b { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.stock b i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--pa-rgb), 0.6), var(--pa)); transform-origin: left; transform: scaleX(var(--w)); }
.stock li.is-low b i { background: var(--warn); }
.stock .st { justify-self: start; }
html.motion .bx--inv .stock b i { transform: scaleX(0); transition: transform 1.3s var(--ease-out); }
html.motion .bx--inv.is-in .stock li:nth-child(1) b i { transform: scaleX(var(--w)); transition-delay: 0.35s; }
html.motion .bx--inv.is-in .stock li:nth-child(2) b i { transform: scaleX(var(--w)); transition-delay: 0.5s; }
html.motion .bx--inv.is-in .stock li:nth-child(3) b i { transform: scaleX(var(--w)); transition-delay: 0.65s; }

/* CRM pipeline */
.pipe { container-type: inline-size; position: relative; margin-top: auto; padding-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pipe__col { display: grid; align-content: start; gap: 6px; min-height: 84px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.pipe__col span { font-size: 10px; letter-spacing: 0.06em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe__col i { height: 18px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); }
.pipe__card {
  position: absolute; left: 8px; bottom: 8px;
  width: calc((100cqw - 24px) / 4 - 16px); height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(var(--pa-rgb), 0.7);
  background: rgba(var(--pa-rgb), 0.22);
  box-shadow: 0 0 18px -4px rgba(var(--pa-rgb), 0.8);
}
html.motion .pipe__card { animation: pipe-move 7s var(--ease-in-out) infinite; }
@keyframes pipe-move {
  0%, 12% { transform: translateX(0); }
  25%, 37% { transform: translateX(calc((100cqw - 24px) / 4 + 8px)); }
  50%, 62% { transform: translateX(calc(((100cqw - 24px) / 4 + 8px) * 2)); }
  75%, 92% { transform: translateX(calc(((100cqw - 24px) / 4 + 8px) * 3)); border-color: rgba(62, 230, 154, 0.8); background: rgba(62, 230, 154, 0.2); box-shadow: 0 0 18px -4px rgba(62, 230, 154, 0.8); }
  100% { transform: translateX(calc(((100cqw - 24px) / 4 + 8px) * 3)); opacity: 0; }
}

/* management chips */
.mgmt__chips { list-style: none; padding: 0; margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.cam__uses li, .mgmt__chips li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03);
  font-size: 0.86rem; color: var(--text);
}
.mgmt__chips li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--pa); box-shadow: 0 0 8px rgba(var(--pa-rgb), 0.8); }
html.motion .bx--mgmt .mgmt__chips li { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out); }
html.motion .bx--mgmt.is-in .mgmt__chips li { opacity: 1; transform: none; }
.bx--mgmt.is-in .mgmt__chips li:nth-child(1) { transition-delay: 0.35s; }
.bx--mgmt.is-in .mgmt__chips li:nth-child(2) { transition-delay: 0.45s; }
.bx--mgmt.is-in .mgmt__chips li:nth-child(3) { transition-delay: 0.55s; }
.bx--mgmt.is-in .mgmt__chips li:nth-child(4) { transition-delay: 0.65s; }
.bx--mgmt.is-in .mgmt__chips li:nth-child(5) { transition-delay: 0.75s; }

/* integrations + dashboards */
.intg { margin-top: auto; padding-top: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.intg__src { display: grid; gap: 6px; }
.intg__src span { position: relative; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line-strong); font-size: 10px; letter-spacing: 0.08em; color: var(--text-2); background: rgba(255, 255, 255, 0.03); }
.intg__src span::after { content: ""; position: absolute; left: 100%; top: 50%; width: 14px; height: 1px; background: rgba(var(--pa-rgb), 0.6); }
.intg__chart { width: 100%; height: 64px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); overflow: visible; }
.intg__area { fill: rgba(var(--pa-rgb), 0.12); }
.intg__line { fill: none; stroke: var(--pa); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* enterprise app window */
.appw { margin-top: auto; padding-top: 18px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0; height: 100px; }
.appw__side, .appw__main { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.appw__side { border-radius: 12px 0 0 12px; border-right: 0; display: grid; align-content: start; gap: 8px; padding: 10px 9px; }
.appw__side i { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.09); }
.appw__side i:first-child { background: rgba(var(--pa-rgb), 0.6); }
.appw__main { border-radius: 0 12px 12px 0; display: grid; align-content: start; gap: 8px; padding: 10px 12px; }
.appw__main b { width: 40%; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); }
.appw__main i { height: 14px; border-radius: 5px; border: 1px solid var(--line-strong); }
.appw__main .appw__btn { width: 26%; height: 14px; border: 0; background: var(--pa); opacity: 0.85; justify-self: end; }

/* ===== 5. HOW WE WORK — rail ===== */
.process { overflow: clip; }
.pr { --f: 0; list-style: none; padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.pr__line { position: absolute; left: 10%; right: 10%; top: 25px; height: 1px; background: var(--line-strong); pointer-events: none; }
.pr__fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--pa), var(--pa-2)); box-shadow: 0 0 12px rgba(var(--pa-rgb), 0.7); transform-origin: left; transform: scaleX(var(--f)); }
.pr__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pr__node {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  color: var(--text-3);
  transition: color 0.5s, border-color 0.5s, box-shadow 0.6s, background-color 0.5s;
}
.pr__node svg { width: 21px; height: 21px; }
.pr__body { margin-top: 18px; max-width: 24ch; transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out); }
.pr__n { font-size: var(--fs-2xs); letter-spacing: 0.14em; color: var(--text-3); margin-bottom: 6px; transition: color 0.5s; }
.pr__body p:last-child { margin-top: 8px; color: var(--text-2); font-size: 0.94rem; line-height: 1.55; }
html.motion .pr__step:not(.is-on) .pr__body { opacity: 0.38; transform: translate3d(0, 8px, 0); }
.pr__step.is-on .pr__node,
html:not(.motion) .pr__node { color: #05070b; border-color: var(--pa); background: var(--pa); box-shadow: 0 0 0 6px rgba(var(--pa-rgb), 0.12), 0 0 30px -4px rgba(var(--pa-rgb), 0.8); }
.pr__step.is-on .pr__n { color: var(--pa); }
html:not(.motion) .pr { --f: 1; }

/* ===== 6. WHY (light) ===== */
.why__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.why .h2 .serif-i { color: color-mix(in srgb, var(--pa) 72%, #0b0f17); }
.why .lead a { color: var(--text); font-weight: 550; text-decoration: underline; text-decoration-color: rgba(var(--pa-rgb), 0.7); text-underline-offset: 3px; }
.why .lead a:hover { color: color-mix(in srgb, var(--pa) 70%, #0b0f17); }
.why__grid { list-style: none; padding: 0; }
.why__copy .lead { margin-top: 18px; }
.why__card .icon-box { color: color-mix(in srgb, var(--pa) 70%, #0b0f17); background: rgba(var(--pa-rgb), 0.12); border-color: rgba(var(--pa-rgb), 0.3); }
.why__card p { color: var(--text-2); }

/* ===== 7. FAQ ===== */
.faqs__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.faqs__head { position: sticky; top: calc(var(--header-h) + 84px); }
.faqs__lead { margin-top: 18px; }
.faqs__lead .link-arrow { margin-left: 4px; }
.faqs .faq__item { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 0; }
.faqs .faq__item dd { line-height: 1.6; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .sys__h { font-size: 9px; }
  .sys__h b { font-size: 9px; }
}
@media (max-width: 1024px) {
  .bx--vision { grid-column: 1 / -1; grid-row: auto; }
  .bx--crm, .bx--inv, .bx--int, .bx--apps { grid-column: span 6; }
  .bx--mgmt { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .shero { min-height: 0; }
  .shero__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 30px; padding-bottom: 36px; }
  .shero__title { max-width: 12ch; }
  .case { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .why__split { grid-template-columns: minmax(0, 1fr); }
  .faqs__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .faqs__head { position: static; }

  /* car shed story on phones/tablets: visual on top (sized to its cell), copy below */
  html.motion .cs .story__visual { container-type: size; width: 100%; height: 100%; }
  html.motion .cs .story__stage { width: min(100cqw, calc(100cqh * 4 / 3)); }
  .cs__title { font-size: clamp(1.3rem, 5.6vw, 1.75rem); max-width: none; margin-bottom: 12px; }
  .cs .eyebrow { margin-bottom: 8px; }
  .cs__num { margin-bottom: 6px; font-size: 0.68rem; }
  .cs .story__panel .h3 { font-size: clamp(1.1rem, 4.8vw, 1.3rem); max-width: none; }
  .cs__p { margin-top: 6px; font-size: 0.95rem; line-height: 1.5; }
  .cs .story__dots { margin-top: 12px; }
}
@media (max-width: 760px) {
  .pr { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pr__line { left: 21px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; }
  .pr__fill { transform-origin: top; transform: scaleY(var(--f)); background: linear-gradient(180deg, var(--pa), var(--pa-2)); }
  .pr__step { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; padding-bottom: 22px; }
  .pr__step:last-child { padding-bottom: 0; }
  .pr__node { width: 44px; height: 44px; flex: none; }
  .pr__node svg { width: 18px; height: 18px; }
  .pr__body { margin-top: 2px; max-width: none; }
  .pr__n { margin-bottom: 2px; }
  .pr__body p:last-child { margin-top: 4px; font-size: 0.92rem; }
  .process .section-head--center { text-align: left; margin-inline: 0; }
  .process .section-head--center .eyebrow { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .shero__inner { padding-top: 24px; gap: 26px; }
  .shero__title { font-size: clamp(2.3rem, 10.6vw, 2.9rem); }
  .shero__lead { font-size: 1rem; }
  .shero__ctas { gap: 10px; }
  .shero__ctas .btn { min-height: 50px; padding: 14px 20px; font-size: 0.95rem; }
  .shero__built { gap: 14px; padding-block: 12px 14px; }
  .shero__built li { font-size: 0.86rem; }
  .shero__built li::after { margin: 0 14px; }

  .sys__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.15fr 0.9fr 0.8fr;
    grid-template-areas: "crm face" "ord inv" "rep int";
    gap: 8px; padding: 9px;
    aspect-ratio: 1 / 0.96;
  }
  .sys__mod { padding: 9px 10px; gap: 6px; border-radius: 10px; }
  .sys__h { font-size: 9px; letter-spacing: 0.06em; }
  .sys__h b { display: none; }
  .sys__bp { font-size: 9px; padding: 8px 9px; }
  .sys-crm { gap: 7px; }
  .sys-crm p:nth-child(4) { display: none; }
  .sys-crm .av { width: 14px; height: 14px; }
  .st { font-size: 8.5px; padding: 1px 6px; }
  .sys-crm .st { display: none; }
  .sys-int span { padding: 4px 5px; font-size: 8.5px; }
  .sys__status { height: 28px; font-size: 9px; }

  .case__facts li { padding: 12px 6px 12px 0; }
  .case__facts li + li { padding-left: 10px; }
  .case__facts b { font-size: 1.05rem; }
  .case__facts span { font-size: 10px; letter-spacing: 0.06em; }
  .case__cta .btn { width: 100%; justify-content: space-between; }
  .vo { padding: 14px; }
  .vo__head { margin-bottom: 14px; }
  .vo__end { padding: 10px 4px; }
  .vo__end span { font-size: 10px; letter-spacing: 0.04em; }
  .vo__wires { height: 30px; }
  @keyframes pkt-down { 0% { transform: translateY(-3px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(27px); opacity: 0; } }
  .vo__app { padding: 12px 12px; }
  .vo__app-s { font-size: 0.8rem; }
  .vo__ari { height: 40px; }
  .vo__core { padding: 12px; }
  .vo__core-k { font-size: 0.95rem; }
  .vo__servers { gap: 8px; margin-top: 10px; }
  .vo__pair { gap: 6px; padding: 6px; }
  .vo__srv { height: 28px; }
  .vo__srv i { top: 5px; box-shadow: 0 0 8px var(--ok), 0 11px 0 var(--ok); }

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bx--vision, .bx--crm, .bx--inv, .bx--mgmt { grid-column: 1 / -1; }
  .bx--int, .bx--apps { grid-column: span 1; padding: 14px; border-radius: var(--radius); }
  .bx { border-radius: var(--radius); }
  .bx--vision { padding: 16px; }
  .bx--int .bx__top, .bx--apps .bx__top { margin-bottom: 10px; gap: 8px; }
  .bx--int .bx__kicker, .bx--apps .bx__kicker { display: none; }
  .bx--int .h4, .bx--apps .h4 { font-size: 1rem; }
  .bx--int .bx__p, .bx--apps .bx__p { font-size: 0.84rem; line-height: 1.45; margin-top: 6px; }
  .intg, .appw { display: none; }
  .cam { margin-top: 16px; border-radius: 14px; }
  .cam__head, .cam__foot { padding: 8px 11px; letter-spacing: 0.06em; }
  .cam__foot { white-space: normal; font-size: 10px; letter-spacing: 0.04em; }
  .cam__foot span:last-child { text-align: right; }
  .cam__view { aspect-ratio: 16 / 9.5; }
  .cam__box em { font-size: 9.5px; padding: 1px 6px; }
  .cam__uses { gap: 6px; margin-top: 14px; }
  .cam__uses li { padding: 6px 11px; font-size: 0.82rem; }
  .cam__note { font-size: 0.86rem; margin-top: 12px; }
  .stock { padding-top: 14px; gap: 8px; }
  .stock li { grid-template-columns: 48px minmax(0, 1fr) 72px; gap: 8px; }
  .stock .st { font-size: 9.5px; }
  .pipe { gap: 6px; padding-top: 14px; }
  .pipe__col { min-height: 66px; padding: 6px; gap: 5px; border-radius: 10px; }
  .pipe__col span { font-size: 10px; letter-spacing: 0; }
  .pipe__col i { height: 14px; }
  .pipe__card { left: 6px; bottom: 6px; height: 14px; width: calc((100cqw - 18px) / 4 - 12px); }
  @keyframes pipe-move {
    0%, 12% { transform: translateX(0); }
    25%, 37% { transform: translateX(calc((100cqw - 18px) / 4 + 6px)); }
    50%, 62% { transform: translateX(calc(((100cqw - 18px) / 4 + 6px) * 2)); }
    75%, 92% { transform: translateX(calc(((100cqw - 18px) / 4 + 6px) * 3)); border-color: rgba(62, 230, 154, 0.8); background: rgba(62, 230, 154, 0.2); box-shadow: 0 0 18px -4px rgba(62, 230, 154, 0.8); }
    100% { transform: translateX(calc(((100cqw - 18px) / 4 + 6px) * 3)); opacity: 0; }
  }
  .mgmt__chips { gap: 6px; padding-top: 14px; }
  .mgmt__chips li { padding: 6px 11px; font-size: 0.82rem; }

  .why__card .h4 { font-size: 0.98rem; }
  .why__card .icon-box { margin-bottom: 10px; }

  .faqs .faq__item { padding: 18px 0; }
  .faqs .faq__item dt { font-size: 1.04rem; }
  .faqs .faq__item dd { font-size: 0.95rem; line-height: 1.55; }
}
@media (max-width: 380px) {
  .shero__title { font-size: 2.2rem; }
  .vo__end span { font-size: 10px; letter-spacing: 0; }
}
/* Short desktop/laptop screens: keep the car shed copy compact */
@media (min-width: 901px) and (max-height: 780px) {
  .cs__title { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.5rem); margin-bottom: 18px; }
  .cs__p { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sys__bp { display: none; }
}