/* ═══════════════════════════════════════════════════════════════
   D8 — "ČO PONÚKAME" 8-CARD GRID + DASHBOARD SHOWCASE
   Variant B "Foil Plaque" (client-approved direction).
   Ported from design-variants/D8-cards-B-foil-plaque.html
   (.fp- prefixed prototype classes renamed to .d8- for production).

   SHARED, REUSABLE component. Used in six places across the site:
     - index.php            (accounting / marketing / web sections — 3x)
     - uctovnictvo.php
     - marketing.php
     - webstranky.php
   Each instance supplies its own 8 icons/titles/descriptions and its
   own dashboard numbers — this file only supplies the *look* and the
   *mechanics*. See js/d8-benefit-cards.js header comment for the full,
   exact, copy-pasteable markup template (placeholders marked).

   Deliberately uses its OWN class namespace (.d8-benefit-*, .d8-*)
   — NOT .benefit-item / .benefit-icon (those belong to D1's "Foil
   Bevel" treatment of the *existing* 4-card sections). D8's "Foil
   Plaque" look is a different, more elaborate treatment for the new
   8-card sections and must never collide with D1's selectors.

   Tokens: reuses css/premium.css's :root tokens only (--accent,
   --surface, --border, --white, --muted, --ease-out, --ink). The
   --d8-foil-* variables below are NOT new hues — they are the same
   five tonal steps of --accent (#c9a255) already shown to and
   approved by the client in this exact prototype (pale → deep foil
   embossing ladder). --d8-stock-* are a warm-tinted near-black
   derived the same way, for the plaque's brass "stock" surface.
   Load this file AFTER premium.css (and independent of d1/d2/d5/d13).
   ═══════════════════════════════════════════════════════════════ */

:root {
    --d8-foil-pale:  #f3e6c4;
    --d8-foil-light: #e6cf9b;
    --d8-foil:       var(--accent, #c9a255);
    --d8-foil-mid:   #9c7a38;
    --d8-foil-deep:  #6b5326;

    --d8-stock-hi: #1d1b17;
    --d8-stock:    #171613;
    --d8-stock-lo: #100f0c;

    --d8-hairline: rgba(201, 162, 85, 0.22);
}

/* ═══════════════════════════════════════════════════════════════
   1) CARD GRID — "foil plaque" plate + 8 cards
   ═══════════════════════════════════════════════════════════════ */

.d8-benefit-plate {
    position: relative;
    padding: 22px;
    margin: 0 -22px;
}

.d8-benefit-plate span[data-tick] {
    position: absolute;
    width: 18px;
    height: 18px;
    opacity: 0.55;
    pointer-events: none;
}

.d8-benefit-plate span[data-tick="tl"] { top: 0; left: 0; border-top: 1px solid var(--d8-foil); border-left: 1px solid var(--d8-foil); }
.d8-benefit-plate span[data-tick="tr"] { top: 0; right: 0; border-top: 1px solid var(--d8-foil); border-right: 1px solid var(--d8-foil); }
.d8-benefit-plate span[data-tick="bl"] { bottom: 0; left: 0; border-bottom: 1px solid var(--d8-foil); border-left: 1px solid var(--d8-foil); }
.d8-benefit-plate span[data-tick="br"] { bottom: 0; right: 0; border-bottom: 1px solid var(--d8-foil); border-right: 1px solid var(--d8-foil); }

.d8-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    counter-reset: d8-card;
}

@media (max-width: 1080px) { .d8-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .d8-benefit-grid { grid-template-columns: minmax(0, 1fr); } }

/* Below the 1400px container max-width the site container becomes full
   width. Match the plaque bleed to its 15px gutter so all four corner ticks
   stay inside the viewport instead of being clipped by the page edge. */
@media (max-width: 1439px) {
    .d8-benefit-plate {
        padding-left: 15px;
        padding-right: 15px;
        margin-left: -15px;
        margin-right: -15px;
    }
}

