/* AI Flow — Clean Carousel */
#S-FLOW { min-height: 100vh; padding: 100px 44px 80px; background: transparent; position: relative; z-index: 1; display: flex; align-items: center; }
.FL-IN { max-width: 640px; margin: 0 auto; }

.FL-HEAD { text-align: center; margin-bottom: 32px; }
.FL-EY { font-family: var(--M); font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--m2); margin-bottom: 12px; }
.FL-TI { font-size: clamp(26px, 4vw, 48px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 10px; transition: opacity .35s; }
.FL-SU { font-size: 14px; color: var(--m); font-weight: 300; max-width: 480px; margin: 0 auto; line-height: 1.6; transition: opacity .35s; }

/* Card */
.FL-CARD {
  background: rgba(255,255,255,.88); backdrop-filter: blur(14px);
  border: 1.5px solid rgba(200,200,200,.25); border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.05), 0 0 0 .5px rgba(255,255,255,.5) inset;
}
.FL-CARD::before { content:''; position:absolute; top:0; left:0; right:0; height:40%; background:linear-gradient(180deg,rgba(255,255,255,.12),transparent); pointer-events:none; border-radius:inherit; z-index:0; }
.FL-CBAR { display:flex; align-items:center; gap:4px; padding:8px 14px; border-bottom:1px solid rgba(13,12,10,.04); background:rgba(244,242,236,.4); }
.FL-CBAR span { width:6px; height:6px; border-radius:50%; }
.FL-CBAR span:nth-child(1){background:#FF5F57} .FL-CBAR span:nth-child(2){background:#FFBD2E} .FL-CBAR span:nth-child(3){background:#28C840}
.FL-CBAR em { font-style:normal; font-family:var(--M); font-size:7px; letter-spacing:.5px; margin-left:5px; color:var(--m); transition:opacity .3s; }

.FL-SCENES { position:relative; height:210px; }
.FL-SC { position:absolute; inset:0; padding:18px 20px; opacity:0; pointer-events:none; transition:opacity .4s; }
.FL-SC-ON { opacity:1; pointer-events:auto; position:absolute; }

/* Bubbles */
.FL-BUB { padding:10px 14px; border-radius:12px; margin-bottom:8px; font-size:13px; line-height:1.5; color:var(--k); opacity:0; }
.FL-BUB-L { background:rgba(13,12,10,.04); border-bottom-left-radius:3px; max-width:85%; }
.FL-BUB-R { background:rgba(139,92,246,.05); border:1px solid rgba(139,92,246,.06); border-bottom-right-radius:3px; max-width:85%; margin-left:auto; }
.FL-BN { font-family:var(--M); font-size:7px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--m2); margin-bottom:3px; }

/* Rows / lists */
.FL-ROW { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-radius:10px; background:rgba(13,12,10,.03); margin-bottom:8px; font-size:12px; color:var(--k); opacity:0; }
.FL-WARN { font-family:var(--M); font-size:9px; font-weight:600; color:#f59e0b; padding:3px 8px; background:rgba(245,158,11,.06); border-radius:5px; border:1px solid rgba(245,158,11,.08); }
.FL-LIST { padding:10px 14px; border-radius:10px; background:rgba(34,197,94,.03); border:1px solid rgba(34,197,94,.06); margin-bottom:8px; font-size:12px; color:var(--m); line-height:1.8; opacity:0; }
.FL-OK { color:var(--ok); font-weight:600; margin-top:4px; padding-top:4px; border-top:1px solid rgba(34,197,94,.06); }

/* Action buttons */
.FL-ACTS { display:flex; gap:6px; margin-top:8px; }
.FL-ACT-Y,.FL-ACT-N { font-family:var(--M); font-size:8px; font-weight:600; padding:5px 12px; border-radius:5px; }
.FL-ACT-Y { background:rgba(34,197,94,.08); color:var(--ok); border:1px solid rgba(34,197,94,.1); }
.FL-ACT-N { background:rgba(168,80,36,.04); color:rgba(168,80,36,.4); border:1px solid rgba(168,80,36,.05); }

/* Result tag */
.FL-TAG { font-family:var(--M); font-size:9px; font-weight:600; color:var(--ok); text-align:center; padding:8px; border-radius:8px; background:rgba(34,197,94,.04); border:1px solid rgba(34,197,94,.06); opacity:0; }

/* Animations — each element slides in with stagger + direction */
.FL-SC-ON .FL-A1 { animation: FL-SL .5s cubic-bezier(.34,1.56,.64,1) .1s forwards; }
.FL-SC-ON .FL-A2 { animation: FL-SR .5s cubic-bezier(.34,1.56,.64,1) .7s forwards; }
.FL-SC-ON .FL-A3 { animation: FL-UP .4s cubic-bezier(.34,1.56,.64,1) 1.4s forwards; }
@keyframes FL-SL { from{opacity:0;transform:translateX(-14px) scale(.97)} to{opacity:1;transform:none} }
@keyframes FL-SR { from{opacity:0;transform:translateX(14px) scale(.97)} to{opacity:1;transform:none} }
@keyframes FL-UP { from{opacity:0;transform:translateY(10px) scale(.97)} to{opacity:1;transform:none} }

/* Nav */
.FL-NAV { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:20px; }
.FL-ARR { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.85); border:1px solid rgba(200,200,200,.2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s cubic-bezier(.34,1.56,.64,1); color:var(--m); }
.FL-ARR:hover { background:var(--k); color:#fff; border-color:var(--k); }
.FL-DOTS { display:flex; gap:8px; }
.FL-DOT { width:6px; height:6px; border-radius:50%; background:rgba(13,12,10,.1); cursor:pointer; transition:all .4s cubic-bezier(.34,1.56,.64,1); }
.FL-DOT-ON { background:var(--p1); transform:scale(1.4); box-shadow:0 0 8px rgba(139,92,246,.3); }

@media(max-width:768px){ #S-FLOW{padding:60px 20px 50px} .FL-BUB{font-size:12px} }