/* ==========================================================
   Sellerpad – section backgrounds & animations
   ========================================================== */

/* ---------- Section backgrounds ---------- */
.section,.brands,.cta{isolation:isolate;overflow:hidden}
.section::after,.brands::after{content:"";position:absolute;z-index:-1;width:560px;height:560px;border-radius:50%;filter:blur(120px);opacity:.38;pointer-events:none;background:var(--orb,#5CA5E8);top:var(--oy,-160px);right:var(--ox,-160px);animation:drift 20s ease-in-out infinite alternate}
.section::before{z-index:-1}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,60px) scale(1.15)}100%{transform:translate(40px,-40px) scale(.95)}}

/* services: navy with soft grid + blue glow top-right and bottom-left */
#services{background:
  radial-gradient(700px 420px at 8% 100%,rgba(92,165,232,.18),transparent 70%),
  linear-gradient(180deg,#142B49 0%,#17335A 100%)}
/* marketplaces: deeper gradient with dots */
#marketplaces{--orb:#3F7FC4;--ox:auto;--oy:20%;background:
  radial-gradient(rgba(142,197,244,.16) 1.2px,transparent 1.2px) 0 0/30px 30px,
  linear-gradient(135deg,#0F2139 0%,#1C3D63 55%,#142B49 100%)}
#marketplaces::after{left:-180px;right:auto}
/* why: spotlight in the middle */
#why{--orb:#8EC5F4;--ox:-200px;--oy:30%;background:
  radial-gradient(900px 500px at 50% 0%,rgba(92,165,232,.22),transparent 70%),
  linear-gradient(180deg,#142B49,#102440)}
#why::after{opacity:.2}
/* process: diagonal gradient + dots */
#process{--orb:#5CA5E8;--ox:auto;--oy:-200px;background:
  radial-gradient(rgba(255,255,255,.1) 1.2px,transparent 1.2px) 0 0/34px 34px,
  linear-gradient(160deg,#0F2139 0%,#1C3D63 100%)}
#process::after{left:30%;right:auto}
/* analytics */
#analytics{--orb:#5CA5E8;--ox:-220px;--oy:40%;background:
  radial-gradient(800px 500px at 90% 10%,rgba(142,197,244,.16),transparent 70%),
  linear-gradient(180deg,#102440,#142B49)}
/* case studies */
#case-studies{--orb:#4F8FD6;--ox:auto;--oy:-100px;background:
  radial-gradient(rgba(142,197,244,.14) 1.2px,transparent 1.2px) 0 0/28px 28px,
  linear-gradient(135deg,#142B49,#1E4373 60%,#142B49)}
#case-studies::after{left:-200px;right:auto}
/* testimonials */
#testimonials{--orb:#8EC5F4;--ox:auto;--oy:10%;background:
  radial-gradient(700px 380px at 50% 50%,rgba(92,165,232,.2),transparent 70%),
  linear-gradient(180deg,#142B49,#0F2139)}
#testimonials::after{left:50%;right:auto;margin-left:-280px;opacity:.18}
/* faq */
#resources{--orb:#5CA5E8;--ox:-180px;--oy:-100px;background:
  radial-gradient(rgba(255,255,255,.08) 1.2px,transparent 1.2px) 0 0/32px 32px,
  linear-gradient(180deg,#0F2139,#17335A)}
/* contact */
#contact{--orb:#5CA5E8;--ox:auto;--oy:30%;background:linear-gradient(180deg,#142B49,#0F2139)}
#contact::after{left:-200px;right:auto;opacity:.25}
/* brands strip */
.brands{background:linear-gradient(180deg,#17335A 0%,#142B49 100%);--orb:#5CA5E8;--oy:-250px;--ox:30%}
.brands::after{opacity:.25}
/* seamless top divider glow between sections */
.section+.section{box-shadow:inset 0 1px 0 rgba(142,197,244,.1)}

/* floating geometric decorations */
.deco{position:absolute;z-index:-1;pointer-events:none;border:1.5px solid rgba(142,197,244,.22);border-radius:28px;animation:spinfloat 14s ease-in-out infinite alternate}
.deco.d1{width:140px;height:140px;left:4%;top:12%}
.deco.d2{width:90px;height:90px;right:6%;bottom:14%;border-radius:50%;animation-duration:10s}
.deco.d3{width:60px;height:60px;right:12%;top:18%;background:rgba(142,197,244,.08);animation-duration:12s}
@keyframes spinfloat{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(-30px) rotate(40deg)}}

/* ---------- Hero entrance ---------- */
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(80px) scale(.96)}to{opacity:1;transform:none}}
@keyframes lineIn{from{clip-path:inset(0 100% 0 0);opacity:0}to{clip-path:inset(0 0 0 0);opacity:1}}
.hero .badge{animation:rise .8s .1s both}
.hero h1 span{animation:rise .9s both}
.hero h1 span:nth-child(1){animation-delay:.25s}
.hero h1 span:nth-child(2){animation-delay:.4s}
.hero h1 span:nth-child(3){animation-delay:.55s}
.hero-desc{animation:rise .9s .7s both}
.hero-ctas{animation:rise .9s .85s both}
.trust li{animation:rise .7s both}
.trust li:nth-child(1){animation-delay:1s}.trust li:nth-child(2){animation-delay:1.08s}.trust li:nth-child(3){animation-delay:1.16s}.trust li:nth-child(4){animation-delay:1.24s}
.dash-wrap{animation:slideIn 1.2s .35s cubic-bezier(.2,.8,.2,1) both}
.float.f1,.float.f2,.chip{opacity:0;animation-name:popIn,floaty;animation-duration:.7s,6s;animation-delay:1.2s,1.9s;animation-fill-mode:both,none;animation-iteration-count:1,infinite;animation-timing-function:ease,ease-in-out}
.float.f2{animation-delay:1.4s,2.1s}
.chip.c-a{animation-delay:1.6s,2.3s}.chip.c-f{animation-delay:1.8s,2.5s}
@keyframes popIn{from{opacity:0;transform:scale(.6) translateY(20px)}to{opacity:1;transform:none}}
.hero-line{animation:lineIn 1.6s .6s both}

/* shimmering accent text */
.hero h1 .accent{background:linear-gradient(100deg,#8EC5F4 0%,#CFE8FF 40%,#5CA5E8 60%,#8EC5F4 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:rise .9s .4s both,shimmer 5s 1.5s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}

/* glowing animated grid in hero */
.hero::before{animation:gridMove 30s linear infinite}
@keyframes gridMove{to{background-position:64px 64px,64px 64px}}

/* ---------- Buttons: shine sweep ---------- */
.btn{position:relative;overflow:hidden}
.btn-primary::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 4.5s 2s ease-in-out infinite}
@keyframes shine{0%,60%{left:-80%}100%{left:140%}}
.btn-primary{animation:btnGlow 3s ease-in-out infinite}
@keyframes btnGlow{50%{box-shadow:0 14px 40px -6px rgba(92,165,232,.95),inset 0 1px 0 rgba(255,255,255,.7)}}

/* ---------- Scroll progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#5CA5E8,#8EC5F4,#fff)}

/* ---------- Reveal variants ---------- */
.reveal.from-l{transform:translateX(-60px)}
.reveal.from-r{transform:translateX(60px)}
.reveal.zoom{transform:scale(.9)}
.reveal.from-l.in,.reveal.from-r.in,.reveal.zoom.in{transform:none}
.section-head .eyebrow{position:relative;padding-left:46px}
.section-head.center .eyebrow{padding-left:0}
.section-head .eyebrow::before{content:"";position:absolute;left:0;top:50%;height:2px;width:0;background:var(--blue);transition:width .9s .3s}
.section-head.in .eyebrow::before{width:32px}
.section-head.center .eyebrow::before{display:none}
.section-head h2{background:linear-gradient(180deg,#fff 40%,#BBD6F0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Card spotlight (follows cursor) ---------- */
.card{position:relative}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(142,197,244,.16),transparent 45%)}
.card:hover::before{opacity:1}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(142,197,244,.9),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card:hover::after{opacity:1}
.svc,.mp,.why,.cs{will-change:transform}

/* icons gently float */
.svc-ico{animation:bob 4s ease-in-out infinite}
.services-grid .svc:nth-child(2n) .svc-ico{animation-delay:-1s}
.services-grid .svc:nth-child(3n) .svc-ico{animation-delay:-2s}
@keyframes bob{50%{transform:translateY(-4px)}}

/* ---------- Brand marquee ---------- */
.brand-strip{display:block;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);padding:10px 0}
.brand-track{display:flex;gap:20px;width:max-content;animation:marq 32s linear infinite}
.brand-strip:hover .brand-track{animation-play-state:paused}
.brand-track .brand{min-width:270px;flex:none}
@keyframes marq{to{transform:translateX(calc(-50% - 10px))}}

/* ---------- Marketplace visuals: bars grow ---------- */
.mp-vis .mini i{transform-origin:bottom;transform:scaleY(.2);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.mp.in .mp-vis .mini i{transform:scaleY(1)}
.mp.in .mp-vis .mini i:nth-child(2){transition-delay:.08s}.mp.in .mp-vis .mini i:nth-child(3){transition-delay:.16s}.mp.in .mp-vis .mini i:nth-child(4){transition-delay:.24s}.mp.in .mp-vis .mini i:nth-child(5){transition-delay:.32s}.mp.in .mp-vis .mini i:nth-child(6){transition-delay:.4s}.mp.in .mp-vis .mini i:nth-child(7){transition-delay:.48s}
.mp-vis .glow{animation:drift 9s ease-in-out infinite alternate}

/* ---------- Why: big card shimmer ---------- */
.why:nth-child(1){position:relative;overflow:hidden}
.why:nth-child(1)>div::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(142,197,244,.5),transparent 65%);animation:pulseGlow 4s ease-in-out infinite;pointer-events:none}
@keyframes pulseGlow{50%{transform:scale(1.4);opacity:.5}}

/* ---------- Process timeline draw ---------- */
.steps::before{transform-origin:left;transform:scaleX(0);transition:transform 1.8s .3s cubic-bezier(.2,.8,.2,1)}
.steps.lit::before{transform:scaleX(1)}
.step-num{position:relative}
.step-num::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(142,197,244,.5);animation:ping 2.8s ease-out infinite}
.step:nth-child(2) .step-num::after{animation-delay:.6s}.step:nth-child(3) .step-num::after{animation-delay:1.2s}.step:nth-child(4) .step-num::after{animation-delay:1.8s}
@keyframes ping{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.5);opacity:0}}

/* ---------- Analytics panels ---------- */
.panel{transition:transform .35s,border-color .35s,box-shadow .35s}
.panel:hover{transform:translateY(-5px);border-color:rgba(142,197,244,.35);box-shadow:0 24px 60px -24px rgba(92,165,232,.45)}
.an-note{animation:bob 3.5s ease-in-out infinite}

/* ---------- FAQ polish ---------- */
.faq{transition:transform .3s,border-color .3s,background .3s}
.faq:hover{transform:translateX(6px);border-color:rgba(142,197,244,.35)}

/* ---------- CTA ---------- */
.cta-box{background-size:140% 140%,140% 140%,200% 200%;animation:ctaFlow 14s ease-in-out infinite alternate}
@keyframes ctaFlow{0%{background-position:0 0,0 0,0% 50%}100%{background-position:30px -20px,-30px 20px,100% 50%}}
.cta-box::after{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--ang,0deg),transparent 0 70%,rgba(142,197,244,.9) 85%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinAng 6s linear infinite;pointer-events:none}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spinAng{to{--ang:360deg}}

/* ---------- Footer ---------- */
.footer{position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;left:50%;top:-200px;width:700px;height:300px;margin-left:-350px;background:radial-gradient(ellipse,rgba(92,165,232,.25),transparent 70%);pointer-events:none}

@media (max-width:760px){
  .section::after,.brands::after{width:320px;height:320px;filter:blur(90px)}
  .deco{display:none}
  .brand-track .brand{min-width:200px;font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){
  .hero *,.hero,.reveal,.brand-track,.btn-primary,.cta-box{animation:none!important}
  .float.f1,.float.f2,.chip{opacity:1}
  .steps::before{transform:none}
}