.d8-benefit-card {
    counter-increment: d8-card;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 26px;
    border-radius: 14px;
    background-color: var(--d8-stock);
    background-image:
        repeating-linear-gradient(101deg, rgba(255, 255, 255, 0.016) 0 2px, rgba(0, 0, 0, 0) 2px 7px),
        linear-gradient(158deg, var(--d8-stock-hi) 0%, var(--d8-stock) 46%, var(--d8-stock-lo) 100%);
    border: 1px solid var(--d8-hairline);
    box-shadow:
        inset 0 1px 0 rgba(246, 232, 196, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.72),
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        0 2px 3px -1px rgba(0, 0, 0, 0.5),
        0 18px 34px -20px rgba(0, 0, 0, 0.9);
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0);
    transition:
        transform 0.55s var(--ease-out),
        box-shadow 0.5s var(--ease-out),
        border-color 0.4s var(--ease-out);
}

/* Foil layers get their own clip (card itself must not clip, so the
   transform + border-radius combo doesn't break in Safari/Firefox). */
.d8-benefit-foil {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

/* Cursor-tracked specular sheen — JS sets --d8-mx/--d8-my per pointer move */
.d8-benefit-spec {
    position: absolute;
    inset: -1px;
    background: radial-gradient(360px circle at var(--d8-mx, 50%) var(--d8-my, 0%),
        rgba(246, 232, 196, 0.15),
        rgba(201, 162, 85, 0.055) 42%,
        rgba(201, 162, 85, 0) 70%);
    opacity: 0;
    transition: opacity 0.45s ease;
}

/* Sweep-of-light flash on hover/focus — pure CSS keyframe, no JS involved */
.d8-benefit-sweep {
    position: absolute;
    top: -35%;
    bottom: -35%;
    left: -70%;
    width: 52%;
    opacity: 0;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 32%,
        rgba(243, 230, 196, 0.30) 50%,
        rgba(255, 255, 255, 0.05) 68%,
        rgba(255, 255, 255, 0) 100%);
    transform: translateX(0) skewX(-14deg);
}

@keyframes d8-sweep {
    0%   { transform: translateX(0) skewX(-14deg);    opacity: 0; }
    14%  { opacity: 1; }
    86%  { opacity: 1; }
    100% { transform: translateX(340%) skewX(-14deg); opacity: 0; }
}

.d8-benefit-card-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

/* Accent index number — auto-filled by CSS counter, "01".."08".
   No text needed in markup; keep the element empty + aria-hidden. */
.d8-benefit-num {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--d8-foil-light);
    text-shadow:
        0 1px 0 rgba(246, 232, 196, 0.24),
        0 0 14px rgba(201, 162, 85, 0.16),
        0 -1px 0 rgba(0, 0, 0, 0.75);
    padding-bottom: 4px;
    transform: translate(calc(var(--d8-px, 0) * -1px), calc(var(--d8-py, 0) * -1px));
    transition: color 0.4s var(--ease-out), text-shadow 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}

.d8-benefit-num::before {
    content: counter(d8-card, decimal-leading-zero);
}

.d8-benefit-well {
    position: relative;
    flex: none;
    width: 74px;
    height: 74px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(158deg, rgba(0, 0, 0, 0.55), rgba(201, 162, 85, 0.05) 78%);
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.85),
        inset 0 -1px 0 rgba(246, 232, 196, 0.09),
        inset 0 0 0 1px rgba(201, 162, 85, 0.14);
    transform: translate(calc(var(--d8-px, 0) * 1px), calc(var(--d8-py, 0) * 1px));
    transition: box-shadow 0.45s var(--ease-out), transform 0.5s var(--ease-out);
}

.d8-benefit-icon {
    width: 54px;
    height: 54px;
    display: block;
    transition: transform 0.55s var(--ease-out);
}

