/* Interactive product-flow composition for the homepage. */
body { overflow-x: clip; }
.agency-portfolio-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 760px) { .agency-portfolio-grid { grid-template-columns: 1fr; gap: 32px; } }
/* Rich marketing specimens: these intentionally reuse the product's card,
   segmented control, table and status vocabulary rather than generic charts. */
.flow-panel-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:11px; font-weight:600; color:var(--text-primary); }
.flow-period { color:var(--text-tertiary); font:10px var(--font-mono); font-weight:400; }
.seg-detail-row { display:flex; gap:10px; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid var(--border-subtle); color:var(--text-tertiary); font-size:10px; }
.seg-detail-row b { display:block; color:var(--text-primary); font:500 11px var(--font-mono); margin-top:2px; }.seg-detail-row .is-positive { color:var(--success); font-weight:600; align-self:center; }
.audit-meta { display:flex; align-items:center; gap:8px; margin:-3px 0 10px; color:var(--text-tertiary); font-size:10px; }.audit-meta b { margin-left:auto; font:500 10px var(--font-mono); }.audit-progress { width:70px; height:4px; border-radius:3px; background:var(--border-subtle); overflow:hidden; }.audit-progress i { display:block; width:100%; height:100%; background:var(--success); }
.agent-avatar { flex:none; width:18px; height:18px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; background:var(--primary-dim); color:var(--primary); font:600 8px var(--font-mono); }

.specimen-page-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:14px; }.specimen-page-head b { display:block; font-size:13px; }.specimen-page-head small { display:block; margin-top:2px; color:var(--text-tertiary); font-size:10px; }.specimen-page-head>span { color:var(--text-secondary); border:1px solid var(--border-subtle); padding:5px 8px; border-radius:7px; font:10px var(--font-mono); white-space:nowrap; }
.analytics-specimen,.audit-specimen,.agent-specimen,.impact-specimen { min-height:334px; }.analytics-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:13px; }.analytics-stats>div { padding:10px; border:1px solid var(--border-subtle); border-radius:9px; }.analytics-stats small,.impact-results small { display:block; color:var(--text-tertiary); font-size:9px; }.analytics-stats b { display:block; margin-top:3px; font:500 14px var(--font-mono); letter-spacing:-.04em; }.analytics-stats em { display:block; margin-top:3px; color:var(--success); font:9px var(--font-mono); font-style:normal; }.analytics-stats .is-warn { color:var(--warning); }
.analytics-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; color:var(--text-tertiary); font:10px var(--font-mono); }.analytics-toolbar .seg-tabs { margin:0; gap:2px; flex-wrap:nowrap; }.analytics-toolbar .seg-tab { padding:5px 7px; white-space:nowrap; }.analytics-table { border:1px solid var(--border-subtle); border-radius:9px; overflow:hidden; }.analytics-table>div { display:grid; grid-template-columns:1.4fr 1fr .75fr 1fr; gap:8px; align-items:center; min-width:0; padding:8px 10px; border-bottom:1px solid var(--border-subtle); font-size:10px; }.analytics-table>div:last-child { border:0; }.analytics-table>div>*:not(:first-child) { text-align:right; font:500 10px var(--font-mono); }.analytics-table-head { color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.04em; font-size:8px !important; }.analytics-table-head>*:not(:first-child) { font:inherit !important; }.analytics-table b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.audit-overview { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:12px; }.audit-overview>span { padding:8px; border:1px solid var(--border-subtle); border-radius:8px; text-align:center; color:var(--text-tertiary); font-size:9px; }.audit-overview b { display:block; color:var(--text-primary); font:500 13px var(--font-mono); }.audit-overview small { display:block; color:var(--text-tertiary); font-size:9px; line-height:1.2; }.audit-overview .audit-state { display:flex; align-items:center; justify-content:center; color:var(--success); font-weight:600; background:var(--success-dim); border-color:transparent; }.audit-checks { border:1px solid var(--border-subtle); border-radius:9px; overflow:hidden; }.audit-checks>div { display:grid; grid-template-columns:16px 1fr auto; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--border-subtle); font-size:10px; }.audit-checks>div:last-child{border:0}.check-icon{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}.check-icon.ok{background:var(--success-dim);color:var(--success)}.check-icon.warn{background:var(--warning-dim);color:var(--warning)}.check-icon.danger{background:var(--danger-dim);color:var(--danger)}.check-icon.ai{background:var(--primary-dim);color:var(--primary)}.audit-checks small{color:var(--text-tertiary);font-size:9px}.audit-verdict{margin-top:10px;padding:9px 10px;border-radius:8px;background:var(--primary-dim)}.audit-verdict span{font:600 9px var(--font-mono);color:var(--primary);text-transform:uppercase}.audit-verdict p{margin-top:3px;color:var(--text-secondary);font-size:10px;line-height:1.4}
.agent-message { display:flex; gap:8px; align-items:flex-start; padding:9px 10px; border-radius:9px; background:var(--surface-hover); font-size:10px; }.agent-message p{line-height:1.45}.agent-run{display:flex;flex-direction:column;gap:6px;margin:12px 0}.agent-run>div{display:grid;grid-template-columns:1fr auto 16px;gap:8px;align-items:center;color:var(--text-secondary);font-size:10px}.agent-run b{color:var(--text-primary);font:500 10px var(--font-mono)}.agent-run i{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--success-dim);color:var(--success);font-style:normal;font-size:10px}.agent-plan{border:1px solid var(--border-subtle);border-radius:9px;overflow:hidden}.agent-plan>div{display:grid;grid-template-columns:1.2fr .8fr .9fr;gap:8px;padding:7px 10px;border-bottom:1px solid var(--border-subtle);font-size:9px}.agent-plan .agent-plan-head{display:flex;justify-content:space-between;align-items:center}.agent-plan-head b{font-size:10px}.agent-plan-head span{color:var(--text-tertiary);font-size:9px}.agent-plan i{color:var(--text-tertiary);font-style:normal;font-family:var(--font-mono)}.agent-plan>div:not(.agent-plan-head)>b{font:500 9px var(--font-mono);color:var(--success)}.agent-plan button{margin:8px 10px;border:0;border-radius:999px;background:var(--primary);color:var(--primary-ink);padding:6px 9px;font:600 9px var(--font-sans)}
.impact-applied{color:var(--success)!important;background:var(--success-dim);border-color:transparent!important}.impact-chart{position:relative;height:156px;margin:3px 0 10px;padding-left:37px}.impact-axis{position:absolute;left:0;top:12px;bottom:22px;display:flex;flex-direction:column;justify-content:space-between;color:var(--text-tertiary);font:8px var(--font-mono)}.impact-chart svg{width:100%;height:132px}.impact-chart svg path:first-child{stroke:var(--border-subtle);stroke-width:1}.impact-line-before,.impact-line-after{fill:none;stroke-width:3;stroke-linecap:round}.impact-line-before{stroke:var(--warning)}.impact-line-after{stroke:var(--success)}.impact-chart line{stroke:var(--primary-line);stroke-dasharray:3 3}.impact-chart circle{fill:var(--primary)}.impact-marker{position:absolute;left:50%;bottom:0;translate:-39%;color:var(--text-tertiary);font-size:8px;line-height:1.35;white-space:nowrap}.impact-marker b{color:var(--primary);font:500 8px var(--font-mono)}.impact-results{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.impact-results>div{padding:8px;border-top:1px solid var(--border-subtle)}.impact-results b{display:block;margin-top:2px;font:500 13px var(--font-mono);letter-spacing:-.04em}.impact-results>div:nth-child(2) b,.impact-results>div:nth-child(3) b{color:var(--success)}.impact-results span{display:block;margin-top:1px;color:var(--text-tertiary);font-size:9px}
.console-context{display:flex;gap:8px;align-items:center;padding:10px 18px;border-bottom:1px solid var(--border-subtle);font-size:10px;color:var(--text-tertiary)}.console-context span:last-child{margin-left:auto;font-family:var(--font-mono)}.context-dot,.status-dot{width:7px;height:7px;border-radius:50%;background:var(--yandex);flex:none}.console-evidence{background:var(--surface-hover)}
.portfolio-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:var(--text-tertiary);font:10px var(--font-mono)}.portfolio-toolbar .seg-tab{padding:5px 8px}.portfolio-table{border:1px solid var(--border-subtle);border-radius:9px;overflow:hidden}.portfolio-table>div{display:grid;grid-template-columns:1.05fr .9fr 1fr .9fr;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--border-subtle);font-size:10px}.portfolio-table>div:last-child{border:0}.portfolio-table>div:first-child{color:var(--text-tertiary);font-size:8px;text-transform:uppercase;letter-spacing:.04em}.portfolio-table>div>b:not(:first-child){text-align:right;font:500 10px var(--font-mono)}.portfolio-table i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}.p-y{background:var(--yandex)}.p-v{background:var(--vk)}.p-g{background:var(--google)}.portfolio-foot{display:flex;align-items:center;gap:7px;margin-top:10px;color:var(--text-tertiary);font-size:9px}
@media(max-width:560px){.analytics-toolbar{align-items:flex-start;flex-direction:column}.analytics-toolbar .seg-tabs{overflow:auto;max-width:100%}.analytics-stats{gap:4px}.analytics-stats>div{padding:7px}.analytics-stats b{font-size:11px}.analytics-table>div{grid-template-columns:1.25fr .9fr .5fr .85fr;padding:7px}.audit-overview{gap:3px}.audit-overview>span{padding:6px}.impact-results{gap:3px}.impact-results>div{padding:6px}.impact-results b{font-size:11px}.console-context span:last-child{display:none}}
/* ==========================================================================
   Hero flow — a single linear product story (connect → analyse → audit → act),
   not a carousel. JavaScript owns the step timer; CSS only communicates its
   progress. This keeps the narrative moving if a browser throttles or pauses
   decorative animation.
   ========================================================================== */
.flow {
  --step-ms: 5600ms;
  position: relative; z-index: 1;
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-card);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.04), 0 30px 60px -30px oklch(0 0 0 / 0.22);
  overflow: hidden;
}

/* Hero glow gives the product window subtle depth without adding a separate
   decorative object around it. */
