/* =====================================================================================================================
   dashboardACE  -  "Take it anywhere": exporting to Power BI, Tableau, PDF and PNG on the home page

   1. The hero's final act (heroanim.js exportAct): an export dock rises over the live dashboard and builds a Power BI
      file, a Tableau workbook and a PDF, one after another. State classes on the stage: s-export, s-export-cloud,
      s-export-out; on each row: go (building), ok (ready).
   2. The "Export anywhere" section: the dashboard at the centre, beams carrying it to Power BI Desktop, Tableau
      Desktop, a PDF and an image, and the months of build work it skips.

   Power BI and Tableau are named, never drawn: their tiles use the site's own icons in colours that suggest them.

   Coded By Darko G.
   ===================================================================================================================== */

/* ---- 1. The hero's export dock ------------------------------------------------------------------------------------ */

.ha-export {
    position: absolute; left: 50%; bottom: 14px; z-index: 8; width: min(450px, calc(100% - 24px));
    display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow: hidden; isolation: isolate; border-radius: 22px;
    color: #F5F6FC; font-family: var(--font); text-align: left;
    background: radial-gradient(380px circle at 12% -20%, rgba(255, 178, 36, 0.22), transparent 60%), radial-gradient(380px circle at 100% 0%, rgba(137, 131, 255, 0.3), transparent 60%), linear-gradient(165deg, rgba(36, 40, 76, 0.88), rgba(13, 16, 32, 0.94));
    backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
    box-shadow: 0 40px 90px -30px rgba(4, 5, 18, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: translate(-50%, calc(100% + 40px)); opacity: 0; transition: transform 0.65s cubic-bezier(.2, .9, .2, 1), opacity 0.4s ease;
}
.ha-export::before {
    content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(155deg, rgba(255, 208, 138, 0.8), rgba(255, 255, 255, 0.06) 40%, rgba(165, 161, 255, 0.7));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.s-export > .ha-export { transform: translate(-50%, 0); opacity: 1; }
.s-export-out > .ha-export { transform: translate(-50%, calc(100% + 40px)); opacity: 0; }
.ha-stage.s-export:not(.s-export-out) #HeroDemo { filter: brightness(0.74) saturate(0.85); }

.hx-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 4px; }
.hx-orb { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-size: 13px; color: #FFB224;
    background: radial-gradient(circle at 30% 25%, #343A6E, #0D1020 72%); box-shadow: 0 0 0 2px rgba(255, 178, 36, 0.45), 0 8px 22px -6px rgba(255, 178, 36, 0.6); }
.hx-head b { display: block; font: 600 14.5px/1.2 var(--font); color: #fff; }
.hx-head small { display: block; margin-top: 2px; font-size: 11px; color: rgba(186, 192, 222, 0.78); }

.hx-list { display: grid; gap: 7px; }
.hx-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 9px 11px 9px 9px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); opacity: 0.5;
    transform: translateY(8px); animation: hxIn 0.45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 110ms + 250ms);
    transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease; }
.hx-row.go { opacity: 1; background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.16); }
.hx-row.ok { opacity: 1; }
.hx-tile { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; font-size: 16px; transition: transform 0.4s cubic-bezier(.3, 1.4, .5, 1); }
.hx-row.ok .hx-tile { transform: scale(1.08); }
.hx-pbi .hx-tile { color: #1F1A00; background: linear-gradient(145deg, #FFE066, #F2C811 55%, #D9A400); box-shadow: 0 8px 20px -8px rgba(242, 200, 17, 0.8); }
.hx-tab .hx-tile { color: #fff; background: linear-gradient(145deg, #3E7BD6, #1F4E9E 60%, #E97627 160%); box-shadow: 0 8px 20px -8px rgba(62, 123, 214, 0.85); }
.hx-pdf .hx-tile { color: #fff; background: linear-gradient(145deg, #FF7A6B, #E5484D 60%, #B4232A); box-shadow: 0 8px 20px -8px rgba(229, 72, 77, 0.8); }
.hx-txt { min-width: 0; }
.hx-txt b { display: block; font: 600 13.5px/1.25 var(--font); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-txt b em { font: 600 10.5px/1 var(--mono); font-style: normal; margin-left: 4px; padding: 2px 6px; border-radius: 6px; color: #FFD08A; background: rgba(255, 178, 36, 0.14); vertical-align: 1px; }
.hx-txt small { display: block; margin-top: 3px; font-size: 11px; color: rgba(186, 192, 222, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hx-state { position: relative; width: 132px; height: 22px; display: grid; align-items: center; }
.hx-bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden; transition: opacity 0.25s ease; }
.hx-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #A5A1FF, #FFB224); transform: scaleX(0); transform-origin: left; }
.hx-row.go .hx-bar i { animation: hxFill 0.95s cubic-bezier(.4, 0, .2, 1) both; }
.hx-ok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 5px; font: 600 11px/1 var(--font); color: #7EF0B8; white-space: nowrap;
    opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s ease; }
.hx-row.ok .hx-bar { opacity: 0; }
.hx-row.ok .hx-ok { opacity: 1; transform: none; }

.hx-cloud { display: none; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 13px; font-size: 12px; line-height: 1.4; color: rgba(255, 244, 222, 0.92);
    background: linear-gradient(110deg, rgba(255, 178, 36, 0.16), rgba(106, 99, 246, 0.2)); border: 1px solid rgba(255, 208, 138, 0.28);
    opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.2, .8, .2, 1); }
.hx-cloud i { color: #FFB224; font-size: 14px; }
.hx-cloud b { color: #fff; font-weight: 650; }
.s-export-cloud .hx-cloud { display: flex; animation: hxCloud 0.45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hxCloud { to { opacity: 1; transform: none; } }

@keyframes hxIn { to { transform: none; } }
@keyframes hxFill { to { transform: scaleX(1); } }

@container stage (max-width: 520px) {
    .ha-export { bottom: 8px; padding: 11px; gap: 8px; width: calc(100% - 16px); }
    .hx-state { width: 24px; }
    .hx-ok { font-size: 0; justify-content: center; }
    .hx-ok i { font-size: 16px; }
    .hx-txt small { display: none; }
    .hx-cloud { font-size: 11px; }
}


/* ---- 2. The "Export anywhere" section ----------------------------------------------------------------------------- */

.export-section { overflow: hidden; isolation: isolate; }
.export-section::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(40% 50% at 8% 30%, rgba(242, 200, 17, 0.16), transparent 70%), radial-gradient(40% 50% at 92% 35%, rgba(62, 123, 214, 0.16), transparent 70%), radial-gradient(50% 40% at 50% 100%, rgba(106, 99, 246, 0.12), transparent 70%);
}
.export-section .section-head h2 em { font-style: normal; color: transparent; background: linear-gradient(100deg, #D9A400, #E97627 45%, #4F46E5); -webkit-background-clip: text; background-clip: text; }
.export-section .section-head p { max-width: 760px; margin: 22px auto 0; font-size: 17.5px; line-height: 1.65; }

/* The stage: two destinations either side of the dashboard, beams between them */
.xp-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr); gap: 64px; align-items: center; margin: 10px 0 64px; }
.xp-col { display: grid; gap: 22px; }

.xp-dest { position: relative; padding: 20px 20px 18px; border-radius: 22px; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 30px 60px -34px rgba(15, 18, 34, 0.45), 0 0 0 1px var(--line); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), box-shadow 0.35s ease; }
.xp-dest:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -34px rgba(15, 18, 34, 0.5), 0 0 0 1px var(--line-2); }
.xp-top { display: flex; align-items: center; gap: 13px; }
.xp-tile { width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px; font-size: 20px; }
.xp-dest.pbi .xp-tile { color: #1F1A00; background: linear-gradient(145deg, #FFE066, #F2C811 55%, #D9A400); box-shadow: 0 12px 26px -12px rgba(217, 164, 0, 0.9); }
.xp-dest.tab .xp-tile { color: #fff; background: linear-gradient(145deg, #3E7BD6, #1F4E9E 60%, #E97627 160%); box-shadow: 0 12px 26px -12px rgba(31, 78, 158, 0.9); }
.xp-dest.pdf .xp-tile { color: #fff; background: linear-gradient(145deg, #FF7A6B, #E5484D 60%, #B4232A); box-shadow: 0 12px 26px -12px rgba(229, 72, 77, 0.85); }
.xp-dest.png .xp-tile { color: #fff; background: linear-gradient(145deg, #34D399, #0E9F6E 60%, #047857); box-shadow: 0 12px 26px -12px rgba(14, 159, 110, 0.85); }
.xp-name strong { display: block; font: 650 17px/1.2 var(--font); color: var(--ink); letter-spacing: -0.015em; }
.xp-name span { display: inline-block; margin-top: 5px; padding: 3px 8px; border-radius: 7px; font: 600 11.5px/1.2 var(--mono); color: var(--ink-2); background: var(--input); border: 1px solid var(--line); }
.xp-dest ul { list-style: none; margin: 15px 0 0; display: grid; gap: 7px; }
.xp-dest li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.xp-dest li i { margin-top: 3px; font-size: 12px; color: var(--good); }
.xp-cloud { display: inline-flex; align-items: center; gap: 8px; margin-top: 15px; padding: 8px 12px; border-radius: 999px; font: 600 12.5px/1.2 var(--font); color: var(--brand-ink);
    background: var(--brand-tint); border: 1px solid var(--brand-line); }
.xp-cloud i { color: var(--accent); }
.xp-cloud.plain { color: var(--good); background: var(--good-bg); border-color: rgba(14, 138, 85, 0.25); }
.xp-cloud.plain i { color: var(--good); }

/* Beams: a line from each destination to the dashboard, a packet of light running out along it */
.xp-dest::before, .xp-dest::after { content: ''; position: absolute; top: 50%; pointer-events: none; }
.xp-dest::before { width: 64px; height: 2px; margin-top: -1px; border-radius: 2px; background: linear-gradient(90deg, rgba(79, 70, 229, 0.08), rgba(79, 70, 229, 0.45)); }
.xp-dest::after { width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #FFB224; box-shadow: 0 0 0 4px rgba(255, 178, 36, 0.22), 0 0 18px 4px rgba(255, 178, 36, 0.55); opacity: 0; }
.xp-col.l .xp-dest::before { left: 100%; transform: scaleX(-1); }
.xp-col.r .xp-dest::before { right: 100%; }
.xp-col.l .xp-dest::after { left: calc(100% + 54px); animation: xpPacketL 2.6s cubic-bezier(.45, 0, .25, 1) infinite; }
.xp-col.r .xp-dest::after { right: calc(100% + 54px); animation: xpPacketR 2.6s cubic-bezier(.45, 0, .25, 1) infinite; }
.xp-col .xp-dest:nth-child(2)::after { animation-delay: -1.3s; }
.xp-col.r .xp-dest:nth-child(1)::after { animation-delay: -0.65s; }
.xp-col.r .xp-dest:nth-child(2)::after { animation-delay: -1.95s; }
@keyframes xpPacketL { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(-58px); opacity: 0; } }
@keyframes xpPacketR { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(58px); opacity: 0; } }

/* The dashboard at the centre, in the site's dark glass, with a slow halo */
.xp-hub { position: relative; display: grid; justify-items: center; gap: 16px; }
.xp-hub::before { content: ''; position: absolute; inset: -12% -8% 4%; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(106, 99, 246, 0.35), transparent), radial-gradient(closest-side at 60% 70%, rgba(255, 178, 36, 0.22), transparent); filter: blur(30px); animation: xpHalo 7s ease-in-out infinite; }
@keyframes xpHalo { 50% { transform: scale(1.08); opacity: 0.8; } }
.xp-screen { position: relative; width: 100%; padding: 14px; border-radius: 22px; color: #fff; overflow: hidden;
    background: radial-gradient(300px circle at 90% -10%, rgba(137, 131, 255, 0.35), transparent 60%), linear-gradient(165deg, #232A4C, #0D1020 80%);
    box-shadow: 0 50px 90px -40px rgba(13, 16, 32, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.xp-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.xp-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.xp-bar span { margin-left: 8px; font: 600 11.5px/1 var(--font); color: rgba(226, 229, 245, 0.75); }
.xp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.xp-kpis div { padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); }
.xp-kpis small { display: block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(186, 192, 222, 0.75); }
.xp-kpis b { display: block; margin-top: 5px; font: 700 17px/1 var(--font); letter-spacing: -0.02em; }
.xp-kpis em { display: block; margin-top: 5px; font-style: normal; font-size: 10.5px; color: #7EF0B8; }
.xp-charts { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; margin-top: 8px; }
.xp-charts > div { height: 112px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); }
.xp-bars { display: flex; align-items: flex-end; gap: 6px; }
.xp-bars i { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #A5A1FF, #6A63F6); height: var(--h); transform-origin: bottom; animation: xpGrow 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.4s); }
.xp-bars i:nth-child(3) { background: linear-gradient(180deg, #FFD08A, #FFB224); }
@keyframes xpGrow { 50% { transform: scaleY(0.82); } }
.xp-line svg { width: 100%; height: 100%; overflow: visible; }
.xp-line path { fill: none; stroke: #7EF0B8; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: xpDraw 4.5s ease-in-out infinite; }
.xp-line path.area { stroke: none; fill: url(#xpArea); stroke-dasharray: none; animation: none; opacity: 0.9; }
@keyframes xpDraw { 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -260; } }
.xp-hub-label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; font: 600 13.5px/1 var(--font); color: #fff;
    background: var(--panel); box-shadow: 0 16px 34px -16px rgba(13, 16, 32, 0.8); }
.xp-hub-label i { color: #FFB224; }

/* The months it skips: the usual first build against this one */
.xp-race { display: grid; gap: 14px; max-width: 1040px; margin: 0 auto; padding: 28px 30px; border-radius: 24px; background: var(--card); box-shadow: 0 30px 60px -40px rgba(15, 18, 34, 0.45), 0 0 0 1px var(--line); }
.xp-lane { display: grid; grid-template-columns: 230px minmax(0, 1fr) 150px; gap: 20px; align-items: center; }
.xp-lane > span { font: 600 14.5px/1.35 var(--font); color: var(--ink); }
.xp-lane > span small { display: block; margin-top: 2px; font-weight: 500; font-size: 12.5px; color: var(--ink-3); }
.xp-lane > strong { text-align: right; font: 700 20px/1.1 var(--font); letter-spacing: -0.02em; color: var(--ink); }
.xp-lane.new > strong { color: var(--accent); }
.xp-track { display: flex; gap: 4px; height: 38px; }
.xp-track i { flex: var(--f, 1); display: block; min-width: 0; padding: 0 8px; border-radius: 9px; overflow: hidden; text-align: center;
    font: 600 12px/38px var(--font); font-style: normal; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); background: repeating-linear-gradient(135deg, var(--bg-2) 0 8px, var(--bg) 8px 16px); }
.xp-lane.new .xp-track i { color: #fff; background: var(--grad); box-shadow: 0 10px 22px -12px rgba(79, 70, 229, 0.9); }
.xp-lane.new .xp-track i:nth-child(2) { background: linear-gradient(135deg, #D9A400, #E97627); box-shadow: 0 10px 22px -12px rgba(233, 118, 39, 0.9); }
.xp-lane.new .xp-track i:nth-child(3) { background: linear-gradient(135deg, #0E9F6E, #047857); box-shadow: 0 10px 22px -12px rgba(14, 159, 110, 0.9); }
.xp-lane.new .xp-track .rest { flex: 7; color: var(--ink-3); background: none; box-shadow: none; border: 1.5px dashed var(--line-2); text-align: left; padding-left: 14px; line-height: 35px; }
.xp-lane.new .xp-track .rest::before { content: '\f00c'; font: 900 11px/1 'Font Awesome 6 Pro'; margin-right: 8px; color: var(--good); }

.xp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 40px; }
.xp-note { font-size: 14px; color: var(--ink-3); }
.xp-note i { margin-right: 6px; color: var(--accent); }

/* The site's dark mode: the same glass, dark */
[data-theme="dark"] .xp-dest { background: rgba(19, 23, 39, 0.78); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line); }
[data-theme="dark"] .xp-dest::before { background: linear-gradient(90deg, rgba(137, 131, 255, 0.1), rgba(137, 131, 255, 0.55)); }
[data-theme="dark"] .xp-race { box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line); }
[data-theme="dark"] .xp-screen { box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .xp-hub-label { background: #1A1F35; box-shadow: 0 0 0 1px var(--line-2); }

@media (max-width: 1100px) {
    .xp-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .xp-hub { grid-column: 1 / -1; grid-row: 1; max-width: 520px; width: 100%; justify-self: center; margin-bottom: 18px; }
    .xp-col { display: contents; }
    .xp-dest::before, .xp-dest::after { display: none; }
    .xp-lane { grid-template-columns: 180px minmax(0, 1fr) 120px; }
}
@media (max-width: 720px) {
    .xp-stage { grid-template-columns: minmax(0, 1fr); }
    .xp-race { padding: 22px 18px; }
    .xp-lane { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; }
    .xp-lane > span { grid-column: 1; }
    .xp-lane > strong { grid-column: 2; grid-row: 1; font-size: 17px; }
    .xp-track { grid-column: 1 / -1; height: auto; flex-wrap: wrap; }
    .xp-track i { flex: 1 1 auto; font-size: 11.5px; padding: 0 10px; line-height: 30px; }
    .xp-lane.new .xp-track .rest { flex: 1 1 100%; line-height: 27px; }
    .export-section .section-head p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .xp-dest::after, .xp-bars i, .xp-line path, .xp-hub::before { animation: none !important; }
    .xp-line path { stroke-dashoffset: 0; }
    .hx-row { animation: none; transform: none; }
}