.d8-benefit-rule {
    height: 1px;
    margin-bottom: 16px;
    background-image: linear-gradient(90deg, var(--d8-foil-light), rgba(201, 162, 85, 0.14));
    background-repeat: no-repeat;
    background-size: 34% 100%;
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    transition: background-size 0.7s var(--ease-out);
}

.d8-benefit-title {
    font-family: 'Manrope', sans-serif;
    font-size: 1.01rem;
    font-weight: 800;
    line-height: 1.26;
    letter-spacing: -0.015em;
    color: var(--white);
    margin: 0 0 9px;
    transition: color 0.35s var(--ease-out);
}

.d8-benefit-desc {
    font-size: 0.855rem;
    line-height: 1.66;
    color: #9a9691;
    margin: 0;
}

.d8-benefit-card:hover,
.d8-benefit-card:focus-within {
    border-color: rgba(201, 162, 85, 0.62);
    box-shadow:
        inset 0 1px 0 rgba(246, 232, 196, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.75),
        inset 0 0 0 1px rgba(0, 0, 0, 0.3),
        0 2px 3px -1px rgba(0, 0, 0, 0.5),
        0 30px 52px -24px rgba(0, 0, 0, 0.95),
        0 16px 40px -26px rgba(0, 0, 0, 0.7);
}

.d8-benefit-card:hover .d8-benefit-spec,
.d8-benefit-card:focus-within .d8-benefit-spec { opacity: 1; }

.d8-benefit-card:hover .d8-benefit-sweep,
.d8-benefit-card:focus-within .d8-benefit-sweep { animation: d8-sweep 1.05s var(--ease-out); }

.d8-benefit-card:hover .d8-benefit-rule,
.d8-benefit-card:focus-within .d8-benefit-rule { background-size: 100% 100%; }

.d8-benefit-card:hover .d8-benefit-num,
.d8-benefit-card:focus-within .d8-benefit-num {
    color: var(--d8-foil-pale);
    text-shadow:
        0 1px 0 rgba(246, 232, 196, 0.34),
        0 0 18px rgba(201, 162, 85, 0.24),
        0 -1px 0 rgba(0, 0, 0, 0.82);
}

.d8-benefit-card:hover .d8-benefit-well,
.d8-benefit-card:focus-within .d8-benefit-well {
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.9),
        inset 0 -1px 0 rgba(246, 232, 196, 0.2),
        inset 0 0 0 1px rgba(201, 162, 85, 0.4);
}

.d8-benefit-card:hover .d8-benefit-icon,
.d8-benefit-card:focus-within .d8-benefit-icon { transform: scale(1.07); }

@media (hover: hover) and (pointer: fine) {
    .d8-benefit-card:hover { transform: perspective(900px) translateY(-6px); }
}

/* ═══════════════════════════════════════════════════════════════
   2) SCROLL-REVEAL (JS-driven; CSS default is hidden — matches the
   site's existing WOW.js convention of hide-by-default/reveal-on-
   scroll already used on these same sections). If js/d8-benefit-
   cards.js fails to load, elements stay in their hidden starting
   state — identical risk profile to the site's current `.wow`
   usage on these exact 4-card sections today.
   ═══════════════════════════════════════════════════════════════ */
.d8-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.d8-reveal.d8-in {
    opacity: 1;
    transform: none;
}

@media (max-width: 620px) {
    .d8-benefit-card-head { justify-content: flex-start; gap: 16px; }
    .d8-benefit-well { order: -1; }
}

@media (max-width: 560px) {
    .d8-benefit-plate { padding: 20px 14px; margin: 0 -14px; }
}

/* ═══════════════════════════════════════════════════════════════
   3) DASHBOARD SHOWCASE — laptop chrome + real HTML/CSS/SVG charts
   ═══════════════════════════════════════════════════════════════ */
.d8-dashboard {
    position: relative;
    max-width: 1000px;
    /* Give the dashboard a clear second beat after the benefit cards while
       keeping the same relationship across the homepage and service pages. */
    margin: clamp(48px, 5vw, 72px) auto 0;
}