.hero-visual { position: relative; }
.hero-visual::before {
  content: ""; position: absolute; z-index: 0;
  inset: -12% 0;
  background:
    radial-gradient(46% 60% at 76% 18%, oklch(0.52 0.19 258 / 0.16), transparent 70%),
    radial-gradient(38% 46% at 12% 86%, oklch(0.5 0.14 150 / 0.10), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}
@media (max-width: 1040px) {
  /* The glow is decorative at compact breakpoints; clip it so its blurred
     bounds cannot create a horizontal page scroll area. */
  .hero-visual { overflow: clip; }
}

/* platform strip — two labelled groups (ad systems / analytics) separated by a
   vertical divider; each platform is its real logo lockup, normalised to one
   shared height (see .integ-logo in main.css) rather than a coloured tile */
.platform-strip { display: flex; align-items: stretch; justify-content: flex-start; gap: clamp(20px, 4vw, 36px); flex-wrap: wrap; }
.platform-group { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--sp-5); }
.platform-group-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary); opacity: 0.4; white-space: nowrap; }
.platform-group-icons { display: flex; align-items: center; justify-content: flex-start; gap: clamp(12px, 1.6vw, 20px); flex-wrap: wrap; row-gap: var(--sp-3); max-width: 100%; }
.platform-strip .integ-logo { height: 26px; margin-bottom: 0; }
.platform-strip .integ-logo img { height: 24px; }
.platform-strip .integ-logo--calltouch img { height: calc(24px * 1.1); }
.platform-strip .integ-logo--google img    { height: calc(24px * 1.05); }
.platform-divider { width: 1px; align-self: stretch; flex: none; background: linear-gradient(to bottom, transparent, var(--border-default) 15%, var(--border-default) 85%, transparent); }
@media (max-width: 720px) { .platform-strip { flex-direction: column; gap: var(--sp-8); } .platform-divider { display: none; } }
@media (max-width: 420px) {
  .platform-strip .integ-logo { height: 22px; }
  .platform-strip .integ-logo img { height: 20px; }
  .platform-strip .integ-logo--calltouch img { height: calc(20px * 1.1); }
  .platform-strip .integ-logo--google img    { height: calc(20px * 1.05); }
}

/* "Как это работает" — same flow engine as the hero (tabs + progress-bar
   timer), second instance, different content per step so it doesn't just
   repeat the hero demo: OAuth consent → audit verdicts → confirm diff →
   history entry. See generalised setupFlow() below. */
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 960px) { .how-grid { grid-template-columns: 1fr; } .how-visual { order: -1; } }
.step[data-how-step] { transition: opacity 260ms var(--ease-out-expo); }
.how-grid .step[data-how-step] .step-num { transition: color 260ms var(--ease-out-expo); }
.how-grid .step[data-how-step].is-active .step-num { color: var(--primary); }
.how-grid .step[data-how-step]:not(.is-active) { opacity: 0.55; }
.how-visual .flow-stage { height: 268px; }
.how-visual .flow-panel { padding: 16px 18px 18px; }
.oauth-mock { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 6px; }
.oauth-mock .oauth-mark { width: 40px; height: 40px; border-radius: 11px; background: var(--integ-yandex); color: #fff; font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.oauth-mock h5 { font-size: 0.875rem; font-weight: 620; margin-bottom: 4px; }
.oauth-mock p { font-size: 0.75rem; color: var(--text-secondary); max-width: 30ch; margin-bottom: 14px; }
.oauth-scopes { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.oauth-scopes .sc { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text-secondary); background: var(--surface-hover); border-radius: 8px; padding: 7px 10px; text-align: left; }
.oauth-actions { display: flex; gap: 8px; width: 100%; }
.oauth-actions .btn { flex: 1; }
.flow-chrome { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 15px; border-bottom: 1px solid var(--border-subtle); }
.flow-chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-default); }
.flow-chrome .chrome-label { margin-left: 8px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-tertiary); }

.flow-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 12px 15px 2px; }
.flow-tab {
  display: flex; flex-direction: column; gap: 7px; align-items: stretch;
  background: none; border: none; padding: 6px 0 0; cursor: pointer; font: inherit; text-align: left;
  color: var(--text-tertiary); font-size: 0.75rem; line-height: 1.25; min-height: 44px;
}
.flow-tab .tab-label { transition: color 220ms var(--ease-out-expo); }
.flow-tab[aria-selected="true"] { color: var(--primary); }
.flow-tab[aria-selected="true"] .tab-label { font-weight: 620; }
.flow-tab.is-done { color: var(--text-secondary); }
.flow-track { height: 3px; border-radius: 3px; background: var(--border-subtle); overflow: hidden; }
.flow-fill { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 3px; }
.flow-tab.is-done .flow-fill { width: 100%; }

.flow-stage { position: relative; height: 328px; }
.flow-panel {
  position: absolute; inset: 0; padding: 18px 20px 20px;
  opacity: 0; visibility: hidden;
  transition: opacity 340ms var(--ease-out-expo), visibility 0s linear 340ms;
}
.flow-panel.is-active { opacity: 1; visibility: visible; transition: opacity 340ms var(--ease-out-expo), visibility 0s; }
@media (max-width: 460px) { .flow-stage { height: 340px; } .flow-rail { grid-template-columns: repeat(2, 1fr); row-gap: 10px; } }

/* --- step 1: a real connection flow, not a pre-connected account list --- */
.connect-flow { display:flex; flex-direction:column; gap:7px; }
.connect-step { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:9px; align-items:center; min-width:0; }
.connect-number { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--primary-dim); color:var(--primary); font:600 10px var(--font-mono); }
.connect-step b { display:block; color:var(--text-primary); font-size:11px; line-height:1.2; }
.connect-note { display:block; margin-top:2px; color:var(--text-tertiary); font-size:9px; line-height:1.35; }
.connect-link { width:1px; height:6px; margin-left:10px; background:var(--border-default); }
.platform-choice { display:flex; align-items:center; gap:6px; margin-top:5px; min-height:25px; padding:5px 7px; border:1px solid var(--primary-line); border-radius:7px; background:var(--primary-dim); color:var(--text-primary); font:500 10px var(--font-mono); }
.platform-choice .dot { width:7px; height:7px; border-radius:50%; flex:none; }
.platform-choice-state { margin-left:auto; color:var(--primary); font:600 9px var(--font-sans); }
.connect-action { align-self:center; border-radius:var(--r-pill); background:var(--primary); color:var(--primary-ink); padding:6px 8px; font:600 9px var(--font-sans); white-space:nowrap; }
.connect-step--accounts { align-items:start; }
.client-checks { display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
.client-checks span { border-radius:var(--r-pill); background:var(--success-dim); color:var(--success); padding:3px 6px; font-size:9px; white-space:nowrap; }
.connect-result { display:flex; align-items:center; gap:6px; margin-top:10px; padding:9px 10px; border-radius:var(--r-sm); background:var(--success-dim); color:var(--success); font-size:10px; }
.connect-result strong { color:var(--text-primary); font-size:10px; }
.connect-result span:last-child { margin-left:auto; color:var(--text-secondary); font:9px var(--font-mono); }

/* --- step 2: segmentation --- */
.seg-switch { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface-hover); border-radius: 999px; padding: 3px; margin-bottom: 18px; }
.seg-switch span { position: relative; z-index: 1; text-align: center; font-size: 0.75rem; padding: 5px 0; color: var(--text-secondary); }
/* Must out-specify `.seg-switch span` above, or the thumb inherits
   position:relative, rejoins the grid flow and wraps the labels. */
