/* PALBON: the motion and data-visual layer of every public page (public/js/palbon_motion.js adds the classes).
   Reveal variants, staggered groups, spotlight cards, living page heroes, animated figures and charts, a logo
   marquee, a scroll-pinned story, and a reading-progress line. Colours are palette variables only; with
   prefers-reduced-motion everything is shown at once and nothing moves. */

/* ---------- reveal variants (palbon_site.css holds the plain one) ---------- */
.ps-js [data-reveal="scale"]{transform:scale(.94)}
.ps-js [data-reveal="blur"]{transform:translateY(14px);filter:blur(10px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.ps-js [data-reveal="left"]{transform:translateX(-36px)}
.ps-js [data-reveal="right"]{transform:translateX(36px)}
.ps-js [data-reveal].is-in{filter:none}
.ps-js [data-stagger]>*{opacity:0;transform:translateY(22px) scale(.98);transition:opacity .7s var(--ease),transform .7s var(--ease),box-shadow .3s,border-color .3s;transition-delay:calc(var(--si,0) * 70ms)}
.ps-js [data-stagger].is-in>*{opacity:1;transform:none}

/* ---------- gradient headline ---------- */
.ps-gradient-text{background:linear-gradient(100deg,var(--pb-band-accent),var(--pb-band-highlight) 45%,var(--pb-glow-2) 80%,var(--pb-band-accent));background-size:240% 100%;
	-webkit-background-clip:text;background-clip:text;color:transparent;animation:ps-gradient-pan 9s linear infinite}
@keyframes ps-gradient-pan{to{background-position:-240% 0}}

/* ---------- living page hero: aurora and a fading grid behind every inner page's title ---------- */
.ps-phero{position:relative;isolation:isolate;overflow:hidden}
.ps-phero__sky{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ps-phero__sky i{position:absolute;width:44vw;height:44vw;max-width:640px;max-height:640px;border-radius:50%;filter:blur(80px);opacity:.34;mix-blend-mode:screen;animation:ps-sky 24s ease-in-out infinite alternate}
.ps-phero__sky i:nth-child(1){top:-40%;left:-10%;background:radial-gradient(circle,var(--pb-glow-1),transparent 65%)}
.ps-phero__sky i:nth-child(2){top:-20%;right:-12%;background:radial-gradient(circle,var(--pb-glow-2),transparent 65%);animation-duration:29s;animation-delay:-7s}
.ps-phero__sky i:nth-child(3){bottom:-60%;left:35%;background:radial-gradient(circle,var(--pb-glow-3),transparent 65%);opacity:.2;animation-duration:33s;animation-delay:-13s}
.ps-phero__sky b{position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--pb-band-text) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--pb-band-text) 6%,transparent) 1px,transparent 1px);
	background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 70% 90% at 50% 0,var(--pb-band-text),transparent 75%);mask-image:radial-gradient(ellipse 70% 90% at 50% 0,var(--pb-band-text),transparent 75%);animation:ps-grid-move 38s linear infinite}
@keyframes ps-sky{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(5vw,5vh,0) scale(1.12)}100%{transform:translate3d(-4vw,9vh,0) scale(.94)}}
@keyframes ps-grid-move{to{background-position:48px 48px,48px 48px}}
.ps-js .ps-phero__title{animation:ps-title-in 1s var(--ease) both}
.ps-js .ps-phero__lead,.ps-js .ps-phero .ps-eyebrow{animation:ps-title-in 1s var(--ease) .15s both}
@keyframes ps-title-in{from{opacity:0;transform:translateY(18px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

/* ---------- spotlight cards: a soft light follows the pointer, the edge lights up ---------- */
.ps-spot{position:relative;isolation:isolate}
.ps-spot::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
	background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--acc-l,var(--pb-glow-1)) 14%,transparent),transparent 45%)}
