.landing-reference-shell .landing-demo-overlay {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 24px 24px 40px;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
background: rgba(15, 23, 42, 0.44);
backdrop-filter: blur(16px);
}

.landing-reference-shell .landing-demo-dialog {
position: relative;
width: min(1160px, calc(100vw - 32px));
height: auto;
max-height: none;
min-height: unset;
margin: 0 auto;
align-self: flex-start;
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
overflow: hidden;
border-radius: 30px;
background: rgba(252, 253, 255, 0.98);
border: 1px solid rgba(216, 226, 242, 0.92);
box-shadow: 0 30px 90px rgba(15, 23, 42, 0.18);
}

.landing-reference-shell .landing-demo-close {
position: absolute;
top: 18px;
right: 18px;
z-index: 3;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(216, 226, 242, 0.9);
border-radius: 14px;
background: rgba(255, 255, 255, 0.92);
color: #334155;
cursor: pointer;
transition: transform 0.18s ease, background 0.18s ease;
}

.landing-reference-shell .landing-demo-close:hover {
transform: translateY(-1px);
background: #fff;
}

.landing-reference-shell .landing-demo-sidebar {
padding: 30px;
display: flex;
flex-direction: column;
gap: 18px;
overflow: visible;
background:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 30%),
linear-gradient(180deg, #5a78ff 0%, #4864ef 100%);
color: #fff;
}

.landing-reference-shell .landing-demo-overline {
margin: 0;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}

.landing-reference-shell .landing-demo-sidebar h2 {
margin: 0;
font-size: 32px;
line-height: 1.08;
letter-spacing: -0.04em;
font-weight: 700;
color: #fff;
}

.landing-reference-shell .landing-demo-copy {
margin: 0;
color: rgba(255, 255, 255, 0.78);
font-size: 15px;
line-height: 1.68;
}

.landing-reference-shell .landing-demo-nav {
display: grid;
gap: 12px;
margin-top: 6px;
}

.landing-reference-shell .landing-demo-nav-item {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 18px;
background: rgba(255, 255, 255, 0.08);
color: #fff;
text-align: left;
cursor: pointer;
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.landing-reference-shell .landing-demo-nav-item:hover,
.landing-reference-shell .landing-demo-nav-item.is-active {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.3);
}

.landing-reference-shell .landing-demo-nav-step {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 12px;
background: rgba(255, 255, 255, 0.18);
font-size: 13px;
font-weight: 900;
}

.landing-reference-shell .landing-demo-nav-text {
display: grid;
gap: 2px;
min-width: 0;
}

.landing-reference-shell .landing-demo-nav-text strong {
font-size: 15px;
line-height: 1.22;
font-weight: 700;
}

.landing-reference-shell .landing-demo-nav-text small {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
}

.landing-reference-shell .landing-demo-sidebar-actions {
display: grid;
gap: 10px;
margin-top: auto;
}

.landing-reference-shell .landing-demo-sidebar-actions .btn-large,
.landing-reference-shell .landing-demo-sidebar-actions .btn-ghost {
width: 100%;
}

.landing-reference-shell .landing-demo-sidebar-actions .btn-large {
box-shadow: none;
background: #fff;
color: var(--blue);
}

.landing-reference-shell .landing-demo-sidebar-actions .btn-ghost {
border-color: rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.08);
color: #fff;
}

.landing-reference-shell .landing-demo-main {
padding: 30px 30px 28px;
overflow: visible;
display: grid;
gap: 18px;
background: linear-gradient(180deg, #fcfdff 0%, #f7f9ff 100%);
}

.landing-reference-shell .landing-demo-main-head {
display: grid;
gap: 12px;
max-width: 720px;
}

.landing-reference-shell .landing-demo-chip {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
padding: 7px 12px;
border-radius: 999px;
background: #eef2ff;
color: var(--blue);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}

.landing-reference-shell .landing-demo-chip-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12);
}

