/* JaiSandar 5.1.4 — About / data visualization hero */
.jai-about-viz{
  --jai-about-ink:#10242a;
  --jai-about-teal:#008080;
  --jai-about-teal-2:#1aa3a3;
  --jai-about-wine:#660033;
  --jai-about-cream:#ffffcc;
  position:relative;
  width:min(1180px,calc(100% - 32px));
  min-height:620px;
  margin:0 auto 44px;
  overflow:hidden;
  border:1px solid rgba(16,36,42,.10);
  border-radius:34px;
  background:
    radial-gradient(circle at 16% 18%,rgba(0,128,128,.13),transparent 28%),
    radial-gradient(circle at 84% 78%,rgba(102,0,51,.10),transparent 30%),
    linear-gradient(145deg,#fff 0%,#fbfdfc 54%,#f4f8f7 100%);
  box-shadow:0 30px 80px rgba(20,38,44,.10);
  isolation:isolate;
}
.jai-about-viz::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  opacity:.45;
  background-image:
    linear-gradient(rgba(16,36,42,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,36,42,.045) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,#000 0 64%,transparent 100%);
}
.jai-about-viz::after{
  content:"";
  position:absolute;
  left:50%;
  top:49%;
  width:min(52vw,520px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,204,.85) 0 24%,rgba(0,128,128,.06) 48%,transparent 72%);
  filter:blur(1px);
  z-index:-2;
}
.jai-about-viz__top{
  position:relative;
  z-index:8;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding:28px 30px 0;
}
.jai-about-viz__kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--jai-about-teal);
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.jai-about-viz__kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 6px rgba(0,128,128,.10);
}
.jai-about-viz__index{
  color:#708087;
  font-size:11px;
  font-weight:800;
  letter-spacing:.10em;
}
.jai-about-viz__scene{
  position:relative;
  height:455px;
  margin:8px 18px 0;
}
.jai-about-viz__orbit{
  position:absolute;
  left:50%;
  top:49%;
  width:420px;
  height:420px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(0,128,128,.12);
  border-radius:50%;
  box-shadow:
    0 0 0 34px rgba(0,128,128,.025),
    0 0 0 76px rgba(102,0,51,.018);
}
.jai-about-viz__orbit::before,
.jai-about-viz__orbit::after{
  content:"";
  position:absolute;
  inset:50%;
  width:116%;
  height:1px;
  transform:translate(-50%,-50%) rotate(24deg);
  background:linear-gradient(90deg,transparent,rgba(0,128,128,.12),transparent);
}
.jai-about-viz__orbit::after{transform:translate(-50%,-50%) rotate(-31deg);}
.jai-about-viz__core{
  position:absolute;
  z-index:5;
  left:50%;
  top:49%;
  width:284px;
  min-height:206px;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px 22px;
  border:1px solid rgba(255,255,255,.86);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.91),rgba(246,252,251,.72));
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:
    0 25px 60px rgba(22,57,62,.16),
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(0,128,128,.08);
}
.jai-about-viz__core-label{
  min-height:17px;
  color:var(--jai-about-teal);
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:opacity .22s ease,transform .22s ease;
}
.jai-about-viz__core-value{
  display:block;
  min-width:220px;
  margin:8px 0 6px;
  color:var(--jai-about-ink);
  font-family:"Benguiatkaz",Georgia,serif;
  font-size:clamp(41px,5.3vw,66px);
  font-weight:400;
  line-height:.95;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  transition:opacity .22s ease,transform .22s ease;
}
.jai-about-viz__core-copy{
  max-width:218px;
  color:#66757b;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}
.jai-about-viz.is-switching .jai-about-viz__core-label,
.jai-about-viz.is-switching .jai-about-viz__core-value{
  opacity:.15;
  transform:translateY(5px) scale(.985);
}
.jai-about-viz__linechart{
  position:absolute;
  z-index:2;
  left:50%;
  top:49%;
  width:660px;
  max-width:70%;
  height:265px;
  transform:translate(-50%,-50%);
  overflow:visible;
  opacity:.78;
}
.jai-about-viz__linechart .grid-line{
  stroke:rgba(16,36,42,.08);
  stroke-width:1;
  stroke-dasharray:3 8;
}
.jai-about-viz__linechart .data-line{
  fill:none;
  stroke:var(--jai-about-teal);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:780;
  stroke-dashoffset:780;
  filter:drop-shadow(0 7px 8px rgba(0,128,128,.16));
  animation:jaiAboutDraw 3.8s cubic-bezier(.65,0,.25,1) .25s infinite alternate;
}
.jai-about-viz__linechart .data-dot{
  fill:#fff;
  stroke:var(--jai-about-teal);
  stroke-width:3;
  transform-origin:center;
  animation:jaiAboutDot 2.2s ease-in-out infinite;
}
.jai-about-viz__bars{
  position:absolute;
  z-index:2;
  left:calc(50% + 246px);
  top:calc(49% + 78px);
  display:flex;
  align-items:flex-end;
  gap:7px;
  height:92px;
  padding:8px 10px;
  border-radius:15px;
  background:rgba(255,255,255,.48);
  border:1px solid rgba(16,36,42,.06);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.jai-about-viz__bars i{
  display:block;
  width:9px;
  height:var(--h);
  border-radius:999px 999px 3px 3px;
  background:linear-gradient(to top,var(--jai-about-teal),#63c5c5);
  transform-origin:bottom;
  animation:jaiAboutBars 2.6s ease-in-out var(--delay) infinite alternate;
}
.jai-about-viz__donut{
  position:absolute;
  z-index:2;
  left:calc(50% - 295px);
  top:calc(49% + 93px);
  width:86px;
  height:86px;
  border-radius:50%;
  background:conic-gradient(var(--jai-about-wine) 0 22%,#d78bab 22% 39%,var(--jai-about-teal) 39% 73%,#d9eeee 73% 100%);
  -webkit-mask:radial-gradient(circle,transparent 0 45%,#000 47%);
  mask:radial-gradient(circle,transparent 0 45%,#000 47%);
  animation:jaiAboutRotate 14s linear infinite;
  opacity:.8;
}
.jai-about-viz__number{
  --tx:0px;
  --ty:-9px;
  --rot:0deg;
  position:absolute;
  z-index:7;
  left:var(--x);
  top:var(--y);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  min-height:34px;
  padding:7px 12px;
  border-radius:999px;
  color:var(--c,#234047);
  background:rgba(255,255,255,.80);
  border:1px solid rgba(16,36,42,.09);
  box-shadow:0 10px 24px rgba(16,36,42,.09);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-size:var(--fs,14px);
  font-weight:900;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  transform:translate(-50%,-50%) rotate(var(--rot));
  animation:jaiAboutFloat var(--dur,4.8s) ease-in-out var(--delay,0s) infinite alternate;
  will-change:transform;
  white-space:nowrap;
}
.jai-about-viz__number.symbol{
  min-width:48px;
  min-height:48px;
  padding:0;
  font-family:"Benguiatkaz",Georgia,serif;
  font-size:27px;
  color:var(--jai-about-teal);
  border-radius:16px;
  background:rgba(255,255,204,.78);
}
.jai-about-viz__number.wine{color:var(--jai-about-wine);}
.jai-about-viz__number.teal{color:var(--jai-about-teal);}
.jai-about-viz__number.is-ticking{transform:translate(-50%,-50%) scale(1.055) rotate(var(--rot));}
.jai-about-viz__steps{
  position:relative;
  z-index:8;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
  margin:0 24px 18px;
}
.jai-about-viz__step{
  position:relative;
  overflow:hidden;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 9px;
  border:1px solid rgba(16,36,42,.09);
  border-radius:14px;
  color:#65767c;
  background:rgba(255,255,255,.68);
  font-size:9px;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
  transition:.28s ease;
}
.jai-about-viz__step span{color:#9aa8ad;font-variant-numeric:tabular-nums;}
.jai-about-viz__step::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:0;
  height:3px;
  background:var(--jai-about-teal);
  transition:right .55s cubic-bezier(.22,.8,.25,1);
}
.jai-about-viz[data-step="0"] .jai-about-viz__step:nth-child(1),
.jai-about-viz[data-step="1"] .jai-about-viz__step:nth-child(2),
.jai-about-viz[data-step="2"] .jai-about-viz__step:nth-child(3),
.jai-about-viz[data-step="3"] .jai-about-viz__step:nth-child(4),
.jai-about-viz[data-step="4"] .jai-about-viz__step:nth-child(5){
  color:var(--jai-about-ink);
  background:#fff;
  border-color:rgba(0,128,128,.23);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,128,128,.08);
}
.jai-about-viz[data-step="0"] .jai-about-viz__step:nth-child(1)::after,
.jai-about-viz[data-step="1"] .jai-about-viz__step:nth-child(2)::after,
.jai-about-viz[data-step="2"] .jai-about-viz__step:nth-child(3)::after,
.jai-about-viz[data-step="3"] .jai-about-viz__step:nth-child(4)::after,
.jai-about-viz[data-step="4"] .jai-about-viz__step:nth-child(5)::after{right:0;}
.jai-about-viz__manifesto{
  position:relative;
  z-index:8;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  padding:0 30px 28px;
}
.jai-about-viz__manifesto strong{
  max-width:740px;
  color:var(--jai-about-ink);
  font-family:"Benguiatkaz",Georgia,serif;
  font-size:clamp(27px,3.5vw,48px);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.035em;
}
.jai-about-viz__manifesto strong em{font-style:normal;color:var(--jai-about-teal);}
.jai-about-viz__manifesto small{
  max-width:235px;
  color:#728187;
  font-size:11px;
  font-weight:700;
  line-height:1.45;
  text-align:right;
}
@keyframes jaiAboutFloat{
  0%{transform:translate(-50%,-50%) translate(0,0) rotate(var(--rot));}
  45%{transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) rotate(calc(var(--rot) + 1deg));}
  100%{transform:translate(-50%,-50%) translate(calc(var(--tx) * -.45),calc(var(--ty) * .55)) rotate(calc(var(--rot) - 1.2deg));}
}
@keyframes jaiAboutDraw{to{stroke-dashoffset:0;}}
@keyframes jaiAboutDot{50%{r:7px;opacity:.6;}}
@keyframes jaiAboutBars{0%{transform:scaleY(.72);opacity:.6;}100%{transform:scaleY(1.04);opacity:1;}}
@keyframes jaiAboutRotate{to{transform:rotate(360deg);}}

@media(max-width:780px){
  .jai-about-viz{
    width:100%;
    min-height:560px;
    margin:0 0 30px;
    border-left:0;
    border-right:0;
    border-radius:0;
  }
  .jai-about-viz__top{padding:19px 14px 0;}
  .jai-about-viz__scene{height:370px;margin:4px 4px 0;}
  .jai-about-viz__orbit{width:278px;height:278px;top:48%;}
  .jai-about-viz__core{top:48%;width:222px;min-height:164px;padding:20px 13px;border-radius:24px;}
  .jai-about-viz__core-value{min-width:180px;font-size:38px;margin-top:7px;}
  .jai-about-viz__core-copy{font-size:10px;max-width:188px;}
  .jai-about-viz__linechart{top:48%;width:390px;max-width:94%;height:195px;}
  .jai-about-viz__bars{left:auto;right:8px;top:69%;height:68px;gap:5px;padding:6px 7px;}
  .jai-about-viz__bars i{width:6px;}
  .jai-about-viz__donut{left:12px;top:69%;width:64px;height:64px;}
  .jai-about-viz__number{font-size:11px;min-width:50px;min-height:30px;padding:5px 8px;}
  .jai-about-viz__number.symbol{min-width:40px;min-height:40px;font-size:22px;}
  .jai-about-viz__number:nth-of-type(n+9){display:none;}
  .jai-about-viz__steps{grid-template-columns:repeat(5,1fr);gap:3px;margin:0 6px 14px;}
  .jai-about-viz__step{min-height:41px;padding:5px 2px;font-size:6.7px;letter-spacing:.015em;border-radius:10px;gap:3px;}
  .jai-about-viz__step span{display:none;}
  .jai-about-viz__manifesto{display:block;padding:0 15px 22px;}
  .jai-about-viz__manifesto strong{display:block;font-size:31px;max-width:330px;}
  .jai-about-viz__manifesto small{display:block;margin-top:10px;max-width:290px;text-align:left;font-size:9.5px;}
}
@media(max-width:410px){
  .jai-about-viz__scene{height:350px;}
  .jai-about-viz__number[data-mobile-hide="1"]{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .jai-about-viz *,
  .jai-about-viz *::before,
  .jai-about-viz *::after{animation:none!important;transition:none!important;}
  .jai-about-viz__linechart .data-line{stroke-dashoffset:0;}
}