:root { --ink:#20202b; --muted:#7a7889; --line:#e9e8ef; --purple:#7657e8; --purple-deep:#6244d4; --wash:#f7f7fa; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:#f6f6f9; color:var(--ink); font-family:var(--font-geist-sans), Inter, Arial, sans-serif; }
button, input { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:flex; background:#f7f7fa; }
.sidebar { position:fixed; inset:0 auto 0 0; z-index:20; width:245px; display:flex; flex-direction:column; padding:25px 16px 18px; background:#fff; border-right:1px solid var(--line); }
.brand { display:flex; gap:11px; align-items:center; padding:0 9px 27px; }
.brand-mark, .mobile-brand span { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:#fff; background:linear-gradient(145deg,#8f73f5,#5a39ce); box-shadow:0 8px 20px #7657e833; font-weight:800; }
.brand>div:last-child { display:flex; flex-direction:column; }
.brand strong { font-size:20px; letter-spacing:-.4px; }
.brand span { color:#9693a1; font-size:10px; text-transform:uppercase; letter-spacing:1.25px; font-weight:650; }
.sidebar nav { display:flex; flex-direction:column; gap:4px; }
.sidebar nav button, .sidebar-bottom>button { height:45px; width:100%; padding:0 13px; display:flex; align-items:center; gap:12px; border:0; border-radius:11px; background:transparent; color:#767381; font-size:13px; font-weight:570; text-align:left; transition:.2s ease; }
.sidebar nav button:hover, .sidebar-bottom>button:hover { background:#f8f6ff; color:var(--purple); }
.sidebar nav button.active { color:var(--purple-deep); background:#f2efff; font-weight:680; }
.sidebar nav button em { margin-left:auto; min-width:21px; height:21px; display:grid; place-items:center; border-radius:50%; background:#7859e7; color:#fff; font-style:normal; font-size:10px; }
.sidebar-bottom { margin-top:auto; }
.sidebar-bottom>button { margin-bottom:13px; }
.usage { margin:0 5px 17px; padding:14px; background:#f9f8fc; border:1px solid #efedf5; border-radius:12px; }
.usage>div:first-child { display:flex; justify-content:space-between; font-size:10px; color:#817e8c; }
.usage strong { color:#5f5c6d; }
.usage-track, .score-track { height:5px; margin:9px 0 8px; border-radius:9px; background:#e6e3ed; overflow:hidden; }
.usage-track i { display:block; width:72%; height:100%; background:linear-gradient(90deg,#8c72f0,#6845d8); border-radius:inherit; }
.usage p { margin:0; color:#a09da9; font-size:9px; }
.profile { padding:12px 4px 0; border-top:1px solid var(--line); display:flex; align-items:center; gap:9px; }
.profile>div:nth-child(2) { min-width:0; display:flex; flex-direction:column; }
.profile strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.profile span { font-size:9px; color:#9996a3; margin-top:2px; }
.profile button { border:0; background:transparent; color:#9996a3; margin-left:auto; }
.avatar { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; font-size:10px; font-weight:750; color:#fff; }
.avatar.dark { background:#2f2b3a; }
.avatar.purple { background:linear-gradient(135deg,#a484f0,#7657d9); }.avatar.blue { background:linear-gradient(135deg,#72ace9,#477ac9); }.avatar.amber { background:linear-gradient(135deg,#efb963,#cf8038); }.avatar.green { background:linear-gradient(135deg,#62bf9b,#318469); }
.workspace { width:calc(100% - 245px); margin-left:245px; min-height:100vh; }
.topbar { height:69px; position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:0 31px; background:#ffffffee; backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.top-search { width:min(420px,42vw); display:flex; align-items:center; gap:9px; color:#a4a1ad; }
.top-search input { width:100%; border:0; outline:0; color:#3d3a46; background:transparent; font-size:12px; }
.top-search input::placeholder { color:#aaa7b2; }
.top-search kbd { padding:4px 7px; border:1px solid #e4e2e9; border-radius:6px; background:#faf9fb; color:#aaa7b1; font-size:9px; white-space:nowrap; }
.top-actions { display:flex; align-items:center; gap:15px; }
.top-actions .status { display:flex; align-items:center; gap:7px; border:0; background:transparent; color:#777481; font-size:10px; }
.status i, .live-chip i, .chat-header div>span i { width:7px; height:7px; display:block; border-radius:50%; background:#44bc83; box-shadow:0 0 0 3px #e5f8ef; }
.icon-button { position:relative; width:35px; height:35px; display:grid; place-items:center; border:1px solid #ebe9ef; border-radius:10px; color:#777482; background:#fff; }
.icon-button>i { position:absolute; top:7px; right:8px; width:5px; height:5px; border-radius:50%; background:#7b5ce7; border:1px solid white; }
.mobile-brand,.mobile-menu { display:none; }
.content { max-width:1540px; margin:auto; padding:27px 31px 35px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px; }
.section-heading h1 { margin:2px 0 4px; font-size:24px; line-height:1.15; letter-spacing:-.7px; }
.section-heading h1 span { font-size:20px; }
.section-heading p { margin:0; color:#9693a0; font-size:11px; }
.eyebrow { color:#8d6ceb!important; font-size:9px!important; text-transform:uppercase; letter-spacing:1.1px; font-weight:700; }
.period-button,.primary-button { height:35px; display:flex; align-items:center; gap:7px; padding:0 12px; border:1px solid #e6e4eb; border-radius:9px; background:white; color:#676471; font-size:10px; }
.period-button span { margin-left:5px; color:#aaa7b2; }
.primary-button { background:var(--purple); color:#fff; border-color:var(--purple); padding:0 16px; box-shadow:0 6px 18px #7657e82b; }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.stat-card { min-height:105px; display:flex; align-items:center; gap:13px; padding:18px; background:white; border:1px solid var(--line); border-radius:14px; box-shadow:0 2px 3px #32303b05; }
.stat-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:11px; }
.stat-icon.purple,.activity-icon.purple { color:#7252dd; background:#eeeaff; }.stat-icon.blue,.activity-icon.blue { color:#4d86cc; background:#eaf4ff; }.stat-icon.green,.activity-icon.green { color:#399170; background:#e7f7f0; }.stat-icon.amber,.activity-icon.amber { color:#cd8139; background:#fff3e4; }
.stat-card>div:last-child { display:grid; grid-template-columns:auto auto; align-items:end; gap:0 7px; }
.stat-card p { grid-column:1/-1; margin:0 0 3px; color:#8e8b98; font-size:9px; }
.stat-card strong { font-size:22px; letter-spacing:-.5px; }
.stat-change { align-self:center; color:#3ba376; background:#ecf8f2; padding:3px 5px; border-radius:5px; font-size:8px; font-weight:700; }
.panel { background:white; border:1px solid var(--line); border-radius:14px; box-shadow:0 2px 3px #32303b04; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(230px,.8fr); gap:14px; margin-bottom:14px; }
.performance-panel,.channel-panel,.activity-panel { padding:18px; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; }
.panel-head h2 { margin:0 0 3px; font-size:12px; letter-spacing:-.2px; }
.panel-head p { margin:0; color:#a19eaa; font-size:9px; }
.panel-head>button { border:0; background:transparent; color:#a09da8; }
.legend { display:flex; gap:13px; color:#8d8997; font-size:8px; }
.legend span { display:flex; align-items:center; gap:5px; }.legend i { width:7px; height:7px; border-radius:50%; }.purple-dot { background:#7657e8; }.green-dot { background:#4caf83; }
.chart-wrap { height:214px; display:flex; margin-top:16px; }
.chart-y { width:28px; height:185px; display:flex; flex-direction:column; justify-content:space-between; color:#b0adb8; font-size:7px; }
.chart-plot { flex:1; position:relative; height:100%; }
.grid-lines { position:absolute; inset:0 0 29px; display:flex; flex-direction:column; justify-content:space-between; }
.grid-lines i { display:block; width:100%; border-top:1px dashed #eceaf0; }
.chart-plot svg { position:absolute; inset:0 0 29px; width:100%; height:calc(100% - 29px); overflow:visible; }
.chart-plot .area { fill:url(#area); }.chart-plot .line { fill:none; stroke-width:2; vector-effect:non-scaling-stroke; }.purple-line { stroke:#7859e7; }.green-line { stroke:#51af87; stroke-dasharray:5 5; }
.chart-x { position:absolute; inset:auto 0 0; display:flex; justify-content:space-between; padding-top:8px; color:#aca9b4; font-size:7px; }
.donut-wrap { display:grid; place-items:center; padding:16px 0 10px; }
.donut { width:126px; height:126px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#7657e8 0 68%,#f08cb1 68% 89%,#62aee8 89% 100%); position:relative; }
.donut::after { content:""; position:absolute; inset:16px; background:#fff; border-radius:50%; }
.donut div { z-index:1; display:flex; flex-direction:column; align-items:center; }.donut strong { font-size:20px; }.donut span { color:#a4a1ad; font-size:8px; }
.channel-list { display:flex; flex-direction:column; gap:9px; }.channel-list>div { display:flex; justify-content:space-between; align-items:center; color:#706d79; font-size:9px; }.channel-list span { display:flex; align-items:center; gap:7px; }.channel-list i { width:7px; height:7px; border-radius:50%; }.channel-list .wa { background:#7657e8; }.channel-list .ig { background:#f08cb1; }.channel-list .web { background:#62aee8; }.channel-list strong { font-size:9px; }
.bottom-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr); gap:14px; }
.text-button { color:#7657e8!important; font-size:8px; font-weight:650; }
.activity-list { margin-top:9px; }.activity-row { min-height:51px; display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:10px; border-bottom:1px solid #f0eff3; }.activity-row:last-child { border-bottom:0; }.activity-icon { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; }.activity-row>div:nth-child(2) { display:flex; flex-direction:column; gap:3px; }.activity-row strong { font-size:9px; }.activity-row span,.activity-row time { color:#9c99a5; font-size:8px; }.activity-row time { white-space:nowrap; }
.assistant-panel { position:relative; overflow:hidden; padding:18px 20px; text-align:center; background:linear-gradient(145deg,#302846,#1f1b2c); color:#fff; }.assistant-panel::before { content:""; position:absolute; width:220px; height:220px; border-radius:50%; top:-150px; right:-90px; background:#8669ef33; filter:blur(5px); }
.assistant-orb { margin:2px auto 8px; width:48px; height:48px; display:grid; place-items:center; color:#fff; border-radius:15px; background:linear-gradient(145deg,#967cf5,#6543d8); box-shadow:0 8px 25px #7e5de859; transform:rotate(-3deg); }.assistant-orb svg { transform:rotate(3deg); }
.live-chip { width:max-content; margin:0 auto 8px; display:flex; align-items:center; gap:6px; color:#bcb5d0; font-size:7px; }.live-chip i { width:6px; height:6px; box-shadow:0 0 0 3px #44bc8320; }
.assistant-panel h2 { margin:0 0 5px; font-size:15px; }.assistant-panel>p { max-width:260px; margin:0 auto 12px; color:#a9a2bb; font-size:8px; line-height:1.55; }
.assistant-metrics { display:grid; grid-template-columns:1fr 1fr; margin:0 0 13px; border:1px solid #ffffff12; border-radius:9px; background:#ffffff07; }.assistant-metrics div { display:flex; flex-direction:column; gap:2px; padding:8px; }.assistant-metrics div+div { border-left:1px solid #ffffff12; }.assistant-metrics span { color:#9890aa; font-size:7px; }.assistant-metrics strong { font-size:11px; }
.assistant-panel>button { width:100%; height:31px; display:flex; justify-content:center; align-items:center; gap:12px; border:1px solid #ffffff20; border-radius:8px; background:#ffffff10; color:#fff; font-size:8px; }.assistant-panel>button:hover { background:#ffffff18; }
.section-heading.compact { align-items:center; }
.conversation-page { min-height:calc(100vh - 132px); }
.inbox { height:calc(100vh - 180px); min-height:570px; display:grid; grid-template-columns:265px minmax(420px,1fr) 235px; overflow:hidden; }
.thread-list { border-right:1px solid var(--line); overflow:auto; }
.thread-search { height:59px; margin:0 13px; display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--line); color:#aaa7b1; }.thread-search input { width:100%; border:0; outline:0; background:transparent; font-size:10px; }
.thread-filters { display:flex; padding:11px 12px 7px; gap:5px; }.thread-filters button { border:0; border-radius:7px; background:transparent; padding:6px 8px; color:#96939f; font-size:8px; }.thread-filters button.active { color:#6d4edf; background:#f0edfc; font-weight:700; }.thread-filters span { margin-left:3px; }
.threads { padding:0 7px 12px; }.thread { width:100%; min-height:75px; display:flex; align-items:center; gap:9px; padding:9px; border:0; border-radius:10px; background:transparent; text-align:left; }.thread:hover { background:#faf9fc; }.thread.selected { background:#f3f0ff; }.thread-copy { min-width:0; display:flex; flex:1; flex-direction:column; gap:3px; }.thread-copy strong { display:flex; justify-content:space-between; font-size:9px; }.thread-copy time { color:#a7a4af; font-size:7px; font-weight:450; }.thread-copy em { color:#8569e3; font-size:7px; font-style:normal; }.thread-copy>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#918e9b; font-size:8px; }
.chat-window { min-width:0; display:flex; flex-direction:column; background:#fbfbfd; }.chat-header { min-height:60px; display:flex; align-items:center; gap:9px; padding:9px 15px; background:#fff; border-bottom:1px solid var(--line); }.chat-header>div:nth-child(2) { display:flex; flex-direction:column; gap:3px; }.chat-header strong { font-size:10px; }.chat-header div>span { display:flex; align-items:center; gap:5px; color:#9a97a3; font-size:7px; }.chat-header div>span i { width:5px; height:5px; box-shadow:none; }.chat-actions { margin-left:auto!important; display:flex!important; flex-direction:row!important; gap:7px!important; }.chat-actions button { height:29px; padding:0 10px; border:1px solid #e7e5eb; border-radius:8px; background:#fff; color:#777481; font-size:8px; }.chat-actions button:first-child { width:29px; padding:0; display:grid; place-items:center; }.chat-actions button:last-child { color:#6b4cda; border-color:#ded7f8; background:#f7f4ff; }
.ai-banner { height:31px; display:flex; align-items:center; justify-content:center; gap:6px; color:#6f51d7; background:#f0edfd; border-bottom:1px solid #e5dff9; font-size:8px; }.ai-banner button { margin-left:8px; border:0; background:transparent; color:#8a70df; font-size:7px; text-decoration:underline; }
.messages { flex:1; overflow:auto; padding:18px 23px; display:flex; flex-direction:column; gap:9px; }.messages>time { align-self:center; margin-bottom:2px; color:#aaa7b2; font-size:7px; }.message { max-width:72%; padding:9px 11px 7px; border-radius:11px; box-shadow:0 1px 2px #28263108; }.message p { margin:0; font-size:9px; line-height:1.55; }.message>span { display:block; margin-top:4px; font-size:6px; color:#a3a0aa; text-align:right; }.message.incoming { align-self:flex-start; background:#fff; border:1px solid #e8e7ec; border-bottom-left-radius:3px; }.message.outgoing { align-self:flex-end; background:#f0edff; border:1px solid #dfd7fd; border-bottom-right-radius:3px; }.message.outgoing.human { background:#2d2838; color:white; border-color:#2d2838; }.message.outgoing label { margin-bottom:4px; display:flex; align-items:center; gap:4px; color:#7356da; font-size:7px; font-weight:700; }.message.outgoing.human label { color:#c6baf1; }
.composer { min-height:55px; margin:0 13px 12px; padding:6px 7px; display:flex; align-items:center; gap:7px; background:#fff; border:1px solid #e2e0e8; border-radius:11px; box-shadow:0 4px 12px #28263108; }.composer>button:first-child { border:0; background:transparent; color:#9a96a3; }.composer input { flex:1; min-width:0; border:0; outline:0; font-size:9px; }.send-button { width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:8px; background:#7657e8; color:#fff; }
.lead-panel { border-left:1px solid var(--line); background:#fff; overflow:auto; }.lead-head { padding:21px 14px 15px; display:flex; flex-direction:column; align-items:center; border-bottom:1px solid var(--line); }.avatar.large { width:48px; height:48px; border-radius:14px; font-size:12px; }.lead-head h3 { margin:9px 0 3px; font-size:11px; }.lead-head p { margin:0; color:#50a77f; font-size:7px; }.score { padding:13px 14px; border-bottom:1px solid var(--line); }.score>div:first-child { display:flex; justify-content:space-between; color:#8f8c98; font-size:8px; }.score strong { color:#48a17a; }.score-track { height:4px; }.score-track i { display:block; width:87%; height:100%; background:#51ad85; border-radius:inherit; }.lead-details { padding:14px; border-bottom:1px solid var(--line); }.lead-details h4 { margin:0 0 11px; font-size:9px; }.lead-details p { margin:0 0 10px; display:flex; justify-content:space-between; gap:8px; font-size:8px; }.lead-details p:last-child { margin-bottom:0; }.lead-details span { color:#9a97a3; }.lead-details strong { text-align:right; font-size:8px; }.next-action { margin:13px; padding:10px; display:flex; gap:8px; color:#7153d9; background:#f3f0ff; border-radius:9px; }.next-action div { display:flex; flex-direction:column; gap:3px; }.next-action span { color:#9182c2; font-size:7px; }.next-action strong { font-size:8px; }
.placeholder-page { min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }.placeholder-page h1 { margin:5px 0 8px; font-size:28px; }.placeholder-page>p:not(.eyebrow) { margin:0 0 20px; color:#908d99; font-size:11px; }.placeholder-page button { border:0; border-radius:9px; background:#7657e8; color:white; padding:10px 15px; font-size:9px; }

.positive { color:#4eae83!important; }
.pipeline-summary { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:14px; background:#272231; color:#fff; border-radius:15px; overflow:hidden; }.pipeline-summary>div { padding:18px 20px; display:flex; flex-direction:column; gap:4px; border-right:1px solid #ffffff10; }.pipeline-summary span { color:#a9a2b6; font-size:8px; }.pipeline-summary strong { font-size:19px; }.pipeline-summary em { color:#8d8799; font-size:7px; font-style:normal; }
.filter-pills,.report-tabs { display:flex; gap:6px; margin:0 0 12px; }.filter-pills button,.report-tabs button { padding:7px 11px; border:1px solid #e7e5eb; border-radius:8px; background:#fff; color:#8e8b97; font-size:8px; }.filter-pills button.active,.report-tabs button.active { border-color:#dcd5f8; background:#f1edff; color:#694bd8; font-weight:700; }
.kanban { display:grid; grid-template-columns:repeat(4,minmax(230px,1fr)); gap:12px; overflow:auto; padding-bottom:10px; }.kanban-column { min-width:230px; }.kanban-column>header { height:43px; padding:0 7px; display:flex; align-items:center; justify-content:space-between; }.kanban-column>header>div { display:flex; align-items:center; gap:6px; }.kanban-column>header i { width:8px; height:8px; border-radius:50%; }.kanban-column>header i.blue { background:#5f99df; }.kanban-column>header i.purple { background:#7859e8; }.kanban-column>header i.amber { background:#df994e; }.kanban-column>header i.green { background:#4ca97f; }.kanban-column>header strong { font-size:9px; }.kanban-column>header span { min-width:17px; height:17px; display:grid; place-items:center; border-radius:50%; background:#e9e7ed; color:#85818e; font-size:7px; }.kanban-column>header em { color:#9794a0; font-size:8px; font-style:normal; }
.lead-cards { display:flex; flex-direction:column; gap:8px; }.lead-card { width:100%; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; text-align:left; transition:.2s; }.lead-card:hover,.lead-card.selected { transform:translateY(-1px); border-color:#d6cef6; box-shadow:0 7px 20px #3931440b; }.lead-card-head,.lead-card-foot { display:flex; justify-content:space-between; align-items:center; }.company-logo { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; color:#6d52cd; background:#f0edfc; font-size:8px; font-weight:750; }.lead-score { padding:4px 6px; color:#a17534; background:#fff3e2; border-radius:6px; font-size:7px; }.lead-score.hot { color:#338965; background:#e8f7f0; }.lead-card h3 { margin:10px 0 3px; font-size:10px; }.lead-card p { margin:0 0 12px; color:#9a97a2; font-size:8px; }.lead-card-foot { padding-top:9px; border-top:1px solid #f0eff2; }.lead-card-foot strong { font-size:9px; }.lead-card-foot span { color:#8e77df; font-size:7px; }.quick-actions { margin:9px -4px -4px; padding:7px; display:flex; justify-content:space-between; color:#6c4ed8; background:#f5f2ff; border-radius:7px; font-size:7px; }.column-add { width:100%; margin-top:8px; padding:9px; border:1px dashed #dcd9e2; border-radius:10px; color:#9895a1; background:transparent; font-size:8px; }
.automation-hero { display:flex; align-items:center; gap:14px; padding:17px 20px; margin-bottom:14px; background:linear-gradient(120deg,#2f293e,#272230); color:#fff; }.automation-hero-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#7657e8; }.automation-hero>div:nth-child(2) { display:flex; flex-direction:column; gap:2px; }.automation-hero span { color:#aaa3b7; font-size:8px; }.automation-hero strong { font-size:14px; }.automation-hero p { margin:0; color:#8f899a; font-size:8px; }.automation-hero p b { color:#53b087; }.automation-live { margin-left:auto; display:flex; align-items:center; gap:7px; padding:7px 9px; border-radius:8px; background:#ffffff08; color:#beb7ca!important; }.automation-live i { width:7px; height:7px; border-radius:50%; background:#4db083; }
.automation-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.automation-card { padding:16px; transition:.2s; }.automation-card.disabled { opacity:.58; }.automation-top { display:flex; align-items:center; justify-content:space-between; }.toggle { width:34px; height:19px; padding:2px; border:0; border-radius:20px; background:#d9d7df; }.toggle i { display:block; width:15px; height:15px; border-radius:50%; background:#fff; transition:.2s; }.toggle.on { background:#7657e8; }.toggle.on i { transform:translateX(15px); }.automation-card h2 { margin:13px 0 5px; font-size:11px; }.automation-card>p { min-height:36px; margin:0; color:#8f8c98; font-size:8px; line-height:1.55; }.flow-mini { margin:12px 0; padding:9px; display:flex; align-items:center; justify-content:space-between; border-radius:8px; background:#f8f7fa; color:#918e99; font-size:7px; }.flow-mini span { padding:4px 5px; border-radius:5px; background:#fff; border:1px solid #ebe9ef; }.flow-mini b { color:#b2aeb8; }.automation-card footer { display:flex; justify-content:space-between; padding-top:11px; border-top:1px solid #efedf2; color:#9b98a3; font-size:7px; }.automation-card footer strong { color:#4a9b74; }.template-banner { width:100%; margin-top:12px; padding:13px 18px; display:flex; align-items:center; gap:12px; border:1px dashed #d8d2ee; border-radius:13px; background:#f8f6ff; text-align:left; color:#292533; }.template-banner .assistant-orb { width:40px; height:40px; margin:0; }.template-banner>span:nth-child(2) { display:flex; flex-direction:column; gap:3px; }.template-banner strong { font-size:10px; }.template-banner small { color:#8d8997; font-size:8px; }.template-banner>b { margin-left:auto; color:#6c4ed8; font-size:8px; }
.agenda-grid { display:grid; grid-template-columns:minmax(300px,.9fr) minmax(380px,1.25fr) minmax(210px,.65fr); gap:13px; }.calendar-card { padding:16px; }.calendar-card>header { display:flex; align-items:center; justify-content:space-between; margin-bottom:17px; }.calendar-card>header button { width:28px; height:28px; border:1px solid #e7e4eb; border-radius:8px; background:#fff; }.calendar-card>header div { display:flex; align-items:center; gap:7px; }.calendar-card>header strong { font-size:12px; }.calendar-card>header span { padding:4px 6px; border-radius:5px; background:#f0edfd; color:#6d50d6; font-size:7px; }.weekdays,.calendar-days { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }.weekdays { margin-bottom:8px; }.weekdays span { text-align:center; color:#aaa7b1; font-size:7px; }.calendar-days button { position:relative; aspect-ratio:1; border:0; border-radius:8px; background:transparent; color:#57535f; font-size:8px; }.calendar-days button.outside { color:#c7c4cd; }.calendar-days button.selected { color:#fff; background:#7657e8; }.calendar-days button.has-event::after { content:""; position:absolute; bottom:4px; left:50%; width:3px; height:3px; border-radius:50%; background:#7657e8; transform:translateX(-50%); }.calendar-days button.selected::after { background:#fff; }.calendar-stats { display:grid; grid-template-columns:repeat(3,1fr); margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }.calendar-stats div { display:flex; flex-direction:column; align-items:center; gap:3px; border-right:1px solid var(--line); }.calendar-stats strong { font-size:13px; }.calendar-stats span { color:#9c99a4; font-size:7px; }
.schedule-card { overflow:hidden; }.schedule-card>header { height:67px; padding:14px 17px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.schedule-card h2 { margin:2px 0 0; font-size:14px; }.schedule-card>header button { border:0; background:transparent; }.timeline { padding:8px 17px 14px; }.meeting { min-height:88px; display:grid; grid-template-columns:48px 3px 1fr; gap:10px; padding:10px 0; }.meeting-time { display:flex; flex-direction:column; gap:3px; }.meeting-time strong { font-size:9px; }.meeting-time span { color:#aaa7b1; font-size:7px; }.meeting-line { border-radius:5px; background:#7657e8; }.meeting-line.green { background:#4ba87e; }.meeting-line.blue { background:#5996d9; }.meeting-line.amber { background:#dc974b; }.meeting-body { display:flex; justify-content:space-between; gap:8px; padding-bottom:9px; border-bottom:1px solid #f0eff2; }.meeting-body>div { display:flex; flex-direction:column; align-items:flex-start; }.meeting-type { padding:3px 5px; border-radius:5px; color:#6c4dd7; background:#f0edfd; font-size:6px; }.meeting-type.green { color:#368a67;background:#e7f7ef; }.meeting-type.blue { color:#467ebd;background:#eaf4fd; }.meeting-type.amber { color:#b27230;background:#fff2e3; }.meeting-body h3 { margin:6px 0 4px; font-size:9px; }.meeting-body p { margin:0; display:flex; gap:4px; color:#9895a0; font-size:7px; }.meeting-body>button { align-self:center; padding:6px 8px; border:1px solid #e5e2e9; border-radius:7px; background:#fff; font-size:7px; }
.agenda-side { display:flex; flex-direction:column; gap:12px; }.agenda-ai { padding:17px; text-align:center; background:linear-gradient(145deg,#30293f,#25212e); color:#fff; }.agenda-ai .assistant-orb { width:42px; height:42px; }.agenda-ai h3 { margin:8px 0 5px; font-size:11px; }.agenda-ai>p { margin:0 0 12px; color:#aaa3b6; font-size:8px; }.agenda-ai>div:not(.assistant-orb) { padding:8px 0; display:flex; justify-content:space-between; border-top:1px solid #ffffff12; font-size:8px; }.agenda-ai>div span { color:#9b94a8; }.agenda-ai>div strong { color:#72cfaa; }.availability { padding:15px; }.availability .panel-head h3 { margin:0; font-size:10px; }.availability .panel-head button { color:#6e50d7; font-size:7px; }.availability>p { margin:12px 0 0; display:flex; justify-content:space-between; font-size:7px; }.availability>p span { color:#9996a1; }
.report-hero { display:grid; grid-template-columns:2fr .8fr; gap:13px; margin-bottom:13px; }.report-total { padding:18px 20px; }.report-total>p { margin:0 0 5px; color:#8f8c97; font-size:8px; }.report-total>div:nth-child(2) { display:flex; align-items:center; gap:9px; }.report-total>div strong { font-size:23px; }.report-total>div span { padding:4px 6px; border-radius:6px; color:#419873; background:#e9f7f0; font-size:7px; }.report-total>small { color:#aaa7b1; font-size:7px; }.bar-chart { height:135px; margin:19px 0 0; padding:0 8px; display:flex!important; align-items:flex-end!important; justify-content:space-between; gap:8px; border-bottom:1px solid #e8e6ec; }.bar-chart i { flex:1; min-height:20px; border-radius:5px 5px 0 0; background:#dcd5f8; }.bar-chart i.hot { background:#7657e8; }.bar-labels { display:flex!important; justify-content:space-between!important; padding-top:6px; font-size:7px; }.bar-labels span { padding:0!important;background:none!important;color:#aaa7b2!important; }.roi-card { padding:19px; border-radius:14px; color:#fff; background:linear-gradient(145deg,#7657e8,#4c2dac); }.roi-card>span { color:#d0c8f1;font-size:8px; }.roi-card>strong { display:block;margin:8px 0 5px;font-size:34px; }.roi-card>p { margin:0 0 19px;color:#d2cbef;font-size:8px;line-height:1.6; }.roi-card>div { display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid #ffffff1c;font-size:8px; }.roi-card>div span { color:#c3bae8; }
.insight-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:13px; }.report-bottom { display:grid;grid-template-columns:1.7fr .8fr;gap:13px; }.source-table,.ai-insights { padding:17px; }.source-table .panel-head button { color:#6e50d7;font-size:7px; }.source-table table { width:100%;margin-top:13px;border-collapse:collapse;font-size:8px; }.source-table th { padding:8px;text-align:left;color:#a19da8;background:#f8f7fa;font-size:7px; }.source-table td { padding:12px 8px;border-bottom:1px solid #efedf2; }.source-table td:first-child { display:flex;align-items:center;gap:6px; }.source-table td i { width:7px;height:7px;border-radius:50%;background:#7657e8; }.source-table td i.ig { background:#ed87ac; }.source-table td i.web { background:#5ea3dc; }.source-table td b { color:#429a72; }.ai-insights .panel-head svg { color:#7758e8; }.ai-insights>div:not(.panel-head) { margin-top:12px;padding:11px;border-radius:9px;background:#f7f5ff; }.ai-insights>div strong { font-size:8px; }.ai-insights>div p { margin:4px 0 0;color:#8e899a;font-size:7px; }.ai-insights>button { margin-top:11px;border:0;background:transparent;color:#6d4ed7;font-size:8px; }
.settings-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px; }.settings-card { padding:20px; }.settings-title { display:flex;align-items:center;gap:11px;padding-bottom:16px;margin-bottom:15px;border-bottom:1px solid var(--line); }.settings-title h2 { margin:0 0 3px;font-size:12px; }.settings-title p { margin:0;color:#9996a1;font-size:8px; }.settings-card>label { display:flex;flex-direction:column;gap:6px;margin-bottom:13px;color:#67636f;font-size:8px;font-weight:650; }.settings-card input,.settings-card select,.settings-card textarea { width:100%;padding:10px 11px;border:1px solid #e5e3e9;border-radius:9px;outline:0;background:#fbfbfc;color:#4b4754;font-size:9px;resize:none; }.settings-card textarea { min-height:90px; }.setting-row { min-height:74px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line); }.setting-row>div { display:flex;flex:1;flex-direction:column;gap:4px; }.setting-row strong { font-size:9px; }.setting-row span { color:#9996a1;font-size:7px; }

@media (max-width:1100px) { .stats-grid { grid-template-columns:repeat(2,1fr); }.inbox { grid-template-columns:240px 1fr; }.lead-panel { display:none; }.automation-grid { grid-template-columns:repeat(2,1fr); }.agenda-grid { grid-template-columns:1fr 1fr; }.agenda-side { grid-column:1/-1;flex-direction:row; }.agenda-side>* { flex:1; }.insight-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:800px) { .sidebar { width:72px; padding:22px 10px; }.brand { padding:0 7px 24px; }.brand>div:last-child,.sidebar nav button span,.sidebar-bottom>button span,.usage,.profile>div:nth-child(2),.profile>button { display:none; }.sidebar nav button,.sidebar-bottom>button { justify-content:center; padding:0; }.profile { justify-content:center; }.workspace { width:calc(100% - 72px); margin-left:72px; }.content { padding:22px 18px 30px; }.topbar { padding:0 18px; }.dashboard-grid,.bottom-grid { grid-template-columns:1fr; }.channel-panel { display:grid; grid-template-columns:1fr 1fr; }.channel-panel .panel-head { grid-column:1/-1; }.inbox { grid-template-columns:210px minmax(360px,1fr); overflow:auto; }.pipeline-summary { grid-template-columns:1fr 1fr; }.kanban { grid-template-columns:repeat(4,240px); }.report-hero,.report-bottom,.settings-grid { grid-template-columns:1fr; } }
@media (max-width:600px) { .app-shell { display:block; }.sidebar { position:fixed; inset:auto 0 0; width:100%; height:62px; padding:7px 12px; flex-direction:row; border-right:0; border-top:1px solid var(--line); }.brand,.sidebar-bottom { display:none; }.sidebar nav { width:100%; flex-direction:row; justify-content:space-around; gap:0; }.sidebar nav button { width:48px; height:48px; }.sidebar nav button:nth-child(n+5) { display:none; }.sidebar nav button em { position:absolute; margin:0; transform:translate(12px,-12px); }.workspace { width:100%; margin:0; padding-bottom:62px; }.topbar { height:59px; padding:0 14px; }.mobile-brand { display:flex; align-items:center; gap:7px; }.mobile-brand span { width:30px; height:30px; border-radius:9px; }.top-search,.top-actions .status { display:none; }.mobile-menu { display:block; border:0; background:transparent; color:#777481; }.content { padding:19px 12px 25px; }.section-heading { align-items:center; }.section-heading h1 { font-size:20px; }.section-heading>div>p:not(.eyebrow) { display:none; }.period-button { padding:0 9px; }.stats-grid { grid-template-columns:1fr 1fr; gap:9px; }.stat-card { min-height:92px; padding:12px; gap:9px; }.stat-icon { width:35px; height:35px; }.stat-card strong { font-size:17px; }.stat-change { display:none; }.performance-panel,.channel-panel,.activity-panel { padding:14px; }.channel-panel { display:block; }.bottom-grid { grid-template-columns:1fr; }.chart-wrap { height:190px; }.inbox { height:auto; min-height:620px; display:block; }.thread-list { max-height:210px; border-right:0; border-bottom:1px solid var(--line); }.threads { display:flex; overflow:auto; gap:5px; }.thread { min-width:210px; }.chat-window { min-height:540px; }.conversation-page .primary-button { padding:0 10px; }.message { max-width:86%; }.pipeline-summary { grid-template-columns:1fr 1fr; }.pipeline-summary>div { padding:13px; }.pipeline-summary strong { font-size:15px; }.automation-grid { grid-template-columns:1fr; }.automation-live { display:none; }.template-banner>b { display:none; }.agenda-grid { grid-template-columns:1fr; }.agenda-side { grid-column:auto;flex-direction:column; }.report-hero { grid-template-columns:1fr; }.insight-grid { grid-template-columns:1fr 1fr; }.report-bottom,.settings-grid { grid-template-columns:1fr; }.source-table { overflow:auto; }.source-table table { min-width:480px; } }
.cinematic-layer{position:fixed;z-index:100;inset:0;pointer-events:none;transition:background .8s ease}.cinematic-layer:before{content:'';position:absolute;inset:0;background:rgba(21,18,34,.07);opacity:0;transition:opacity .6s}.cinematic-layer.has-copy:before{opacity:1}.cinematic-layer h1{position:absolute;left:calc(245px + 7vw);top:15vh;max-width:560px;color:#fff;font-size:clamp(34px,4vw,66px);line-height:.96;letter-spacing:-.06em;text-shadow:0 8px 30px #1a1538;animation:cinematicEnter .55s cubic-bezier(.22,1,.36,1)}.cinematic-label{position:absolute;left:calc(245px + 7vw);top:10vh;color:#bdaeff;font-size:10px;font-weight:800;letter-spacing:.15em}.cinematic-notice{position:absolute;right:5vw;top:92px;padding:12px 15px;background:#fff;color:#5036b9;border-radius:10px;box-shadow:0 10px 30px #42307333;font-size:11px;font-weight:700;transform:translateY(-12px);animation:cinematicNotice .28s ease-out}.cinematic-controls{position:fixed;bottom:24px;right:25px;display:flex;gap:8px;pointer-events:auto}.cinematic-controls button{border:1px solid #ddd9e7;background:#ffffffee;color:#4c4758;border-radius:9px;padding:10px 13px;font:700 10px Inter,Arial,sans-serif;cursor:pointer}.cinematic-controls .cinematic-primary{background:#7657e8;color:#fff;border-color:#7657e8}.cinematic-disclaimer{position:fixed;bottom:28px;left:calc(245px + 31px);color:#7b7784;font-size:9px}.app-shell{transition:transform .9s cubic-bezier(.22,1,.36,1),filter .9s}.app-shell[data-cinematic-zoom="conversation"] .workspace{transform:scale(1.055);transform-origin:58% 42%;filter:brightness(.88)}.app-shell[data-cinematic-zoom="wide"] .workspace{transform:scale(1.02);transform-origin:55% 45%;filter:brightness(.93)}.app-shell[data-cinematic-zoom="out"] .workspace{transform:scale(.985);filter:brightness(.86)}.cinematic-layer.is-complete{background:rgba(24,20,37,.42);pointer-events:auto}.cinematic-layer.is-complete h1{display:none}.cinematic-layer.is-complete:after{content:'Beli AI';position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);color:#fff;font-size:28px;font-weight:800;letter-spacing:-.04em}@keyframes cinematicEnter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes cinematicNotice{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}@media(max-width:800px){.cinematic-layer h1{left:24px;right:24px;top:14vh;font-size:38px}.cinematic-label{left:24px;top:9vh}.cinematic-notice{left:24px;right:auto;top:80px}.cinematic-disclaimer{left:24px}.app-shell[data-cinematic-zoom] .workspace{transform:none}.cinematic-controls{bottom:15px;right:15px}}
.demo-embed .cinematic-layer:before{opacity:0}.demo-embed .cinematic-layer h1{left:24px;top:auto;bottom:58px;max-width:50%;font-size:clamp(19px,2.5vw,34px);text-shadow:0 3px 14px #1a1538}.demo-embed .cinematic-label{left:24px;top:18px;font-size:8px}.demo-embed .cinematic-notice{right:18px;top:18px;padding:8px 10px;font-size:8px}.demo-embed .cinematic-disclaimer{left:24px;bottom:18px;font-size:7px}.demo-embed .cinematic-controls{bottom:14px;right:16px}.demo-embed .cinematic-controls button{padding:7px 9px;font-size:8px}.demo-embed .app-shell[data-cinematic-zoom] .workspace{transform:none;filter:none}.demo-embed .cinematic-layer.is-complete{background:rgba(24,20,37,.2)}
.demo-embed{height:100%;overflow:hidden}.demo-embed .app-shell{height:100vh;min-height:0;overflow:hidden}.demo-embed .workspace{min-height:0;height:100vh;overflow:hidden}.demo-embed.is-exploring,.demo-embed.is-exploring .app-shell,.demo-embed.is-exploring .workspace{height:auto;overflow:auto}.demo-embed:not(.is-exploring) ::-webkit-scrollbar{display:none}.demo-embed:not(.is-exploring){scrollbar-width:none}
.demo-embed{background:#121019}.demo-embed .app-shell{position:relative;isolation:isolate;perspective:1400px;background:#f6f5f9}.demo-embed .workspace{will-change:transform,filter,opacity;transform:translate3d(var(--camera-x,0),var(--camera-y,0),0) scale(var(--camera-scale,1)) rotate(var(--camera-rotate,0));transform-origin:50% 48%;transition:transform .78s cubic-bezier(.22,1,.36,1),filter .55s ease,opacity .45s ease}.demo-embed .sidebar{transition:opacity .45s ease,transform .78s cubic-bezier(.22,1,.36,1)}.demo-embed:not(.is-exploring)[data-cinematic-scene="conversation"] .sidebar,.demo-embed:not(.is-exploring)[data-cinematic-scene="extraction"] .sidebar,.demo-embed:not(.is-exploring)[data-cinematic-scene="qualification"] .sidebar,.demo-embed:not(.is-exploring)[data-cinematic-scene="schedule"] .sidebar,.demo-embed:not(.is-exploring)[data-cinematic-scene="followup"] .sidebar{opacity:.16;transform:translateX(-24px)}.demo-embed:not(.is-exploring)[data-cinematic-scene="lead"] .workspace,.demo-embed:not(.is-exploring)[data-cinematic-scene="followup"] .workspace{filter:brightness(.92)}.demo-embed:not(.is-exploring)[data-cinematic-scene="cta"] .workspace,.demo-embed:not(.is-exploring)[data-cinematic-scene="complete"] .workspace{filter:brightness(.42) blur(2px);opacity:.55}.cinematic-v2{overflow:hidden;background:transparent;pointer-events:none}.cinematic-v2:before{display:none}.cinematic-vignette{position:absolute;z-index:2;inset:0;background:radial-gradient(circle at 50% 47%,transparent 45%,rgba(17,14,27,.2) 100%);opacity:.38;transition:opacity .5s}.cinematic-spotlight{position:absolute;z-index:3;left:var(--focus-x);top:var(--focus-y);width:var(--focus-w);height:var(--focus-h);transform:translate(-50%,-50%);border-radius:22px;box-shadow:0 0 0 200vmax rgba(16,13,25,.22),0 18px 55px rgba(58,34,126,.18);opacity:0;transition:left .78s cubic-bezier(.22,1,.36,1),top .78s cubic-bezier(.22,1,.36,1),width .65s cubic-bezier(.22,1,.36,1),height .65s cubic-bezier(.22,1,.36,1),opacity .35s}.cinematic-v2.has-spotlight .cinematic-spotlight{opacity:1}.cinematic-caption{position:absolute;z-index:8;width:min(27%,340px);padding:20px 22px;border-radius:15px;background:rgba(24,20,34,.94);color:#fff;font-size:clamp(20px,2.4vw,38px);font-weight:680;line-height:1.02;letter-spacing:-.045em;box-shadow:0 20px 60px rgba(20,15,38,.28);animation:cinematicCaptionIn .48s cubic-bezier(.16,1,.3,1)}.cinematic-caption.is-left{left:22px;top:50%;transform:translateY(-50%)}.cinematic-caption.is-right{right:22px;top:50%;transform:translateY(-50%)}.cinematic-caption.is-top{left:50%;top:18px;width:auto;max-width:70%;transform:translateX(-50%);padding:12px 18px;font-size:clamp(18px,2vw,30px);white-space:nowrap}.cinematic-story{position:absolute;z-index:7;inset:0;pointer-events:none}.cinematic-story>*{animation:cinematicObjectIn .48s cubic-bezier(.16,1,.3,1)}.cinematic-cover{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:20px;background:radial-gradient(circle at 50% 42%,#2f2356 0,#17131f 45%,#100e15 100%);color:#fff;pointer-events:auto}.cinematic-cover>span{font-size:clamp(46px,7vw,86px);font-weight:900;letter-spacing:-.07em}.cinematic-cover>span:after{content:'';display:inline-block;width:.12em;height:.12em;margin-left:.05em;background:#7657e8}.cinematic-cover button{padding:15px 20px;border:1px solid #ffffff30;border-radius:12px;background:#fff;color:#17131f;font:800 13px Inter,Arial,sans-serif;box-shadow:0 18px 45px #0006;cursor:pointer}.cinematic-cover button b{margin-left:12px;color:#6d45ff}.cinematic-cover small{color:#aaa1bd;font-size:10px;letter-spacing:.09em;text-transform:uppercase}.cinematic-brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(48px,8vw,100px);font-weight:900;letter-spacing:-.08em;color:#fff;text-shadow:0 20px 70px #000}.cinematic-brand span{color:#7657e8}.cinematic-event{position:absolute;right:22px;top:26px;width:min(34%,380px);display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:12px;padding:15px 16px;border:1px solid #e2dcef;border-radius:14px;background:#fff;color:#25212d;box-shadow:0 22px 55px rgba(41,25,82,.22)}.cinematic-event i{width:9px;height:9px;border-radius:50%;background:#44bd8a;box-shadow:0 0 0 5px #44bd8a20}.cinematic-event div{display:flex;flex-direction:column;gap:3px}.cinematic-event small{color:#7355df;font-size:8px;font-weight:900;letter-spacing:.1em}.cinematic-event strong{font-size:12px}.cinematic-event>b{color:#9993a3;font-size:8px}.cinematic-bubbles{position:absolute;left:31%;top:29%;width:43%;display:flex;flex-direction:column;gap:11px}.cinematic-bubbles p{max-width:82%;margin:0;padding:14px 16px;border:1px solid #e0dce7;border-radius:13px;background:#fff;color:#2b2730;font-size:13px;line-height:1.45;box-shadow:0 12px 35px #2c23421a}.cinematic-bubbles p.ai{align-self:flex-end;border-color:#cfc3fa;background:#eee9ff}.cinematic-bubbles p small{display:block;margin-bottom:6px;color:#6e4fd9;font-size:8px;font-weight:900}.cinematic-bubbles>span{align-self:flex-end;color:#7657e8;font-size:9px;font-weight:700}.cinematic-data{position:absolute;right:5%;top:21%;width:24%;padding:18px;border:1px solid #ddd8e7;border-radius:15px;background:#fff;color:#24202b;box-shadow:0 25px 65px rgba(34,22,69,.22)}.cinematic-data>small,.cinematic-priority>small,.cinematic-appointment>small,.cinematic-followup>small{color:#7355df;font-size:8px;font-weight:900;letter-spacing:.12em}.cinematic-data p{display:flex;justify-content:space-between;margin:13px 0 0;padding-top:10px;border-top:1px solid #eeeaf2;font-size:10px}.cinematic-data p span{color:#8b8592}.cinematic-data p b{color:#302a39}.cinematic-score{display:flex;align-items:end;justify-content:space-between;margin-top:14px;padding:13px;border-radius:10px;background:#6d45ff;color:#fff}.cinematic-score span{font-size:9px}.cinematic-score strong{font-size:28px;line-height:.8}.cinematic-priority{position:absolute;right:7%;top:25%;width:23%;padding:20px;border-radius:16px;background:#201b2d;color:#fff;box-shadow:0 25px 70px #2a1849a8}.cinematic-priority>strong{display:block;margin:14px 0 5px;font-size:46px;line-height:.8}.cinematic-priority>span{display:inline-block;margin-bottom:20px;padding:6px 8px;border-radius:7px;background:#54bd8c;color:#11271e;font-size:9px;font-weight:900}.cinematic-priority>i{display:inline-block;padding:7px 8px;border-radius:7px;background:#ffffff10;color:#aaa2b5;font-size:8px;font-style:normal}.cinematic-priority>b{margin:0 4px;color:#9e8bff}.cinematic-priority>i.active{background:#7253e8;color:#fff}.cinematic-appointment{position:absolute;left:40%;top:38%;width:34%;padding:22px;border:1px solid #d7cef6;border-radius:17px;background:#fff;color:#25202e;box-shadow:0 28px 70px #3920703d}.cinematic-appointment>strong{display:block;margin:13px 0 4px;font-size:27px}.cinematic-appointment>span{display:block;color:#5c5565;font-size:13px}.cinematic-appointment>i{display:inline-block;margin-top:15px;padding:7px 9px;border-radius:7px;background:#e9f8f1;color:#2e8a63;font-size:9px;font-style:normal;font-weight:800}.cinematic-followup{position:absolute;left:20%;top:31%;width:39%;padding:21px;border:1px solid #ddd7e9;border-radius:16px;background:#fff;color:#27222f;box-shadow:0 28px 70px #321e6040}.cinematic-followup>strong{display:block;margin:12px 0 9px;font-size:18px}.cinematic-followup>p{margin:0;padding:12px;border-radius:9px;background:#eee9ff;color:#44336e;font-size:12px;line-height:1.4}.cinematic-sequence{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 18%,rgba(255,255,255,.9) 18% 82%,transparent 82%);opacity:.18}.cinematic-sequence i{position:absolute;width:8px;height:8px;border-radius:50%;background:#7657e8;animation:cinematicPulse 1.4s infinite}.cinematic-sequence i:nth-child(1){left:26%;top:28%}.cinematic-sequence i:nth-child(2){left:43%;top:38%;animation-delay:.12s}.cinematic-sequence i:nth-child(3){left:61%;top:31%;animation-delay:.24s}.cinematic-sequence i:nth-child(4){left:54%;top:64%;animation-delay:.36s}.cinematic-sequence i:nth-child(5){left:75%;top:58%;animation-delay:.48s}.cinematic-channels{position:absolute;inset:0;perspective:1200px}.cinematic-phone{position:absolute;top:22%;width:19%;min-height:48%;padding:18px 14px;border:7px solid #1d1924;border-radius:27px;background:#f8f7fb;color:#29242f;box-shadow:0 28px 70px #22183f55}.cinematic-phone.left{left:5%;transform:rotateY(8deg) scale(.92)}.cinematic-phone.right{right:5%;transform:rotateY(-8deg) scale(.88)}.cinematic-phone small{color:#7657e8;font-size:8px;font-weight:900;letter-spacing:.1em}.cinematic-phone p{padding:9px;border-radius:9px;background:#fff;border:1px solid #e6e2eb;font-size:9px;line-height:1.4}.cinematic-phone p.out{margin-left:14px;background:#dcf7d6}.cinematic-phone strong{display:block;margin:35px 0 18px;font-size:22px}.cinematic-phone span{display:block;margin:8px 0;padding:9px;border-radius:8px;background:#eee9ff;color:#4a367d;font-size:9px}.cinematic-cta{position:absolute;z-index:12;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px;background:rgba(18,15,25,.72);color:#fff;text-align:center;pointer-events:auto}.cinematic-cta>p{max-width:780px;margin:0;font-size:clamp(36px,5.6vw,76px);line-height:.94;letter-spacing:-.065em;font-weight:750}.cinematic-cta>a,.cinematic-cta button{padding:14px 17px;border:1px solid #ffffff35;border-radius:11px;background:#fff;color:#1e1927;font:800 11px Inter,Arial,sans-serif;cursor:pointer}.cinematic-cta>div{display:flex;gap:8px}.cinematic-cta button.primary{border-color:#7657e8;background:#7657e8;color:#fff}.cinematic-cta small{color:#b8b0c2;font-size:9px;letter-spacing:.12em;text-transform:uppercase}.cinematic-progress{position:absolute;z-index:15;left:0;right:0;bottom:0;height:3px;background:#7657e8;transform:scaleX(0);transform-origin:left}.cinematic-controls{position:absolute;z-index:16;right:12px;bottom:12px;display:flex;gap:6px;pointer-events:auto}.cinematic-controls button{min-width:32px;height:32px;padding:0 9px;border:1px solid #ffffff45;border-radius:9px;background:#1f1a2ddd;color:#fff;font:800 10px Inter,Arial,sans-serif}.cinematic-controls button.cinematic-resume{padding:0 12px}.demo-embed.is-exploring .cinematic-v2{display:none}.demo-embed.is-exploring .workspace{transform:none!important;filter:none!important;opacity:1!important}.demo-embed.is-exploring .sidebar{opacity:1!important;transform:none!important}@keyframes cinematicCaptionIn{from{opacity:0;transform:translateY(-42%)}to{opacity:1}}@keyframes cinematicObjectIn{from{opacity:0;transform:translateY(15px) scale(.97)}to{opacity:1}}@keyframes cinematicPulse{0%,100%{box-shadow:0 0 0 0 #7657e844}50%{box-shadow:0 0 0 12px #7657e800}}@media(max-width:800px){.cinematic-caption{width:auto;left:14px!important;right:14px!important;top:auto!important;bottom:75px!important;transform:none!important;padding:13px 15px;font-size:22px}.cinematic-caption.is-top{white-space:normal;text-align:center}.cinematic-spotlight{border-radius:14px}.cinematic-event{right:12px;top:15px;width:70%}.cinematic-bubbles{left:8%;top:24%;width:78%}.cinematic-data{right:6%;top:19%;width:61%}.cinematic-priority{right:8%;top:21%;width:57%}.cinematic-appointment{left:12%;top:27%;width:74%}.cinematic-followup{left:9%;top:25%;width:76%}.cinematic-phone{top:18%;width:35%;min-height:42%}.cinematic-phone.left{left:3%}.cinematic-phone.right{right:3%}.cinematic-cta{padding:24px 18px}.cinematic-cta>p{font-size:38px}.cinematic-vignette{opacity:.18}}@media(prefers-reduced-motion:reduce){.demo-embed .workspace,.cinematic-spotlight,.demo-embed .sidebar{transition:opacity .3s ease!important;transform:none!important}.cinematic-story>*,.cinematic-caption{animation:none!important}}
.cinematic-v2,.cinematic-v2 button,.cinematic-v2 a{font-family:Inter,Arial,sans-serif}.cinematic-caption{font-size:clamp(28px,3vw,44px);font-weight:750}
.demo-embed[data-cinematic-scene="conversation"] .messages{opacity:.12;filter:blur(1px);transition:opacity .35s,filter .35s}.demo-embed[data-cinematic-scene="extraction"] .messages{opacity:.38;transition:opacity .35s}.demo-embed[data-cinematic-scene="extraction"] .lead-panel{opacity:.24;transition:opacity .35s}

/* Stable cinematic framing: the interface remains readable at every player size. */
.cinematic-caption{isolation:isolate;background:#0e0c14;color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 48px rgba(0,0,0,.42);text-shadow:none;backdrop-filter:blur(12px)}
.cinematic-caption.is-left,.cinematic-caption.is-right,.cinematic-caption.is-top{left:22px;right:auto;top:auto;bottom:56px;width:min(42%,520px);max-width:calc(100% - 130px);padding:14px 17px;transform:none;white-space:normal;text-align:left;font-size:clamp(18px,2.15vw,32px)}
.cinematic-spotlight{box-shadow:0 0 0 200vmax rgba(16,13,25,.12),0 18px 55px rgba(58,34,126,.14)}
.cinematic-vignette{opacity:.16}
.demo-embed:not(.is-exploring)[data-cinematic-scene="conversation"] .sidebar,.demo-embed:not(.is-exploring)[data-cinematic-scene="extraction"] .sidebar,.demo-embed:not(.is-exploring)[data-cinematic-scene="qualification"] .sidebar,.demo-embed:not(.is-exploring)[data-cinematic-scene="schedule"] .sidebar,.demo-embed:not(.is-exploring)[data-cinematic-scene="followup"] .sidebar{opacity:.42;transform:translateX(-6px)}
.demo-embed[data-cinematic-scene="conversation"] .messages{opacity:.5;filter:none}
.demo-embed[data-cinematic-scene="extraction"] .messages{opacity:.62;filter:none}
.demo-embed[data-cinematic-scene="extraction"] .lead-panel{opacity:.52}
.cinematic-story.has-anchor>*{position:absolute!important;margin:0!important;max-width:72%!important;transition:left .55s cubic-bezier(.22,1,.36,1),top .55s cubic-bezier(.22,1,.36,1),width .55s cubic-bezier(.22,1,.36,1)}
.cinematic-story.has-anchor.point-center>*{left:var(--anchor-center-x)!important;top:var(--anchor-center-y)!important;width:var(--anchor-width)!important;transform:translate(-50%,-50%)!important}
.cinematic-story.has-anchor.point-left>*{left:var(--anchor-left)!important;right:auto!important;top:var(--anchor-center-y)!important;width:min(31%,380px)!important;transform:translate(-104%,-50%)!important}
.cinematic-story.has-anchor.point-right>*{left:var(--anchor-right)!important;right:auto!important;top:var(--anchor-center-y)!important;width:min(31%,380px)!important;transform:translate(4%,-50%)!important}
.cinematic-story.has-anchor.point-top>*{left:var(--anchor-center-x)!important;top:var(--anchor-top)!important;width:var(--anchor-width)!important;transform:translate(-50%,-104%)!important}
.cinematic-story.has-anchor.point-bottom>*{left:var(--anchor-center-x)!important;top:var(--anchor-bottom)!important;width:var(--anchor-width)!important;transform:translate(-50%,4%)!important}
.story-conversation.has-anchor .cinematic-bubbles,.story-overview.has-anchor .cinematic-sequence,.story-channels.has-anchor .cinematic-channels{height:var(--anchor-height)!important}
.story-conversation.has-anchor .cinematic-bubbles{justify-content:center}
.story-overview.has-anchor .cinematic-sequence,.story-channels.has-anchor .cinematic-channels{inset:auto!important}
@media(max-width:800px){.cinematic-caption.is-left,.cinematic-caption.is-right,.cinematic-caption.is-top{left:12px;right:12px;bottom:54px;width:auto;max-width:none;padding:11px 13px;font-size:18px;line-height:1.08;background:#0e0c14}.cinematic-vignette{opacity:.1}}