.d8-dashboard-lid {
    position: relative;
    padding: 13px 13px 15px;
    border-radius: 16px 16px 7px 7px;
    background: linear-gradient(158deg, #2a2721 0%, #1a1815 44%, #0e0d0b 100%);
    border: 1px solid rgba(201, 162, 85, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(246, 232, 196, 0.16),
        inset 0 -1px 0 rgba(0, 0, 0, 0.8),
        0 30px 60px -30px rgba(0, 0, 0, 0.95),
        0 10px 40px -28px rgba(0, 0, 0, 0.65);
}

.d8-dashboard-lid::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: #0a0a09;
    box-shadow: inset 0 0 0 1px rgba(201, 162, 85, 0.35), 0 1px 0 rgba(246, 232, 196, 0.08);
}

.d8-dashboard-screen {
    position: relative;
    border-radius: 7px;
    overflow: hidden;
    background: #0c0c0b;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 8px 26px -14px rgba(0, 0, 0, 0.9);
}

.d8-dashboard-base {
    position: relative;
    width: 106%;
    height: 15px;
    margin: 0 -3%;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(180deg, #26231d 0%, #17150f 55%, #0c0b09 100%);
    box-shadow:
        inset 0 1px 0 rgba(246, 232, 196, 0.14),
        0 16px 26px -18px rgba(0, 0, 0, 0.95);
}

.d8-dashboard-base::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 90px;
    height: 3px;
    margin-left: -45px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 1px 0 rgba(246, 232, 196, 0.1);
}

.d8-dashboard-glow {
    height: 46px;
    margin: 0 auto;
    width: 74%;
    background: radial-gradient(ellipse at 50% 0%, rgba(201, 162, 85, 0.2), transparent 72%);
    pointer-events: none;
}

.d8-dashboard-app {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 452px;
    font-size: 13px;
}

.d8-dashboard-main {
    padding: 18px 20px 22px;
    background:
        radial-gradient(700px circle at 82% -12%, rgba(201, 162, 85, 0.055), transparent 62%),
        #0f0f0e;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.d8-dashboard-appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.d8-dashboard-appbar h3 {
    font-family: 'Archivo Black', sans-serif;
    font-size: 15px;
    letter-spacing: -0.015em;
    color: var(--white);
    margin: 0;
}

.d8-dashboard-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--d8-foil-light);
    background: rgba(201, 162, 85, 0.11);
    border: 1px solid rgba(201, 162, 85, 0.3);
}

.d8-dashboard-chip::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--d8-foil);
}

.d8-dashboard-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.d8-dashboard-tile {
    position: relative;
    padding: 13px 14px 14px;
    border-radius: 10px;
    background: linear-gradient(158deg, #1a1916 0%, #141312 100%);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(246, 232, 196, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.55);
}

.d8-dashboard-tile--lead { border-color: rgba(201, 162, 85, 0.3); }

.d8-dashboard-tile-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #8f8b85;
    margin-bottom: 8px;
}

.d8-dashboard-tile-value {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(15px, 1.9vw, 20px);
    letter-spacing: -0.025em;
    color: var(--white);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}

.d8-dashboard-tile--lead .d8-dashboard-tile-value { color: var(--d8-foil-light); }

.d8-dashboard-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 9px;
    padding: 3px 8px;
    border-radius: 100px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--d8-foil-light);
    background: rgba(201, 162, 85, 0.12);
    border: 1px solid rgba(201, 162, 85, 0.24);
    font-variant-numeric: tabular-nums;
}

.d8-dashboard-delta svg { width: 9px; height: 9px; display: block; }

.d8-dashboard-charts {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 10px;
    flex: 1;
}

