/* ============================================================
   KAPITAL ENGINE — Brand motif + motion system  (keb-)
   Abstracts the logo (gauge arc · skyline bars · chevron · gold)
   into a recurring visual + motion language. Layered on top of
   ke-hero.css + ke-sections.css; never overrides their structure.
   ============================================================ */

/* ---------- CTA ARROW (circle chip + horizontal arrow) ---------- */
.keb-ar{width:15px;height:15px;display:block;transition:transform .32s cubic-bezier(.2,.85,.25,1)}
.kh-pill:hover .keb-ar,.kh-free:hover .keb-ar,.khs .pill:hover .keb-ar{transform:translateX(3px)}
.khs .pill-o .c{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;border:1.5px solid rgba(255,255,255,.4)}

/* ---------- BRAND MOTIFS (abstracted logo geometry) ---------- */
/* corner gauge-arc accent — draws on scroll */
.keb-corner{position:absolute;pointer-events:none;z-index:0;opacity:0;transition:opacity 1.1s ease}
.keb-corner.in{opacity:.9}
.keb-corner.tr{top:38px;right:-40px}
.keb-corner.bl{bottom:30px;left:-46px}
.keb-arc{display:block;overflow:visible;fill:none;stroke:var(--gold,#A9780A);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.keb-dark .keb-arc{stroke:var(--gold-br,#E3A60C)}
.keb-arc path,.keb-arc circle,.keb-arc line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.9s cubic-bezier(.45,0,.15,1) .12s}
.keb-corner.in .keb-arc path,.keb-corner.in .keb-arc circle,.keb-corner.in .keb-arc line{stroke-dashoffset:0}
.keb-dark .keb-corner.in{opacity:.55}

/* faint dot-mesh connective tissue */
.keb-mesh{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(169,120,10,.16) 1px,transparent 1px);background-size:30px 30px;
  -webkit-mask:radial-gradient(70% 60% at 70% 30%,#000,transparent 80%);mask:radial-gradient(70% 60% at 70% 30%,#000,transparent 80%);opacity:.5}
.keb-dark .keb-mesh{background-image:radial-gradient(rgba(227,166,12,.16) 1px,transparent 1px);opacity:.4}

/* ambient capital-network canvas (dark bands only) */
.keb-net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* keep section content above motifs */
.khs .sec>.wrap,.khs .cta>.wrap{position:relative;z-index:2}
.khs .engine,.khs .metrics,.khs .cta,.khs .statement,.khs .keb-rel{position:relative;overflow:hidden}
.khs .process,.khs .challenge{position:relative}

/* ---------- ENGINE capital-flow pulse ---------- */
.khs .flow{position:relative}
.keb-flowdot{position:absolute;top:30px;left:5%;width:9px;height:9px;border-radius:50%;background:var(--gold-br,#E3A60C);box-shadow:0 0 14px 3px rgba(227,166,12,.75);z-index:1;will-change:left,opacity;animation:keb-flow 5s cubic-bezier(.55,0,.45,1) infinite}
.keb-flowdot.b{animation-delay:2.5s;opacity:.6;width:6px;height:6px}
@keyframes keb-flow{0%{left:4%;opacity:0}7%{opacity:1}90%{opacity:1}100%{left:96%;opacity:0}}

/* ---------- REVEAL VARIANTS (compose with .khs .rv / .in) ---------- */
.khs .rv-l{transform:translateX(-46px)}
.khs .rv-r{transform:translateX(46px)}
.khs .rv-s{transform:scale(.93)}
.khs .rv-c{clip-path:inset(0 0 100% 0);transition:opacity 1s cubic-bezier(.4,0,.2,1),transform 1s cubic-bezier(.4,0,.2,1),clip-path 1.15s cubic-bezier(.4,0,.2,1)}
.khs .rv-l.in,.khs .rv-r.in,.khs .rv-s.in{transform:none}
.khs .rv-c.in{clip-path:inset(0 0 0 0)}
.khs .rv{will-change:opacity,transform}

/* ---------- CARD MICRO-INTERACTIONS ---------- */
.khs .tile,.khs .svc,.khs .ins,.khs .mcard,.khs .icard{will-change:transform}
.khs .tile,.khs .svc,.khs .ins{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .5s}
.khs .svc{position:relative;overflow:hidden}
/* gold edge-light traces the card on hover */
.khs .tile::after,.khs .svc::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.3px;
  background:linear-gradient(135deg,rgba(227,166,12,0) 20%,rgba(227,166,12,.6),rgba(227,166,12,0) 80%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .5s;pointer-events:none;z-index:3}
.khs .tile:hover::after,.khs .svc:hover::after{opacity:1}
.khs .tile.feat:hover{transform:translateY(-5px)}
.khs .mcard{transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .5s,box-shadow .5s}
.khs .mcard:hover{box-shadow:0 30px 60px -34px rgba(227,166,12,.5)}
/* icard sheen */
.khs .icard::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:3;
  background:linear-gradient(110deg,transparent,rgba(255,245,225,.22),transparent);transform:skewX(-16deg);transition:left .8s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.khs .icard:hover::before{left:130%}

/* ---------- PILL SHEEN ---------- */
.kh-pill-g,.khs .pill-g{position:relative;overflow:hidden}
.kh-pill-g::after,.khs .pill-g::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);transition:left .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.kh-pill-g:hover::after,.khs .pill-g:hover::after{left:135%}

/* ---------- SECTION SEAM (continuity between bands) ---------- */
.keb-seam{position:absolute;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(169,120,10,.32),transparent)}
.keb-seam.top{top:0}
.keb-dark .keb-seam{background:linear-gradient(90deg,transparent,rgba(227,166,12,.4),transparent)}

@media(max-width:940px){.keb-corner.tr{right:-70px;transform:scale(.7)}.keb-corner.bl{left:-70px;transform:scale(.7)}}
@media(prefers-reduced-motion:reduce){
  .keb-flowdot,.kh-pill-g::after,.khs .pill-g::after,.khs .icard::before{animation:none!important;transition:none!important}
  .keb-corner{opacity:.7}.keb-corner .keb-arc path,.keb-corner .keb-arc circle,.keb-corner .keb-arc line{stroke-dashoffset:0!important}
  .khs .rv-l,.khs .rv-r,.khs .rv-s{transform:none}.khs .rv-c{clip-path:none}
}