/* === Hero — 2-act chat dialogue === */
.hero-shell{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:0 32px}
.hero-stage-wrap{display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .6s var(--ease),transform .6s var(--ease);will-change:opacity,transform}
#hero-act1{min-height:100vh}
.hero-stage-wrap.out{opacity:0;transform:translateY(-20px);pointer-events:none}
.hero-stage-wrap.hidden{display:none}
.hero-stage-wrap.entering{opacity:0;transform:translateY(30px)}

.act1-inner{display:flex;flex-direction:column;align-items:center;gap:0;max-width:860px;width:100%;padding:0 20px}

.hero-brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:36px;opacity:0;transform:translateY(-10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hero-brand.show{opacity:1;transform:none}
.hero-brand.dim{opacity:.3;transform:translateY(-4px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.hero-brand-name{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.04em;color:var(--text);line-height:1}
.hero-brand-tagline{font-size:clamp(12px,1.4vw,14px);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}

.chat-input-bar{position:relative;max-width:720px;width:100%;margin:0 auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:16px 48px 16px 24px;min-height:56px;white-space:nowrap;box-shadow:0 0 0 0 rgba(110,168,254,0);transition:border-color .3s ease,box-shadow .3s ease,transform .6s var(--ease),opacity .6s var(--ease),max-width .6s var(--ease),padding .4s ease;opacity:0;transform:translateY(12px)}
.chat-input-bar.show{opacity:1;transform:none}
.chat-input-bar.focused{border-color:rgba(110,168,254,.25);box-shadow:0 0 0 2px rgba(110,168,254,.12),0 4px 24px rgba(110,168,254,.06)}
.chat-input-bar.sent{max-width:560px;opacity:.26;transform:translateY(-14px) scale(.94);padding:10px 16px;border-radius:16px;border-color:rgba(255,255,255,.05);box-shadow:none;overflow:hidden;text-overflow:ellipsis}
.chat-placeholder{position:absolute;left:24px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--soft);opacity:.5;pointer-events:none;transition:opacity .2s ease}
.chat-placeholder.hide{opacity:0}
.chat-input-text{font-size:15px;line-height:1.65;color:var(--text);display:inline}
.chat-cursor{display:inline-block;width:2px;height:1.15em;background:rgba(245,247,251,.7);vertical-align:text-bottom;margin-left:1px;animation:cursorBlink .65s step-end infinite}
.chat-cursor.hide{opacity:0}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
.chat-send-btn{position:absolute;right:10px;bottom:10px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:all .3s var(--ease);cursor:default}
.chat-send-btn svg{width:16px;height:16px;stroke:var(--soft);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s ease}
.chat-send-btn.ready{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);box-shadow:0 0 0 0 rgba(255,255,255,0)}
.chat-send-btn.ready svg{stroke:var(--text)}
.chat-send-btn.pressed{transform:scale(.88);box-shadow:0 0 0 6px rgba(255,255,255,.08)}

.agent-card{margin-top:30px;width:100%;max-width:680px;min-height:304px;padding:18px 20px 18px;border-radius:24px;background:linear-gradient(180deg,rgba(12,18,27,.88),rgba(8,12,18,.92));border:1px solid rgba(255,255,255,.08);box-shadow:0 28px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.03);opacity:0;transform:translateY(14px) scale(.98);transition:opacity .55s var(--ease),transform .55s var(--ease),border-color .35s ease,box-shadow .35s ease;overflow:hidden;position:relative}
.agent-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at top left,rgba(110,168,254,.12),transparent 36%),radial-gradient(circle at bottom right,rgba(155,140,255,.08),transparent 32%);pointer-events:none}
.agent-card.show{opacity:1;transform:none}
.agent-card.complete{border-color:rgba(61,217,163,.16);box-shadow:0 28px 90px rgba(0,0,0,.46),0 0 0 1px rgba(61,217,163,.06),0 0 40px rgba(61,217,163,.08)}
.agent-card-head,.agent-card-body,.agent-card-foot{position:relative;z-index:1}
.agent-card-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.06)}
.agent-head-left{display:flex;align-items:center;gap:10px}
.agent-presence{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 0 rgba(110,168,254,.35);animation:agentPulse 1.4s ease-in-out infinite}
@keyframes agentPulse{0%,100%{box-shadow:0 0 0 0 rgba(110,168,254,.16)}50%{box-shadow:0 0 0 6px rgba(110,168,254,.08)}}
.agent-name{font-size:13px;font-weight:600;color:var(--text);letter-spacing:.01em}
.agent-session{font-size:11px;color:var(--soft);letter-spacing:.08em;text-transform:uppercase}
.agent-card-body{padding-top:16px;display:flex;flex-direction:column;gap:20px}
.agent-block{opacity:.28;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.agent-block.show{opacity:1;transform:none}
.agent-line{display:flex;align-items:flex-start;gap:6px;min-height:22px}
.agent-line-main{font-size:15px;font-weight:500;color:var(--text);letter-spacing:-.01em}
.agent-line-sub{font-size:13px;line-height:1.7;color:var(--muted);padding-left:2px;margin-top:4px}
.agent-line-text{display:inline}
.agent-stream-cursor{display:inline-block;width:2px;height:1.05em;background:rgba(245,247,251,.7);vertical-align:text-bottom;animation:cursorBlink .65s step-end infinite;opacity:0}
.agent-stream-cursor.show{opacity:1}
.agent-modules{margin-top:8px;display:flex;flex-direction:column;gap:8px;padding-left:2px}
.agent-module-row{display:flex;align-items:center;gap:12px;font-family:'SF Mono',SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:12px;color:rgba(255,255,255,.42);opacity:0;transform:translateX(-6px);transition:opacity .28s var(--ease),transform .28s var(--ease),color .3s ease}
.agent-module-row.show{opacity:1;transform:none}
.agent-module-row.done{color:rgba(245,247,251,.88)}
.module-state{width:14px;height:14px;position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.module-state::before{content:'';width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(110,168,254,.2);border-top-color:var(--blue);animation:logSpin .7s linear infinite}
.agent-module-row.done .module-state::before{width:14px;height:14px;border:none;animation:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='7' r='6' stroke='%233dd9a3' stroke-width='1.2'/%3E%3Cpath d='M4.5 7.2L6.2 8.8L9.5 5.5' stroke='%233dd9a3' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center}
.module-path::before{content:'├── ';color:rgba(255,255,255,.22)}
.agent-module-row:last-child .module-path::before{content:'└── '}
.agent-card-foot{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.agent-card-foot.show{opacity:1;transform:none}
.agent-summary{font-size:13px;font-weight:600;color:var(--green);letter-spacing:.01em}

@keyframes logSpin{to{transform:rotate(360deg)}}

.act2-inner{display:grid;grid-template-columns:38% 1fr;gap:48px;align-items:center;width:100%;max-width:1140px;margin:0 auto;padding:0 32px;min-height:100vh}
.act2-left{display:flex;flex-direction:column;justify-content:center}
.act2-label{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:#868e96;margin-bottom:16px;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.act2-label.show{opacity:1;transform:none}
.act2-label-dot{width:6px;height:6px;border-radius:50%;background:#3dd9a3;flex-shrink:0}
.act2-slogan{font-size:clamp(28px,3.2vw,42px);font-weight:800;letter-spacing:-1.5px;line-height:1.1;color:#1a1a2e;opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease) .15s,transform .6s var(--ease) .15s}
.act2-slogan.show{opacity:1;transform:none}
.act2-sub{font-size:15px;line-height:1.8;color:#495057;margin-top:12px;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease) .3s,transform .5s var(--ease) .3s}
.act2-sub.show{opacity:1;transform:none}
.act2-skill-badge{display:flex;align-items:center;gap:12px;padding:8px 14px;border-radius:10px;background:#fff;border:1px solid rgba(0,0,0,.06);margin-top:24px;width:fit-content;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease) .45s,transform .5s var(--ease) .45s}
.act2-skill-badge.show{opacity:1;transform:none}
.act2-badge-logo{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,#3b82f6,#6366f1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.act2-badge-logo span{font-size:12px;font-weight:800;color:#fff;line-height:1}
.act2-badge-info{display:flex;flex-direction:column}
.act2-badge-name{font-size:13px;font-weight:600;color:#1a1a2e;line-height:1.2}
.act2-badge-type{font-size:10px;color:#868e96;line-height:1.3}
.act2-badge-ver{font-size:10px;font-weight:600;color:#3b82f6;background:#f0f4ff;padding:3px 8px;border-radius:999px;flex-shrink:0}
.act2-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease) .6s,transform .5s var(--ease) .6s}
.act2-cta.show{opacity:1;transform:none}
.act2-link{display:flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;text-decoration:none;font-size:13px;font-weight:600;transition:all .28s var(--ease)}
.act2-link.github{background:#1a1a2e;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.act2-link.github:hover{background:#111;box-shadow:0 6px 16px rgba(0,0,0,.16);transform:translateY(-1px)}
.act2-link.clawhub{background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;box-shadow:0 2px 8px rgba(59,130,246,.15)}
.act2-link.clawhub:hover{box-shadow:0 6px 16px rgba(59,130,246,.25);transform:translateY(-1px)}
.act2-link .link-icon{width:16px;height:16px;flex-shrink:0;opacity:.9}
.act2-right{position:relative;opacity:0;transform:translateY(16px);transition:opacity .8s ease-out .2s,transform 1s var(--ease) .2s}
.act2-right.show{opacity:1;transform:none}
.demo-brand-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#f0f4ff;border:1px solid rgba(59,130,246,.1);border-bottom:none;border-radius:12px 12px 0 0}
.demo-brand-text{font-size:12px;font-weight:600;color:#3b82f6;letter-spacing:-.01em}
.demo-brand-meta{margin-left:auto;display:flex;align-items:center;gap:8px}
.demo-brand-time{font-size:10px;color:#868e96;font-weight:500}
.demo-brand-ver{font-size:9px;font-weight:600;color:#3b82f6;background:#fff;padding:2px 7px;border-radius:999px;border:1px solid rgba(59,130,246,.12)}
.demo-img{width:100%;height:auto;border-radius:0 0 12px 12px;box-shadow:0 16px 48px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.03);display:block}
.demo-card-stack{border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.03);overflow:hidden}
.demo-card-stack .demo-brand-bar{border-radius:0;border-bottom:none;border-top:none}
.demo-card-stack .demo-img-wrap{border-radius:0;box-shadow:none;overflow:hidden}
.demo-card-stack .demo-img{border-radius:0}
.demo-request-recall{position:relative;padding:16px 20px 14px 32px;background:#f8f9fc;border-bottom:1px solid rgba(0,0,0,.04)}
.demo-request-recall::before{content:'\201C';position:absolute;left:12px;top:6px;font-size:32px;font-family:Georgia,serif;color:rgba(59,130,246,.15);line-height:1}
.demo-request-text{font-size:13px;line-height:1.7;color:#495057;font-style:italic}
.demo-img-wrap{border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.03);overflow:hidden}
#transition-ghost{position:fixed;z-index:150;border-radius:14px;background:#fff;pointer-events:none;opacity:0;box-shadow:0 20px 60px rgba(59,130,246,.2),0 0 0 1px rgba(59,130,246,.1);will-change:transform,opacity,width,height,top,left,border-radius}