/* ===== HERO CONVEYOR ANIMATION — all 5 dashboard pages ===== */
@keyframes hofade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes hodash{to{background-position:-16px 0}}
@keyframes hoconvey{0%{left:-14%;opacity:0}6%,27%{opacity:1}33%,100%{left:112%;opacity:0}}
@keyframes hopulse{0%,70%,100%{box-shadow:0 0 0 0 rgba(0,90,242,0)}
  82%{box-shadow:0 0 0 8px rgba(0,90,242,.28)}
  92%{box-shadow:0 0 0 14px rgba(0,90,242,0)}}
.ho-card{animation:hofade .5s ease both}
.ho-line{animation:hodash .5s linear infinite}
.ho-chip{animation:hoconvey 4.5s linear infinite both}
.ho-chip.is-2{animation-delay:1.5s}
.ho-chip.is-3{animation-delay:3s}
.ho-tile.is-target{animation:hopulse 3s ease-in-out infinite}
/* ===== HERO CONVEYOR LAYOUT ===== */
.ho-rail{display:flex;align-items:center}
.ho-card{flex:none;display:flex;flex-direction:column;align-items:center;gap:12px}
.ho-tile{display:flex;align-items:center;justify-content:center;width:100px;height:100px;
  border-radius:22px;background:#fff;box-shadow:0 20px 50px -18px rgba(0,0,0,.6)}
.ho-tile img{width:58px;height:auto;display:block}
.ho-tile.is-target img{width:54px}
.ho-label{font:600 13px/1 Inter;color:#BDC8F2}
.ho-pipe{position:relative;flex:1;height:56px;margin:0 -8px 34px;border-radius:12px;
  background:rgba(189,200,242,.08);border:1px solid rgba(189,200,242,.16);overflow:hidden}
.ho-line{position:absolute;top:50%;left:0;right:0;height:2px;margin-top:-1px;
  background:linear-gradient(90deg,rgba(0,90,242,.4),rgba(131,202,22,.4));
  background-size:16px 2px;opacity:.6}
.ho-chip{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;
  align-items:center;gap:6px;padding:5px 10px;border-radius:7px;background:#fff;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.5);font:600 10px/1 Inter;color:#0D1017;white-space:nowrap}
.ho-dot{flex:none;width:7px;height:7px;border-radius:2px;background:#005AF2}
.ho-dot.is-green{background:#83CA16}
.ho-dot.is-amber{background:#F49D0B}
/* ===== CONNECTION MOTIF — source → Power BI ===== */
@keyframes connsend{0%,58%,100%{transform:scale(1)}66%{transform:scale(.97)}}
@keyframes conndash{to{background-position:0 -14px}}
@keyframes connfile{0%{top:0;transform:translateY(0);opacity:0}14%,86%{opacity:1}
  100%{top:100%;transform:translateY(-100%);opacity:0}}
@keyframes connpulse{0%,70%,100%{box-shadow:0 0 0 0 rgba(0,90,242,0)}
  82%{box-shadow:0 0 0 7px rgba(0,90,242,.3)}
  92%{box-shadow:0 0 0 12px rgba(0,90,242,0)}}
.conn-motif{display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;padding:24px 26px;border:1px solid rgba(189,200,242,.22);border-radius:10px;
  background:rgba(240,248,255,.04);max-width:420px}
.conn-node{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 16px;
  border-radius:8px;white-space:nowrap;font:600 12px/1 Inter;color:#fff}
.conn-node img{display:block}
.conn-source{border:1px solid rgba(65,145,255,.5);background:rgba(0,90,242,.14);
  animation:connsend 2.8s ease-in-out infinite}
.conn-source img{width:24px;height:24px}
.conn-target{border:1px solid rgba(242,200,17,.55);background:rgba(242,200,17,.12);
  font-weight:700;animation:connpulse 2.8s ease-in-out infinite}
.conn-target img{width:22px;height:22px}
.conn-track{position:relative;flex:1;min-height:60px;width:100%;overflow:hidden;margin:12px 0}
.conn-line{position:absolute;top:8px;bottom:8px;width:2px;left:50%;margin-left:-1px;
  background:linear-gradient(rgba(189,200,242,.32),rgba(189,200,242,.32)) 0 0/2px 8px repeat-y;
  animation:conndash .6s linear infinite}
.conn-file{position:absolute;top:0;left:50%;animation:connfile 2.8s ease-in-out infinite}
.conn-doc{display:flex;flex-direction:column;gap:3px;width:38px;height:46px;margin-left:-19px;
  padding:7px 6px;border-radius:5px;background:#fff;box-shadow:0 8px 20px -6px rgba(0,11,51,.7)}
.conn-doc i{display:block;height:3px;border-radius:2px}
.conn-doc i:nth-child(1){width:70%;background:#005AF2}
.conn-doc i:nth-child(2),.conn-doc i:nth-child(3){width:100%;background:#E0E3E6}
.conn-doc i:nth-child(4){width:60%;background:#83CA16}
@media (prefers-reduced-motion:reduce){
  .conn-source,.conn-target,.conn-line,.conn-file{animation:none}
  .conn-file{top:50%;transform:translateY(-50%)}
}
/* ===== FIVE DASHBOARDS TABS ===== */
.tab-item.w--current .tab-num{color:#BDC8F2}
/* ===== ANCHOR OFFSET (clears fixed navbar) ===== */
#what-you-get{scroll-margin-top:100px}
  /* ===== DASHBOARD MOCKUPS ===== */
@keyframes mkGrowY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes mkGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mkRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes mkBreatheY{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.93)}}
@keyframes mkBreatheX{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.95)}}
@keyframes mkLive{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.82)}}
@keyframes mkSpin{to{transform:rotate(360deg)}}
@keyframes mkSweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(320%)}}
.dashboard-mock{width:100%}
.build-list{list-style:none;padding-left:0}
/* ===== CLIENT LOGO MARQUEE ===== */
.logo-marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logo-track{display:flex;width:max-content;animation:logoScroll 38s linear infinite}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-set{display:flex;align-items:center;gap:20px;padding-right:20px}
.logo-marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
@keyframes logoScroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .logo-track{animation:none;flex-wrap:wrap;justify-content:center}
}
/* ===== FAQ ACCORDION ===== */
.faq-item{border-bottom:1px solid rgba(189,200,242,.2)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 0;cursor:pointer;list-style:none;
  font:600 18px/28px Inter;color:#fff}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;font:400 26px/1 Inter;color:#BDC8F2;
  transition:transform .2s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:#BDC8F2}
.faq-answer{padding:0 0 22px;max-width:860px;font:400 16px/26px Inter;color:#DCDCDC}
.faq-answer a{color:#005AF2;text-decoration:underline}
/* ===== RESPONSIVE ===== */
@media (max-width:479px){
  .ho-tile{width:76px;height:76px;border-radius:18px}
  .ho-tile img{width:44px}
  .ho-pipe{height:44px;margin-bottom:28px}
  .ho-chip{font-size:9px;padding:4px 8px}
}
/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion:reduce){
  .ho-card,.ho-line,.ho-tile.is-target{animation:none}
  .ho-chip{animation:none;left:50%;transform:translate(-50%,-50%)!important;opacity:1}
  .ho-chip.is-2,.ho-chip.is-3{display:none}
  .dashboard-mock *{animation:none!important}
}

/* Breadcrumbs (added for SEO/GEO: BreadcrumbList + visible trail) */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 1rem;padding:0;list-style:none;font-size:.875rem;line-height:1.4}
.breadcrumb li{display:flex;align-items:center;gap:.5rem;color:inherit;opacity:.75}
.breadcrumb li+li::before{content:"/";opacity:.5}
.breadcrumb a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.breadcrumb a:hover,.breadcrumb a:focus-visible{border-bottom-color:currentColor}
.breadcrumb [aria-current="page"]{opacity:1;font-weight:500}

/* Related content blocks (added for internal linking) */
.related-block{padding:56px 0}
.related-block h2{margin:0 0 24px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.related-card{display:block;padding:20px;border:1px solid rgba(255,255,255,.18);border-radius:12px;text-decoration:none;color:inherit;transition:border-color .2s}
.related-card:hover,.related-card:focus-visible{border-color:currentColor}
.related-card .related-kicker{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin-bottom:8px}
.related-card .related-title{font-size:1rem;line-height:1.4;font-weight:500}
address.site-nap{font-style:normal;margin-top:16px}

/* Intrinsic width/height are now on <img>; keep them from distorting CSS-sized images. */
img{height:auto}

/* ...but icons sized only by their width/height attributes have no CSS box to fall
   back on, so height:auto lets them stretch and shrink as flex items. Pin them. */
.card-icon{flex:0 0 auto;align-self:flex-start}