/* Stepwise motion — sticky stages, marquee */

.marquee{
  overflow:hidden;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:var(--bg-soft);padding:14px 0;
}
.marquee-track{
  display:flex;gap:36px;width:max-content;
  animation:marquee 32s linear infinite;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--muted);
}
.marquee-track span{white-space:nowrap;}
.marquee-track span::before{content:'✦ ';color:var(--cyan-soft);}
@keyframes marquee{to{transform:translateX(-50%);}}

.stagger > .reveal{transition-delay:calc(var(--i, 0) * 70ms);}

.story-stage{display:flex;flex-direction:column;gap:28px;padding-bottom:40px;}
.story-panel{
  position:sticky;top:92px;
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:40px;align-items:center;
  min-height:min(72vh, 620px);
  background:linear-gradient(180deg, var(--surface), var(--bg-soft));
  border:1px solid var(--line);border-radius:18px;padding:36px 32px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.7);
}
.story-kicker{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.14em;
  color:var(--cyan-soft);margin-bottom:12px;
}
.story-panel h3{font-size:clamp(22px,3vw,32px);margin-bottom:12px;}
.story-panel p{color:var(--muted);font-size:15px;}
.story-panel li{color:var(--muted);font-size:14px;margin-bottom:8px;padding-left:14px;position:relative;}
.story-panel li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--cyan);}
.story-visual{
  background:var(--bg);border:1px solid var(--line);border-radius:14px;
  min-height:240px;padding:22px;position:relative;overflow:hidden;
}

.stock-rows{display:flex;flex-direction:column;gap:12px;}
.stock-row{display:grid;grid-template-columns:90px 1fr 48px;gap:10px;align-items:center;font-size:12px;color:var(--muted);}
.stock-row b{font-family:'JetBrains Mono',monospace;color:var(--cyan-soft);text-align:right;}
.stock-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;}
.stock-bar i{display:block;height:100%;background:var(--grad);transform-origin:left;animation:growbar 1.6s ease both;}
@keyframes growbar{from{transform:scaleX(0);}to{transform:scaleX(1);}}

.kds-board{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;height:100%;}
.kds-ticket{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
  animation:ticketbump 3s ease-in-out infinite;
}
.kds-ticket:nth-child(2){animation-delay:.4s;}
.kds-ticket:nth-child(3){animation-delay:.8s;}
.kds-ticket strong{display:block;color:var(--text);margin-bottom:8px;font-family:'Chakra Petch',sans-serif;}
@keyframes ticketbump{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

.points-ring{
  width:160px;height:160px;margin:20px auto;border-radius:50%;
  background:conic-gradient(var(--cyan) 0 72%, var(--line) 0);
  display:grid;place-items:center;position:relative;
}
.points-ring::after{
  content:'';position:absolute;inset:14px;border-radius:50%;background:var(--bg);
}
.points-ring span{position:relative;z-index:1;font-family:'Chakra Petch',sans-serif;font-size:28px;}

.csv-lines{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);line-height:1.9;}
.csv-lines em{color:var(--cyan-soft);font-style:normal;}

.csv-lines{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);line-height:1.9;}
.csv-lines em{color:var(--cyan-soft);font-style:normal;}

.chat-sim{display:flex;flex-direction:column;gap:10px;}
.chat-sim .bubble{
  max-width:88%;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.4;
  animation:fadeup .5s ease both;
}
.chat-sim .in{background:var(--surface-2);border:1px solid var(--line);align-self:flex-start;}
.chat-sim .out{background:var(--grad-soft);border:1px solid rgba(63,208,255,.3);align-self:flex-end;animation-delay:.4s;}
.chat-sim .ok{align-self:center;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cyan-soft);animation-delay:.8s;}
@keyframes fadeup{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.serp{display:flex;flex-direction:column;gap:12px;}
.serp-row{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;}
.serp-row.win{border-color:rgba(63,208,255,.4);}
.serp-row small{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted-2);margin-bottom:4px;}
.serp-row b{display:block;font-size:14px;margin-bottom:4px;}
.serp-row span{font-size:12px;color:var(--muted);}

.ad-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ad-kpis div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;}
.ad-kpis small{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted-2);letter-spacing:.08em;}
.ad-kpis b{display:block;font-family:'Chakra Petch',sans-serif;font-size:22px;margin-top:6px;}

.signal{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;height:100%;
}
.signal-bars{display:flex;gap:8px;align-items:flex-end;height:80px;}
.signal-bars i{width:14px;background:var(--grad);border-radius:4px 4px 0 0;animation:sig 1.4s ease-in-out infinite;}
.signal-bars i:nth-child(1){height:30%;animation-delay:0s;}
.signal-bars i:nth-child(2){height:55%;animation-delay:.15s;}
.signal-bars i:nth-child(3){height:80%;animation-delay:.3s;}
.signal-bars i:nth-child(4){height:100%;animation-delay:.45s;}
@keyframes sig{0%,100%{opacity:.35;}50%{opacity:1;}}
.offline{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cyan-soft);border:1px solid var(--line);padding:6px 10px;border-radius:20px;}

.step-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative;}
.step-flow::before{
  content:'';position:absolute;top:22px;left:6%;right:6%;height:2px;
  background:linear-gradient(90deg, var(--violet), var(--cyan));opacity:.35;
}
.step{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 16px;
  transition:border-color .3s ease, transform .3s ease, background .3s ease;
}
.step.is-on{border-color:rgba(63,208,255,0.45);background:var(--surface-2);transform:translateY(-6px);}
.step .n{
  width:44px;height:44px;border-radius:50%;margin-bottom:14px;position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--cyan-soft);
  background:var(--bg);border:1px solid rgba(139,107,255,0.5);
}
.step.is-on .n{background:var(--grad);color:#050510;border-color:transparent;}
.step h3{font-size:15px;margin-bottom:8px;}
.step p{font-size:13px;color:var(--muted);}

.live-ticker{
  display:flex;flex-direction:column;gap:10px;
}
.live-item{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font-size:13px;color:var(--muted);animation:fadeup .5s ease both;
}
.live-item:nth-child(2){animation-delay:.15s;}
.live-item:nth-child(3){animation-delay:.3s;}
.live-item:nth-child(4){animation-delay:.45s;}
.live-item b{color:var(--text);font-size:13px;}
.live-item em{font-family:'JetBrains Mono',monospace;font-size:10px;font-style:normal;color:var(--cyan-soft);white-space:nowrap;}

@media (max-width:980px){
  .story-panel{grid-template-columns:1fr;position:relative;top:auto;min-height:0;}
  .step-flow{grid-template-columns:1fr;}
  .step-flow::before{display:none;}
  .kds-board{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .marquee-track,.stock-bar i,.kds-ticket,.signal-bars i{animation:none;}
}