/* NusaFinance 1.6 — artistic editorial illustration system. */
.nf-finance-illustration{
  --nf-px:0px;--nf-py:0px;--nf-rotate:0deg;--nf-art-fast:3.8s;--nf-art-duration:5s;--nf-art-slow:6.2s;--nf-art-long:11s;
  position:relative;isolation:isolate;
  transform:translate3d(var(--nf-px),var(--nf-py),0) rotate(var(--nf-rotate));
  transition:transform .26s cubic-bezier(.2,.8,.2,1),filter .3s ease;
}
.nf-finance-illustration svg{overflow:visible;transform-origin:center;filter:drop-shadow(0 22px 36px rgba(22,49,65,.10))}
.nf-finance-illustration.is-motion-ready{animation:nfArtArrival .72s cubic-bezier(.17,.84,.3,1) both}
.nf-finance-illustration:before,.nf-finance-illustration:after{content:"";position:absolute;z-index:-1;border-radius:999px;pointer-events:none;filter:blur(1px)}
.nf-finance-illustration:before{width:42%;height:42%;left:4%;top:8%;background:color-mix(in srgb,var(--nf-accent) 12%,transparent);animation:nfArtAura var(--nf-art-duration) ease-in-out infinite}
.nf-finance-illustration:after{width:34%;height:34%;right:5%;bottom:8%;background:color-mix(in srgb,var(--nf-primary) 10%,transparent);animation:nfArtAura var(--nf-art-slow) ease-in-out infinite reverse}