.seg-switch .seg-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); background: var(--surface-card); border-radius: 999px; box-shadow: 0 1px 3px oklch(0 0 0 / 0.1); }
.seg-chart { display: flex; align-items: flex-end; gap: 10px; height: 104px; }
.seg-chart .bar { flex: 1; height: 0; border-radius: 5px 5px 2px 2px; }
.seg-labels { position: relative; height: 15px; margin-top: 9px; }
.seg-label-set { position: absolute; inset: 0; display: flex; gap: 10px; opacity: 0; }
.seg-label-set span { flex: 1; text-align: center; font-size: 0.6875rem; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-foot { display: flex; gap: 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.seg-foot .v { display: block; font-family: var(--font-mono); font-size: 1rem; font-weight: 500; }
.seg-foot .l { font-size: 0.6875rem; color: var(--text-tertiary); margin-top: 2px; }

/* --- step 3: audit --- */
.audit-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.audit-head .t { font-size: 0.8438rem; font-weight: 600; }
.ai-chip { font-family: var(--font-mono); font-size: 0.6875rem; background: var(--primary-dim); color: var(--primary); padding: 3px 8px; border-radius: 6px; }
.audit-scan { position: relative; overflow: hidden; }
.audit-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: 0.8125rem; }
.audit-line .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-line .verdict { flex: none; opacity: 0; }
.audit-beam { position: absolute; left: -20px; right: -20px; top: 0; height: 34px; opacity: 0; background: linear-gradient(oklch(0.52 0.19 258 / 0), oklch(0.52 0.19 258 / 0.09), oklch(0.52 0.19 258 / 0)); pointer-events: none; }
.audit-sum { margin-top: 14px; font-size: 0.8125rem; color: var(--text-secondary); opacity: 0; }
.audit-sum strong { color: var(--text-primary); }
.audit-to-agent { display:flex; justify-content:space-between; align-items:center; margin-top:9px; padding-top:8px; border-top:1px solid var(--border-subtle); color:var(--primary); font-size:10px; font-weight:600; opacity:0; }
.audit-to-agent span:first-child { border-radius:var(--r-pill); background:var(--warning-dim); color:var(--warning); padding:3px 6px; font:600 9px var(--font-mono); }

/* --- step 4: the agent opens a chat and prepares a requested report --- */
.agent-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.agent-head .t { font-size: 0.8438rem; font-weight: 600; }
.agent-chat { display:flex; flex-direction:column; gap:9px; height:calc(100% - 28px); }
.chat-bubble { display: flex; align-items: flex-start; gap: 8px; max-width: 88%; padding: 9px 10px; border-radius: 10px; font-size: 0.75rem; line-height: 1.42; opacity: 0; }
.chat-bubble-user { align-self: flex-end; margin-left: auto; background: var(--primary); color: var(--primary-ink); border-top-right-radius: 3px; }
.chat-status { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: 0.6875rem; line-height: 1.35; opacity: 0; }
.chat-status span { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.chat-bubble-agent { background:var(--surface-hover); color:var(--text-primary); border-top-left-radius:3px; }
.chat-ready { margin-top:auto; }

@media (prefers-reduced-motion: no-preference) {
  .flow-tab[aria-selected="true"] .flow-fill { animation: flow-fill var(--step-ms) linear forwards; }
  @keyframes flow-fill { from { width: 0; } to { width: 100%; } }

  /* step 1 */
  .is-active .connect-step { animation:rise-in 360ms var(--ease-out-expo) backwards; }
  .is-active .connect-step:nth-of-type(1) { animation-delay:80ms; }
  .is-active .connect-step:nth-of-type(3) { animation-delay:280ms; }
  .is-active .connect-step:nth-of-type(5) { animation-delay:480ms; }
  .is-active .connect-result { animation:rise-in 420ms var(--ease-out-expo) 720ms forwards; }
  @keyframes rise-in { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }

  /* step 2 — the same dataset re-groups three times */
  .is-active .seg-thumb { animation: seg-move var(--step-ms) var(--ease-out-expo) forwards; }
  @keyframes seg-move { 0%, 28% { transform: translateX(0); } 34%, 62% { transform: translateX(100%); } 68%, 100% { transform: translateX(200%); } }
  .is-active .seg-chart .bar { animation-duration: var(--step-ms); animation-timing-function: var(--ease-out-expo); animation-fill-mode: forwards; }
  .is-active .bar:nth-child(1) { animation-name: seg-b1; }
  .is-active .bar:nth-child(2) { animation-name: seg-b2; }
  .is-active .bar:nth-child(3) { animation-name: seg-b3; }
  .is-active .bar:nth-child(4) { animation-name: seg-b4; }
  .is-active .bar:nth-child(5) { animation-name: seg-b5; }
  @keyframes seg-b1 { 0% { height: 0; } 9%, 28% { height: 54%; } 34%, 62% { height: 72%; } 68%, 100% { height: 36%; } }
  @keyframes seg-b2 { 0% { height: 0; } 11%, 28% { height: 79%; } 34%, 62% { height: 45%; } 68%, 100% { height: 63%; } }
  @keyframes seg-b3 { 0% { height: 0; } 13%, 28% { height: 36%; } 34%, 62% { height: 86%; } 68%, 100% { height: 79%; } }
  @keyframes seg-b4 { 0% { height: 0; } 15%, 28% { height: 64%; } 34%, 62% { height: 31%; } 68%, 100% { height: 47%; } }
  @keyframes seg-b5 { 0% { height: 0; } 17%, 28% { height: 46%; } 34%, 62% { height: 59%; } 68%, 100% { height: 89%; } }
  .is-active .seg-label-set { animation-duration: var(--step-ms); animation-timing-function: linear; animation-fill-mode: forwards; }
  .is-active .seg-label-set:nth-of-type(1) { animation-name: seg-l1; }
  .is-active .seg-label-set:nth-of-type(2) { animation-name: seg-l2; }
  .is-active .seg-label-set:nth-of-type(3) { animation-name: seg-l3; }
  @keyframes seg-l1 { 0%, 28% { opacity: 1; } 33%, 100% { opacity: 0; } }
  @keyframes seg-l2 { 0%, 29% { opacity: 0; } 34%, 62% { opacity: 1; } 67%, 100% { opacity: 0; } }
  @keyframes seg-l3 { 0%, 63% { opacity: 0; } 68%, 100% { opacity: 1; } }
  .is-active .seg-foot { animation: rise-in 500ms var(--ease-out-expo) 600ms backwards; }

  /* step 3 — verdicts resolve one by one as the beam passes */
  .is-active .audit-beam { animation: beam-sweep 2600ms var(--ease-out-expo) 200ms forwards; }
  @keyframes beam-sweep { 0% { opacity: 0; transform: translateY(-10px); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(180px); } }
  .is-active .audit-line { animation: rise-in 380ms var(--ease-out-expo) backwards; }
  .is-active .audit-line:nth-of-type(1) { animation-delay: 60ms; }
  .is-active .audit-line:nth-of-type(2) { animation-delay: 130ms; }
  .is-active .audit-line:nth-of-type(3) { animation-delay: 200ms; }
  .is-active .audit-line:nth-of-type(4) { animation-delay: 270ms; }
  .is-active .audit-line:nth-of-type(5) { animation-delay: 340ms; }
  .is-active .verdict { animation: verdict-in 420ms var(--ease-out-expo) backwards; }
  .is-active .audit-line:nth-of-type(1) .verdict { animation-delay: 700ms; }
  .is-active .audit-line:nth-of-type(2) .verdict { animation-delay: 1150ms; }
  .is-active .audit-line:nth-of-type(3) .verdict { animation-delay: 1600ms; }
  .is-active .audit-line:nth-of-type(4) .verdict { animation-delay: 2050ms; }
  .is-active .audit-line:nth-of-type(5) .verdict { animation-delay: 2600ms; }
  @keyframes verdict-in { from { opacity: 0; transform: translateX(7px); } to { opacity: 1; transform: none; } }
  .is-active .audit-sum { animation: rise-in 460ms var(--ease-out-expo) 3100ms forwards; }
  .is-active .audit-to-agent { animation:rise-in 420ms var(--ease-out-expo) 3600ms forwards; }

  /* step 4 — the chat opens, syncs the data and lands on a ready report */
  .is-active .chat-bubble-agent:not(.chat-ready) { animation:rise-in 420ms var(--ease-out-expo) 120ms forwards; }
  .is-active .chat-bubble-user { animation:rise-in 440ms var(--ease-out-expo) 620ms forwards; }
  .is-active .chat-status:nth-of-type(3) { animation:rise-in 360ms var(--ease-out-expo) 1220ms forwards; }
  .is-active .chat-status:nth-of-type(4) { animation:rise-in 360ms var(--ease-out-expo) 1840ms forwards; }
  .is-active .chat-ready { animation:rise-in 420ms var(--ease-out-expo) 2560ms forwards; }
}
@media (prefers-reduced-motion: reduce) {
  /* No autoplay, no motion: every step is reachable by its labelled button,
     and each panel renders its finished state instead of an entrance. */
  .flow-panel { transition: opacity 160ms linear; }
  .flow-tab[aria-selected="true"] .flow-fill { width: 100%; }
  .seg-thumb { transform: translateX(200%); }
  .seg-chart .bar:nth-child(1) { height: 36%; } .seg-chart .bar:nth-child(2) { height: 63%; }
  .seg-chart .bar:nth-child(3) { height: 79%; } .seg-chart .bar:nth-child(4) { height: 47%; }
  .seg-chart .bar:nth-child(5) { height: 89%; }
  .seg-label-set:nth-of-type(3) { opacity: 1; }
  .verdict, .audit-sum, .audit-to-agent, .chat-bubble, .chat-status { opacity: 1; }
  .audit-beam { display: none; }
}

/* Safety net: several reveals sit behind animation delays of up to 3s, and a
   renderer that is never painted (background-tab load, headless screenshot)
   throttles those animations so the content would stay at opacity 0. JS adds
   .is-static whenever the document is hidden, forcing every settled state, and
   removes it on the way back so a real viewer still gets the full sequence. */
.flow.is-static .flow-fill,
.flow.is-static .connect-step, .flow.is-static .connect-result,
.flow.is-static .seg-thumb, .flow.is-static .seg-chart .bar,
.flow.is-static .seg-label-set, .flow.is-static .seg-foot,
.flow.is-static .audit-line, .flow.is-static .verdict, .flow.is-static .audit-sum, .flow.is-static .audit-to-agent,
.flow.is-static .chat-bubble, .flow.is-static .chat-status {
  animation: none;
}
.flow.is-static .connect-step, .flow.is-static .connect-result,
.flow.is-static .seg-foot, .flow.is-static .audit-line, .flow.is-static .verdict,
.flow.is-static .audit-sum, .flow.is-static .audit-to-agent, .flow.is-static .chat-bubble, .flow.is-static .chat-status { opacity: 1; transform: none; }
.flow.is-static .seg-thumb { transform: translateX(200%); }
.flow.is-static .seg-chart .bar:nth-child(1) { height: 36%; }
.flow.is-static .seg-chart .bar:nth-child(2) { height: 63%; }
.flow.is-static .seg-chart .bar:nth-child(3) { height: 79%; }
.flow.is-static .seg-chart .bar:nth-child(4) { height: 47%; }
.flow.is-static .seg-chart .bar:nth-child(5) { height: 89%; }
.flow.is-static .seg-label-set { opacity: 0; }
.flow.is-static .seg-label-set:nth-of-type(3) { opacity: 1; }
.flow.is-static .audit-beam { display: none; }
.flow.is-static .flow-tab[aria-selected="true"] .flow-fill { width: 100%; }
/* Crossfades are throttled too, which would leave the outgoing panel stuck
   visible on top of the incoming one — switch instantly instead. */
.flow.is-static .flow-panel { transition: none; }

/* ==========================================================================
   Hero product demo — one continuous workspace, controlled by the visitor.
   Autoplay only demonstrates the same interactions and loops back cleanly;
   it is not a progress-bar carousel.
   ========================================================================== */
.hero-demo {
  --demo-blue: var(--primary);
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 22px;
  background: var(--surface-card);
  box-shadow: 0 2px 5px oklch(0 0 0 / .05), 0 34px 70px -34px oklch(0 0 0 / .28);
  isolation: isolate;
}
.hero-demo button { font: inherit; }
.hero-demo-bar { height: 48px; display:flex; align-items:center; gap:12px; padding:0 15px; border-bottom:1px solid var(--border-subtle); background:oklch(1 0 0 / .88); }
.hero-demo-brand { display:flex; align-items:center; gap:7px; font-size:11px; }
.hero-demo-mark { display:grid; place-items:center; width:23px; height:23px; border-radius:7px; background:var(--ink); color:white; font:650 11px var(--font-mono); }
.hero-demo-context { display:flex; align-items:center; gap:6px; margin-left:auto; color:var(--text-secondary); font-size:10px; transition:opacity 180ms ease; }
.hero-demo-context .status-dot { width:6px; height:6px; background:var(--success); box-shadow:0 0 0 3px var(--success-dim); }
.hero-demo-replay { width:27px; height:27px; display:grid; place-items:center; border:1px solid var(--border-subtle); border-radius:8px; background:var(--surface-card); color:var(--text-tertiary); cursor:pointer; line-height:1; transition:transform 180ms ease,color 180ms ease,border-color 180ms ease; }
.hero-demo-replay:hover { color:var(--primary); border-color:var(--primary-line); transform:rotate(-28deg); }
.hero-demo-app { display:grid; grid-template-columns:42px minmax(0,1fr); min-height:355px; background:var(--surface-hover); }
.hero-demo-side { display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 7px; border-right:1px solid var(--border-subtle); background:var(--surface-card); }
.hero-demo-side span { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; color:var(--text-tertiary); font:600 12px var(--font-mono); }
.hero-demo-side span.is-active { background:var(--primary-dim); color:var(--primary); }
.hero-demo-side .hero-demo-side-bottom { margin-top:auto; }
.hero-demo-stage { position:relative; overflow:hidden; min-width:0; }
.demo-view { position:absolute; inset:0; padding:17px 18px; opacity:0; visibility:hidden; transform:scale(.972) translateY(7px); transform-origin:50% 50%; transition:opacity 320ms ease,transform 520ms var(--ease-out-expo),visibility 0s linear 520ms; }
.demo-view.is-active { opacity:1; visibility:visible; transform:none; transition:opacity 320ms ease,transform 520ms var(--ease-out-expo),visibility 0s; }
.demo-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; min-height:42px; margin-bottom:12px; }
.demo-head h3 { margin:2px 0 0; color:var(--text-primary); font-size:15px; line-height:1.2; letter-spacing:-.02em; }
.demo-kicker { display:block; color:var(--text-tertiary); font:500 9px var(--font-mono); text-transform:uppercase; letter-spacing:.055em; }
.demo-safe,.demo-date,.demo-audit-score { align-self:center; white-space:nowrap; border:1px solid var(--border-subtle); border-radius:999px; padding:5px 8px; color:var(--text-tertiary); background:var(--surface-card); font:500 8px var(--font-mono); }

/* Connection: a visible cursor demonstrates one-click OAuth, then the result. */
.demo-integrations { display:grid; gap:7px; }
.demo-integration { display:flex; align-items:center; justify-content:space-between; min-height:54px; padding:8px 10px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--surface-card); transition:border-color 220ms ease,box-shadow 220ms ease,transform 220ms ease; }
.demo-platform { display:flex; align-items:center; gap:9px; min-width:0; }
.demo-platform b,.demo-platform small { display:block; }
.demo-platform b { color:var(--text-primary); font-size:10px; }
.demo-platform small { margin-top:2px; color:var(--text-tertiary); font-size:8px; }
.platform-letter { width:28px; height:28px; display:grid; place-items:center; flex:none; border-radius:8px; color:white; font:700 9px var(--font-mono); }
.platform-letter.yandex { background:var(--yandex); }.platform-letter.vk { background:var(--vk); }.platform-letter.google { background:var(--google); }
.demo-integration button,.demo-insight button,.demo-ai-card button { border:0; border-radius:999px; background:var(--primary); color:white; padding:6px 9px; font-size:8px; font-weight:650; }
.demo-oauth { position:absolute; left:50%; top:104px; z-index:4; display:flex; align-items:center; gap:8px; width:214px; padding:10px; border:1px solid var(--border-subtle); border-radius:12px; background:var(--surface-card); box-shadow:var(--sh-2); opacity:0; transform:translate(-50%,10px) scale(.94); }
.demo-oauth-icon { width:25px; height:25px; display:grid; place-items:center; flex:none; border-radius:50%; background:var(--success-dim); color:var(--success); font-weight:750; }
.demo-oauth b,.demo-oauth small { display:block; }.demo-oauth b { font-size:9px; }.demo-oauth small { margin-top:2px; color:var(--text-tertiary); font-size:7px; }
.demo-success { display:flex; align-items:center; gap:8px; margin-top:9px; padding:9px 10px; border-radius:10px; background:var(--success-dim); opacity:0; transform:translateY(8px); }
.demo-success>span { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:var(--surface-card); color:var(--success); font-weight:700; }
.demo-success b,.demo-success small { display:block; }.demo-success b { font-size:9px; }.demo-success small { margin-top:1px; color:var(--text-secondary); font-size:7px; }.demo-success em { margin-left:auto; color:var(--success); font:600 8px var(--font-mono); font-style:normal; }
.demo-cursor { position:absolute; z-index:5; width:22px; height:26px; pointer-events:none; filter:drop-shadow(0 2px 2px oklch(0 0 0 / .25)); opacity:0; }
.demo-cursor svg { width:100%; height:100%; fill:white; stroke:var(--ink); stroke-width:1.7; stroke-linejoin:round; }

