/* ScubaDev Dashboard Demo - faux cursor auto-tour */
.sd-demo {
    --navy: #11314a;
    --navy-deep: #0d1f2e;
    --blue: #235C81;
    --blue-m: #5492B6;
    --coral: #DB635D;
    --salmon: #F2847D;
    --cream: #FFF6E8;
    --sand: #F6C893;
    --teal: #80a38f;
    
    
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    color: var(--cream);
    box-sizing: border-box;
}
.sd-demo *, .sd-demo *::before, .sd-demo *::after { box-sizing: border-box; }

.sd-demo__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--navy-deep);
    border: 1px solid rgba(84, 146, 182, 0.22);
    border-radius: 18px;
    box-shadow: 0 40px 80px rgba(13, 31, 46, 0.28);
    overflow: hidden;
    isolation: isolate;
}

/* Watermark "demo" */
.sd-demo__wm {
    position: absolute;
    right: 14px;
    bottom: 10px;
    font-family: 'Source Code Pro', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 246, 232, 0.35);
    z-index: 20;
    pointer-events: none;
}

/* Controls */
.sd-demo__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.sd-demo__ctrl {
    background: transparent;
    border: 1px solid rgba(35, 92, 129, 0.3);
    color: var(--blue);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-family: 'Source Code Pro', ui-monospace, monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
@media (hover: hover) {
    .sd-demo__ctrl:hover { background: var(--blue); color: var(--cream); border-color: var(--blue); }
}
.sd-demo__dots { display: inline-flex; gap: 6px; align-items: center; }
.sd-demo__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(35, 92, 129, 0.2); transition: background .3s ease; }
.sd-demo__dot.is-active { background: var(--coral); }

/* Cursor */
.sd-demo__cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 24px;
    z-index: 15;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
    animation: sdDemoCursor 40s cubic-bezier(0.65, 0.05, 0.35, 1) infinite;
}
.sd-demo__cursor svg { width: 100%; height: 100%; }

@keyframes sdDemoCursor {
    /* Phase 1 (0-20%): sidebar nav on Overview */
    0%    { transform: translate(22%, 60%); }
    6%    { transform: translate(5%, 18%); }
    10%   { transform: translate(5%, 18%); }
    /* Phase 2 (20-40%): click, move onto Revenue Breakdown chart */
    20%   { transform: translate(5%, 30%); }
    26%   { transform: translate(55%, 45%); }
    /* Phase 3 (40-60%): hover Channel Performance insight bubble */
    40%   { transform: translate(40%, 65%); }
    46%   { transform: translate(70%, 42%); }
    /* Phase 4 (60-80%): move to Action Button */
    60%   { transform: translate(60%, 72%); }
    66%   { transform: translate(80%, 78%); }
    /* Phase 5 (80-100%): move to Forecast tab */
    80%   { transform: translate(70%, 30%); }
    90%   { transform: translate(22%, 60%); }
    100%  { transform: translate(22%, 60%); }
}
@media (prefers-reduced-motion: reduce) {
    .sd-demo__cursor { animation: none; transform: translate(30%, 50%); }
}
.sd-demo.is-paused .sd-demo__cursor { animation-play-state: paused; }

/* Shell (sidebar + header + content) - visible on every screen */
.sd-demo__shell {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 88px 1fr;
    grid-template-rows: 48px 1fr;
}
.sd-demo__sidebar {
    grid-column: 1;
    grid-row: 1 / 3;
    background: rgba(17, 49, 74, 0.7);
    padding: 18px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-right: 1px solid rgba(84, 146, 182, 0.14);
}
.sd-demo__logo {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--coral), var(--sand));
    margin: 0 auto 18px;
}
.sd-demo__navitem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 10px;
    color: rgba(255, 246, 232, 0.7);
    font-family: 'Source Code Pro', ui-monospace, monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    transition: background .3s ease, color .3s ease;
}
.sd-demo__navitem svg { width: 14px; height: 14px; stroke: currentColor; flex: 0 0 auto; }
.sd-demo__navitem.is-active {
    background: rgba(219, 99, 93, 0.18);
    color: var(--cream);
}
.sd-demo__navitem.is-active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--coral);
    border-radius: 0 3px 3px 0;
}

