.hero-hook { --hook-ink:#38312a; --hook-muted:#6b5f52; --hook-line:rgba(56,49,42,.18); --hook-paper:#faf3ea; --hook-paper-2:#f3eadd; --hook-rust:#a4512d; --hook-olive:#536947; width:100%; border:1px solid var(--hook-line); color:var(--hook-ink); background:#fffdf9; box-shadow:0 18px 44px rgba(56,49,42,.1); overflow:hidden; }
.hook-top { min-height:53px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--hook-ink); color:#faf3ea; }
.hook-brand { font:600 .7rem var(--font-mono,monospace); letter-spacing:.08em; }
.hook-length { color:#e3d6c7; font:.58rem var(--font-mono,monospace); }
.hook-route { min-height:44px; padding:10px 16px; display:flex; align-items:center; justify-content:center; gap:12px; border-bottom:1px solid var(--hook-line); color:var(--hook-muted); font:.55rem var(--font-mono,monospace); text-transform:uppercase; letter-spacing:.04em; }
.hook-route b { color:#b5a694; font-weight:400; }
.hook-visual { min-height:266px; padding:28px 24px 22px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#f8f0e6,#fffdf9 62%,#f1e6d8); }
.hook-scene { width:100%; max-width:410px; min-height:184px; display:flex; flex-direction:column; justify-content:center; animation:hook-in .28s ease-out both; }
.hook-scene[hidden] { display:none; }
@keyframes hook-in { from { opacity:0; transform:translateY(9px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } }
.hook-app-label { display:flex; align-items:center; gap:10px; margin-bottom:15px; color:var(--hook-muted); font:.61rem var(--font-mono,monospace); text-transform:uppercase; }
.hook-app-icon { width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#c2683f;color:white;font:600 .85rem var(--font-display,system-ui); }
.hook-bubble { max-width:92%; align-self:start; padding:16px 19px; border:1px solid var(--hook-line); border-radius:0 15px 15px 15px; background:#fff; color:var(--hook-ink); font:500 clamp(.93rem,1.35vw,1.1rem)/1.42 var(--font-body,system-ui); box-shadow:0 6px 15px rgba(56,49,42,.04); }
.hook-bubble.from-user { align-self:flex-end; border-color:#ccd6c6; border-radius:15px 0 15px 15px; background:#edf2e8; }
.hook-bubble small { display:block; margin-bottom:5px; color:var(--hook-rust); font:.55rem var(--font-mono,monospace); text-transform:uppercase; }
.hook-chat-mark { display:inline-flex; align-items:center; gap:8px; margin:0 0 15px; color:var(--hook-olive); font:.58rem var(--font-mono,monospace); text-transform:uppercase; }
.hook-chat-mark i { width:8px;height:8px;border-radius:50%;background:var(--hook-olive); }
.hook-crm { padding:18px; border:1px solid var(--hook-line); background:#fff; box-shadow:6px 7px 0 rgba(56,49,42,.07); }
.hook-crm-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--hook-line); }
.hook-crm-head small { display:block; color:var(--hook-muted); font:.55rem var(--font-mono,monospace); }
.hook-crm-head b { display:block; margin-top:4px; font-size:.88rem; }
.hook-crm-status { padding:5px 7px; background:#e7ecdf; color:#405736; font:.52rem var(--font-mono,monospace); white-space:nowrap; }
.hook-crm-fields { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; padding-top:10px; }
.hook-crm-fields span { padding:8px 0; border-bottom:1px solid #eee7de; font-size:.71rem; animation:hook-in .3s ease-out both; }
.hook-crm-fields span:nth-child(2) { animation-delay:.08s; }
.hook-crm-fields span:nth-child(3) { animation-delay:.16s; }
.hook-crm-fields small { display:block; margin-bottom:3px; color:var(--hook-muted); font:.51rem var(--font-mono,monospace); text-transform:uppercase; }
.hook-ai-card { padding:19px; border:1px solid var(--hook-line); border-left:3px solid var(--hook-olive); background:#fff; box-shadow:6px 7px 0 rgba(56,49,42,.07); }
.hook-ai-label { display:flex; align-items:center; gap:11px; padding-bottom:12px; border-bottom:1px solid var(--hook-line); }
.hook-ai-label>span:first-child { width:31px;height:31px;display:grid;place-items:center;background:#e7ecdf;color:var(--hook-olive);font-size:1rem; }
.hook-ai-label small,.hook-ai-label b { display:block; }
.hook-ai-label small { color:var(--hook-olive); font:.54rem var(--font-mono,monospace); }
.hook-ai-label b { margin-top:4px; font-size:.77rem; }
.hook-ai-card p { margin:13px 0 0; color:var(--hook-ink); font-size:.79rem; line-height:1.5; }
.hook-crm-list { padding:15px 17px; border:1px solid var(--hook-line); background:#fff; box-shadow:6px 7px 0 rgba(56,49,42,.07); }
.hook-crm-list-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:9px; border-bottom:1px solid var(--hook-line); }
.hook-crm-list-head small,.hook-crm-list-head b { display:block; }
.hook-crm-list-head small { color:var(--hook-muted); font:.52rem var(--font-mono,monospace); }
.hook-crm-list-head b { margin-top:3px; font-size:.8rem; }
.hook-crm-count { padding:5px 7px; background:#e7ecdf; color:#405736; font:.51rem var(--font-mono,monospace); white-space:nowrap; }
.hook-lead-row { min-height:47px; display:flex; align-items:center; gap:9px; padding:7px 5px; border-bottom:1px solid #eee7de; }
.hook-lead-row.featured { background:#fbf7f0; }
.hook-lead-avatar { width:28px;height:28px;display:grid;place-items:center;flex:none;border-radius:50%;background:var(--hook-paper-2);color:var(--hook-rust);font:.51rem var(--font-mono,monospace); }
.hook-lead-copy { min-width:0; flex:1; }
.hook-lead-copy b,.hook-lead-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hook-lead-copy b { font-size:.68rem; }
.hook-lead-copy small { margin-top:2px; color:var(--hook-muted); font-size:.56rem; }
.hook-lead-status { padding:4px 6px; color:var(--hook-muted); background:#f3eee6; font:.49rem var(--font-mono,monospace); white-space:nowrap; }
.hook-lead-row.featured .hook-lead-status { color:#405736; background:#e7ecdf; }
.hook-controls { min-height:49px; padding:9px 15px; display:flex; align-items:center; gap:11px; border-top:1px solid var(--hook-line); }
.hook-progress { height:3px; flex:1; background:#e8dfd3; overflow:hidden; }
.hook-progress i { display:block; width:0; height:100%; background:var(--hook-rust); transition:width .25s ease; }
.hook-control,.hook-replay { border:0; background:transparent; color:var(--hook-muted); font:.58rem var(--font-mono,monospace); white-space:nowrap; cursor:pointer; }
.hook-control:hover,.hook-replay:hover { color:var(--hook-rust); }
.hook-replay { color:var(--hook-rust); }
.hook-controls button:focus-visible { outline:2px solid var(--hook-rust); outline-offset:3px; }
.hook-replay[hidden] { display:none; }
@media(max-width:900px) { .hook-visual { min-height:250px; } .hook-scene { max-width:500px; } }
@media(max-width:480px) { .hook-top { padding:11px 13px; } .hook-route { gap:8px; font-size:.5rem; } .hook-visual { min-height:238px; padding:22px 16px; } .hook-scene { min-height:185px; } .hook-bubble { padding:14px; } .hook-crm { padding:14px; } .hook-crm-fields { gap:0 9px; } .hook-crm-fields span { font-size:.66rem; } .hook-ai-card { padding:15px; } .hook-ai-card p { font-size:.74rem; } .hook-crm-list { padding:12px; } .hook-lead-row { gap:6px; } .hook-lead-status { padding:4px 5px; font-size:.45rem; } }
@media(prefers-reduced-motion:reduce) { .hook-scene,.hook-crm-fields span { animation:none; } .hook-progress i { transition:none; } }