.reading-progress {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.reading-progress.is-visible { opacity: 1; }

.hero { position: relative; isolation: isolate; }
.hero-circuit { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-copy, .hero-product { position: relative; z-index: 1; }
.hero h1 > .hero-name { display: block; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; overflow: hidden; }
.hero-letter { display: inline-block; white-space: pre; }
.hero-product::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 38px;
  height: 1px;
  background: #79e4c9;
  box-shadow: 0 0 14px #79e4c970;
  pointer-events: none;
  animation: preview-scan 6s ease-in-out infinite;
  animation-play-state: paused;
  opacity: 0;
}
.hero.is-live-motion .hero-product::after { animation-play-state: running; }
.button { position: relative; overflow: hidden; }
.button::after {
  content: '';
  position: absolute;
  top: -20%;
  left: 0;
  width: 32px;
  height: 140%;
  background: #ffffff35;
  transform: translateX(-80px) skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.hero.is-live-motion .hero-actions .button-dark::after { animation: button-sweep 6s ease-in-out infinite 1.5s; }
.price-plan, .file-scene { position: relative; }
.price-plan::after, .file-scene::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 64px;
  background: #a8ffe6;
  box-shadow: 0 0 12px #79e4c94d;
  transform: translateX(var(--edge-x, 0px));
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.workflow-track article:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 50px;
  width: 26px;
  height: 2px;
  background: #a6ffe5;
  box-shadow: 0 0 8px #79e4c94d;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: route-signal 3.6s linear infinite;
  animation-play-state: paused;
}
.workflow-track.is-live-motion article::before { animation-play-state: running; }
.workflow-track article:nth-child(2)::before { animation-delay: 700ms; }
.workflow-track article:nth-child(3)::before { animation-delay: 1400ms; }

@keyframes preview-scan {
  0%, 12% { transform: translateY(0); opacity: 0; }
  20% { opacity: 0.7; }
  66% { transform: translateY(230px); opacity: 0.5; }
  72%, 100% { transform: translateY(230px); opacity: 0; }
}
@keyframes button-sweep {
  0%, 60% { transform: translateX(-80px) skewX(-18deg); opacity: 0; }
  65% { opacity: 0.8; }
  83%, 100% { transform: translateX(300px) skewX(-18deg); opacity: 0; }
}
@keyframes route-signal {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 0.9; }
  80% { opacity: 0.9; }
  100% { transform: translateX(var(--signal-travel, 150px)); opacity: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .price-plan:hover::after, .file-scene:hover::after { opacity: 1; }
  .button:hover::after { animation: button-sweep 900ms ease; animation-delay: -450ms; }
}
@media (max-width: 800px) {
  .workflow-track article:nth-child(2)::before { display: none; }
}
@media (max-width: 540px) {
  .workflow-track article:not(:last-child)::before { top: 13px; left: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-product::after, .hero-actions .button-dark::after, .button::after,
  .workflow-track article::before { animation: none !important; opacity: 0; }
  .price-plan::after, .file-scene::after { display: none; }
}
@media print { .hero-circuit, .hero-product::after, .workflow-track article::before { display: none; } }

.tour-panel {
  height: 520px;
  min-height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #52635e transparent;
}
.tour-tabs > button { position: relative; transition: background 240ms ease, border-color 240ms ease; }
.tour-tabs > button::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 22%;
  height: 56%;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tour-tabs > button[aria-selected=true]::before { transform: scaleY(1); }
.role-icon { transition: color 240ms ease; }
.price-plan { transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), border-color 240ms ease, box-shadow 300ms ease; }
.file-line { transition: background 220ms ease; }
.file-line svg { transition: color 220ms ease, transform 220ms ease; }
.solution-list article { transition: border-color 240ms ease; }
.solution-list article > svg { transition: color 240ms ease, transform 240ms ease; }
.workflow-track article::after { transform-origin: left; }
.workflow-track article.is-in-view::after {
  animation: connection-draw 950ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.workflow-track article:nth-child(2)::after { animation-delay: 80ms; }
.workflow-track article:nth-child(3)::after { animation-delay: 160ms; }
.workflow-track .is-in-view .step-number { animation: node-confirm 850ms ease both; }
.workflow-track article:nth-child(2) .step-number { animation-delay: 80ms; }
.workflow-track article:nth-child(3) .step-number { animation-delay: 160ms; }
.workflow-track article:nth-child(4) .step-number { animation-delay: 240ms; }
.button-dark { transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease; }

@keyframes connection-draw {
  from { transform: scaleX(0); background-color: #79e4c9; }
  to { transform: scaleX(1); background-color: #37453e; }
}
@keyframes node-confirm {
  0% { border-color: #79e4c9; color: #c9fff0; background-color: #28463a; }
  100% { border-color: #426456; color: #8cceba; background-color: transparent; }
}
@media (hover: hover) and (pointer: fine) {
  .price-plan:hover { transform: translateY(-5px); border-color: #81ccb6; box-shadow: 0 12px 30px #00000030; }
  .file-line:hover { background: #202d2b; }
  .file-line:hover svg { color: var(--accent); transform: translateX(2px); }
  .solution-list article:hover { border-color: #628e7b; }
  .solution-list article:hover > svg { color: var(--accent); transform: translate(3px, -3px); }
  .button-dark:hover { box-shadow: 0 0 0 3px #79e4c916; }
}
@media (max-width: 800px) {
  .tour-tabs > button::before { top: auto; bottom: -1px; left: 25%; width: 50%; height: 2px; transform: scaleX(0); }
  .tour-tabs > button[aria-selected=true]::before { transform: scaleX(1); }
}
@media (max-width: 540px) {
  .tour-panel { height: 540px; min-height: 540px; }
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress, .price-plan, .file-line, .file-line svg, .solution-list article,
  .solution-list article > svg, .tour-tabs > button, .tour-tabs > button::before {
    transition: none;
  }
  .workflow-track article.is-in-view::after, .workflow-track .is-in-view .step-number { animation: none; }
  .price-plan:hover, .file-line:hover svg, .solution-list article:hover > svg { transform: none; }
}
@media print {
  .reading-progress { display: none; }
  .tour-panel { height: auto; min-height: 0; overflow: visible; }
}