/* A continuous service narrative: product view → cycle reading → human guidance. */
.service-cycle { --cycle-muted: #93a2ad; --cycle-line: #26313a; --cycle-surface: #101316; background: #0a0c0e; color: #e5eaed; border-block: 1px solid #20262c; }
.service-cycle-inner { min-height: 420px; display: flex; flex-direction: column; justify-content: center; padding-block: 40px 28px; }
.service-cycle-heading { margin-bottom: 32px; color: #f5f7f8; text-align: center; }
.service-cycle-heading .eyebrow { color: #93a2ad; font-size: 9px; margin-bottom: 18px; }
.service-cycle-heading .service-cycle-title > span { color: #879198; }
.service-cycle-flow { display: grid; grid-template-columns: 1.04fr 1fr 1fr; gap: 48px; margin: 0; padding: 0; list-style: none; }
.service-cycle-step { position: relative; min-width: 0; }
.service-cycle-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; color: #d0d8de; font-size: 12px; font-weight: 500; letter-spacing: -.01em; line-height: 1.5; }
.service-cycle-label > span { color: var(--cyan); font-size: 9px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.service-cycle-label small { margin-left: auto; color: var(--cycle-muted); font-size: 9px; font-weight: 400; }
/* The connectors bridge distinct surfaces, without enclosing them in equal cards. */
.service-cycle-step:not(:last-child):after { content: ''; position: absolute; top: 156px; left: 100%; width: 48px; height: 1px; background: linear-gradient(90deg,transparent,var(--cyan)); }
.service-cycle-step:not(:last-child):before { content: ''; position: absolute; top: 154px; right: -29px; width: 5px; height: 5px; border-top: 1px solid var(--cyan); border-right: 1px solid var(--cyan); transform: rotate(45deg); }
.service-cycle-window, .service-cycle-sheet, .service-cycle-conversation { min-height: 228px; }
.service-cycle-window { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--cycle-line); border-radius: 10px; background: var(--cycle-surface); }
.service-cycle-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid #222b32; }
.service-cycle-wordmark { font-size: 18px; font-weight: 600; letter-spacing: -.065em; line-height: 1; }
.service-cycle-wordmark > span { color: var(--cyan); }
.service-cycle-toolbar > span:last-child { color: var(--cycle-muted); font-size: 9px; line-height: 1.6; text-align: right; }
.service-cycle-dashboard { display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 24px 17px; font-variant-numeric: tabular-nums; }
.service-cycle-result { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.service-cycle-result p, .service-cycle-incentive p { color: var(--cycle-muted); font-size: 10px; }
.service-cycle-result strong { display: block; margin-top: 2px; color: #edf1f3; font-size: 25px; font-weight: 450; line-height: 1.4; letter-spacing: -.045em; }
.service-cycle-goal { display: flex; align-items: baseline; justify-content: space-between; margin-top: 24px; font-size: 10px; color: #a9b6bf; }
.service-cycle-goal strong { color: #dde6eb; font-size: 14px; font-weight: 450; }
.service-cycle-goal small { margin-left: 2px; color: var(--cycle-muted); font-size: 10px; }
.service-cycle-track { height: 3px; margin-top: 7px; background: #2c363e; border-radius: 2px; }
.service-cycle-track i { display: block; width: 96%; height: 100%; border-radius: inherit; background: var(--cyan); }
.service-cycle-incentive { text-align: right; }
.service-cycle-incentive p { font-size: 9px; }
.service-cycle-incentive strong { display: block; color: #bccbd3; font-size: 17px; font-weight: 450; letter-spacing: -.025em; }
.service-cycle-sheet { position: relative; display: flex; flex-direction: column; padding: 20px; border: 1px solid #d7dfe1; border-radius: 4px; background: #edf1f2; color: #263940; box-shadow: 0 12px 28px #0002; }
.service-cycle-sheet:before { content: ''; position: absolute; inset: 5px -5px -5px 5px; border-right: 1px solid #6d7a80; border-bottom: 1px solid #6d7a80; border-radius: inherit; pointer-events: none; }
.service-cycle-sheet-heading { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid #cdd7db; }
.service-cycle-sheet-heading p { color: #506771; font-size: 9px; font-weight: 500; letter-spacing: .06em; }
.service-cycle-report-mark { width: 18px; height: 26px; object-fit: contain; }
.service-cycle-summary { display: grid; gap: 7px; margin: 14px 0; color: #5d717b; font-size: 11px; }
.service-cycle-summary > div { display: flex; justify-content: space-between; gap: 12px; }
.service-cycle-summary dd { margin: 0; color: #2c414b; font-weight: 500; font-variant-numeric: tabular-nums; }
.service-cycle-next { margin-top: auto; padding: 11px 0 0 11px; border-top: 1px solid #cdd7db; position: relative; }
.service-cycle-next:before { content: ''; position: absolute; left: 0; top: 15px; bottom: 2px; width: 2px; background: var(--cyan); }
.service-cycle-next > span { color: var(--muted); font-size: 8px; letter-spacing: .08em; }
.service-cycle-next p { margin-top: 4px; color: #2c414b; font-size: 11px; line-height: 1.65; }
.service-cycle-conversation { display: flex; flex-direction: column; justify-content: flex-start; padding-top: 12px; }
.service-cycle-sender { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.service-cycle-avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid #d7dfe1; border-radius: 50%; background: #edf1f2; }
.service-cycle-avatar img { width: 18px; height: 22px; object-fit: contain; }
.service-cycle-sender-name { font-size: 12px; font-weight: 500; text-wrap: balance; }
.service-cycle-message { padding: 14px 16px; background: var(--cycle-surface); border: 1px solid var(--cycle-line); border-left: 2px solid var(--cyan); border-radius: 3px 12px 12px; }
.service-cycle-message > p { color: #d0dde2; font-size: 12px; line-height: 1.8; }
.service-cycle-voice { display: flex; align-items: center; gap: 15px; width: 77%; padding: 10px 13px; margin-top: 8px; border: 1px solid var(--cycle-line); border-radius: 3px 9px 9px; background: var(--cycle-surface); }
.service-cycle-voice > span:last-child { color: #a7bac4; font-size: 9px; font-variant-numeric: tabular-nums; }
.service-cycle-wave { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 3px; height: 18px; }
.service-cycle-wave i { width: 2px; height: 5px; border-radius: 2px; background: var(--cyan); }
.service-cycle-wave i:nth-child(3n) { height: 11px; }
.service-cycle-wave i:nth-child(4n) { height: 17px; }
.service-cycle-wave i:nth-child(5n) { height: 8px; }
.service-cycle-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 18px; border-top: 1px solid #222a30; }
.service-cycle-caption p { color: #94a1aa; font-size: 10px; font-weight: 400; letter-spacing: 0; }
.service-cycle-caption p > span { color: #b4c0c8; }
.service-cycle-caption > span { color: #8c9aa4; font-size: 9px; }
@media (min-width:901px) and (max-width:1100px) {
 .service-cycle-flow { gap: 30px; }
 .service-cycle-label small { width: 100%; margin-left: 22px; }
 .service-cycle-step:not(:last-child):after { width: 30px; }
 .service-cycle-step:not(:last-child):before { right: -19px; }
 .service-cycle-sheet { padding: 17px; }
 .service-cycle-message { padding-inline: 13px; }
}
@media (max-width:900px) {
 .service-cycle-inner { max-width: 480px; padding-block: 36px 28px; }
 .service-cycle-heading { margin-bottom: 30px; }
 .service-cycle-flow { grid-template-columns: minmax(0,1fr); gap: 34px; padding-left: 24px; }
 .service-cycle-step:after, .service-cycle-step:before { display: none; }
 .service-cycle-label { position: relative; margin-bottom: 17px; }
 .service-cycle-label > span { position: absolute; left: -28px; font-size: 9px; }
 .service-cycle-step:not(:last-child):after { display: block; left: -23px; top: 26px; bottom: -8px; height: auto; width: 1px; background: linear-gradient(var(--cyan),var(--cycle-line) 85%,transparent); }
 .service-cycle-sheet { padding: 20px; }
 .service-cycle-caption { margin-top: 28px; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
}
@media (max-width:680px) {
 .service-cycle-heading .eyebrow { font-size: 8px; margin-bottom: 15px; }
}
@media (max-width:360px) {
 .service-cycle-label { gap: 5px; }
 .service-cycle-label small { font-size: 8px; }
 .service-cycle-dashboard { padding-inline: 13px; }
 .service-cycle-result strong { font-size: 23px; }
 .service-cycle-result { gap: 8px; }
 .service-cycle-incentive { max-width: 87px; }
 .service-cycle-incentive strong { font-size: 16px; }
 .service-cycle-sheet { padding: 16px; }
 .service-cycle-voice { width: 85%; }
}

/* One finite sequence per card. Only transform/opacity animate; the layout stays fixed. */
.home .service-cycle-step.reveal { --entrance-y: 34px; --entrance-scale: .965; --entrance-duration: 1000ms; }
.home .service-cycle-step.reveal.is-entering { animation-timing-function: cubic-bezier(.22,1,.36,1); }
.service-cycle-step.is-entering:not(:last-child):after { transform-origin: left top; animation: cycle-link-enter 620ms cubic-bezier(.22,1,.36,1) calc(var(--entrance-delay) + 240ms) both; }
.service-cycle-platform.is-entering .service-cycle-track i { transform-origin: left; animation: cycle-meter-enter 640ms cubic-bezier(.22,1,.36,1) calc(var(--entrance-delay) + 260ms) both; }
.service-cycle-analysis.is-entering .service-cycle-summary > div,
.service-cycle-analysis.is-entering .service-cycle-next,
.service-cycle-team.is-entering .service-cycle-message,
.service-cycle-team.is-entering .service-cycle-voice {
  animation: cycle-detail-enter 480ms cubic-bezier(.22,1,.36,1) calc(var(--entrance-delay) + var(--cycle-detail-delay,220ms)) both;
}
.service-cycle-summary > div:nth-child(2) { --cycle-detail-delay: 300ms; }
.service-cycle-summary > div:nth-child(3) { --cycle-detail-delay: 380ms; }
.service-cycle-next { --cycle-detail-delay: 440ms; }
.service-cycle-voice { --cycle-detail-delay: 400ms; }
.service-cycle-team.is-entering .service-cycle-wave { animation: cycle-wave-enter 360ms ease-out calc(var(--entrance-delay) + 550ms) both; }
@keyframes cycle-link-enter { from { opacity: 0; transform: var(--cycle-link-start,scaleX(0)); } to { opacity: 1; transform: scale(1); } }
@keyframes cycle-meter-enter { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cycle-detail-enter { from { opacity: 0; transform: translate3d(0,12px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes cycle-wave-enter { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@media(max-width:900px) {
  .home .service-cycle-step.reveal { --entrance-y: 26px; --entrance-scale: .98; }
  .service-cycle-step { --cycle-link-start: scaleY(0); }
}
@media(prefers-reduced-motion:reduce) {
  .service-cycle-step.is-entering *, .service-cycle-step.is-entering:after { animation: none !important; }
}
@media print {
  .service-cycle-step.is-entering *, .service-cycle-step.is-entering:after { animation: none !important; }
}