.ps-spot::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;padding:1px;
	background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--acc-l,var(--pb-accent-vivid)) 70%,transparent),transparent 60%);
	-webkit-mask:linear-gradient(var(--pb-text-primary) 0 0) content-box,linear-gradient(var(--pb-text-primary) 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ps-spot:hover::before,.ps-spot:hover::after{opacity:1}

/* ---------- figures that count up ---------- */
.ps-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ps-stat{position:relative;padding:26px 22px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:hidden}
.ps-stat__value{display:block;font-size:clamp(2.1rem,3.6vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
	background:linear-gradient(120deg,var(--pb-text-link),var(--pb-glow-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ps-stat__label{display:block;margin-top:10px;font-size:14px;font-weight:600;color:var(--ink)}
.ps-stat__note{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.ps-stat__bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--pb-grad-line);transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease)}
.is-in .ps-stat__bar,.ps-stat.is-in .ps-stat__bar{transform:none}
.ps-dark .ps-stat{background:color-mix(in srgb,var(--pb-band-text) 6%,transparent);border-color:color-mix(in srgb,var(--pb-band-text) 14%,transparent)}
.ps-dark .ps-stat__label{color:var(--on-dark)}
.ps-dark .ps-stat__note{color:var(--on-dark-muted)}
.ps-dark .ps-stat__value{background-image:linear-gradient(120deg,var(--pb-band-accent),var(--pb-band-highlight));-webkit-background-clip:text;background-clip:text;color:transparent}

/* PALBON: the figure tiles as gradient KPI cards (--pb-kpi-N is the theme's gradient, -deep its colour; text --pb-text-on-kpi).
   Background layers only: the pointer light (.ps-spot) owns ::before / ::after. */
.ps-stats>.ps-stat{--k:var(--pb-kpi-1);--kd:var(--pb-kpi-1-deep);border:0;color:var(--pb-text-on-kpi);
	background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--pb-text-on-kpi) 22%,transparent),transparent 55%),
		radial-gradient(90% 70% at 0% 110%,color-mix(in srgb,var(--pb-text-on-kpi) 10%,transparent),transparent 70%),var(--k);
	box-shadow:0 18px 40px -24px var(--kd),inset 0 1px 0 color-mix(in srgb,var(--pb-text-on-kpi) 28%,transparent);
	transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.ps-stats>.ps-stat:nth-child(4n+2){--k:var(--pb-kpi-2);--kd:var(--pb-kpi-2-deep)}
.ps-stats>.ps-stat:nth-child(4n+3){--k:var(--pb-kpi-3);--kd:var(--pb-kpi-3-deep)}
.ps-stats>.ps-stat:nth-child(4n+4){--k:var(--pb-kpi-4);--kd:var(--pb-kpi-4-deep)}
.ps-stats>.ps-stat:hover{transform:translateY(-6px);box-shadow:0 28px 54px -26px var(--kd),inset 0 1px 0 color-mix(in srgb,var(--pb-text-on-kpi) 32%,transparent)}
.ps-stats>.ps-stat .ps-stat__value,.ps-dark .ps-stats>.ps-stat .ps-stat__value{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--pb-text-on-kpi)}
.ps-stats>.ps-stat .ps-stat__label,.ps-dark .ps-stats>.ps-stat .ps-stat__label{color:var(--pb-text-on-kpi)}
.ps-stats>.ps-stat .ps-stat__note,.ps-dark .ps-stats>.ps-stat .ps-stat__note{color:var(--pb-text-on-kpi);opacity:.9}
.ps-stats>.ps-stat .ps-stat__bar{background:color-mix(in srgb,var(--pb-text-on-kpi) 55%,transparent)}

/* ---------- charts that draw themselves ---------- */
.ps-viz-bars{display:flex;align-items:flex-end;gap:10px;height:180px}
.ps-viz-bars>span{position:relative;flex:1;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;row-gap:8px;height:100%}
.ps-viz-bars>span>i{grid-area:1/1;align-self:end;display:block;width:100%;height:var(--h);border-radius:10px 10px 4px 4px;transform-origin:bottom;transform:scaleY(0);
	background:linear-gradient(180deg,var(--acc-l,var(--pb-accent-vivid)),color-mix(in srgb,var(--acc-l,var(--pb-accent-vivid)) 22%,transparent));
	transition:transform 1s var(--ease);transition-delay:calc(var(--bi,0) * 80ms)}
