/* ===================================================================
   CredForge Flare Kit v1 — tasteful motion + polish (Level 1).
   Palette-adaptive via --bs-*. Reveal styles ONLY apply once JS adds
   html.cf-flare, so without JS everything is visible; reduced-motion shows all instantly.
   =================================================================== */
/* scroll reveal (section-level; JS-gated) */
html.cf-flare .cf-reveal{opacity:0;transform:translateY(28px);will-change:opacity,transform}
html.cf-flare .cf-reveal.cf-in{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.75,.25,1)}
/* staggered children for card grids marked .cf-stagger */
html.cf-flare .cf-stagger.cf-in > *{animation:cfRise .7s cubic-bezier(.2,.75,.25,1) both}
html.cf-flare .cf-stagger.cf-in > *:nth-child(2){animation-delay:.09s}
html.cf-flare .cf-stagger.cf-in > *:nth-child(3){animation-delay:.18s}
html.cf-flare .cf-stagger.cf-in > *:nth-child(4){animation-delay:.27s}
html.cf-flare .cf-stagger.cf-in > *:nth-child(5){animation-delay:.36s}
html.cf-flare .cf-stagger.cf-in > *:nth-child(6){animation-delay:.45s}
@keyframes cfRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* hover lift on cards (separate elements from reveal targets -> no transform conflict) */
.dv-tcard,.pb-tcard,.lm-tcard,.card,.service-card,.option-card,.pi-testimonial,[class*="-card"]{transition:transform .35s cubic-bezier(.2,.75,.25,1),box-shadow .35s ease}
.dv-tcard:hover,.pb-tcard:hover,.lm-tcard:hover,.card:hover,.service-card:hover,.option-card:hover,.pi-testimonial:hover,[class*="-card"]:hover{transform:translateY(-6px);box-shadow:0 30px 55px -32px rgba(var(--bs-primary-rgb),.55)}
/* animated hero accent: soft drifting palette orbs (continuous, gentle, layered depth) */
.cf-accent{position:absolute;border-radius:50%;filter:blur(52px);opacity:.32;pointer-events:none;z-index:0;will-change:transform;
  background:radial-gradient(circle at 35% 35%,rgba(var(--bs-primary-rgb),.6),rgba(var(--bs-secondary-rgb),.24) 55%,transparent 72%);
  animation:cfDrift 24s ease-in-out infinite}
.cf-accent--2{opacity:.24;animation:cfDrift2 30s ease-in-out infinite;
  background:radial-gradient(circle at 60% 40%,rgba(var(--bs-secondary-rgb),.55),transparent 70%)}
@keyframes cfDrift{0%{transform:translate(0,0) scale(1)}30%{transform:translate(24px,-30px) scale(1.1)}60%{transform:translate(-16px,-14px) scale(1.04)}100%{transform:translate(0,0) scale(1)}}
@keyframes cfDrift2{0%{transform:translate(0,0) scale(1)}40%{transform:translate(-26px,20px) scale(1.15)}70%{transform:translate(14px,30px) scale(1.06)}100%{transform:translate(0,0) scale(1)}}
/* promoted illustration figure on the homepage (fills old empty accent boxes) */
.cf-figure{display:block;width:100%;max-width:280px;height:auto;margin:0 auto;
  filter:drop-shadow(0 18px 30px -22px rgba(var(--bs-primary-rgb),.55));animation:cfFloat 7s ease-in-out infinite alternate}
@keyframes cfFloat{from{transform:translateY(0)}to{transform:translateY(-9px)}}
/* heading grow-underline: draws in when its section reveals */
html.cf-flare .cf-reveal.cf-in .cf-underline{position:relative}
html.cf-flare .cf-reveal.cf-in .cf-underline::after{content:"";display:block;height:3px;width:0;border-radius:2px;margin:14px auto 0;background:linear-gradient(90deg,var(--bs-primary),var(--bs-secondary));animation:cfGrow .9s .15s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes cfGrow{to{width:64px}}
/* text-centered headings keep the underline centered; left-aligned ones start left */
/* reduced motion: show everything, kill all motion */
@media (prefers-reduced-motion: reduce){
  html.cf-flare .cf-reveal{opacity:1!important;transform:none!important;transition:none!important}
  html.cf-flare .cf-stagger.cf-in > *{animation:none!important}
  .cf-accent,.cf-figure{animation:none!important}
  .dv-tcard,.pb-tcard,.lm-tcard,.card,.service-card,.option-card,.pi-testimonial,[class*="-card"]{transition:none!important}
  [class*="-card"]:hover,.card:hover{transform:none!important}
}
/* ===== credibility graphics (icons/accents/charts/diagrams that earn their place) ===== */
.cf-graphic{margin:0;max-width:940px}
.cf-graphic--timeline,.cf-graphic--roadmap{margin-inline:auto}
.cf-fig{display:block;width:100%;height:auto}
.cf-fig-cap{margin:12px 0 0;font-size:12.5px;color:#6a7783;font-style:italic}
/* light card wrapper so a chart can sit inside a dark (bg-primary) section and keep its palette */
.cf-graphic-card{background:#fff;border-radius:18px;padding:26px 30px;box-shadow:0 24px 50px -40px rgba(20,30,45,.5)}
@media(max-width:575px){.cf-graphic-card{padding:20px 16px}}
.cf-ico{display:block}
/* single icon accent above a card title (currentColor → theme primary) */
.cf-card-ico{display:block;color:var(--bs-primary);margin-bottom:12px}
/* stat strip */
.cf-statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:940px}
.cf-stat{padding:6px 24px;border-left:1px solid var(--bs-border-color,#e4e9ee)}
.cf-stat:first-child{border-left:0;padding-left:0}
.cf-stat-ico{color:var(--bs-primary);display:inline-block;opacity:.9}
.cf-stat-num{font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--bs-body-color);font-variant-numeric:tabular-nums;margin:8px 0 2px;line-height:1}
.cf-stat-lab{font-size:13px;color:var(--bs-body-color);opacity:.82;line-height:1.35}
/* situation / feature icon row */
.cf-situations{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cf-sit{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--bs-border-color,#e4e9ee);border-radius:14px}
.cf-sit-ico{color:var(--bs-primary);flex:0 0 auto;margin-top:1px}
.cf-sit-t{margin:0 0 3px;font-size:14.5px;font-weight:650;color:var(--bs-body-color)}
.cf-sit-p{margin:0;font-size:12.5px;color:var(--bs-body-color);opacity:.7;line-height:1.4}
@media (max-width:720px){.cf-statstrip{grid-template-columns:repeat(2,1fr);gap:20px 0}.cf-stat{border-left:0;padding-left:0}.cf-situations{grid-template-columns:1fr}}