/* page-specific styles; base reset/scene/scroll-hint come from vision.css */

.flow-container{
  width:calc(100% - 96px);
  max-width:1280px;
  margin:0 auto;
}

.flow-subtitle{
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:400;
  font-size:clamp(16px,1.25vw,18px);
  line-height:1.8;
  color:#28417c;
  max-width:760px;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s ease .4s, transform .8s ease .4s;
}

.flow-track{
  position:relative;
  margin-top:80px;
}

.flow-arrow{
  position:absolute;
  top:-56px;left:0;
  width:100%;height:230px;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1s ease .5s;
}

.flow-steps{
  position:relative;
  z-index:1;
  list-style:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:22px;
  padding:0;margin:0;
}

.flow-step{
  display:flex;flex-direction:column;align-items:center;
  width:18%;
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.flow-step:nth-child(1){margin-top:170px;transition-delay:.5s;}
.flow-step:nth-child(2){margin-top:72px;transition-delay:.62s;}
.flow-step:nth-child(3){margin-top:0;transition-delay:.74s;}
.flow-step:nth-child(4){margin-top:92px;transition-delay:.86s;}
.flow-step:nth-child(5){margin-top:58px;transition-delay:.98s;}

.flow-num{
  width:32px;height:32px;border-radius:50%;
  background:#6a63d1;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:.95rem;
  margin-bottom:14px;
  box-shadow:0 8px 16px rgba(80,60,190,.32);
}

.flow-card{
  position:relative;
  width:100%;
  background:#fdf1c4;
  padding:20px 18px 24px;
  box-shadow:0 12px 22px rgba(30,30,60,.09);
  transform:rotate(var(--tilt,0deg));
}
.flow-step:nth-child(odd) .flow-card{--tilt:-1.4deg;}
.flow-step:nth-child(even) .flow-card{--tilt:1.4deg;}

.flow-card::after{
  content:"";
  position:absolute;right:0;bottom:0;
  width:24px;height:24px;
  background:linear-gradient(225deg, rgba(0,0,0,.16) 50%, transparent 51%);
}

.flow-icon{width:40px;height:40px;color:#132a55;margin-bottom:14px;}

.flow-card h3{
  font-family:"IBM Plex Sans",sans-serif;font-weight:700;
  font-size:.95rem;color:#132a55;margin:0 0 8px;line-height:1.3;
}

.flow-hr{width:32px;height:2px;background:#132a55;margin-bottom:12px;}

.flow-card p{
  font-family:"IBM Plex Sans",sans-serif;font-weight:400;
  font-size:.82rem;line-height:1.55;color:#1c2b57;margin:0;
}

.vision-scene.revealed .flow-subtitle,
.vision-scene.revealed .flow-step{
  opacity:1;
  transform:translateY(0);
}
.vision-scene.revealed .flow-arrow{opacity:1;}