.ps-viz-bars>span>b{grid-area:2/1;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
/* --h is on the column (span): the value rides the bar's top; a relative offset in % reads the grid area's height */
.ps-viz-bars>span>em{grid-area:1/1;align-self:end;position:relative;bottom:calc(var(--h) + 4px);line-height:1.2;font-style:normal;font-size:12px;font-weight:700;color:var(--ink);opacity:0;transition:opacity .4s;transition-delay:calc(var(--bi,0) * 80ms + .6s)}
.is-in .ps-viz-bars>span>i,.ps-viz-bars.is-in>span>i{transform:none}
.is-in .ps-viz-bars>span>em,.ps-viz-bars.is-in>span>em{opacity:1}
.ps-viz-line path.ps-viz-line__stroke{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s var(--ease)}
.ps-viz-line path.ps-viz-line__area{opacity:0;transition:opacity 1.2s ease .8s}
.is-in .ps-viz-line path.ps-viz-line__stroke,.ps-viz-line.is-in path.ps-viz-line__stroke{stroke-dashoffset:0}
.is-in .ps-viz-line path.ps-viz-line__area,.ps-viz-line.is-in path.ps-viz-line__area{opacity:1}
.ps-viz-ring circle.ps-viz-ring__value{stroke-dasharray:0 100;transition:stroke-dasharray 1.6s var(--ease)}
.is-in .ps-viz-ring circle.ps-viz-ring__value,.ps-viz-ring.is-in circle.ps-viz-ring__value{stroke-dasharray:var(--v) 100}

/* ---------- logo marquee ---------- */
.ps-marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,var(--pb-text-primary) 10%,var(--pb-text-primary) 90%,transparent);mask-image:linear-gradient(90deg,transparent,var(--pb-text-primary) 10%,var(--pb-text-primary) 90%,transparent)}
.ps-marquee__track{display:flex;gap:18px;width:max-content;animation:ps-marquee var(--marquee-s,46s) linear infinite}
.ps-marquee:hover .ps-marquee__track{animation-play-state:paused}
@keyframes ps-marquee{to{transform:translateX(-50%)}}
.ps-marquee__item{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:14px;font-weight:650;color:var(--ink);white-space:nowrap;transition:transform .25s var(--ease),border-color .25s}
.ps-marquee__item:hover{transform:translateY(-3px);border-color:var(--primary);color:var(--ink)}
.ps-marquee__item .ps-mark{--mark:32px;border-radius:10px}

/* ---------- scroll-pinned story: the picture stays, the steps scroll past ---------- */
.ps-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:start}
.ps-story__visual{position:sticky;top:calc(var(--header-h) + 32px)}
.ps-story__frame{animation:ps-frame-in .7s var(--ease) both}
.ps-story__frame:not(.is-active){display:none!important}
@keyframes ps-frame-in{from{opacity:0;transform:translateY(16px) scale(.98);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.ps-story__steps{display:grid;gap:18px}
.ps-story__step{position:relative;min-height:34vh;display:flex;flex-direction:column;justify-content:center;padding:32px 34px 32px 84px;border-radius:var(--radius-lg);
	border:1px solid var(--line);background:var(--surface);opacity:.45;transform:scale(.98);transition:opacity .5s,transform .5s var(--ease),border-color .5s,box-shadow .5s}
.ps-story__step.is-active{opacity:1;transform:none;border-color:var(--acc-l,var(--primary));box-shadow:var(--shadow-md)}
.ps-story__num{position:absolute;left:26px;top:34px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:16px;font-weight:800;
	color:var(--pb-text-on-accent);background:var(--pb-grad-primary)}
.ps-story__step h3{font-size:clamp(1.5rem,2.2vw,2rem);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.ps-story__step p{margin-top:10px!important;font-size:1.08rem;line-height:1.6;color:var(--muted)}
.ps-story__product{display:inline-flex;align-items:center;gap:8px;margin-top:14px!important;font-size:13px;font-weight:650;color:var(--ink)}
.ps-story__product .ps-mark{--mark:26px;border-radius:8px}

/* ---------- 3D tilt and the reading line ---------- */
.ps-tilt{transform:perspective(1200px) rotateY(calc(var(--tx,0) * 6deg)) rotateX(calc(var(--ty,0) * -5deg));transition:transform .5s var(--ease);will-change:transform}
.ps-progress-line{position:fixed;left:0;right:0;top:var(--header-h);z-index:49;height:2px;pointer-events:none}
.ps-progress-line i{display:block;height:100%;background:var(--pb-grad-line);transform-origin:left;transform:scaleX(var(--read,0))}

/* ---------- buttons: a light sweeps across the primary action ---------- */
.ps-btn--gold,.ps-btn--primary{position:relative;overflow:hidden}
.ps-btn--gold::after,.ps-btn--primary::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
	background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,var(--pb-band-text) 40%,transparent) 50%,transparent 70%)}
.ps-btn--gold:hover::after,.ps-btn--primary:hover::after{animation:ps-btn-sheen .9s var(--ease)}
@keyframes ps-btn-sheen{to{transform:translateX(120%)}}

