/* Li CPA "eye-pop" layer. Everything is scoped under html.ep, which eyepop.js sets.
   To turn it off: remove the eyepop.css <link> and eyepop.js <script> from the template. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

html.ep body{font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif}
html.ep .hero h1,
html.ep .section-title,
html.ep .cta-banner h2{font-family:Fraunces,Georgia,serif;letter-spacing:-.015em;font-weight:700}

/* ---------- hero ---------- */
html.ep .hero{position:relative;overflow:hidden;isolation:isolate;min-height:calc(100svh - 68px);align-items:center}
html.ep .hero::before,
html.ep .hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none}
html.ep .hero::before{width:620px;height:620px;left:-160px;top:-200px;background:radial-gradient(circle,rgba(201,168,76,.42),transparent 65%);animation:ep-drift 16s ease-in-out infinite alternate}
html.ep .hero::after{width:700px;height:700px;right:-220px;bottom:-300px;background:radial-gradient(circle,rgba(66,133,244,.30),transparent 65%);animation:ep-drift 20s ease-in-out infinite alternate-reverse}
@keyframes ep-drift{to{transform:translate(120px,80px) scale(1.15)}}
html.ep .ep-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 80%)}
html.ep .hero-content{max-width:680px}
html.ep .hero h1{font-size:clamp(2.5rem,5.4vw,4.4rem);line-height:1.04;margin-bottom:22px}
html.ep .hero h1 .ep-w{display:inline-block;opacity:0;transform:translateY(.5em);animation:ep-rise .8s cubic-bezier(.2,.8,.2,1) forwards}
html.ep .hero h1 .ep-gold{position:relative;background:linear-gradient(100deg,#e8c96b 0%,#fff3c4 45%,#c9a84c 60%,#e8c96b 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ep-rise .8s cubic-bezier(.2,.8,.2,1) forwards,ep-shine 6s linear infinite}
html.ep .hero h1 .ep-w:not(.ep-gold){color:#fff}
@keyframes ep-rise{to{opacity:1;transform:none}}
@keyframes ep-shine{to{background-position:-250% 0}}
html.ep .hero-badge{animation:ep-fade .8s .1s both}
html.ep .hero p,html.ep .hero-btns,html.ep .hero-stats{animation:ep-fade 1s .7s both}
@keyframes ep-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html.ep .hero-card{width:330px;border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15);animation:ep-in 1s .4s both, ep-bob 7s 1.4s ease-in-out infinite;transition:transform .2s}
@keyframes ep-in{from{opacity:0;transform:translateY(40px) rotate(2deg)}}
@keyframes ep-bob{50%{translate:0 -10px}}
html.ep .hero-card-item{opacity:0;animation:ep-fade .5s both}
html.ep .stat-num{font-family:Fraunces,Georgia,serif;font-size:2.2rem}

/* gold shine on primary buttons */
html.ep .btn-primary{position:relative;overflow:hidden;border-radius:999px;box-shadow:0 10px 30px rgba(201,168,76,.35);transition:transform .2s,box-shadow .2s,background .2s}
html.ep .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(201,168,76,.5)}
html.ep .btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:ep-sweep 3.8s 1.5s ease-in-out infinite}
@keyframes ep-sweep{0%,60%{left:-60%}100%{left:130%}}
html.ep .btn-outline{border-radius:999px;transition:transform .2s,background .2s}
html.ep .btn-outline:hover{transform:translateY(-2px)}

/* ---------- marquee ---------- */
html.ep .ep-marquee{background:#c9a84c;color:#1a365d;overflow:hidden;padding:14px 0;border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08)}
html.ep .ep-marquee .ep-track{display:flex;width:max-content;animation:ep-slide 34s linear infinite;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:clamp(1.1rem,2.2vw,1.6rem);white-space:nowrap}
html.ep .ep-marquee .ep-track span{padding:0 22px}
html.ep .ep-marquee .ep-track span::after{content:"✦";margin-left:44px;font-size:.7em;vertical-align:middle;opacity:.7}
@keyframes ep-slide{to{transform:translateX(-50%)}}

/* ---------- scroll reveals ---------- */
html.ep .ep-r{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
html.ep .ep-r.ep-in{opacity:1;transform:none}
html.ep .section-title{font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.1}

/* cards: lift + gold spotlight that follows the mouse */
html.ep .pf-card,html.ep .service-card,html.ep .pm-card{position:relative;overflow:hidden;border-radius:18px}
html.ep .pf-card::before,html.ep .service-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(201,168,76,.16),transparent 70%)}
html.ep .pf-card:hover::before,html.ep .service-card:hover::before{opacity:1}
html.ep .pf-card:hover,html.ep .service-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(26,54,93,.14)}
html.ep .pf-card span{transition:letter-spacing .3s}
html.ep .pf-card:hover span{letter-spacing:.03em}

/* CTA banner gets the moving glow too */
html.ep .cta-banner{position:relative;overflow:hidden;isolation:isolate}
html.ep .cta-banner::before{content:"";position:absolute;z-index:-1;width:520px;height:520px;left:50%;top:50%;translate:-50% -50%;border-radius:50%;filter:blur(60px);background:radial-gradient(circle,rgba(201,168,76,.35),transparent 65%);animation:ep-pulse 6s ease-in-out infinite}
@keyframes ep-pulse{50%{scale:1.25;opacity:.7}}
html.ep .cta-banner h2{font-size:clamp(2.1rem,4.4vw,3.4rem)}

@media (max-width:860px){
  html.ep .hero{min-height:auto}
  html.ep .hero-card{width:100%;animation:ep-in 1s .4s both}
}
@media (prefers-reduced-motion:reduce){
  html.ep *,html.ep *::before,html.ep *::after{animation:none!important;transition:none!important}
  html.ep .ep-r,html.ep .hero h1 .ep-w,html.ep .hero-card-item{opacity:1;transform:none}
}