/* Palette and surfaces */
.nf-art-surface{fill:var(--nf-surface,#fff);stroke:color-mix(in srgb,var(--nf-primary) 14%,#d9e1e6);stroke-width:1.5}
.nf-art-primary{fill:var(--nf-primary)}
.nf-art-primary-soft{fill:color-mix(in srgb,var(--nf-primary) 16%,#fff)}
.nf-art-secondary-soft{fill:color-mix(in srgb,var(--nf-secondary) 18%,#fff)}
.nf-art-accent{fill:var(--nf-accent)}
.nf-art-accent-soft{fill:color-mix(in srgb,var(--nf-accent) 18%,#fff)}
.nf-art-coin{fill:#f5c763;stroke:#d7a938;stroke-width:1.5}
.nf-art-dark{fill:#193143}
.nf-art-white-soft{fill:rgba(255,255,255,.86)}
.nf-art-dot{fill:var(--nf-accent);stroke:#fff;stroke-width:2}
.nf-art-fold{fill:color-mix(in srgb,var(--nf-primary) 12%,#fff)}
.nf-art-buttons rect{fill:rgba(255,255,255,.78)}

/* Lines */
.nf-art-stroke-line,.nf-art-stroke-primary,.nf-art-stroke-primary-wide,.nf-art-stroke-accent,.nf-art-stroke-accent-wide,.nf-art-stroke-coin-wide,.nf-art-stroke-white,.nf-art-stroke-white-wide,.nf-art-stroke-white-soft{
  fill:none;stroke-linecap:round;stroke-linejoin:round
}
.nf-art-stroke-line{stroke:color-mix(in srgb,var(--nf-ink) 35%,#bac7cf);stroke-width:5}
.nf-art-stroke-primary{stroke:var(--nf-primary);stroke-width:4}
.nf-art-stroke-primary-wide{stroke:var(--nf-primary);stroke-width:9}
.nf-art-stroke-accent{stroke:var(--nf-accent);stroke-width:6}
.nf-art-stroke-accent-wide{stroke:var(--nf-accent);stroke-width:9}
.nf-art-stroke-coin-wide{stroke:#d6a536;stroke-width:8}
.nf-art-stroke-white{stroke:#fff;stroke-width:5}
.nf-art-stroke-white-wide{stroke:#fff;stroke-width:10}
.nf-art-stroke-white-soft{stroke:rgba(255,255,255,.76);stroke-width:5}

/* Background composition */
.nf-art-orbit{transform-box:fill-box;transform-origin:center}
.nf-art-orbit-line{fill:none;stroke:color-mix(in srgb,var(--nf-primary) 10%,transparent);stroke-width:1.6}
.nf-art-orbit-dash{fill:none;stroke:color-mix(in srgb,var(--nf-accent) 21%,transparent);stroke-width:2;stroke-dasharray:5 11;stroke-linecap:round}
.nf-art-brush{fill:none;stroke-linecap:round;opacity:.5;stroke-dasharray:380;stroke-dashoffset:380}
.nf-art-brush-a{stroke:color-mix(in srgb,var(--nf-accent) 48%,transparent);stroke-width:12}
.nf-art-brush-b{stroke:color-mix(in srgb,var(--nf-primary) 28%,transparent);stroke-width:8}

/* Illustration style variants */
.nf-illustration-paper .nf-finance-illustration svg{filter:drop-shadow(8px 12px 0 color-mix(in srgb,var(--nf-primary) 8%,transparent))}
.nf-illustration-paper .nf-art-surface,.nf-illustration-paper .nf-art-primary,.nf-illustration-paper .nf-art-accent,.nf-illustration-paper .nf-art-primary-soft,.nf-illustration-paper .nf-art-accent-soft{stroke:#fff;stroke-width:3}
.nf-illustration-paper .nf-art-orbit{opacity:.55}
.nf-illustration-line-art .nf-art-surface,.nf-illustration-line-art .nf-art-primary,.nf-illustration-line-art .nf-art-accent,.nf-illustration-line-art .nf-art-primary-soft,.nf-illustration-line-art .nf-art-accent-soft,.nf-illustration-line-art .nf-art-secondary-soft,.nf-illustration-line-art .nf-art-dark{fill:transparent;stroke:var(--nf-primary);stroke-width:3}
.nf-illustration-line-art .nf-art-coin{fill:transparent;stroke:#c89622;stroke-width:3}
.nf-illustration-line-art .nf-art-buttons rect{fill:transparent;stroke:var(--nf-accent);stroke-width:2}
.nf-illustration-line-art .nf-art-brush{opacity:.28}

/* Shared choreography */
.nf-art-orbit-dash{animation:nfArtOrbit var(--nf-art-long) linear infinite}
.nf-art-brush-a{animation:nfArtBrush var(--nf-art-slow) ease-in-out infinite}
.nf-art-brush-b{animation:nfArtBrush var(--nf-art-long) ease-in-out infinite reverse}
.nf-art-floating-coin,.nf-art-key,.nf-art-message,.nf-art-card,.nf-art-paper,.nf-art-book,.nf-art-shop,.nf-art-house,.nf-art-calc,.nf-art-chart,.nf-art-shield,.nf-art-jar,.nf-art-coins{transform-box:fill-box;transform-origin:center}
.nf-art-floating-coin{animation:nfArtCoin var(--nf-art-fast) ease-in-out infinite}
.nf-art-key{animation:nfArtKey var(--nf-art-duration) ease-in-out infinite}
.nf-art-message{animation:nfArtMessage var(--nf-art-fast) ease-in-out infinite}
.nf-art-card{animation:nfArtCard var(--nf-art-duration) ease-in-out infinite}
.nf-art-book{animation:nfArtBook var(--nf-art-slow) ease-in-out infinite}
.nf-art-house{animation:nfArtHouse var(--nf-art-slow) ease-in-out infinite}
.nf-art-calc{animation:nfArtCalc var(--nf-art-duration) ease-in-out infinite}
.nf-art-jar{animation:nfArtJar var(--nf-art-slow) ease-in-out infinite}
.nf-art-shield{animation:nfArtShield var(--nf-art-slow) ease-in-out infinite}
.nf-art-shop{animation:nfArtShop var(--nf-art-slow) ease-in-out infinite}
.nf-art-chart-line{stroke-dasharray:250;stroke-dashoffset:250;animation:nfArtChart var(--nf-art-slow) ease-in-out infinite}
.nf-art-buttons rect:nth-child(1),.nf-art-buttons rect:nth-child(4){animation-delay:-.2s}.nf-art-buttons rect:nth-child(2),.nf-art-buttons rect:nth-child(5){animation-delay:-.5s}.nf-art-buttons rect:nth-child(3),.nf-art-buttons rect:nth-child(6){animation-delay:-.8s}
.nf-art-buttons rect{transform-box:fill-box;transform-origin:center;animation:nfArtButton var(--nf-art-fast) ease-in-out infinite}

/* Scene-specific rhythm keeps pages varied. */
.nf-finance-illustration[data-visual-type="home"] .nf-art-coins{animation:nfArtCoins var(--nf-art-duration) ease-in-out infinite}
.nf-finance-illustration[data-visual-type="information"] .nf-art-paper,
.nf-finance-illustration[data-visual-type="tax"] .nf-art-paper{animation:nfArtPaper var(--nf-art-slow) ease-in-out infinite}
.nf-finance-illustration[data-visual-type="savings"] .nf-art-coin{filter:drop-shadow(0 7px 6px rgba(204,151,38,.18))}
.nf-finance-illustration[data-visual-type="investment"] .nf-art-chart{animation:nfArtChartPanel var(--nf-art-slow) ease-in-out infinite}
.nf-finance-illustration[data-visual-type="legal"] .nf-art-shield,
.nf-finance-illustration[data-visual-type="security"] .nf-art-shield{filter:drop-shadow(0 12px 16px color-mix(in srgb,var(--nf-accent) 17%,transparent))}
.nf-tool-mini-visual{--nf-art-fast:4.8s!important;--nf-art-duration:6.4s!important;--nf-art-slow:7.5s!important;--nf-art-long:12s!important;--nf-px:0px!important;--nf-py:0px!important;--nf-rotate:0deg!important}
.nf-tool-mini-visual:before,.nf-tool-mini-visual:after{display:none}

@keyframes nfArtArrival{from{opacity:0;transform:translateY(18px) scale(.94) rotate(-1.5deg)}to{opacity:var(--nf-visual-opacity,.92);transform:translate3d(var(--nf-px),var(--nf-py),0) rotate(var(--nf-rotate)) scale(1)}}
@keyframes nfArtAura{0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.72}50%{transform:translate3d(8px,-6px,0) scale(1.08);opacity:1}}
@keyframes nfArtOrbit{to{stroke-dashoffset:-160}}
@keyframes nfArtBrush{0%,14%{stroke-dashoffset:380;opacity:.08}48%,78%{stroke-dashoffset:0;opacity:.52}100%{stroke-dashoffset:-380;opacity:.08}}
@keyframes nfArtCoin{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-13px) rotate(8deg)}}
@keyframes nfArtKey{0%,100%{transform:translateY(0) rotate(-3deg)}48%{transform:translateY(-9px) rotate(7deg)}}
@keyframes nfArtMessage{0%,100%{transform:translateY(0) rotate(0)}42%{transform:translateY(-7px) rotate(-1deg)}57%{transform:translateY(-4px) rotate(.5deg)}}
@keyframes nfArtCard{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-8px) rotate(1.3deg)}}
@keyframes nfArtBook{0%,100%{transform:perspective(500px) rotateY(0)}50%{transform:perspective(500px) rotateY(-3deg) translateY(-3px)}}
@keyframes nfArtHouse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes nfArtCalc{0%,100%{transform:rotate(0) translateY(0)}45%{transform:rotate(-.8deg) translateY(-4px)}}
@keyframes nfArtJar{0%,100%{transform:scale(1)}50%{transform:scale(1.018) translateY(-3px)}}
@keyframes nfArtShield{0%,100%{transform:scale(1)}50%{transform:scale(1.025);filter:drop-shadow(0 15px 24px color-mix(in srgb,var(--nf-accent) 22%,transparent))}}
@keyframes nfArtShop{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes nfArtChart{0%,14%{stroke-dashoffset:250;opacity:.28}52%,79%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-250;opacity:.2}}
@keyframes nfArtChartPanel{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes nfArtButton{0%,65%,100%{transform:scale(1)}76%{transform:scale(.86)}84%{transform:scale(1.04)}}
@keyframes nfArtCoins{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(5deg)}}
@keyframes nfArtPaper{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(.7deg) translateY(-4px)}}

.nf-animation-off .nf-finance-illustration,.nf-page-animation-off .nf-finance-illustration,.nf-animation-off .nf-finance-illustration *,.nf-page-animation-off .nf-finance-illustration *{animation:none!important;transition:none!important}
.nf-animation-subtle .nf-art-orbit,.nf-page-animation-subtle .nf-art-orbit{opacity:.65}
.nf-animation-subtle .nf-art-brush,.nf-page-animation-subtle .nf-art-brush{opacity:.34}

@media(max-width:760px){.nf-finance-illustration:before,.nf-finance-illustration:after{opacity:.7}.nf-art-orbit{opacity:.6}}
@media(prefers-reduced-motion:reduce){
  .nf-finance-illustration,.nf-finance-illustration *{animation:none!important;transition:none!important;transform:none!important}
}