.sd-demo__header {
    grid-column: 2;
    grid-row: 1;
    background: rgba(17, 49, 74, 0.6);
    border-bottom: 1px solid rgba(84, 146, 182, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    gap: 12px;
}
.sd-demo__crumb {
    font-family: 'Source Code Pro', ui-monospace, monospace;
    font-size: 10px;
    color: var(--sand);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.sd-demo__crumb strong { color: var(--cream); font-weight: 700; }
.sd-demo__datepick {
    background: rgba(84, 146, 182, 0.12);
    border: 1px solid rgba(84, 146, 182, 0.25);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 10px;
    color: var(--cream);
    font-family: 'Source Code Pro', ui-monospace, monospace;
    letter-spacing: 0.08em;
}

.sd-demo__stage {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    padding: 18px;
    overflow: hidden;
}

/* Screens fade between each other */
.sd-demo__screen {
    position: absolute;
    inset: 18px;
    opacity: 0;
    transition: opacity .6s ease;
    display: grid;
    gap: 10px;
}
.sd-demo__screen.is-active { opacity: 1; }

.sd-demo__screen--overview  { animation: sdDemoFade 40s infinite; animation-delay: 0s; }
.sd-demo__screen--revenue   { animation: sdDemoFade 40s infinite; animation-delay: -32s; }
.sd-demo__screen--inventory { animation: sdDemoFade 40s infinite; animation-delay: -24s; }
.sd-demo__screen--channel   { animation: sdDemoFade 40s infinite; animation-delay: -16s; }
.sd-demo__screen--forecast  { animation: sdDemoFade 40s infinite; animation-delay: -8s; }

@keyframes sdDemoFade {
    0%, 18% { opacity: 1; z-index: 2; pointer-events: auto; }
    22%, 98% { opacity: 0; z-index: 1; pointer-events: none; }
    100% { opacity: 0; z-index: 1; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-demo__screen { animation: none !important; opacity: 0; }
    .sd-demo__screen--overview { opacity: 1; }
}
.sd-demo.is-paused .sd-demo__screen { animation-play-state: paused; }

/* KPI tiles - used on overview */
.sd-demo__kpirow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.sd-demo__kpi {
    background: rgba(17, 49, 74, 0.55);
    border: 1px solid rgba(84, 146, 182, 0.18);
    border-radius: 8px;
    padding: 10px 10px 8px;
}
.sd-demo__kpi-label {
    font-family: 'Source Code Pro', ui-monospace, monospace;
    font-size: 8px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sand);
    margin-bottom: 4px;
}
.sd-demo__kpi-value {
    font-size: 17px;
    font-weight: 700;
    color: var(--cream);
    font-variant-numeric: tabular-nums;
}
.sd-demo__kpi-delta {
    font-size: 9px;
    color: var(--teal);
    margin-top: 2px;
    font-family: 'Source Code Pro', ui-monospace, monospace;
    letter-spacing: 0.06em;
}
.sd-demo__kpi-delta--down { color: var(--coral); }

/* Big chart area */
.sd-demo__chart {
    background: rgba(17, 49, 74, 0.45);
    border: 1px solid rgba(84, 146, 182, 0.18);
    border-radius: 10px;
    padding: 14px 14px 10px;
    position: relative;
    overflow: hidden;
    min-height: 140px;
}
.sd-demo__chart-title {
    font-family: 'Source Code Pro', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sand);
    margin-bottom: 8px;
}
.sd-demo__chart-svg { width: 100%; height: calc(100% - 20px); display: block; }

/* Stacked bars for revenue screen */
.sd-demo__stack {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: calc(100% - 20px);
}
.sd-demo__stack-bar {
    flex: 1;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    min-height: 20%;
    opacity: 0;
    transform: scaleY(0.2);
    transform-origin: bottom;
    animation: sdDemoBar 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.sd-demo__screen--revenue.is-active .sd-demo__stack-bar { /* when active, bars play */ }
.sd-demo__stack-seg { width: 100%; }
.sd-demo__stack-seg--dtc { background: var(--coral); height: 45%; }
.sd-demo__stack-seg--wholesale { background: var(--blue-m); height: 35%; }
.sd-demo__stack-seg--retail { background: var(--sand); height: 20%; }
@keyframes sdDemoBar { to { opacity: 1; transform: scaleY(1); } }

/* Insight bubble */
.sd-demo__insight {
    position: absolute;
    right: 14px;
    top: 14px;
    max-width: 55%;
    background: rgba(246, 200, 147, 0.12);
    border: 1px solid rgba(246, 200, 147, 0.35);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--cream);
    font-size: 10px;
    line-height: 1.4;
    backdrop-filter: blur(4px);
    opacity: 0;
    transform: translateY(-6px);
    animation: sdDemoInsight 40s infinite;
}
.sd-demo__insight--channel { animation-delay: -22s; }
.sd-demo__insight--forecast { animation-delay: -6s; }
@keyframes sdDemoInsight {
    0%, 6% { opacity: 0; transform: translateY(-6px); }
    8%, 16% { opacity: 1; transform: translateY(0); }
    18%, 100% { opacity: 0; transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) { .sd-demo__insight { animation: none; opacity: 0; } }
.sd-demo.is-paused .sd-demo__insight { animation-play-state: paused; }

.sd-demo__insight-tag {
    font-family: 'Source Code Pro', ui-monospace, monospace;
    font-size: 8px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sand);
    display: block;
    margin-bottom: 4px;
}
.sd-demo__insight strong { color: var(--sand); }

/* Action buttons row */
.sd-demo__actions {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.sd-demo__action {
    background: rgba(35, 92, 129, 0.35);
    border: 1px solid rgba(84, 146, 182, 0.3);
    color: var(--cream);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 9px;
    font-family: 'Source Code Pro', ui-monospace, monospace;
    letter-spacing: 0.08em;
}
.sd-demo__action--accent { background: rgba(219, 99, 93, 0.2); border-color: rgba(219, 99, 93, 0.4); color: var(--sand); }

/* Inventory table */
.sd-demo__table {
    background: rgba(17, 49, 74, 0.55);
    border: 1px solid rgba(84, 146, 182, 0.18);
    border-radius: 10px;
    overflow: hidden;
}
.sd-demo__trow {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
    gap: 8px;
    padding: 8px 12px;
    font-size: 10px;
    font-family: 'Source Code Pro', ui-monospace, monospace;
    color: var(--cream);
    border-bottom: 1px solid rgba(84, 146, 182, 0.1);
    align-items: center;
}
.sd-demo__trow--head {
    background: rgba(84, 146, 182, 0.12);
    color: var(--sand);
    font-size: 8px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.sd-demo__trow:last-child { border-bottom: 0; }
.sd-demo__stock {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 8px;
    letter-spacing: 0.08em;
}
.sd-demo__stock--low { background: rgba(219, 99, 93, 0.2); color: var(--coral); }
.sd-demo__stock--ok { background: rgba(128, 163, 143, 0.18); color: var(--teal); }
.sd-demo__stock--warn { background: rgba(246, 200, 147, 0.18); color: var(--sand); }

/* Channel performance line bars */
.sd-demo__chanrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    color: var(--cream);
    padding: 6px 0;
    border-bottom: 1px dashed rgba(84, 146, 182, 0.15);
}
.sd-demo__chanrow:last-child { border-bottom: 0; }
.sd-demo__chanlabel {
    width: 85px;
    font-family: 'Source Code Pro', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 246, 232, 0.75);
}
.sd-demo__chanbar {
    flex: 1;
    height: 8px;
    background: rgba(84, 146, 182, 0.15);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.sd-demo__chanbar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--blue-m), var(--coral));
    border-radius: 4px;
}
.sd-demo__chanval {
    width: 46px;
    text-align: right;
    font-family: 'Source Code Pro', ui-monospace, monospace;
    font-size: 10px;
    color: var(--sand);
}

