/* ==========================================================
   Sellerpad – v5: seamless hero, stacked sections, richer visuals
   ========================================================== */
::selection{background:#5CA5E8;color:#0F2A4A}
html{scrollbar-color:#2F5C8F #0F2139}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:#0F2139}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3F7FC4,#2F5C8F);border-radius:10px;border:3px solid #0F2139}

/* ---------- Hero: fade into navy, no hard edge ---------- */
.hero{padding-bottom:90px}
.hero-inner{z-index:2}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:min(260px,34vh);z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,43,73,0) 0%,rgba(20,43,73,.55) 45%,#142B49 100%)}
.hero::before{-webkit-mask-image:radial-gradient(ellipse 70% 70% at 75% 45%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 70% 70% at 75% 45%,#000 20%,transparent 80%)}
.proof-wrap{margin-top:-60px}
#about{padding-top:110px}

/* ---------- Stacked rounded sections ---------- */
main>section.section{margin-top:-44px;border-radius:44px 44px 0 0;padding:120px 0 168px;box-shadow:0 -18px 40px -22px rgba(6,16,32,.55)}
main>section#about{margin-top:0;border-radius:0;box-shadow:none;padding-top:110px}
main>section#contact{margin-top:0;border-radius:0;box-shadow:none}
main>section.section.light{box-shadow:0 -18px 40px -22px rgba(6,16,32,.45)}
.cta{padding-top:40px}

/* ---------- About: two-column + orbit ---------- */
.about-top{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;margin-bottom:70px}
.about-copy h2{margin-bottom:20px}
.about-copy>p{color:var(--muted);font-size:1.1rem;max-width:560px}
.about-cta{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 34px}
.about-copy .who{margin:0;justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:14px}
.about-copy .who-row{justify-content:flex-start}
.orbit{--o:480px;position:relative;width:var(--o);max-width:100%;aspect-ratio:1;margin-inline:auto}
.o-ring{position:absolute;border-radius:50%;border:1.5px dashed rgba(142,197,244,.28);left:50%;top:50%;transform:translate(-50%,-50%)}
.o-ring.r1{width:100%;height:100%}
.o-ring.r2{width:74%;height:74%;border-style:solid;border-color:rgba(142,197,244,.14)}
.o-ring.r3{width:48%;height:48%;border-color:rgba(142,197,244,.3)}
.o-ring.r1{animation:ringspin 60s linear infinite}
@keyframes ringspin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.o-core{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#2A5A92,#142B49);border:1px solid rgba(142,197,244,.5);box-shadow:0 0 0 12px rgba(92,165,232,.08),0 0 70px rgba(92,165,232,.55)}
.o-core img{width:62%;height:auto;border-radius:50%}
.o-core::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(142,197,244,.45);animation:ping 3s ease-out infinite}
.o-spin{position:absolute;inset:0;animation:ringspin2 42s linear infinite}
@keyframes ringspin2{to{transform:rotate(360deg)}}
.o-chip{position:absolute;left:50%;top:50%;transform-origin:0 0;transform:rotate(var(--a)) translateX(calc(var(--o)*.37)) rotate(calc(var(--a)*-1)) translate(-50%,-50%)}
.o-in{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;background:rgba(20,43,73,.9);border:1px solid rgba(142,197,244,.35);backdrop-filter:blur(10px);font-weight:700;font-size:.95rem;white-space:nowrap;box-shadow:0 14px 34px -12px rgba(0,0,0,.6);animation:ringspin3 42s linear infinite}
@keyframes ringspin3{to{transform:rotate(-360deg)}}
.o-in i{font-style:normal;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800}
.o-in i.a{background:rgba(245,165,36,.2);color:var(--amber)}
.o-in i.f{background:rgba(92,165,232,.25);color:var(--blue-2)}
.o-in i.m{background:rgba(236,72,153,.2);color:#F472B6}
.o-in i.s{background:rgba(52,211,153,.2);color:var(--green)}
.o-pill{position:absolute;padding:8px 16px;border-radius:999px;background:linear-gradient(180deg,#A6D3F8,#6FB1EC);color:#0F2A4A;font-size:.82rem;font-weight:700;box-shadow:0 12px 28px -10px rgba(92,165,232,.8);animation:floaty 5s ease-in-out infinite}
.o-pill b{font-family:var(--mono)}
.o-pill.p1{left:2%;top:10%}
.o-pill.p2{right:0;bottom:8%;animation-delay:-2s}

/* ---------- Why: account-health widget ---------- */
.health{margin-top:22px;padding:18px 20px;border-radius:18px;background:linear-gradient(160deg,#1C2A3A,#182330);color:#fff;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 40px -22px rgba(10,25,47,.8);display:grid;gap:12px;max-width:440px;position:relative;z-index:1}
.h-top{display:flex;justify-content:space-between;align-items:center;font-size:.88rem;font-weight:700}
.h-top .ok{color:#34D399;font-size:.8rem;padding:4px 10px;border-radius:999px;background:rgba(52,211,153,.12)}
.h-row{display:grid;grid-template-columns:128px 1fr;gap:12px;align-items:center;font-size:.8rem;color:#B8C9DC}
.h-bar{height:7px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.h-bar i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#5CA5E8,#8EC5F4);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.why.in .h-bar i{width:var(--w)}
.health small{font-size:.68rem;color:#6F86A0;font-family:var(--mono)}
.why:nth-child(1)>div{position:relative}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .about-top{grid-template-columns:1fr;gap:50px}
  .orbit{--o:440px}
}
@media (max-width:760px){
  main>section.section{margin-top:-30px;border-radius:30px 30px 0 0;padding:84px 0 120px}
  main>section#about{padding-top:90px}
  .proof-wrap{margin-top:-40px}
  .orbit{--o:320px}
  .o-in{font-size:.78rem;padding:7px 12px 7px 7px;gap:7px}
  .o-in i{width:26px;height:26px;font-size:.8rem}
  .o-pill{font-size:.7rem;padding:6px 12px}
  .about-cta .btn{width:100%}
  .h-row{grid-template-columns:104px 1fr}
}
@media (prefers-reduced-motion:reduce){.o-spin,.o-in,.o-ring.r1{animation:none!important}}

/* seamless hero -> about: glow sits lower, background starts exactly at hero's end colour */
#about{background:
  radial-gradient(900px 520px at 50% 34%,rgba(92,165,232,.2),transparent 70%),
  linear-gradient(180deg,#142B49 0%,#142B49 12%,#10243F 100%)}
#about::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(rgba(142,197,244,.12) 1.2px,transparent 1.2px) 0 0/30px 30px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 220px);mask-image:linear-gradient(180deg,transparent 0,#000 220px)}
#about{--oy:260px;--ox:-120px}
#about::after{opacity:.22}
@media (max-width:760px){.o-pill.p1{top:-3%;left:0}.o-pill.p2{bottom:2%}}