.d8-dashboard--marketing .d8-dashboard-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.d8-dashboard--marketing .d8-dashboard-charts {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.d8-dashboard-panel {
    display: flex;
    flex-direction: column;
    padding: 13px 14px 12px;
    border-radius: 10px;
    background: linear-gradient(158deg, #1a1916 0%, #141312 100%);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(246, 232, 196, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.55);
}

.d8-dashboard-panel-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #8f8b85;
    margin-bottom: 12px;
}

.d8-dashboard-panel--budget { justify-content: space-between; }

.d8-dashboard-budget {
    display: grid;
    align-content: center;
    flex: 1;
    gap: 10px;
}

.d8-dashboard-budget-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.d8-dashboard-budget-row:last-child { border-bottom: 0; }

.d8-dashboard-budget-row > span {
    color: #9a948a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
}

.d8-dashboard-budget-row > strong {
    color: var(--d8-foil-light);
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(16px, 2.2vw, 24px);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1;
    white-space: nowrap;
}

.d8-dashboard-trend { flex: 1; display: flex; flex-direction: column; }
.d8-dashboard-trend svg { width: 100%; height: auto; display: block; }

.d8-dashboard-trend-x {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    padding: 0 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a857f;
}

/* Line drawing: rely on pathLength="1" on the <path> so the reveal
   works for ANY path shape/length a future page draws — see the JS
   header comment. Default state = undrawn; .d8-in draws it in. */
.d8-trend-line { opacity: 0; stroke-dasharray: none; stroke-dashoffset: 0; transition: opacity 0.65s var(--ease-out); }
.d8-trend-area { opacity: 0; transition: opacity 0.9s ease 0.45s; }
.d8-trend-dot  { opacity: 0; transition: opacity 0.4s ease 0.08s; }

.d8-in .d8-trend-line { opacity: 1; }
.d8-in .d8-trend-area { opacity: 1; }
.d8-in .d8-trend-dot  { opacity: 1; }

.d8-dashboard-donut {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    flex: 1;
}

.d8-dashboard--marketing .d8-dashboard-donut {
    grid-template-columns: minmax(108px, 42%) minmax(0, 1fr);
}

.d8-donut-chart { position: relative; }
.d8-donut-chart svg { width: 100%; height: auto; display: block; }

.d8-donut-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    pointer-events: none;
}

.d8-donut-total {
    font-family: 'Archivo Black', sans-serif;
    font-size: 14px;
    letter-spacing: -0.025em;
    color: var(--white);
    font-variant-numeric: tabular-nums;
}

.d8-donut-cap {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #8a857f;
    margin-top: 3px;
}

/* Arc draw-in: JS reads each circle's data-arc="<percent>" attribute,
   computes the correct stacking stroke-dashoffset (cumulative sum of
   the PRECEDING arcs in the same group) and sets --d8-arc-pct to the
   arc's own target percentage. Target/stagger are fully data-driven —
   this CSS never hardcodes a percentage, so any values/any number of
   arcs work without touching this file. */
.d8-arc {
    stroke-dasharray: 0 100;
    transition: stroke-dasharray 1.1s var(--ease-out);
}

.d8-in .d8-arc {
    stroke-dasharray: var(--d8-arc-pct, 0) 100;
}

.d8-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }

.d8-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: #a5a19b;
}

.d8-legend i {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.d8-legend b {
    margin-left: auto;
    font-weight: 800;
    color: var(--white);
    font-variant-numeric: tabular-nums;
}

.d8-caption {
    text-align: center;
    margin-top: 46px;
}

.d8-caption p {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(1.45rem, 3.6vw, 2.3rem);
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--white);
    margin: 0 0 18px;
}

.d8-caption strong { color: var(--d8-foil); font-weight: inherit; }

.d8-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #7e7a75;
}

.d8-wordmark::before,
.d8-wordmark::after {
    content: '';
    width: 38px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--d8-foil));
}

.d8-wordmark::after { background: linear-gradient(90deg, var(--d8-foil), transparent); }

