.solution-journey { position: relative; min-width: 0; width: 100%; --journey-accent: var(--accent-1); animation: fadeInUp .9s ease-out .5s both; }
.solution-journey[data-phase="1"] { --journey-accent: var(--accent-2); }
.solution-journey[data-phase="2"], .solution-journey[data-phase="3"] { --journey-accent: var(--accent-4); }
.journey-topline { display: flex; justify-content: space-between; align-items: center; gap: .7rem; color: var(--text-dim); font: .62rem 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; }
.journey-toggle { display: none; align-items: center; gap: .4rem; border: 0; background: transparent; color: var(--text-muted); font: inherit; letter-spacing: 0; cursor: pointer; padding: .7rem 0; }
.journey-ready .journey-toggle { display: inline-flex; }
.journey-toggle svg { width: 12px; height: 12px; fill: currentColor; }
.journey-toggle .play-icon, .solution-journey[data-paused="true"] .pause-icon { display: none; }
.solution-journey[data-paused="true"] .play-icon { display: block; }
.journey-scene { display: block; width: 100%; height: auto; overflow: visible; }
.journey-orbit { fill: none; stroke: var(--text-muted); opacity: .1; }
.journey-guides { fill: none; stroke: var(--text-muted); stroke-dasharray: 2 7; opacity: .17; }
.journey-halo { fill: url(#journeyGlow); }
.journey-pane { opacity: .38; transition: transform 1.5s cubic-bezier(.22,.8,.2,1), opacity .8s; }
.journey-pane.website { color: var(--accent-1); transform: translate(30px, 46px) rotate(-4deg); }
.journey-pane.team { color: var(--accent-2); transform: translate(368px, 62px) rotate(4deg); }
.journey-pane.portal { color: var(--accent-4); transform: translate(194px, 275px) rotate(-2deg); }
.solution-journey[data-phase="0"] .website { opacity: 1; transform: translate(30px, 46px); }
.solution-journey[data-phase="1"] .team { opacity: 1; transform: translate(368px, 62px); }
.solution-journey[data-phase="2"] .portal { opacity: 1; transform: translate(194px, 275px); }
.solution-journey[data-phase="3"] .journey-pane { opacity: 1; }
.solution-journey[data-phase="3"] .website { transform: translate(33px, 180px) scale(.78); }
.solution-journey[data-phase="3"] .team { transform: translate(229px, 180px) scale(.78); }
.solution-journey[data-phase="3"] .portal { transform: translate(425px, 180px) scale(.78); }
.journey-pane-frame { fill: var(--bg-elevated); stroke: currentColor; stroke-width: 1; }
.journey-bar { fill: none; stroke: var(--text-muted); opacity: .2; }
.journey-dot { fill: currentColor; opacity: .7; }
.journey-window-label { fill: var(--text-primary); font: 11px 'JetBrains Mono', monospace; }
.journey-skeleton { fill: var(--text-muted); opacity: .22; }
.journey-soft { fill: currentColor; opacity: .09; }
.journey-field { fill: none; stroke: var(--text-muted); stroke-width: 1; opacity: .25; }
.journey-icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.journey-button { fill: currentColor; opacity: .16; }
.journey-request { transform: translateY(7px); opacity: 0; transition: opacity .7s .4s, transform .7s .4s; }
.solution-journey[data-phase="0"] .journey-request, .solution-journey[data-phase="3"] .journey-request { transform: none; opacity: 1; }
.journey-request rect { fill: var(--bg-elevated); stroke: currentColor; }
.journey-request text { fill: currentColor; font: 10px 'JetBrains Mono', monospace; }
.journey-task { transform: translate(14px, 54px); transition: transform 1.2s ease .5s; }
.solution-journey[data-phase="1"] .journey-task, .solution-journey[data-phase="3"] .journey-task { transform: translate(84px, 54px); }
.journey-task-card { fill: var(--bg-elevated); stroke: currentColor; }
.journey-portal-progress { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 124; stroke-dashoffset: 124; transition: stroke-dashoffset 1.5s ease .4s; }
.solution-journey[data-phase="2"] .journey-portal-progress, .solution-journey[data-phase="3"] .journey-portal-progress { stroke-dashoffset: 0; }
.journey-portal-check { opacity: .15; transition: opacity .5s 1s; }
.solution-journey[data-phase="2"] .journey-portal-check, .solution-journey[data-phase="3"] .journey-portal-check { opacity: 1; }
.journey-route { fill: none; stroke: var(--journey-accent); stroke-width: 1.3; opacity: .15; transition: opacity .5s; }
.journey-packet { fill: var(--bg-elevated); stroke: var(--journey-accent); stroke-width: 1.6; }
.journey-packet path { fill: none; stroke: var(--journey-accent); }
.journey-transfer { opacity: 0; }
.solution-journey[data-phase="0"] .journey-transfer.to-team { animation: journey-to-team 4.8s ease-in-out infinite; }
.solution-journey[data-phase="1"] .journey-transfer.to-portal { animation: journey-to-portal 4.8s ease-in-out infinite; }
@keyframes journey-to-team { 0%, 30% { opacity: 0; transform: translate(262px, 125px); } 40% { opacity: 1; } 80%, 100% { opacity: 0; transform: translate(368px, 140px); } }
@keyframes journey-to-portal { 0%, 25% { opacity: 0; transform: translate(482px, 226px); } 35% { opacity: 1; } 85%, 100% { opacity: 0; transform: translate(375px, 275px); } }
.journey-system { color: var(--accent-4); opacity: 0; transform: translateY(15px); transition: opacity .8s .3s, transform 1s .3s; }
.solution-journey[data-phase="3"] .journey-system { opacity: 1; transform: none; }
.journey-system-frame { fill: color-mix(in srgb, var(--bg-elevated) 70%, transparent); stroke: var(--accent-4); stroke-width: 1; }
.journey-system-label { fill: var(--text-primary); font: 12px 'JetBrains Mono', monospace; letter-spacing: 1px; }
.journey-system-status { fill: var(--accent-4); font: 10px 'JetBrains Mono', monospace; }
.journey-system-link { fill: none; stroke: var(--accent-4); stroke-width: 1.2; opacity: .4; }
.journey-system-signal { fill: none; stroke: var(--accent-4); stroke-width: 2; stroke-dasharray: 18 490; animation: journey-sync 4s linear infinite; }
@keyframes journey-sync { to { stroke-dashoffset: -508; } }
.solution-journey[data-phase="3"] .journey-separate-links { opacity: 0; }
.journey-separate-links { transition: opacity .4s; }
.solution-journey[data-paused="true"] .journey-transfer, .solution-journey[data-paused="true"] .journey-system-signal,
.solution-journey[data-suspended="true"] .journey-transfer, .solution-journey[data-suspended="true"] .journey-system-signal { animation-play-state: paused; }
.journey-caption { display: grid; padding: 1rem 0 1.3rem; }
.journey-caption > div { grid-area: 1 / 1; }
.journey-caption [hidden] { display: block; visibility: hidden; }
.journey-caption h2 { margin: 0 0 .45rem; color: var(--text-primary); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600; line-height: 1.3; }
.journey-caption p { margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.6; }
.journey-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.journey-step { min-width: 0; position: relative; border: 0; border-top: 2px solid var(--card-border); padding: .8rem 0 .5rem; text-align: left; color: var(--text-muted); background: transparent; font: .66rem 'JetBrains Mono', monospace; cursor: pointer; }
.journey-step::before { content: ""; position: absolute; top: -2px; left: 0; width: 100%; height: 2px; background: var(--journey-accent); transform: scaleX(0); transform-origin: left; }
.journey-step[aria-pressed="true"] { color: var(--text-primary); }
.journey-step[aria-pressed="true"]::before { transform: scaleX(var(--journey-progress, 1)); }
.journey-step span:first-child { display: block; margin-bottom: .4rem; color: var(--journey-accent); font-size: .6rem; }
.journey-step:hover, .journey-toggle:hover { color: var(--text-primary); }
.journey-step:focus-visible, .journey-toggle:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 5px; border-radius: 2px; }
@media (max-width: 1050px) { .solution-journey { max-width: 640px; margin: 0 auto; } }
@media (max-width: 440px) {
  .journey-topline { font-size: .53rem; letter-spacing: .06em; }
  .journey-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; }
  .journey-step { font-size: .7rem; padding-top: .6rem; }
  .journey-caption p { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .solution-journey * { animation: none !important; transition: none !important; } }