/* ---------- smooth FAQ ---------- */
.ps-faq__item summary .ps-icon{transition:transform .35s var(--ease)}
.ps-faq__item[open] summary .ps-icon{transform:rotate(45deg)}
.ps-faq__item[open] .ps-faq__body{animation:ps-faq-open .45s var(--ease)}
@keyframes ps-faq-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- chart bars: soft stripes, the hovered bar in focus ---------- */
.ps-viz-bars>span>i{position:relative;overflow:hidden}
.ps-viz-bars>span>i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--pb-band-text) 18%,transparent) 0 5px,transparent 5px 11px);pointer-events:none}
.ps-viz-bars>span>i{transition-property:transform,opacity,filter;transition-duration:1s,.3s,.3s;transition-delay:calc(var(--bi,0) * 80ms),0s,0s}
.ps-viz-bars:hover>span>i{opacity:.45}
.ps-viz-bars>span:hover>i{opacity:1;filter:saturate(1.3) brightness(1.08)}

/* ---------- the page pager (palbon_motion.js: one dot per section) ---------- */
.ps-pager{position:fixed;right:20px;top:50%;z-index:40;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 8px;border-radius:999px;
	background:color-mix(in srgb,var(--surface) 55%,transparent);border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
	-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
	opacity:0;transform:translate(14px,-50%);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease),background-color .35s,border-color .35s}
.ps-pager.is-shown{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.ps-pager__dot{position:relative;display:block;width:8px;height:8px;border-radius:8px;background:color-mix(in srgb,var(--ink) 28%,transparent);transition:height .45s var(--ease),background-color .3s,transform .3s var(--ease)}
.ps-pager__dot:hover{transform:scale(1.35);background:color-mix(in srgb,var(--ink) 55%,transparent)}
.ps-pager__dot.is-active{height:30px;background:linear-gradient(180deg,var(--pb-chart-1),var(--pb-chart-3));box-shadow:0 0 14px color-mix(in srgb,var(--pb-chart-1) 60%,transparent);transform:none}
.ps-pager__dot span{position:absolute;right:calc(100% + 16px);top:50%;padding:6px 12px;border-radius:10px;white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--ink);
	background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:var(--shadow-md);border:1px solid var(--line);opacity:0;transform:translate(8px,-50%);pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
.ps-pager__dot:hover span,.ps-pager__dot:focus-visible span{opacity:1;transform:translate(0,-50%)}
.ps-pager__count{margin-top:4px!important;font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums;writing-mode:vertical-rl;transform:rotate(180deg)}
.ps-pager__count b{color:var(--ink)}
.ps-pager__count.is-rolling b{display:inline-block;animation:ps-pager-roll .5s var(--ease)}
@keyframes ps-pager-roll{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.ps-pager.is-on-dark{background:color-mix(in srgb,var(--pb-band-deep) 45%,transparent);border-color:color-mix(in srgb,var(--pb-band-text) 16%,transparent)}
.ps-pager.is-on-dark .ps-pager__dot:not(.is-active){background:color-mix(in srgb,var(--pb-band-text) 38%,transparent)}
.ps-pager.is-on-dark .ps-pager__count{color:var(--on-dark-muted)}
.ps-pager.is-on-dark .ps-pager__count b{color:var(--on-dark)}
@media (max-width:1279px){.ps-pager{display:none}}

@media (max-width:960px){
	.ps-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
	.ps-story{grid-template-columns:1fr}
	.ps-story__visual{position:relative;top:0}
	.ps-story__step{min-height:0;opacity:1;transform:none}
}
@media (max-width:560px){.ps-stats{grid-template-columns:1fr}.ps-viz-bars{gap:6px}}

@media (prefers-reduced-motion:reduce){
	.ps-gradient-text,.ps-phero__sky i,.ps-phero__sky b,.ps-marquee__track,.ps-js .ps-phero__title,.ps-js .ps-phero__lead,.ps-js .ps-phero .ps-eyebrow,.ps-story__frame{animation:none}
	.ps-js [data-stagger]>*,.ps-js [data-reveal]{opacity:1;transform:none;filter:none;transition:none}
	.ps-viz-bars>span>i,.ps-stat__bar{transform:none;transition:none}
	.ps-viz-bars>span>em{opacity:1}
	.ps-viz-line path.ps-viz-line__stroke{stroke-dashoffset:0}
	.ps-viz-ring circle.ps-viz-ring__value{stroke-dasharray:var(--v) 100}
	.ps-tilt,.ps-story__step{transform:none;transition:none}
	.ps-btn--gold:hover::after,.ps-btn--primary:hover::after{animation:none}
	.ps-pager,.ps-pager__dot,.ps-stats>.ps-stat{transition:none}.ps-pager__count.is-rolling b{animation:none}
}