@media (max-width: 860px) {
    .d8-dashboard-app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .d8-dashboard-charts { grid-template-columns: minmax(0, 1fr); }
    .d8-dashboard--marketing .d8-dashboard-charts { grid-template-columns: minmax(0, 1fr); }
    .d8-dashboard-donut { grid-template-columns: 108px minmax(0, 1fr); }
    .d8-dashboard--marketing .d8-dashboard-donut { grid-template-columns: 108px minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .d8-dashboard-tiles { grid-template-columns: minmax(0, 1fr); }
    .d8-dashboard--marketing .d8-dashboard-tiles { grid-template-columns: minmax(0, 1fr); }
    .d8-dashboard-main { padding: 14px 13px 16px; }
    .d8-dashboard-base { height: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   4) prefers-reduced-motion — freeze sheen/tilt/sweep and chart-draw
   to their END state instantly; count-up is handled instantly by
   the JS itself (see js/d8-benefit-cards.js) rather than through CSS.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .d8-benefit-card,
    .d8-benefit-card *,
    .d8-reveal,
    .d8-trend-line,
    .d8-trend-area,
    .d8-trend-dot,
    .d8-arc {
        transition-duration: 0.001s !important;
        transition-delay: 0s !important;
        animation: none !important;
    }

    .d8-benefit-card:hover { transform: none !important; }
    .d8-benefit-sweep { display: none; }
    .d8-reveal { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   5) DASHBOARD MICROINTERACTIONS + WEB BEFORE/AFTER COMPARISON
   ═══════════════════════════════════════════════════════════════ */

.d8-dashboard-screen > .d8-dashboard-app {
    position: relative;
    z-index: 1;
}

/* A bounded brass reflection gives the screen a physical, premium
   surface response. JS only updates the two custom properties on a
   requestAnimationFrame when a fine pointer is actually over the screen. */
.d8-dashboard-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(260px circle at var(--d8-dashboard-mx, 50%) var(--d8-dashboard-my, 22%), rgba(243, 230, 196, 0.13), transparent 72%);
    mix-blend-mode: screen;
    transition: opacity 320ms var(--ease-out);
}

.d8-dashboard.is-pointer-active .d8-dashboard-screen::after { opacity: 0.82; }

.d8-dashboard-tile,
.d8-dashboard-panel,
.d8-dashboard-chip {
    transition:
        transform 240ms var(--ease-out),
        border-color 240ms ease,
        box-shadow 240ms ease,
        background 240ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .d8-dashboard-tile:hover {
        transform: translateY(-3px);
        border-color: rgba(201, 162, 85, 0.42);
        background: linear-gradient(158deg, #211e19 0%, #171512 100%);
        box-shadow: inset 0 1px 0 rgba(246, 232, 196, 0.1), 0 10px 22px -18px rgba(201, 162, 85, 0.85);
    }

    .d8-dashboard-tile:hover .d8-dashboard-tile-value { text-shadow: 0 0 18px rgba(230, 207, 155, 0.18); }

    .d8-dashboard-panel:hover {
        transform: translateY(-2px);
        border-color: rgba(201, 162, 85, 0.34);
        box-shadow: inset 0 1px 0 rgba(246, 232, 196, 0.1), 0 10px 24px -20px rgba(201, 162, 85, 0.7);
    }

    .d8-dashboard-chip:hover {
        border-color: rgba(243, 230, 196, 0.54);
        background: rgba(201, 162, 85, 0.17);
    }
}

.d8-dashboard-tile-value--stacked {
    display: grid;
    gap: 4px;
    white-space: normal;
    font-size: clamp(13px, 1.65vw, 18px);
    line-height: 1.05;
}

.d8-dashboard-submetric {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 6px;
}

.d8-dashboard-submetric > span {
    font-family: inherit;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.15;
    text-transform: uppercase;
    color: #9a948a;
}

.d8-dashboard-submetric strong {
    min-width: 0;
    overflow: hidden;
    font: inherit;
    font-weight: inherit;
    color: var(--d8-foil-light);
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d8-dashboard-compare {
    --d8-compare-position: 50%;
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    gap: 10px;
}

.d8-compare-stage {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 190px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(201, 162, 85, 0.3);
    border-radius: 9px;
    background: #0c0c0b;
    box-shadow: inset 0 1px 0 rgba(246, 232, 196, 0.08), 0 12px 24px -22px rgba(0, 0, 0, 0.9);
    cursor: ew-resize;
    touch-action: pan-y;
}

.d8-compare-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.2));
    opacity: 0.5;
}