.landing-reference-shell .landing-demo-main h3 {
margin: 0;
font-size: 32px;
line-height: 1.08;
letter-spacing: -0.04em;
font-weight: 700;
color: var(--text);
}

.landing-reference-shell .landing-demo-main p {
margin: 0;
color: var(--muted);
font-size: 15px;
line-height: 1.68;
}

.landing-reference-shell .landing-demo-window {
border-radius: 26px;
overflow: hidden;
background: #fff;
border: 1px solid rgba(216, 226, 242, 0.9);
box-shadow: 0 18px 44px rgba(79, 110, 247, 0.12);
}

.landing-reference-shell .landing-demo-window-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 18px;
color: rgba(255, 255, 255, 0.92);
background: linear-gradient(180deg, #5876ff 0%, #4f6ef7 100%);
}

.landing-reference-shell .landing-demo-window-bar span {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.52);
}

.landing-reference-shell .landing-demo-window-bar span:nth-child(1) { background: #ff8d71; }
.landing-reference-shell .landing-demo-window-bar span:nth-child(2) { background: #ffc857; }
.landing-reference-shell .landing-demo-window-bar span:nth-child(3) { background: #86efac; }

.landing-reference-shell .landing-demo-window-bar strong {
margin-left: 8px;
font-size: 13px;
font-weight: 800;
letter-spacing: -0.02em;
}

.landing-reference-shell .landing-demo-analytics-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
padding: 20px 20px 0;
}

.landing-reference-shell .landing-demo-metric-card {
padding: 16px;
border-radius: 18px;
background: #f7f9ff;
border: 1px solid #e2e8f0;
}

.landing-reference-shell .landing-demo-metric-card span {
display: block;
margin-bottom: 8px;
color: var(--muted);
font-size: 12px;
font-weight: 600;
}

.landing-reference-shell .landing-demo-metric-card strong {
display: block;
margin-bottom: 6px;
font-size: 24px;
line-height: 1.08;
letter-spacing: -0.04em;
font-weight: 800;
color: var(--text);
}

.landing-reference-shell .landing-demo-metric-card strong.is-green {
color: #16a34a;
}

.landing-reference-shell .landing-demo-metric-card em {
font-style: normal;
color: #16a34a;
font-size: 12px;
font-weight: 700;
}

.landing-reference-shell .landing-demo-chart-card {
margin: 16px 20px 20px;
padding: 18px;
border-radius: 20px;
background: #f8faff;
border: 1px solid #e2e8f0;
}

.landing-reference-shell .landing-demo-chart-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
color: var(--text);
font-size: 14px;
font-weight: 700;
}

.landing-reference-shell .landing-demo-chart-head small {
color: var(--muted);
font-size: 12px;
font-weight: 600;
}

.landing-reference-shell .landing-demo-chart-bars {
height: 170px;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
align-items: end;
margin-top: 18px;
}

.landing-reference-shell .landing-demo-bar-group {
height: 100%;
display: flex;
align-items: flex-end;
gap: 6px;
}

.landing-reference-shell .landing-demo-bar {
display: block;
width: 100%;
border-radius: 10px 10px 4px 4px;
}

.landing-reference-shell .landing-demo-bar.is-ozon,
.landing-reference-shell .landing-demo-chart-legend i.is-ozon {
background: #5b72f4;
}

.landing-reference-shell .landing-demo-bar.is-yandex,
.landing-reference-shell .landing-demo-chart-legend i.is-yandex {
background: #f6c243;
}

.landing-reference-shell .landing-demo-bar.is-wb,
.landing-reference-shell .landing-demo-chart-legend i.is-wb {
background: #8b5cf6;
}

.landing-reference-shell .landing-demo-chart-legend {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 14px;
color: var(--muted);
font-size: 12px;
font-weight: 600;
}

.landing-reference-shell .landing-demo-chart-legend div {
display: inline-flex;
align-items: center;
gap: 8px;
}

.landing-reference-shell .landing-demo-chart-legend i {
width: 10px;
height: 10px;
display: inline-block;
border-radius: 4px;
}

.landing-reference-shell .landing-demo-order-list,
.landing-reference-shell .landing-demo-review-list {
display: grid;
gap: 12px;
padding: 20px;
}

.landing-reference-shell .landing-demo-order-row,
.landing-reference-shell .landing-demo-review-card {
display: grid;
gap: 10px;
padding: 18px;
border-radius: 18px;
background: #f8faff;
border: 1px solid #e2e8f0;
}

.landing-reference-shell .landing-demo-order-row {
grid-template-columns: minmax(0, 156px) minmax(0, 1fr) minmax(120px, 156px);
align-items: center;
gap: 16px;
}

.landing-reference-shell .landing-demo-order-meta strong,
.landing-reference-shell .landing-demo-order-product b,
.landing-reference-shell .landing-demo-review-head strong {
display: block;
color: var(--text);
font-size: 15px;
font-weight: 700;
line-height: 1.3;
}

.landing-reference-shell .landing-demo-order-meta span,
.landing-reference-shell .landing-demo-order-product small,
.landing-reference-shell .landing-demo-order-status small,
.landing-reference-shell .landing-demo-review-footer span,
.landing-reference-shell .landing-demo-review-footer small {
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}

.landing-reference-shell .landing-demo-order-product,
.landing-reference-shell .landing-demo-order-status {
display: grid;
gap: 4px;
}

.landing-reference-shell .landing-demo-order-status {
justify-items: end;
text-align: right;
}

.landing-reference-shell .landing-demo-order-status mark,
.landing-reference-shell .landing-demo-review-head mark {
width: fit-content;
padding: 6px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
background: #eef2ff;
color: var(--blue);
}

.landing-reference-shell .landing-demo-order-status mark[data-tone="success"],
.landing-reference-shell .landing-demo-review-head mark[data-tone="success"] {
background: #dcfce7;
color: #15803d;
}

.landing-reference-shell .landing-demo-order-status mark[data-tone="ready"],
.landing-reference-shell .landing-demo-review-head mark[data-tone="ready"] {
background: #e0f2fe;
color: #0369a1;
}

.landing-reference-shell .landing-demo-order-status mark[data-tone="pending"],
.landing-reference-shell .landing-demo-review-head mark[data-tone="pending"] {
background: #fef3c7;
color: #b45309;
}

.landing-reference-shell .landing-demo-order-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
padding: 0 20px 20px;
}