/* Portfolio and drill-down share the same table grammar as the product. */
.demo-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:9px; }
.demo-kpis>div { padding:8px 9px; border:1px solid var(--border-subtle); border-radius:9px; background:var(--surface-card); }
.demo-kpis small,.demo-kpis b,.demo-kpis em { display:block; }.demo-kpis small { color:var(--text-tertiary); font-size:7px; }.demo-kpis b { margin-top:3px; font:550 11px var(--font-mono); }.demo-kpis em { margin-top:2px; color:var(--success); font:600 7px var(--font-mono); font-style:normal; }
.demo-table { overflow:hidden; border:1px solid var(--border-subtle); border-radius:10px; background:var(--surface-card); }
.demo-tr { width:100%; display:grid; grid-template-columns:1.55fr .85fr .55fr .75fr; align-items:center; gap:6px; min-height:42px; padding:7px 9px; border:0; border-bottom:1px solid var(--border-subtle); background:transparent; color:var(--text-primary); text-align:left; font-size:8px; }
.demo-tr:last-child { border-bottom:0; }.demo-tr>*:not(:first-child) { text-align:right; font:500 8px var(--font-mono); }.demo-tr>span:first-child { min-width:0; }
.demo-tr b,.demo-tr small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.demo-tr b { font-size:9px; }.demo-tr small { margin:2px 0 0 13px; color:var(--text-tertiary); font-size:7px; }
.demo-tr i { display:inline-block; width:9px; color:var(--text-tertiary); font-style:normal; transition:transform 240ms ease; }.demo-tr .good { color:var(--success); }
.demo-th { min-height:24px; color:var(--text-tertiary); font-size:7px; text-transform:uppercase; letter-spacing:.04em; }
.demo-client-row { cursor:default; }
.demo-callout,.demo-campaign-pop { position:absolute; right:11px; bottom:12px; display:flex; flex-direction:column; gap:2px; padding:8px 10px; border:1px solid var(--primary-line); border-radius:9px; background:var(--surface-card); box-shadow:var(--sh-2); opacity:0; transform:translateY(8px) scale(.95); }
.demo-callout span,.demo-campaign-pop span { color:var(--primary); font:600 7px var(--font-mono); text-transform:uppercase; }.demo-callout b,.demo-campaign-pop b { font-size:8px; }
.demo-back { padding:0; border:0; background:transparent; color:var(--text-tertiary); font-size:8px; }
.demo-chip { display:flex; align-items:center; gap:5px; align-self:center; border-radius:999px; padding:5px 8px; background:var(--danger-dim); color:var(--text-secondary); font-size:8px; }.demo-chip i { width:6px; height:6px; border-radius:50%; background:var(--yandex); }
.demo-filter { display:flex; align-items:center; gap:5px; margin-bottom:9px; color:var(--text-tertiary); font-size:7px; }.demo-filter b { margin-right:auto; color:var(--text-primary); font-size:9px; }.demo-filter span { padding:4px 6px; border:1px solid var(--border-subtle); border-radius:999px; background:var(--surface-card); }
.campaigns-table .demo-tr { min-height:46px; }.demo-tr .state-on,.demo-tr .state-pause { width:7px; height:7px; margin-right:4px; border-radius:50%; }.demo-tr .state-on { background:var(--success); }.demo-tr .state-pause { background:var(--warning); }

/* Analytics draws in instead of swapping a static chart image. */
.demo-segment { display:flex; align-self:center; gap:2px; padding:3px; border-radius:999px; background:var(--surface-card); border:1px solid var(--border-subtle); }
.demo-segment span { padding:4px 6px; border-radius:999px; color:var(--text-tertiary); font-size:7px; }.demo-segment .is-active { background:var(--primary-dim); color:var(--primary); font-weight:650; }
.demo-chart-card { padding:11px 12px 8px; border:1px solid var(--border-subtle); border-radius:12px; background:var(--surface-card); }
.demo-chart-title { display:flex; justify-content:space-between; align-items:flex-start; }.demo-chart-title small,.demo-chart-title b,.demo-chart-title em { display:block; }.demo-chart-title small { color:var(--text-tertiary); font-size:7px; }.demo-chart-title b { margin-top:2px; font:550 14px var(--font-mono); }.demo-chart-title em { margin-top:1px; color:var(--success); font:600 7px var(--font-mono); font-style:normal; }.demo-chart-title>span { color:var(--text-tertiary); font-size:7px; }
.demo-chart { position:relative; height:157px; margin:0 0 0 27px; }.demo-chart svg { width:100%; height:148px; overflow:visible; }.demo-chart .grid { fill:none; stroke:var(--border-subtle); stroke-width:1; }.chart-area { fill:var(--primary-dim); opacity:0; }.chart-line { fill:none; stroke:var(--primary); stroke-width:3; stroke-linecap:round; stroke-dasharray:700; stroke-dashoffset:700; }.demo-chart circle { fill:var(--surface-card); stroke:var(--primary); stroke-width:3; opacity:0; }
.demo-chart .axis { position:absolute; left:-29px; color:var(--text-tertiary); font:7px var(--font-mono); }.demo-chart .a1 { top:12px; }.demo-chart .a2 { top:65px; }.demo-chart .a3 { top:118px; }
.demo-tooltip { position:absolute; right:11%; top:35px; padding:7px 8px; border:1px solid var(--border-subtle); border-radius:8px; background:var(--surface-card); box-shadow:var(--sh-1); opacity:0; transform:translateY(7px) scale(.94); }.demo-tooltip small,.demo-tooltip b,.demo-tooltip em { display:block; }.demo-tooltip small { color:var(--text-tertiary); font-size:6px; }.demo-tooltip b { margin-top:2px; font:600 9px var(--font-mono); }.demo-tooltip em { margin-top:2px; color:var(--success); font:600 6px var(--font-mono); font-style:normal; }
.demo-insight { display:flex; align-items:center; gap:8px; margin-top:8px; padding:8px 9px; border-radius:10px; background:var(--primary-dim); }.demo-insight>span { width:22px; height:22px; display:grid; place-items:center; flex:none; border-radius:7px; background:var(--surface-card); color:var(--primary); }.demo-insight b,.demo-insight small { display:block; }.demo-insight b { font-size:8px; }.demo-insight small { margin-top:2px; color:var(--text-secondary); font-size:7px; }.demo-insight button { margin-left:auto; }