.d8-compare-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    user-select: none;
    pointer-events: none;
}

.d8-compare-image--after { z-index: 1; }

.d8-compare-before {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    clip-path: inset(0 calc(100% - var(--d8-compare-position)) 0 0);
}

.d8-compare-image--before { z-index: 1; }

.d8-compare-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--d8-compare-position);
    z-index: 4;
    width: 1px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--d8-foil-pale) 14%, var(--d8-foil-pale) 86%, transparent);
    box-shadow: 0 0 12px rgba(243, 230, 196, 0.55);
}

.d8-compare-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 38px;
    height: 54px;
    border: 1px solid rgba(243, 230, 196, 0.7);
    border-radius: 100px;
    background: rgba(12, 12, 11, 0.86);
    box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
}

.d8-compare-handle i {
    display: block;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid var(--d8-foil-pale);
    border-left: 1.5px solid var(--d8-foil-pale);
}

.d8-compare-handle i:first-child { transform: rotate(-45deg); }
.d8-compare-handle i:last-child { transform: rotate(135deg); }

.d8-dashboard.d8-in .d8-compare-handle {
    animation: d8-compare-intro 900ms 180ms var(--ease-out) both;
}

@keyframes d8-compare-intro {
    0% { opacity: 0; box-shadow: 0 0 0 rgba(243, 230, 196, 0); }
    55% { opacity: 1; box-shadow: 0 0 24px rgba(243, 230, 196, 0.48), 0 8px 22px -12px rgba(0, 0, 0, 0.95); }
    100% { opacity: 1; box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
}

.d8-compare-badge {
    position: absolute;
    top: 10px;
    z-index: 4;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 5px;
    background: rgba(12, 12, 11, 0.72);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
}

.d8-compare-badge--before { left: 10px; }
.d8-compare-badge--after { right: 10px; }

.d8-compare-range {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    appearance: none;
    background: transparent;
}

.d8-compare-range::-webkit-slider-runnable-track { width: 100%; height: 100%; background: transparent; border: 0; }
.d8-compare-range::-moz-range-track { width: 100%; height: 100%; background: transparent; border: 0; }
.d8-compare-range::-webkit-slider-thumb { width: 42px; height: 100%; border: 0; background: transparent; appearance: none; }
.d8-compare-range::-moz-range-thumb { width: 42px; height: 100%; border: 0; border-radius: 0; background: transparent; }

.d8-compare-range:focus-visible {
    z-index: 7;
    opacity: 1;
    outline: 2px solid var(--d8-foil-pale);
    outline-offset: -5px;
    border-radius: 8px;
}

.d8-compare-stage.is-dragging { cursor: grabbing; }

.d8-compare-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: #a5a19b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.d8-compare-controls > span:last-child { text-align: right; }

.d8-compare-controls output {
    padding: 4px 7px;
    border: 1px solid rgba(201, 162, 85, 0.24);
    border-radius: 100px;
    color: var(--d8-foil-light);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .d8-compare-stage { min-height: 180px; }
    .d8-compare-controls { font-size: 9px; gap: 5px; }
    .d8-compare-controls output { padding: 4px 6px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .d8-dashboard-screen::after { display: none; }
    .d8-dashboard-tile,
    .d8-dashboard-panel,
    .d8-dashboard-chip,
    .d8-compare-divider { transition-duration: 0.001s !important; }
    .d8-dashboard.d8-in .d8-compare-handle { animation: none; }
}