.landing-reference-shell .landing-demo-summary-pill {
padding: 14px 16px;
border-radius: 16px;
background: #fff;
border: 1px solid #e2e8f0;
}

.landing-reference-shell .landing-demo-summary-pill span {
display: block;
margin-bottom: 6px;
color: var(--muted);
font-size: 12px;
font-weight: 600;
}

.landing-reference-shell .landing-demo-summary-pill strong {
color: var(--text);
font-size: 18px;
font-weight: 800;
letter-spacing: -0.03em;
}

.landing-reference-shell .landing-demo-review-head,
.landing-reference-shell .landing-demo-review-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.landing-reference-shell .landing-demo-review-footer {
padding-top: 2px;
border-top: 1px dashed rgba(148, 163, 184, 0.28);
}

.landing-reference-shell .landing-demo-points {
display: grid;
gap: 10px;
}

.landing-reference-shell .landing-demo-point {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px 16px;
border-radius: 16px;
background: #fff;
border: 1px solid rgba(216, 226, 242, 0.9);
color: var(--muted);
font-size: 14px;
line-height: 1.55;
}

.landing-reference-shell .landing-demo-point i {
color: #22c55e;
margin-top: 2px;
font-size: 13px;
flex-shrink: 0;
}

.landing-reference-shell .landing-demo-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;