/* Forecast chart with confidence band */
.sd-demo__forecast-svg {
    width: 100%;
    height: 100%;
    display: block;
}
.sd-demo__forecast-band { fill: rgba(84, 146, 182, 0.2); }
.sd-demo__forecast-line { fill: none; stroke: var(--coral); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sd-demo__forecast-line--dashed { stroke-dasharray: 4 3; stroke: var(--sand); }

/* Layout rows */
.sd-demo__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Responsive: shrink frame at small widths but keep 16:10 */
@media (max-width: 640px) {
    .sd-demo__shell { grid-template-columns: 60px 1fr; }
    .sd-demo__navitem { font-size: 0; gap: 0; padding: 8px; justify-content: center; }
    .sd-demo__navitem svg { width: 16px; height: 16px; }
    .sd-demo__logo { width: 24px; height: 24px; margin-bottom: 14px; }
    .sd-demo__kpirow { grid-template-columns: repeat(2, 1fr); }
    .sd-demo__kpi-value { font-size: 14px; }
    .sd-demo__crumb { font-size: 9px; }
    .sd-demo__datepick { display: none; }
}

/* Mobile showcase (phone frame) */
.sd-mobile {
    --navy: #11314a;
    --navy-deep: #0d1f2e;
    --blue: #235C81;
    --blue-m: #5492B6;
    --coral: #DB635D;
    --cream: #FFF6E8;
    --sand: #F6C893;
    --teal: #80a38f;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    font-family: 'Inter', system-ui, sans-serif;
    position: relative;
}
.sd-mobile *, .sd-mobile *::before, .sd-mobile *::after { box-sizing: border-box; }
.sd-mobile__device {
    position: relative;
    background: var(--navy-deep);
    border-radius: 42px;
    padding: 14px;
    box-shadow: 0 40px 80px rgba(13, 31, 46, 0.28), inset 0 0 0 1px rgba(84, 146, 182, 0.25);
    aspect-ratio: 9 / 19;
}
.sd-mobile__notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 28px;
    background: var(--navy-deep);
    border-radius: 0 0 16px 16px;
    z-index: 10;
}
.sd-mobile__screen {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--navy-deep);
    border-radius: 28px;
    overflow: hidden;
    padding: 44px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--cream);
}
.sd-mobile__statusbar {
    position: absolute;
    top: 14px;
    left: 24px;
    right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-family: 'Source Code Pro', ui-monospace, monospace;
    color: var(--cream);
    z-index: 2;
}
.sd-mobile__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 6px;
}
.sd-mobile__title {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--cream);
}
.sd-mobile__pill {
    font-family: 'Source Code Pro', ui-monospace, monospace;
    font-size: 8px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sand);
    background: rgba(246, 200, 147, 0.12);
    padding: 3px 8px;
    border-radius: 999px;
}
.sd-mobile__kpi-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.sd-mobile__kpi {
    background: rgba(17, 49, 74, 0.6);
    border: 1px solid rgba(84, 146, 182, 0.18);
    border-radius: 10px;
    padding: 8px 10px 7px;
}
.sd-mobile__kpi-label {
    font-family: 'Source Code Pro', ui-monospace, monospace;
    font-size: 7px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sand);
    margin-bottom: 3px;
}
.sd-mobile__kpi-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--cream);
    line-height: 1.1;
}
.sd-mobile__kpi-delta {
    font-size: 8px;
    color: var(--teal);
    margin-top: 2px;
    font-family: 'Source Code Pro', ui-monospace, monospace;
}
.sd-mobile__chart {
    flex: 1;
    background: rgba(17, 49, 74, 0.5);
    border: 1px solid rgba(84, 146, 182, 0.18);
    border-radius: 10px;
    padding: 10px;
    position: relative;
    overflow: hidden;
    min-height: 120px;
}
.sd-mobile__chart-label {
    font-family: 'Source Code Pro', ui-monospace, monospace;
    font-size: 7px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sand);
    margin-bottom: 6px;
}
.sd-mobile__chart-svg { width: 100%; height: calc(100% - 14px); display: block; }
.sd-mobile__insight {
    background: rgba(246, 200, 147, 0.1);
    border-left: 2px solid var(--sand);
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 9px;
    line-height: 1.4;
    color: rgba(255, 246, 232, 0.9);
}
.sd-mobile__insight strong { color: var(--sand); }
.sd-mobile__tabs {
    display: flex;
    justify-content: space-around;
    padding-top: 6px;
    border-top: 1px solid rgba(84, 146, 182, 0.18);
}
.sd-mobile__tab {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(84, 146, 182, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 246, 232, 0.5);
}
.sd-mobile__tab svg { width: 14px; height: 14px; }
.sd-mobile__tab.is-active { background: var(--coral); color: var(--cream); }
/* Simulated tap ripple */
.sd-mobile__tap {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid var(--coral);
    border-radius: 50%;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    animation: sdMobileTap 4.5s ease-out infinite;
}
@keyframes sdMobileTap {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0.9; }
    60% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-mobile__tap { animation: none; opacity: 0; }
}