/* Audit lands on the concrete business effect and the confirmation boundary. */
.demo-audit-layout { display:grid; grid-template-columns:1.2fr .9fr; gap:9px; }
.demo-audit-list { overflow:hidden; border:1px solid var(--border-subtle); border-radius:11px; background:var(--surface-card); }
.demo-audit-list>div { display:grid; grid-template-columns:20px 1fr auto; gap:8px; align-items:center; min-height:63px; padding:8px 9px; border-bottom:1px solid var(--border-subtle); opacity:0; transform:translateX(-8px); }.demo-audit-list>div:last-child { border:0; }
.demo-audit-list>div>span { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; font-size:8px; font-weight:700; }.demo-audit-list b,.demo-audit-list small { display:block; }.demo-audit-list b { font-size:8px; }.demo-audit-list small { margin-top:2px; color:var(--text-tertiary); font-size:7px; line-height:1.3; }.demo-audit-list em { border-radius:999px; padding:3px 5px; font:600 6px var(--font-mono); font-style:normal; }
.demo-audit-list .is-ok>span,.demo-audit-list .is-ok em { color:var(--success); background:var(--success-dim); }.demo-audit-list .is-warning>span,.demo-audit-list .is-warning em { color:var(--warning); background:var(--warning-dim); }.demo-audit-list .is-ai>span,.demo-audit-list .is-ai em { color:var(--primary); background:var(--primary-dim); }
.demo-ai-card { padding:12px; border:1px solid var(--primary-line); border-radius:11px; background:linear-gradient(145deg,var(--surface-card),var(--primary-dim)); opacity:0; transform:translateY(9px) scale(.97); }.demo-ai-label { color:var(--primary); font:650 7px var(--font-mono); text-transform:uppercase; }.demo-ai-card h4 { margin:8px 0 6px; font-size:12px; line-height:1.25; }.demo-ai-card p { color:var(--text-secondary); font-size:8px; line-height:1.45; }.demo-ai-card>div { display:flex; align-items:center; gap:7px; margin-top:12px; }.demo-ai-card small { color:var(--text-tertiary); font-size:6px; }
.demo-loop-note { display:flex; align-items:center; gap:6px; margin-top:9px; color:var(--text-secondary); font-size:8px; opacity:0; }.demo-loop-note span { color:var(--success); }

/* The controls are the narrative: no progress bars, every state is direct. */
.hero-demo-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; padding:8px; border-top:1px solid var(--border-subtle); background:var(--surface-card); }
.hero-demo-steps button { position:relative; display:grid; grid-template-columns:20px 1fr; grid-template-rows:auto auto; column-gap:6px; align-items:center; min-width:0; padding:7px 6px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--text-tertiary); text-align:left; cursor:pointer; transition:background 180ms ease,border-color 180ms ease,transform 180ms ease,color 180ms ease; }
.hero-demo-steps button:hover { background:var(--surface-hover); color:var(--text-primary); }.hero-demo-steps button:active { transform:scale(.98); }
.hero-demo-steps button>span { grid-row:1/3; width:20px; height:20px; display:grid; place-items:center; border-radius:7px; background:var(--surface-hover); font:600 8px var(--font-mono); }
.hero-demo-steps b,.hero-demo-steps small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.hero-demo-steps b { color:inherit; font-size:8px; }.hero-demo-steps small { font-size:7px; }
.hero-demo-steps button[aria-selected="true"] { border-color:var(--primary-line); background:var(--primary-dim); color:var(--primary); }.hero-demo-steps button[aria-selected="true"]>span { background:var(--primary); color:white; }
.hero-demo-hint { display:flex; align-items:center; justify-content:center; gap:6px; margin:0; padding:0 8px 9px; color:var(--text-tertiary); font-size:7px; }.hero-demo-hint span { width:5px; height:5px; border-radius:50%; background:var(--success); }

@media (prefers-reduced-motion: no-preference) {
  .demo-connect.is-active .demo-cursor { animation:demo-connect-cursor 3500ms var(--ease-out-expo) forwards; }
  .demo-connect.is-active .demo-integration.is-target { animation:demo-target 3500ms ease forwards; }
  .demo-connect.is-active .demo-oauth { animation:demo-oauth 3500ms var(--ease-out-expo) forwards; }
  .demo-connect.is-active .demo-success { animation:demo-success 3500ms var(--ease-out-expo) forwards; }
  @keyframes demo-connect-cursor { 0%,8%{opacity:0;left:84%;top:81%} 18%{opacity:1} 38%{left:82%;top:28%} 44%{transform:scale(.82)} 50%{transform:none;opacity:1} 60%,100%{opacity:0;left:82%;top:28%} }
  @keyframes demo-target { 0%,36%{border-color:var(--border-subtle)} 42%,56%{border-color:var(--primary-line);box-shadow:0 0 0 3px var(--primary-dim);transform:scale(1.008)} 68%,100%{border-color:var(--success);box-shadow:none;transform:none} }
  @keyframes demo-oauth { 0%,46%{opacity:0;transform:translate(-50%,10px) scale(.94)} 55%,68%{opacity:1;transform:translate(-50%,0) scale(1)} 78%,100%{opacity:0;transform:translate(-50%,-6px) scale(.97)} }
  @keyframes demo-success { 0%,68%{opacity:0;transform:translateY(8px)} 79%,100%{opacity:1;transform:none} }
  .demo-clients.is-active .demo-cursor { animation:demo-client-cursor 3500ms var(--ease-out-expo) forwards; }
  .demo-clients.is-active .demo-client-row { animation:demo-row-focus 3500ms ease forwards; }
  .demo-clients.is-active .demo-client-row i { animation:demo-chevron 3500ms ease forwards; }
  .demo-clients.is-active .demo-callout { animation:demo-pop 3500ms var(--ease-out-expo) forwards; }
  @keyframes demo-client-cursor { 0%,10%{opacity:0;left:88%;top:82%} 20%{opacity:1} 49%{left:31%;top:54%} 55%{transform:scale(.82)} 62%{transform:none;opacity:1} 75%,100%{opacity:0;left:31%;top:54%} }
  @keyframes demo-row-focus { 0%,45%{background:transparent} 55%,100%{background:var(--primary-dim)} }
  @keyframes demo-chevron { 0%,50%{transform:none} 58%,100%{transform:rotate(90deg);color:var(--primary)} }
  @keyframes demo-pop { 0%,60%{opacity:0;transform:translateY(8px) scale(.95)} 72%,100%{opacity:1;transform:none} }
  .demo-campaigns.is-active .demo-tr:not(.demo-th) { animation:demo-row-in 460ms var(--ease-out-expo) backwards; }
  .demo-campaigns.is-active .demo-tr:nth-child(2){animation-delay:80ms}.demo-campaigns.is-active .demo-tr:nth-child(3){animation-delay:170ms}.demo-campaigns.is-active .demo-tr:nth-child(4){animation-delay:260ms}.demo-campaigns.is-active .demo-tr:nth-child(5){animation-delay:350ms}
  .demo-campaigns.is-active .demo-campaign-pop { animation:demo-pop 3500ms var(--ease-out-expo) forwards; }
  @keyframes demo-row-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
  .demo-analytics.is-active .chart-line { animation:demo-line 1800ms var(--ease-out-expo) 250ms forwards; }.demo-analytics.is-active .chart-area { animation:demo-area 900ms ease 900ms forwards; }.demo-analytics.is-active .demo-chart circle { animation:demo-area 300ms ease 1450ms forwards; }.demo-analytics.is-active .demo-tooltip { animation:demo-tooltip 500ms var(--ease-out-expo) 1550ms forwards; }.demo-analytics.is-active .demo-insight { animation:demo-row-in 500ms var(--ease-out-expo) 1900ms backwards; }
  @keyframes demo-line { to{stroke-dashoffset:0} } @keyframes demo-area { to{opacity:1} } @keyframes demo-tooltip { to{opacity:1;transform:none} }
  .demo-audit.is-active .demo-audit-list>div { animation:demo-row-in 430ms var(--ease-out-expo) forwards; }.demo-audit.is-active .demo-audit-list>div:nth-child(1){animation-delay:100ms}.demo-audit.is-active .demo-audit-list>div:nth-child(2){animation-delay:360ms}.demo-audit.is-active .demo-audit-list>div:nth-child(3){animation-delay:620ms}.demo-audit.is-active .demo-ai-card { animation:demo-ai-in 520ms var(--ease-out-expo) 1050ms forwards; }.demo-audit.is-active .demo-loop-note { animation:demo-area 350ms ease 1650ms forwards; }
  @keyframes demo-ai-in { to{opacity:1;transform:none} }
}
@media (prefers-reduced-motion: reduce) {
  .demo-view { transition:none; transform:none; }.demo-success,.demo-callout,.demo-campaign-pop,.chart-area,.demo-chart circle,.demo-tooltip,.demo-audit-list>div,.demo-ai-card,.demo-loop-note { opacity:1; transform:none; }.chart-line { stroke-dashoffset:0; }
}
@media (max-width: 680px) {
  .hero-demo-app { grid-template-columns:34px minmax(0,1fr); min-height:335px; }.hero-demo-side { padding-inline:4px; }.hero-demo-side span { width:24px;height:24px; }.demo-view { padding:14px 12px; }.demo-head h3 { font-size:13px; }.hero-demo-steps { gap:2px;padding:6px; }.hero-demo-steps button { display:flex;justify-content:center;padding:7px 3px; }.hero-demo-steps button>span { grid-row:auto; }.hero-demo-steps b,.hero-demo-steps small { display:none; }.demo-audit-layout { grid-template-columns:1fr; }.demo-ai-card { position:absolute;left:18%;right:4%;bottom:18px;box-shadow:var(--sh-2); }.demo-audit-list>div { min-height:55px; }.demo-loop-note { display:none; }
}
@media (max-width: 430px) {
  .hero-demo-app { min-height:350px; }.demo-kpis>div { padding-inline:6px; }.demo-kpis b { font-size:9px; }.demo-tr { grid-template-columns:1.35fr .8fr .45fr .65fr;padding-inline:6px; }.demo-tr small { display:none; }.demo-filter span:nth-last-child(-n+2) { display:none; }.demo-segment span:not(.is-active) { display:none; }.demo-chart { margin-left:22px; }.demo-insight small { display:none; }
}

/* Hero demo refinement: the product canvas is now the whole illustration.
   Navigation chrome was deliberately removed so content and business meaning
   get the available space. The current stage lives in each page heading. */
