/* ===== FlowGenAI — shared immersive engine (storyboard scenes + timeline) ===== */
:root{--panel-2:#f1eff8;--good:#059669;--good-soft:#e9f6f0;--bad:#dc2626;--bad-soft:#fdecec;--amber:#b45309;--mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace}

/* hero canvas + aurora */
.phero{position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 60% at 74% 24%,rgba(124,58,237,.12),transparent 70%),radial-gradient(48% 54% at 10% 84%,rgba(236,72,153,.06),transparent 72%)}
.phero .net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.phero .wrap{position:relative;z-index:1}
.phero .ctas{margin-top:36px}

/* product / brand lockup */
.plock{display:inline-flex;align-items:center;gap:11px;margin-bottom:24px}
.plock svg{width:34px;height:34px;flex:none}
.plock .pw{font-size:1.14rem;font-weight:750;letter-spacing:-.03em;color:var(--ink)}
.plock .pw b{color:#6d28d9;font-weight:750}
.plock .psep{width:1px;height:17px;background:var(--line)}
.plock .ptag{font-size:.76rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media(max-width:520px){.plock .psep,.plock .ptag{display:none}}

/* scenes */
.scene{padding:0;position:relative;scroll-margin-top:90px}
.scene-inner{display:grid;grid-template-columns:.94fr 1.06fr;gap:clamp(24px,5vw,72px);align-items:start}
.scene-copy{display:flex;flex-direction:column}
.beat{min-height:84vh;display:flex;flex-direction:column;justify-content:center;gap:14px}
.beat-k{font-size:.78rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.beat h2{font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:800;letter-spacing:-.04em;line-height:1.04;max-width:15ch}
.beat p{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--ink-2);max-width:36ch;line-height:1.55}
.beat .link-quiet{align-self:flex-start;margin-top:2px}
.scene-stage{position:sticky;top:13vh;height:74vh;display:flex;align-items:center;justify-content:center}

/* device mock (screen stack) */
.stage{width:100%;max-width:540px}
.mock{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 34px 80px rgba(16,16,18,.12),0 3px 8px rgba(16,16,18,.05)}
.mock-h{display:flex;align-items:center;gap:10px;padding:13px 17px;border-bottom:1px solid var(--line);font-weight:650;font-size:.9rem;background:linear-gradient(#faf9ff,#fff)}
.mock-h .mdd{width:9px;height:9px;border-radius:50%;background:#7c3aed;box-shadow:0 0 0 4px rgba(124,58,237,.14)}
.mock-h .mdd.pink{background:#ec4899;box-shadow:0 0 0 4px rgba(236,72,153,.14)}
.step-ind{margin-left:auto;display:flex;gap:5px}
.step-ind i{width:17px;height:3px;border-radius:2px;background:var(--line);transition:background .35s}
.stage[data-step="1"] .step-ind i:nth-child(-n+1),
.stage[data-step="2"] .step-ind i:nth-child(-n+2),
.stage[data-step="3"] .step-ind i:nth-child(-n+3),
.stage[data-step="4"] .step-ind i:nth-child(-n+4){background:var(--accent)}
.mock-screens{position:relative;min-height:312px}
.screen{position:absolute;inset:0;padding:16px 17px;display:flex;flex-direction:column;gap:11px;opacity:0;transform:translateY(12px) scale(.99);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.65,.3,1);pointer-events:none}
.screen.active{opacity:1;transform:none;pointer-events:auto}
.s-top{display:flex;align-items:center;gap:8px;font-size:.79rem;font-weight:600;color:var(--muted)}
.s-top .ld{width:7px;height:7px;border-radius:50%;background:#7c3aed;box-shadow:0 0 0 4px rgba(124,58,237,.14);flex:none}
.s-top .ld.pink{background:#ec4899;box-shadow:0 0 0 4px rgba(236,72,153,.14)}
.s-top .ld.flag{background:var(--bad);box-shadow:0 0 0 4px var(--bad-soft)}
.s-top .ld.hold{background:var(--amber);box-shadow:0 0 0 4px rgba(180,83,9,.14)}

.scan{display:grid;grid-template-columns:1fr 88px 26px;align-items:center;gap:12px;padding:9px 0}
.scan .nm{font-size:.86rem;font-weight:550;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbar{height:7px;background:var(--panel-2);border-radius:5px;overflow:hidden}
.sbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7c3aed,#a78bfa);border-radius:5px}
.screen.active .sbar i{width:var(--w);transition:width .9s cubic-bezier(.2,.65,.2,1)}
.scan:nth-child(3) .sbar i{transition-delay:.08s}.scan:nth-child(4) .sbar i{transition-delay:.16s}.scan:nth-child(5) .sbar i{transition-delay:.24s}
.scan .pct{font-family:var(--mono);font-size:.82rem;font-weight:600;color:var(--muted);text-align:right}

.verdict{border:1px solid var(--line);border-radius:13px;padding:15px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(#fcfbff,#fff)}
.v-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.v-name{font-weight:700;font-size:1rem}
.v-badge{font-size:.72rem;font-weight:700;color:var(--good);background:var(--good-soft);border-radius:7px;padding:4px 9px;white-space:nowrap}
.v-why{font-size:.74rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.ev{font-size:.78rem;color:var(--ink-2);background:var(--panel-2);border-radius:8px;padding:6px 10px;opacity:0;transform:translateY(6px)}
.screen.active .ev{opacity:1;transform:none;transition:opacity .4s,transform .4s}
.screen.active .ev:nth-child(2){transition-delay:.12s}.screen.active .ev:nth-child(3){transition-delay:.24s}
.v-persona{font-size:.83rem;color:var(--ink-2)}.v-persona b{color:var(--ink)}

.email{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.e-row{display:flex;gap:10px;padding:9px 13px;border-bottom:1px solid #f0f0ee;font-size:.82rem}
.e-k{color:var(--muted);width:54px;flex:none}
.e-v{color:var(--ink);font-weight:500}
.e-body{padding:12px 13px;font-size:.83rem;color:var(--ink-2);line-height:1.55;display:flex;flex-direction:column;gap:7px}
.eline{opacity:0;transform:translateY(5px)}
.screen.active .eline{opacity:1;transform:none;transition:opacity .4s,transform .4s}
.screen.active .eline:nth-child(2){transition-delay:.35s}.screen.active .eline:nth-child(3){transition-delay:.85s}
.caret{display:inline-block;width:2px;height:1em;background:var(--accent);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.approve{display:flex;align-items:center;gap:10px;flex-wrap:wrap;opacity:0;transform:translateY(10px)}
.screen.active .approve{opacity:1;transform:none;transition:opacity .45s .2s,transform .45s .2s}
.ap-send{background:var(--accent);color:#fff;border:none;border-radius:11px;padding:11px 18px;font-family:inherit;font-weight:650;font-size:.88rem;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 10px 24px rgba(109,40,217,.28)}
.screen.active .ap-send{animation:pop .5s .32s both}
.ap-send .a{transition:transform .2s}.ap-send:hover .a{transform:translateX(3px)}
.ap-edit{background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 16px;font-family:inherit;font-weight:600;font-size:.88rem;color:var(--ink-2);cursor:pointer}
.ap-note{font-size:.78rem;color:var(--muted)}
@keyframes pop{0%{transform:scale(.9)}60%{transform:scale(1.04)}100%{transform:scale(1)}}

.q,.chk,.log{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:.83rem;opacity:0;transform:translateY(8px)}
.screen.active .q,.screen.active .chk,.screen.active .log{opacity:1;transform:none;transition:opacity .45s,transform .45s}
.screen.active .q:nth-child(3),.screen.active .chk:nth-child(3),.screen.active .log:nth-child(3){transition-delay:.1s}
.screen.active .q:nth-child(4),.screen.active .chk:nth-child(4),.screen.active .log:nth-child(4){transition-delay:.2s}
.screen.active .q:nth-child(5),.screen.active .chk:nth-child(5),.screen.active .log:nth-child(5){transition-delay:.3s}
.q .q-st{font-size:.72rem;color:var(--muted)}
.chk .ok{color:var(--good);font-weight:700}
.cleared{font-size:.83rem;font-weight:600;color:var(--good);display:flex;align-items:center;gap:7px}
.exception{border:1px solid #f2c4c4;background:var(--bad-soft);border-radius:13px;padding:15px;display:flex;flex-direction:column;gap:9px}
.screen.active .exception{animation:shake .5s both}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.ex-head{font-weight:750;color:var(--bad)}
.ex-detail{font-size:.86rem;color:var(--ink-2);line-height:1.5}.ex-detail b{color:var(--ink)}
.ex-fix{font-size:.82rem;color:var(--ink-2);border-top:1px dashed #eab8b8;padding-top:9px}
.ex-fix .fix-k{font-weight:700;color:var(--ink);margin-right:6px}
.log .lt{font-family:var(--mono);color:var(--muted);font-size:.76rem;margin-right:10px}
.log span:last-child{margin-left:auto}

/* how-it-works timeline */
.timeline{position:relative;margin-top:8px}
.tline{position:absolute;left:26px;top:18px;bottom:18px;width:2px;background:var(--line);border-radius:2px;overflow:hidden}
.tfill{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(#7c3aed,#a78bfa)}
.tstep{display:grid;grid-template-columns:54px 1fr;gap:22px;padding:18px 0;align-items:start}
.tnode{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;font-size:.9rem;color:var(--muted);background:#fff;border:1px solid var(--line);transition:color .45s,background .45s,border-color .45s,box-shadow .45s;position:relative;z-index:1}
.tstep.in .tnode{color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:0 10px 24px rgba(109,40,217,.26)}
.tbody h3{font-size:clamp(1.15rem,2.2vw,1.55rem);font-weight:750;letter-spacing:-.025em;margin-bottom:6px}
.tbody p{color:var(--ink-2);font-size:.98rem;line-height:1.55;max-width:56ch}

/* marquee */
.mq-sec{padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(#fbfbfa,#fff)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;gap:14px;width:max-content;animation:mq 34s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.chip2{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-size:.92rem;font-weight:550;color:var(--ink-2);border:1px solid var(--line);background:#fff;border-radius:999px;padding:11px 20px}
.chip2::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}

/* stats */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,56px);text-align:center}
.stat{display:flex;flex-direction:column;gap:8px}
.stat .num{font-size:clamp(2.6rem,6.2vw,4.4rem);font-weight:800;letter-spacing:-.035em;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.stat .lab{font-size:.92rem;color:var(--muted);font-weight:550}
.stats-cap{text-align:center;color:var(--muted);font-size:.82rem;margin-top:28px}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .screen.active .sbar i,.screen.active .ev,.screen.active .eline,.screen.active .approve,
  .screen.active .q,.screen.active .chk,.screen.active .log{transition:none;opacity:1;transform:none}
  .screen.active .sbar i{width:var(--w)}
  .screen.active .ap-send,.screen.active .exception{animation:none}
  .caret{animation:none}
  .mq-track{animation:none}
}

/* responsive — mobile first-class */
@media(max-width:820px){
  /* Apple-style pinned scene: a large mock fills the screen below the header
     and advances through its screens as you scroll, caption cross-fading */
  .scene-inner{display:flex;flex-direction:column}
  .scene-stage{order:-1;position:sticky;top:0;height:100vh;height:100svh;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
    background:var(--bg);padding:84px 0 22px;z-index:2}
  .stage{width:100%;max-width:min(440px,92vw)}
  .mock-screens{min-height:min(440px,50vh)}
  .scene-copy{opacity:0;pointer-events:none}
  .beat{min-height:58vh}
  .scene-cap{margin:0;text-align:center;max-width:24ch;font-size:1.22rem;font-weight:700;
    letter-spacing:-.02em;color:var(--ink);line-height:1.32;transition:opacity .25s ease,transform .25s ease}
  .scene-cap.swap{opacity:0;transform:translateY(8px)}
  .v-head{flex-wrap:wrap}
  .plock{margin-bottom:18px}
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){
  .scene-stage{position:static;height:auto;padding:0;gap:0;margin-bottom:18px}
  .scene-copy{opacity:1}
  .scene-cap{display:none}
  .beat{min-height:auto;padding:14px 0}
}
@media(max-width:640px){
  .stat-grid{grid-template-columns:1fr;gap:28px}
  .beat h2{font-size:clamp(1.8rem,8vw,2.5rem)}
  .tstep{grid-template-columns:46px 1fr;gap:16px}
  .tnode{width:46px;height:46px}
  .tline{left:22px}
}