/* ============================================================
   EcomPayments — 2026 UI Refresh
   Floating nav • glass surfaces • scroll reveals • animated accents
   Loaded AFTER /style.css so these rules win.
   ============================================================ */

:root{
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --shadow-float:0 10px 40px -12px rgba(31,58,29,.18), 0 4px 12px -6px rgba(31,58,29,.08);
  --shadow-lift:0 24px 60px -20px rgba(31,58,29,.22);
  --sage-gradient:linear-gradient(135deg,#9CB89A 0%,#7EA57C 55%,#5EA85A 100%);
  --sage-gradient-soft:linear-gradient(135deg,#EEF6EC 0%,#DBEBD8 100%);
  --glass:rgba(255,255,255,.72);
  --glass-border:rgba(226,235,224,.6);
}

html{scroll-padding-top:110px}
body{background:
  radial-gradient(1200px 500px at 85% -10%, rgba(156,184,154,.14), transparent 60%),
  radial-gradient(1000px 400px at -10% 20%, rgba(94,168,90,.06), transparent 55%),
  #fdfefc}

/* ---------- Floating pill nav ---------- */
.nav{
  top:14px; left:50%; right:auto; transform:translateX(-50%);
  width:calc(100% - 28px); max-width:1200px;
  background:var(--glass); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid var(--glass-border); border-radius:999px;
  height:62px; padding:0 10px 0 18px;
  box-shadow:var(--shadow-float);
  transition:top .3s var(--ease-out), box-shadow .3s var(--ease-out),
             background .3s var(--ease-out), transform .3s var(--ease-out);
}
.nav.is-scrolled{top:8px; background:rgba(255,255,255,.86); box-shadow:0 14px 44px -14px rgba(31,58,29,.22)}
.nav__inner{padding:0}
.nav__logo-badge{background:var(--sage-gradient); box-shadow:0 6px 14px -4px rgba(94,168,90,.5)}
.nav__logo-badge svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.nav__links a{position:relative}
.nav__links a::after{content:"";position:absolute;left:8px;right:8px;bottom:-6px;height:2px;border-radius:2px;background:var(--sage-gradient);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__actions .btn-primary{background:var(--sage-gradient); box-shadow:0 6px 16px -4px rgba(94,168,90,.45); border-radius:999px; padding:11px 22px}
.nav__actions .btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 22px -6px rgba(94,168,90,.55)}

/* Breadcrumbs sit below the floating nav */
.breadcrumbs{margin-top:96px; background:transparent; border-bottom:none; padding:14px 0}

/* Mega menu — bring it under the pill */
.nav__mega{margin-top:14px; border-radius:20px; box-shadow:var(--shadow-lift); border-color:var(--glass-border)}
.nav__mega::before{top:-18px; height:18px}

/* Mobile menu — detach + round it */
.nav__mobile{top:82px; left:14px; right:14px; border-radius:18px; border:1px solid var(--glass-border); box-shadow:var(--shadow-float); background:rgba(255,255,255,.96); backdrop-filter:blur(18px)}

@media (max-width:768px){
  .nav{top:10px; width:calc(100% - 20px); height:58px; padding:0 8px 0 14px}
  .breadcrumbs{margin-top:82px}
}

/* ---------- Hero enhancements ---------- */
.hero,.hero-v2,.page-hero{background:transparent; position:relative; overflow:hidden}
.hero::before,.hero-v2::before,.page-hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:120%;
  background:
    radial-gradient(600px 300px at 20% 30%, rgba(156,184,154,.22), transparent 65%),
    radial-gradient(500px 260px at 80% 15%, rgba(94,168,90,.15), transparent 70%);
  z-index:-1;
}
.hero,.hero-v2{padding-top:150px}
.page-hero{padding-top:140px}
.hero__tag{background:rgba(255,255,255,.7); backdrop-filter:blur(8px); border-color:var(--sage-soft); box-shadow:0 4px 14px -6px rgba(94,168,90,.25); animation:tagPulse 3.5s var(--ease-out) infinite}
@keyframes tagPulse{0%,100%{box-shadow:0 4px 14px -6px rgba(94,168,90,.25)}50%{box-shadow:0 4px 22px -4px rgba(94,168,90,.45)}}

.hero h1,.hero-v2 h1,.page-hero h1{background:linear-gradient(180deg,#1F2A1E 0%,#3a4a38 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad{background:var(--sage-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative}

/* ---------- Buttons ---------- */
.btn{border-radius:999px; position:relative; overflow:hidden; transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s}
.btn-primary{background:var(--sage-gradient); box-shadow:0 8px 22px -8px rgba(94,168,90,.55)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease-out)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(94,168,90,.65)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-ghost{border-radius:999px; background:rgba(255,255,255,.6); backdrop-filter:blur(8px)}

/* ---------- Cards (universal lift + shine) ---------- */
.card,.service-card,.blog-card,.stat-card,.pricing-box,.intake-card,.post-side-card,.post-side-calc,.kb-toc,.apply-form{
  border-radius:20px; transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
}
.card:hover,.service-card:hover,.blog-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--sage-soft)}
.intake-card{border-radius:24px; box-shadow:var(--shadow-lift); background:linear-gradient(180deg,#fff 0%,#fbfdfa 100%)}

/* Colored service card icons */
.service-card__icon,.card__icon{background:var(--sage-gradient); color:#fff; border:none; box-shadow:0 6px 14px -4px rgba(94,168,90,.4)}

/* ---------- Section titles ---------- */
.section-label{display:inline-flex; align-items:center; gap:8px}
.section-label::before{content:""; width:22px; height:2px; border-radius:2px; background:var(--sage-gradient)}

/* ---------- Stats marquee-style ---------- */
.partners-stats{background:linear-gradient(180deg,#fff 0%,var(--tint) 100%); border:none; position:relative}
.stat-card{background:linear-gradient(180deg,#fff 0%,#f7faf5 100%); border-radius:20px; transition:transform .4s var(--ease-out), box-shadow .4s}
.stat-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift)}
.stat-card__num{background:var(--sage-gradient); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- Pricing boxes ---------- */
.pricing-box--good{background:linear-gradient(160deg,#eaf4e7 0%,#f6fbf4 100%); border-color:var(--sage-soft); box-shadow:0 20px 40px -20px rgba(94,168,90,.35); position:relative; overflow:hidden}
.pricing-box--good::before{content:""; position:absolute; top:-40%; right:-30%; width:60%; height:100%; background:radial-gradient(closest-side, rgba(94,168,90,.28), transparent); pointer-events:none}
.pricing-box__rate{font-size:3.4rem}

/* ---------- Process steps with connecting line ---------- */
.process-steps{position:relative}
.process-steps::before{content:""; position:absolute; top:64px; left:8%; right:8%; height:2px; background:linear-gradient(90deg,transparent,var(--sage-soft) 20%,var(--sage-soft) 80%,transparent); z-index:0}
.process-step{position:relative; z-index:1}
.process-step__circle{background:#fff; border:2px solid var(--sage); box-shadow:0 6px 18px -6px rgba(94,168,90,.45); transition:transform .3s var(--ease-spring)}
.process-step:hover .process-step__circle{transform:scale(1.08) rotate(-6deg); background:var(--sage-gradient); color:#fff}

/* ---------- CTA banner ---------- */
.cta-banner{background:var(--sage-gradient); border:none; position:relative; overflow:hidden; color:#fff; padding:90px 0}
.cta-banner::before{content:""; position:absolute; inset:0; background:
  radial-gradient(600px 300px at 10% 20%, rgba(255,255,255,.22), transparent 55%),
  radial-gradient(500px 260px at 90% 80%, rgba(255,255,255,.15), transparent 60%)}
.cta-banner h2,.cta-banner p{color:#fff; position:relative}
.cta-banner p{opacity:.92}
.cta-banner .btn-primary{background:#fff; color:var(--accent); box-shadow:0 14px 34px -10px rgba(0,0,0,.35)}
.cta-banner .btn-primary:hover{background:#f7faf5; color:var(--accent-hover)}

/* ---------- Blog grid ---------- */
.blog-card{background:linear-gradient(180deg,#fff,#fbfdfa)}
.blog-card__body h3{transition:color .25s}
.blog-card:hover h3{color:var(--accent)}
.blog-chip{transition:all .25s var(--ease-out)}
.blog-chip:hover{transform:translateY(-1px); box-shadow:0 6px 14px -6px rgba(94,168,90,.35)}
.blog-chip.is-active{background:var(--sage-gradient); border-color:transparent}

/* ---------- Footer ---------- */
.footer{background:linear-gradient(180deg,#f5f9f3 0%,#eaf1e7 100%); border-top:1px solid var(--sage-soft); position:relative; overflow:hidden}
.footer::before{content:""; position:absolute; top:-50%; right:-10%; width:400px; height:400px; border-radius:50%; background:radial-gradient(closest-side, rgba(156,184,154,.22), transparent); pointer-events:none}

/* ---------- Scroll reveal ---------- */
[data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
[data-reveal].is-visible{opacity:1; transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
[data-reveal-delay="5"]{transition-delay:.40s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1; transform:none; transition:none}
  .btn::after{display:none}
  .hero__tag{animation:none}
}

/* Fade-in first-paint niceties */
main{animation:pageIn .55s var(--ease-out) both}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- KB post hero polish ---------- */
.kb-post-hero{border-radius:24px; margin:110px 24px 30px; overflow:hidden; box-shadow:var(--shadow-lift)}
.kb-post-hero + .breadcrumbs{margin-top:8px}
@media (max-width:768px){.kb-post-hero{margin:96px 12px 20px; border-radius:18px}}

/* ---------- Home article figure ---------- */
.home-article__fig{border-radius:20px; box-shadow:var(--shadow-lift)}

/* Give sections subtle alternating bg */
.section:nth-of-type(even){background:linear-gradient(180deg,transparent,rgba(241,246,239,.5) 50%,transparent)}

/* ---------- Mega footer ---------- */
.footer--mega{background:linear-gradient(180deg,#f6faf4 0%,#eef4ec 100%);position:relative;overflow:hidden}
.footer--mega::before{content:"";position:absolute;top:-40%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(156,184,154,.18),transparent 60%);pointer-events:none}
.footer__mega{display:grid;grid-template-columns:1.1fr 3fr;gap:48px;padding:56px 0 32px;position:relative}
.footer__brand-col p{color:var(--gray);font-size:.92rem;line-height:1.55;margin-top:14px;max-width:320px}
.footer__cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px}
.footer__col h5{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin-bottom:12px}
.footer__col h5 a{color:inherit;text-decoration:none}
.footer__col h5 a:hover{color:var(--accent)}
.footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.footer__col ul li a{color:var(--gray);text-decoration:none;font-size:.86rem;transition:color .18s var(--ease-out)}
.footer__col ul li a:hover{color:var(--accent)}
.footer__col--scroll .footer__scroll{max-height:230px;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:#b8ceb5 transparent}
.footer__col--scroll .footer__scroll::-webkit-scrollbar{width:6px}
.footer__col--scroll .footer__scroll::-webkit-scrollbar-thumb{background:#b8ceb5;border-radius:6px}
.footer__col--scroll .footer__scroll::-webkit-scrollbar-track{background:transparent}
.footer__bottom{border-top:1px solid rgba(31,58,29,.08);padding-top:18px;color:var(--gray);font-size:.82rem;text-align:center}
@media (max-width:960px){
  .footer__mega{grid-template-columns:1fr;gap:32px;padding:40px 0 24px}
  .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}

/* ---------- Homepage: all-services directory ---------- */
.section--services-directory{background:linear-gradient(180deg,#fdfefc 0%,#f6faf4 100%)}
.svc-dir{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:28px}
.svc-dir__group{background:#fff;border:1px solid var(--glass-border);border-radius:20px;padding:22px;box-shadow:var(--shadow-float);transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out)}
.svc-dir__group:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.svc-dir__group-head{display:flex;align-items:baseline;justify-content:space-between;text-decoration:none;color:inherit;padding-bottom:12px;border-bottom:1px solid rgba(31,58,29,.08);margin-bottom:12px}
.svc-dir__group-head h3{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.25rem;margin:0}
.svc-dir__group-head span{color:var(--accent);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.svc-dir__group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.svc-dir__group ul li a{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:500;transition:background .18s var(--ease-out),color .18s var(--ease-out)}
.svc-dir__group ul li a:hover{background:var(--sage-gradient-soft);color:var(--accent)}
.svc-dir__arrow{color:var(--gray-mid);transition:transform .18s var(--ease-out)}
.svc-dir__group ul li a:hover .svc-dir__arrow{transform:translateX(3px);color:var(--accent)}
@media (max-width:900px){.svc-dir{grid-template-columns:1fr}}