.hero-demo { border-radius:20px; background:var(--surface-hover); }
.hero-grid { grid-template-columns:minmax(0,.9fr) minmax(0,700px); gap:clamp(36px,4vw,64px); }
.hero-demo-app { display:block; min-height:438px; background:transparent; }
.hero-demo-stage { height:438px; }
.demo-view { padding:24px 25px; }
.demo-head { width:calc(100% - 142px); min-height:58px; margin-bottom:15px; }
.demo-head h3 { margin-top:3px; font-size:17px; line-height:1.16; letter-spacing:-.025em; }
.demo-head p { margin-top:5px; color:var(--text-tertiary); font-size:9px; line-height:1.35; }
.demo-kicker { color:var(--primary); font-size:8px; font-weight:650; letter-spacing:.07em; }
.demo-controls { position:absolute; z-index:20; top:21px; right:23px; display:flex; align-items:center; gap:7px; }
.demo-controls>button { width:27px; height:27px; display:grid; place-items:center; padding:0; border:1px solid var(--border-subtle); border-radius:8px; background:var(--surface-card); color:var(--text-secondary); cursor:pointer; transition:border-color 180ms ease,color 180ms ease,transform 180ms ease; }
.demo-controls>button:hover { color:var(--primary); border-color:var(--primary-line); }.demo-controls>button:active { transform:scale(.94); }
.demo-controls>button svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.demo-dots { display:flex; align-items:center; gap:5px; padding:0 3px; }
.demo-dots button { width:6px; height:6px; padding:0; border:0; border-radius:50%; background:var(--border-default); cursor:pointer; transition:width 220ms var(--ease-out-expo),background 180ms ease,border-radius 180ms ease; }
.demo-dots button[aria-selected="true"] { width:18px; border-radius:999px; background:var(--primary); }

