:root {
    --demo-bg: #090a0c;
    --demo-panel: #14161a;
    --demo-panel-2: #1c2026;
    --demo-panel-3: #242932;
    --demo-text: #f4f1e8;
    --demo-muted: #a8adb6;
    --demo-line: rgba(220, 202, 160, 0.18);
    --demo-line-strong: rgba(220, 202, 160, 0.34);
    --demo-accent: #c8a96a;
    --demo-accent-2: #e2d6b4;
    --demo-good: #82d6a0;
    --demo-warn: #efc36d;
    --demo-danger: #ef867d;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body.demo-shell {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle at 16% 0%, rgba(200,169,106,.16), transparent 32%), linear-gradient(180deg, #101216 0%, var(--demo-bg) 48%);
    color: var(--demo-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

a { color: inherit; }
.demo-topbar, .demo-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px clamp(16px, 4vw, 42px);
    border-bottom: 1px solid var(--demo-line);
    background: rgba(9,10,12,.92);
    backdrop-filter: blur(12px);
}
.demo-brand { color: var(--demo-text); text-decoration: none; display: flex; align-items: center; gap: 10px; min-width: 188px; }
.demo-brand-mark { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.04); border: 1px solid var(--demo-line); flex: 0 0 auto; }
.demo-brand-mark img { width: 25px; height: 25px; }
.demo-brand-copy { display: grid; gap: 2px; line-height: 1.1; }
.demo-brand-copy strong { color: #fff; font-size: 17px; font-weight: 950; }
.demo-brand-copy em { color: var(--demo-muted); font-size: 11px; font-style: normal; font-weight: 800; }
.demo-status-badge {
    margin-left: auto;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid rgba(130, 214, 160, .38);
    border-radius: 999px;
    color: var(--demo-good);
    background: rgba(130, 214, 160, .08);
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.demo-status-badge span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(130,214,160,.12);
}
.demo-nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.demo-nav a, .demo-button, .demo-footer a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 13px;
    border: 1px solid var(--demo-line);
    border-radius: 8px;
    color: var(--demo-text);
    background: rgba(255,255,255,.035);
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
}
.demo-nav a:hover, .demo-nav a.active, .demo-button:hover, .demo-footer a:hover { border-color: var(--demo-line-strong); background: rgba(255,255,255,.07); }
.demo-nav a.active { color: var(--demo-accent-2); }
.demo-button.primary, .demo-footer a { background: var(--demo-accent); color: #111; border-color: var(--demo-accent); }
.demo-button.secondary { background: var(--demo-panel-3); }
.demo-main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 58px; }
.demo-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 28px; align-items: end; margin-bottom: 28px; }
.demo-hero-copy { display: grid; gap: 14px; }
.demo-kicker { color: var(--demo-accent); font-weight: 900; text-transform: uppercase; font-size: 12px; }
.demo-hero h1 { margin: 0; font-size: clamp(34px, 5vw, 64px); line-height: .98; max-width: 900px; }
.demo-hero p, .demo-panel p, .demo-card p { margin: 0; color: var(--demo-muted); line-height: 1.55; }
.demo-hero p { max-width: 760px; font-size: 17px; }
.demo-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.demo-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.demo-metric { border: 1px solid var(--demo-line); background: rgba(255,255,255,.035); border-radius: 8px; padding: 14px; min-height: 86px; }
.demo-metric strong { display: block; color: var(--demo-accent-2); font-size: 22px; line-height: 1; margin-bottom: 8px; }
.demo-metric span { color: var(--demo-muted); font-size: 12px; line-height: 1.35; }
.demo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.demo-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.demo-card, .demo-panel {
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), var(--demo-panel);
    border: 1px solid var(--demo-line);
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.demo-card { min-height: 230px; display: flex; flex-direction: column; gap: 12px; }
.demo-card h2, .demo-panel h2, .demo-panel h3 { margin: 0; line-height: 1.2; }
.demo-card h2 { font-size: 18px; }
.demo-card .demo-button { margin-top: auto; width: 100%; }
.demo-card-top { display: flex; justify-content: flex-start; align-items: center; min-height: 28px; }
.demo-indicators {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}
.demo-indicators div {
    min-width: 0;
    border: 1px solid var(--demo-line);
    border-radius: 8px;
    padding: 9px;
    background: rgba(255,255,255,.025);
}
.demo-indicators dt {
    margin: 0 0 4px;
    color: var(--demo-muted);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}
.demo-indicators dd {
    margin: 0;
    color: var(--demo-accent-2);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;
}
.demo-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--demo-line);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}
.demo-badge-live { color: #102316; background: var(--demo-good); border-color: var(--demo-good); }
.demo-badge-preview { color: #211600; background: var(--demo-warn); border-color: var(--demo-warn); }
.demo-badge-setup { color: #071629; background: #7db7ff; border-color: #7db7ff; }
.demo-badge-soon { color: var(--demo-text); background: var(--demo-panel-3); }
.demo-proof { border-top: 1px solid var(--demo-line); padding-top: 10px; font-size: 13px; }
.demo-section { margin-top: 18px; }
.demo-section-title { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 34px 0 14px; }
.demo-section-title h2 { margin: 0; font-size: clamp(24px, 3vw, 36px); }
.demo-section-title p { margin: 0; color: var(--demo-muted); max-width: 560px; line-height: 1.5; }
.demo-category { margin-top: 24px; }
.demo-category-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.demo-category-head h3 { margin: 0; font-size: 20px; color: var(--demo-accent-2); }
.demo-warning { color: var(--demo-danger); font-size: 13px; line-height: 1.4; }
.demo-status-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.demo-status-list li { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--demo-line); padding-bottom: 10px; }
.demo-status-ok { color: var(--demo-good); font-weight: 900; }
.demo-status-warn { color: var(--demo-warn); font-weight: 900; }
.demo-status-bad { color: var(--demo-danger); font-weight: 900; }
.demo-footer { border-top: 1px solid var(--demo-line); border-bottom: 0; color: var(--demo-muted); }

@media (max-width: 1040px) {
    .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-hero { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .demo-topbar, .demo-footer { align-items: stretch; flex-direction: column; }
    .demo-status-badge { margin-left: 0; align-self: flex-start; }
    .demo-brand { min-width: 0; }
    .demo-nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .demo-nav::-webkit-scrollbar { display: none; }
    .demo-nav a { flex: 0 0 auto; }
    .demo-main { width: min(100% - 24px, 1180px); padding-top: 28px; }
    .demo-grid, .demo-grid.three, .demo-metrics { grid-template-columns: 1fr; }
    .demo-indicators { grid-template-columns: 1fr; }
    .demo-section-title { display: grid; }
}