/* Connection */
.demo-connect-grid { display:grid; grid-template-columns:1.06fr .94fr; gap:10px; }
.demo-connect .demo-integrations { gap:6px; }
.demo-connect .demo-integration { min-height:61px; padding:9px 10px; }
.demo-connect .demo-integration:not(.is-target) { min-height:52px; background:oklch(1 0 0 / .55); }
.platform-logo { position:relative; width:30px; height:30px; display:grid; place-items:center; flex:none; overflow:hidden; border-radius:9px; color:white; font:700 9px var(--font-mono); }
.platform-logo-y { background:#fc3f3f; }.platform-logo-vk { background:#07f; font-size:7px; }
.platform-logo-g { background:white; border:1px solid var(--border-subtle); }
.platform-logo-g::before,.platform-logo-g::after,.platform-logo-g i { content:""; position:absolute; border-radius:2px; transform-origin:bottom; }
.platform-logo-g::before { width:6px; height:19px; left:8px; top:4px; background:#4285f4; transform:rotate(28deg); }
.platform-logo-g::after { width:6px; height:14px; right:7px; top:9px; background:#fbbc04; transform:rotate(-28deg); }
.platform-logo-g i { width:7px; height:7px; left:5px; bottom:4px; border-radius:50%; background:#34a853; }
.demo-integration-link { color:var(--primary); font-size:8px; font-weight:600; }
.demo-connect-benefit { padding:11px 12px; border:1px solid var(--border-subtle); border-radius:11px; background:var(--surface-card); }
.demo-benefit-label { display:block; margin-bottom:4px; color:var(--text-tertiary); font:600 7px var(--font-mono); text-transform:uppercase; letter-spacing:.06em; }
.demo-connect-benefit>div { display:grid; grid-template-columns:23px 1fr; gap:7px; align-items:start; padding:8px 0; border-bottom:1px solid var(--border-subtle); }.demo-connect-benefit>div:last-child { border:0; }
.demo-connect-benefit svg { width:20px; height:20px; padding:3px; border-radius:6px; background:var(--primary-dim); fill:none; stroke:var(--primary); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.demo-connect-benefit b,.demo-connect-benefit small { display:block; }.demo-connect-benefit b { font-size:8px; line-height:1.25; }.demo-connect-benefit small { margin-top:2px; color:var(--text-tertiary); font-size:7px; line-height:1.3; }
.demo-connect .demo-oauth { top:111px; width:245px; display:block; padding:12px; }
.demo-oauth-top { display:flex; align-items:center; gap:8px; }.demo-oauth-top b,.demo-oauth-top small { display:block; }.demo-oauth-top b { font-size:9px; }.demo-oauth-top small { margin-top:2px; color:var(--text-tertiary); font-size:7px; }
.demo-oauth-scope { margin:10px 0; padding:8px; border-radius:8px; background:var(--surface-hover); }.demo-oauth-scope span,.demo-oauth-scope b { display:block; }.demo-oauth-scope span { color:var(--text-tertiary); font-size:6px; text-transform:uppercase; }.demo-oauth-scope b { margin-top:3px; font-size:8px; }
.demo-oauth>button { width:100%; border:0; border-radius:8px; background:var(--primary); color:white; padding:7px; font-size:8px; font-weight:650; }
.demo-connect .demo-success { position:absolute; left:25px; right:25px; bottom:19px; margin:0; padding:9px 11px; }
.demo-success>svg { width:22px; height:22px; padding:3px; flex:none; border-radius:50%; background:var(--surface-card); fill:none; stroke:var(--success); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* Portfolio: business metrics, audience context and a clear signal. */
.demo-clients .demo-kpis { grid-template-columns:repeat(4,1fr); gap:6px; }
.demo-kpis .is-alert { background:var(--warning-dim); border-color:transparent; }.demo-kpis .is-alert em { color:var(--warning); }
.demo-clients .demo-tr,.demo-campaigns .demo-tr { grid-template-columns:1.55fr .72fr .62fr .64fr .8fr; min-height:47px; }
.demo-clients .demo-th,.demo-campaigns .demo-th { min-height:26px; }
.demo-tr .bad { color:var(--danger); }
.row-chevron { position:relative; width:10px!important; height:10px; margin-right:2px; vertical-align:-1px; }
.row-chevron::before { content:""; position:absolute; inset:2px 3px; border-right:1.4px solid var(--text-tertiary); border-bottom:1.4px solid var(--text-tertiary); transform:rotate(-45deg); }
.signal-warn,.signal-good,.signal-neutral { display:inline-block!important; margin:0!important; padding:3px 5px; border-radius:999px; font:600 6px var(--font-mono)!important; font-style:normal; white-space:nowrap; }
.signal-warn { color:var(--warning); background:var(--warning-dim); }.signal-good { color:var(--success); background:var(--success-dim); }.signal-neutral { color:var(--text-tertiary); background:var(--surface-hover); }
.demo-callout,.demo-campaign-pop { right:15px; bottom:14px; max-width:270px; padding:9px 11px; }.demo-callout b,.demo-campaign-pop b { font-size:9px; line-height:1.3; }.demo-callout small { color:var(--text-tertiary); font-size:7px; }

/* Client drill-down */
.demo-client-context { display:grid; grid-template-columns:1.45fr repeat(3,.72fr); gap:0; align-items:center; margin-bottom:8px; padding:8px 10px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--surface-card); }
.demo-client-context>div { padding:0 9px; border-left:1px solid var(--border-subtle); }.demo-client-context>div:first-child { display:flex; align-items:center; gap:8px; padding-left:0; border:0; }.demo-client-context p b,.demo-client-context p small,.demo-client-context>div>small,.demo-client-context>div>b,.demo-client-context em { display:block; }.demo-client-context p b { font-size:9px; }.demo-client-context p small,.demo-client-context>div>small { margin-top:2px; color:var(--text-tertiary); font-size:7px; }.demo-client-context>div>b { margin-top:2px; font:550 9px var(--font-mono); }.demo-client-context em { margin-top:2px; color:var(--danger); font:600 6px var(--font-mono); font-style:normal; }
.campaigns-table .demo-tr { min-height:46px; }.campaigns-table .is-problem { background:var(--warning-dim); box-shadow:inset 2px 0 var(--warning); }
.trend-down,.trend-up,.trend-flat { font-weight:650!important; }.trend-down { color:var(--success); }.trend-up { color:var(--danger); }.trend-flat { color:var(--text-tertiary); }

/* Analytics: tie media metrics to qualified leads and to a concrete event. */
.demo-metric-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:8px; }
.demo-metric-strip>div { padding:7px 9px; border:1px solid var(--border-subtle); border-radius:9px; background:var(--surface-card); }.demo-metric-strip small,.demo-metric-strip b,.demo-metric-strip em { display:block; }.demo-metric-strip small { color:var(--text-tertiary); font-size:7px; }.demo-metric-strip b { margin-top:2px; font:550 10px var(--font-mono); }.demo-metric-strip em { margin-top:2px; color:var(--text-tertiary); font:600 6px var(--font-mono); font-style:normal; }.demo-metric-strip .is-bad em { color:var(--danger); }
.demo-analytics .demo-chart-card { padding:9px 11px 3px; }.demo-analytics .demo-chart-title b { font:600 9px var(--font-sans); }.demo-analytics .demo-chart-title small { margin-top:2px; }
.demo-chart-legend { display:flex; gap:8px; color:var(--text-tertiary); font-size:7px; }.demo-chart-legend span { display:flex; align-items:center; gap:4px; }.demo-chart-legend i { width:11px; height:2px; background:var(--primary); }.demo-chart-legend span:last-child i { height:0; border-top:1px dashed var(--warning); background:none; }
.demo-analytics .demo-chart { height:139px; }.demo-analytics .demo-chart svg { height:132px; }.chart-target { fill:none; stroke:var(--warning); stroke-width:1; stroke-dasharray:4 4; }.chart-event { stroke:var(--danger); stroke-width:1; stroke-dasharray:3 3; opacity:.55; }
.demo-analytics .demo-tooltip { right:2%; top:22px; }.demo-analytics .demo-tooltip em { color:var(--danger); }
.demo-insight { margin-top:7px; padding:8px 10px; }.demo-insight>svg { width:23px; height:23px; padding:4px; flex:none; border-radius:7px; background:var(--surface-card); fill:none; stroke:var(--primary); stroke-width:1.3; stroke-linejoin:round; }.demo-insight b { font-size:8px; }.demo-insight small { max-width:54ch; }

/* Audit: evidence on the left, exact plan and money on the right. */
.demo-audit-layout { grid-template-columns:1.03fr .97fr; gap:10px; }
.demo-audit-list>div { min-height:67px; grid-template-columns:24px 1fr auto; }
.demo-audit-list>div>span { width:23px; height:23px; }.demo-audit-list>div>span svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.demo-audit-list b { font-size:9px; }.demo-audit-list small { font-size:7px; }
.demo-ai-card { padding:13px 14px; }.demo-ai-card h4 { margin:8px 0 9px; font-size:10px; font-weight:500; }.demo-ai-card h4 strong { display:inline-block; margin-top:3px; color:var(--success); font:650 15px var(--font-mono); }
.demo-ai-card ul { display:grid; gap:6px; margin:0; padding:0; list-style:none; }.demo-ai-card li { display:grid; grid-template-columns:19px 1fr; gap:6px; align-items:center; color:var(--text-secondary); font-size:7px; }.demo-ai-card li span { width:19px; height:19px; display:grid; place-items:center; border-radius:6px; background:var(--surface-card); color:var(--primary); font:650 6px var(--font-mono); }
.demo-ai-card>div { align-items:flex-start; margin-top:11px; flex-direction:column; }.demo-ai-card button { padding:7px 10px; }.demo-ai-card small { font-size:6px; }
.demo-loop-note { margin-top:9px; padding:7px 9px; border-radius:8px; background:var(--success-dim); }.demo-loop-note svg { width:17px; height:17px; flex:none; fill:none; stroke:var(--success); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.demo-loop-note span { color:var(--text-secondary); font-size:7px; }.demo-loop-note b { color:var(--text-primary); }

@media (max-width:680px) {
  .hero-demo-app,.hero-demo-stage { min-height:420px; height:420px; }.demo-view { padding:18px 15px; }.demo-head { width:calc(100% - 112px); min-height:62px; margin-bottom:10px; }.demo-head h3 { font-size:14px; }.demo-head p { display:none; }.demo-controls { top:16px; right:14px; gap:5px; }.demo-controls>button { width:24px;height:24px; }.demo-dots { gap:4px; }.demo-dots button { width:5px;height:5px; }.demo-dots button[aria-selected="true"] { width:13px; }
  .demo-connect-grid { grid-template-columns:1fr; }.demo-connect-benefit { display:none; }.demo-connect .demo-integration { min-height:57px; }.demo-connect .demo-success { left:15px;right:15px;bottom:15px; }
  .demo-clients .demo-kpis,.demo-metric-strip { grid-template-columns:repeat(2,1fr); }.demo-kpis>div:nth-child(2),.demo-kpis>div:nth-child(3) { display:none; }
  .demo-clients .demo-tr,.demo-campaigns .demo-tr { grid-template-columns:1.45fr .72fr .58fr .72fr; }.demo-clients .demo-tr>*:nth-child(3),.demo-campaigns .demo-tr>*:nth-child(3) { display:none; }.demo-tr small { display:block; }.demo-clients .demo-tr>span:last-child,.demo-clients .demo-th>span:last-child,.demo-campaigns .demo-tr>span:last-child,.demo-campaigns .demo-th>span:last-child { display:none; }
  .demo-client-context { grid-template-columns:1.4fr repeat(2,.7fr); }.demo-client-context>div:nth-child(3) { display:none; }
  .demo-audit-layout { grid-template-columns:1fr; }.demo-audit-list>div { min-height:55px; }.demo-ai-card { left:12%;right:3%;bottom:17px; }.demo-loop-note { display:none; }
}
@media (max-width:1040px) { .hero-grid { grid-template-columns:1fr; } }
@media (max-width:430px) {
  .hero-demo-app,.hero-demo-stage { min-height:408px; height:408px; }.demo-view { padding:16px 12px; }.demo-head { width:calc(100% - 98px); }.demo-head h3 { font-size:12px; }.demo-kicker { font-size:6px; }.demo-controls { right:10px; }.demo-controls>button { display:none; }
  .demo-connect .demo-integration:not(.is-target) { min-height:49px; }.demo-platform small { font-size:7px; }
  .demo-clients .demo-tr,.demo-campaigns .demo-tr { grid-template-columns:1.45fr .76fr .76fr; }.demo-clients .demo-tr>*:nth-child(4),.demo-campaigns .demo-tr>*:nth-child(4) { display:none; }.demo-tr small { display:none; }
  .demo-client-context { grid-template-columns:1.5fr .8fr; }.demo-client-context>div:nth-child(2) { display:none; }
  .demo-analytics .demo-metric-strip>div:nth-child(even) { display:none; }.demo-metric-strip { grid-template-columns:repeat(2,1fr); }.demo-analytics .demo-chart { margin-left:24px; }.demo-insight small { display:none; }
}

/* Feature presentation: each slide sells one product capability instead of
   recreating an entire dashboard. These layouts deliberately keep the focal
   object large and leave supporting copy outside the visual. */
.hero-demo-app,.hero-demo-stage { min-height:414px; height:414px; }
.demo-view { padding:23px 25px; }
.feature-slide-head { max-width:calc(100% - 145px); margin-bottom:16px; }
.feature-slide-head>span { display:block; color:var(--primary); font:650 8px var(--font-mono); letter-spacing:.07em; text-transform:uppercase; }
.feature-slide-head h3 { margin-top:5px; color:var(--text-primary); font-size:17px; line-height:1.14; letter-spacing:-.028em; }
.feature-slide-head p { margin-top:5px; color:var(--text-tertiary); font-size:9px; line-height:1.35; }

/* Slide 1 — connection. Real product assets replace drawn platform marks. */
.feature-connect-scene { position:relative; display:flex; flex-direction:column; align-items:center; }
.feature-platform-row { display:grid; grid-template-columns:repeat(3,1fr); width:100%; gap:8px; }
.feature-platform-row article { display:flex; align-items:center; gap:8px; min-width:0; padding:10px; border:1px solid var(--border-subtle); border-radius:11px; background:var(--surface-card); }
.feature-logo { width:28px; height:28px; display:grid; place-items:center; flex:none; overflow:hidden; border-radius:8px; background:var(--surface-hover); }
.feature-logo img { width:100%; height:100%; object-fit:contain; padding:2px; }
.feature-platform-row b,.feature-platform-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.feature-platform-row b { font-size:8px; }.feature-platform-row small { margin-top:2px; color:var(--text-tertiary); font-size:7px; }.feature-platform-row button { margin-left:auto; padding:5px 6px; border:0; border-radius:999px; background:var(--primary-dim); color:var(--primary); font-size:7px; font-weight:650; }
.feature-oauth-card { position:relative; z-index:4; width:min(254px,55%); margin-top:14px; padding:12px; border:1px solid var(--border-default); border-radius:13px; background:var(--surface-card); box-shadow:var(--sh-3); opacity:0; transform:translateY(10px) scale(.96); }
.feature-oauth-service { display:flex; align-items:center; gap:8px; }.feature-oauth-service img { width:28px; height:28px; padding:2px; border-radius:8px; background:var(--surface-hover); object-fit:contain; }.feature-oauth-service b,.feature-oauth-service small { display:block; }.feature-oauth-service b { font-size:9px; }.feature-oauth-service small { margin-top:2px; color:var(--text-tertiary); font-size:7px; }
.feature-oauth-permission { margin:10px 0; padding:8px; border-radius:8px; background:var(--surface-hover); }.feature-oauth-permission span,.feature-oauth-permission b { display:block; }.feature-oauth-permission span { color:var(--text-tertiary); font-size:6px; text-transform:uppercase; letter-spacing:.04em; }.feature-oauth-permission b { margin-top:3px; font-size:8px; }
.feature-oauth-card>button { width:100%; padding:7px; border:0; border-radius:8px; background:var(--primary); color:white; font-size:8px; font-weight:650; }
.feature-connect-result { position:absolute; z-index:5; bottom:-26px; display:flex; align-items:center; gap:8px; width:min(300px,69%); padding:9px 10px; border:1px solid var(--success-dim); border-radius:10px; background:var(--surface-card); box-shadow:var(--sh-2); opacity:0; transform:translateY(7px); }.feature-connect-result svg { width:20px; height:20px; padding:3px; flex:none; border-radius:50%; background:var(--success-dim); fill:none; stroke:var(--success); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.feature-connect-result b,.feature-connect-result small { display:block; }.feature-connect-result b { font-size:8px; }.feature-connect-result small { margin-top:2px; color:var(--text-tertiary); font-size:7px; }

/* Slide 2 — directly based on the dashboard's KPI and client-dynamics cards. */
.feature-overview-grid { display:grid; grid-template-columns:repeat(3,1fr) 1.45fr; gap:7px; }.feature-kpi-card,.feature-dynamics-card { min-height:88px; padding:10px; border:1px solid var(--border-subtle); border-radius:11px; background:var(--surface-card); }.feature-kpi-card small,.feature-kpi-card b,.feature-kpi-card em { display:block; }.feature-kpi-card small { color:var(--text-tertiary); font-size:7px; }.feature-kpi-card b { margin-top:5px; font:600 13px var(--font-mono); letter-spacing:-.04em; }.feature-kpi-card em { margin-top:4px; color:var(--text-tertiary); font:600 6px var(--font-mono); font-style:normal; }.feature-kpi-card em.is-positive { color:var(--success); }
.feature-dynamics-card { padding:9px 10px 7px; }.feature-dynamics-card>div:first-child { display:flex; justify-content:space-between; align-items:center; }.feature-dynamics-card>div:first-child b { font-size:8px; }.feature-dynamics-card>div:first-child span { color:var(--text-tertiary); font-size:7px; }.feature-dynamics-card svg { display:block; width:100%; height:39px; margin-top:2px; overflow:visible; }.feature-dynamics-card svg path:first-child { fill:none; stroke:var(--primary); stroke-width:3; stroke-linecap:round; }.feature-dynamics-card svg path:last-child { fill:none; stroke:var(--border-subtle); stroke-width:1; }.feature-dynamics-footer { display:flex; justify-content:space-between; align-items:center; }.feature-dynamics-footer span,.feature-dynamics-footer b { color:var(--text-tertiary); font-size:6px; font-weight:500; }.feature-dynamics-footer i { display:inline-block; width:5px; height:5px; margin-right:3px; border-radius:50%; background:var(--success); }
.feature-client-list { margin-top:9px; overflow:hidden; border:1px solid var(--border-subtle); border-radius:11px; background:var(--surface-card); }.feature-client-list>div { display:grid; grid-template-columns:1.4fr 1fr .85fr .7fr .75fr; align-items:center; gap:8px; min-height:42px; padding:7px 10px; border-bottom:1px solid var(--border-subtle); font-size:8px; }.feature-client-list>div:last-child { border:0; }.feature-client-list>div:not(.feature-client-list-head)>* { text-align:right; font:500 8px var(--font-mono); }.feature-client-list>div:not(.feature-client-list-head)>b { text-align:left; font:600 8px var(--font-sans); }.feature-client-list-head { min-height:25px!important; color:var(--text-tertiary); font-size:6px!important; text-transform:uppercase; letter-spacing:.04em; }.feature-client-list>div span { display:flex; align-items:center; justify-content:flex-start; gap:4px; color:var(--text-secondary); font:500 7px var(--font-sans); }.feature-client-list img { width:16px; height:16px; padding:1px; border-radius:5px; object-fit:contain; background:var(--surface-hover); }.feature-client-list strong { color:var(--text-primary); font:600 8px var(--font-mono); }

/* Slide 3 — metric picker changes the graph and the same period cards. */
.feature-metric-tabs { position:absolute; top:67px; right:24px; z-index:3; display:flex; gap:2px; padding:3px; border:1px solid var(--border-subtle); border-radius:999px; background:var(--surface-card); }.feature-metric-tabs button { padding:5px 8px; border:0; border-radius:999px; background:transparent; color:var(--text-tertiary); cursor:pointer; font-size:7px; }.feature-metric-tabs button.is-active { background:var(--primary-dim); color:var(--primary); font-weight:650; }
.feature-chart-layout { display:grid; grid-template-columns:1.55fr .7fr; gap:9px; }.feature-chart-card { padding:11px; border:1px solid var(--border-subtle); border-radius:12px; background:var(--surface-card); }.feature-chart-caption { display:flex; justify-content:space-between; align-items:flex-start; }.feature-chart-caption small,.feature-chart-caption b,.feature-chart-caption em { display:block; }.feature-chart-caption small { color:var(--text-tertiary); font-size:7px; }.feature-chart-caption b { margin-top:3px; font:600 14px var(--font-mono); letter-spacing:-.04em; }.feature-chart-caption em { padding:4px 6px; border-radius:999px; background:var(--success-dim); color:var(--success); font:600 6px var(--font-mono); font-style:normal; }
.feature-chart { position:relative; height:170px; margin-top:4px; }.feature-chart svg { width:100%; height:100%; overflow:visible; }.feature-chart svg g { fill:none; stroke:var(--border-subtle); stroke-width:1; }.feature-chart-line { display:none; fill:none; stroke-width:3; stroke-linecap:round; stroke-dasharray:700; stroke-dashoffset:700; }.feature-chart-area { display:none; opacity:0; }.feature-chart-line--spend { stroke:var(--primary); }.feature-chart-area--spend { fill:var(--primary-dim); }.feature-chart-line--cpc { stroke:var(--accent-teal); }.feature-chart-line--cpa { stroke:var(--accent-purple); }.demo-analytics[data-chart-metric="spend"] .feature-chart-line--spend,.demo-analytics[data-chart-metric="cpc"] .feature-chart-line--cpc,.demo-analytics[data-chart-metric="cpa"] .feature-chart-line--cpa { display:block; }.demo-analytics[data-chart-metric="spend"] .feature-chart-area--spend { display:block; }.feature-chart-tooltip { position:absolute; top:25px; right:11%; padding:7px 8px; border:1px solid var(--border-subtle); border-radius:8px; background:var(--surface-card); box-shadow:var(--sh-1); }.feature-chart-tooltip small,.feature-chart-tooltip b,.feature-chart-tooltip span { display:block; }.feature-chart-tooltip small,.feature-chart-tooltip span { color:var(--text-tertiary); font-size:6px; }.feature-chart-tooltip b { margin:2px 0; font:600 8px var(--font-mono); }
.feature-metric-cards { display:grid; gap:7px; }.feature-metric-cards article { display:flex; flex-direction:column; justify-content:center; min-height:59px; padding:9px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--surface-card); }.feature-metric-cards span { color:var(--text-tertiary); font-size:7px; }.feature-metric-cards b { margin-top:3px; font:600 10px var(--font-mono); }.feature-metric-cards em { margin-top:2px; color:var(--success); font:600 6px var(--font-mono); font-style:normal; }

/* Slide 4 — a feature-level audit and plan, not a mock app page. */
.feature-action-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:10px; }.feature-audit-card,.feature-agent-card { min-height:224px; padding:14px; border:1px solid var(--border-subtle); border-radius:12px; background:var(--surface-card); }.feature-audit-card>div span,.feature-agent-card>span { display:block; color:var(--primary); font:650 7px var(--font-mono); text-transform:uppercase; letter-spacing:.05em; }.feature-audit-card>div b { display:block; margin-top:5px; font-size:12px; }.feature-audit-card ul { display:grid; gap:7px; margin-top:14px; padding:0; list-style:none; }.feature-audit-card li { display:grid; grid-template-columns:8px 1fr auto; gap:7px; align-items:center; padding:8px 0; border-top:1px solid var(--border-subtle); }.feature-audit-card li i { width:7px; height:7px; border-radius:50%; }.feature-audit-card li i.is-warning { background:var(--warning); }.feature-audit-card li i.is-success { background:var(--success); }.feature-audit-card li b,.feature-audit-card li small { display:block; }.feature-audit-card li b { font-size:8px; }.feature-audit-card li small { margin-top:2px; color:var(--text-tertiary); font-size:7px; }.feature-audit-card li em { padding:3px 5px; border-radius:999px; background:var(--warning-dim); color:var(--warning); font:600 6px var(--font-mono); font-style:normal; }.feature-audit-card li:last-child em { color:var(--success); background:var(--success-dim); }
.feature-agent-card { border-color:var(--primary-line); background:linear-gradient(145deg,var(--surface-card),var(--primary-dim)); }.feature-agent-card>b { display:block; margin-top:7px; font-size:11px; line-height:1.3; }.feature-diff { display:grid; grid-template-columns:1fr auto 12px auto; gap:6px; align-items:end; margin-top:16px; padding:9px; border-radius:9px; background:var(--surface-card); }.feature-diff small { color:var(--text-tertiary); font-size:6px; }.feature-diff strong { font:600 8px var(--font-mono); }.feature-diff i { color:var(--primary); font-style:normal; }.feature-agent-card p { margin-top:11px; }.feature-agent-card p em,.feature-agent-card p strong { display:block; }.feature-agent-card p em { color:var(--text-tertiary); font-size:7px; font-style:normal; }.feature-agent-card p strong { margin-top:3px; color:var(--success); font:600 11px var(--font-mono); }.feature-agent-card button { margin-top:13px; padding:7px 9px; border:0; border-radius:999px; background:var(--primary); color:white; font-size:7px; font-weight:650; }

@media (prefers-reduced-motion: no-preference) { .demo-connect.is-active .feature-oauth-card { animation:feature-oauth 3500ms var(--ease-out-expo) forwards; }.demo-connect.is-active .feature-connect-result { animation:feature-result 3500ms var(--ease-out-expo) forwards; }.demo-analytics.is-active .feature-chart-line { animation:feature-chart-line 1100ms var(--ease-out-expo) 180ms forwards; }.demo-analytics.is-active .feature-chart-area { animation:feature-area 650ms ease 500ms forwards; }.demo-overview.is-active .feature-kpi-card,.demo-overview.is-active .feature-dynamics-card,.demo-overview.is-active .feature-client-list { animation:demo-row-in 500ms var(--ease-out-expo) backwards; }.demo-overview.is-active .feature-kpi-card:nth-child(2){animation-delay:90ms}.demo-overview.is-active .feature-kpi-card:nth-child(3){animation-delay:180ms}.demo-overview.is-active .feature-dynamics-card{animation-delay:250ms}.demo-overview.is-active .feature-client-list{animation-delay:340ms}.demo-action.is-active .feature-audit-card,.demo-action.is-active .feature-agent-card { animation:demo-row-in 520ms var(--ease-out-expo) backwards; }.demo-action.is-active .feature-agent-card{animation-delay:180ms} @keyframes feature-oauth { 0%,28%{opacity:0;transform:translateY(10px) scale(.96)} 40%,75%{opacity:1;transform:none} 87%,100%{opacity:0;transform:translateY(-6px) scale(.97)} } @keyframes feature-result { 0%,72%{opacity:0;transform:translateY(7px)} 84%,100%{opacity:1;transform:none} } @keyframes feature-chart-line { to{stroke-dashoffset:0} } @keyframes feature-area { to{opacity:1} } }
@media (prefers-reduced-motion: reduce) { .feature-oauth-card,.feature-connect-result { opacity:1; transform:none; }.feature-chart-line { stroke-dashoffset:0; }.feature-chart-area { opacity:1; } }
@media (max-width:680px) { .hero-demo-app,.hero-demo-stage { min-height:388px; height:388px; }.demo-view { padding:18px 15px; }.feature-slide-head { max-width:calc(100% - 84px); margin-bottom:11px; }.feature-slide-head h3 { font-size:14px; }.feature-slide-head p { display:none; }.feature-platform-row article { padding:7px; gap:5px; }.feature-platform-row article div { display:none; }.feature-platform-row button { margin-left:auto; font-size:6px; }.feature-oauth-card { width:min(230px,78%); margin-top:15px; }.feature-connect-result { width:80%; bottom:-15px; }
  .feature-overview-grid { grid-template-columns:repeat(2,1fr); }.feature-overview-grid>.feature-kpi-card:nth-child(2) { display:none; }.feature-dynamics-card { grid-column:span 2; min-height:64px; }.feature-client-list>div { grid-template-columns:1.35fr .9fr .85fr .75fr; }.feature-client-list>div>*:nth-child(4),.feature-client-list-head>*:nth-child(4) { display:none; }.feature-client-list>div>*:last-child,.feature-client-list-head>*:last-child { display:none; }
  .feature-metric-tabs { top:16px; right:14px; }.feature-chart-layout { grid-template-columns:1fr; }.feature-chart { height:135px; }.feature-metric-cards { grid-template-columns:repeat(3,1fr); }.feature-metric-cards article { min-height:49px; }.feature-metric-cards b { font-size:8px; }.feature-action-grid { grid-template-columns:1fr; }.feature-agent-card { position:absolute; left:15%; right:3%; bottom:18px; min-height:auto; padding:11px; box-shadow:var(--sh-2); }.feature-agent-card>b { font-size:9px; }.feature-agent-card .feature-diff,.feature-agent-card p { display:none; }.feature-agent-card button { margin-top:9px; }
}
@media (max-width:430px) { .hero-demo-app,.hero-demo-stage { min-height:365px; height:365px; }.demo-view { padding:15px 12px; }.feature-slide-head h3 { font-size:12px; }.feature-slide-head>span { font-size:6px; }.feature-oauth-card { margin-top:12px; }.feature-connect-result { bottom:-10px; }.feature-connect-result small { display:none; }.feature-kpi-card b { font-size:11px; }.feature-client-list>div { grid-template-columns:1.55fr .85fr .85fr; padding-inline:7px; }.feature-client-list>div>*:nth-child(2),.feature-client-list-head>*:nth-child(2) { display:none; }.feature-chart-tooltip { display:none; }.feature-metric-cards em { display:none; }.feature-audit-card { min-height:205px; }.feature-audit-card li small { display:none; }
}