/* SellerVine service pages: motion and polish layer (homepage style).
   Classes below are added by js/sv-service.js, so pages read normally without JavaScript. */
.svs{--svs-ease:cubic-bezier(.22,1,.36,1);--svs-grad:linear-gradient(135deg,#3b82f6 0%,#22d3ee 50%,#7c3aed 100%)}

/* reveal */
.svs .svs-rv{opacity:0;transform:translateY(18px);transition:opacity 520ms var(--svs-ease),transform 520ms var(--svs-ease);transition-delay:var(--svs-d,0ms)}
.svs .svs-rv.svs-in{opacity:1;transform:none}

/* hero network + glance card */
.svs .svs-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5;z-index:0}
.svs .svs-glance{position:relative;overflow:hidden;animation:svs-pop 800ms var(--svs-ease) 200ms both}
.svs .svs-glance::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%);transform:translateX(-100%);animation:svs-glint 7s ease-in-out 2.2s infinite;pointer-events:none}
.svs .svs-live{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--font-mono,monospace);color:#16a34a;margin-left:10px}
.svs .svs-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#16a34a;animation:svs-blink 1.6s ease-in-out infinite}
.svs h1 .gradient-text,.svs .svs-shine{background-size:220% 100%;animation:svs-shine 7s ease-in-out infinite}

/* cards */
.svs .card-hover{position:relative}
.svs .card-hover::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--svs-grad);-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 300ms;pointer-events:none}
.svs .card-hover:hover::before{opacity:1}
.svs .card-hover:hover > div:first-child svg{animation:svs-wiggle 700ms var(--svs-ease)}

/* dark stats band */
.svs .svs-band{isolation:isolate;position:relative;overflow:hidden}
.svs .svs-hero{position:relative;overflow:hidden}
.svs .svs-band::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.35),transparent 65%);top:-220px;right:-140px;animation:svs-drift 16s ease-in-out infinite alternate;z-index:0;pointer-events:none}
.svs .svs-band::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.22),transparent 65%);bottom:-200px;left:-120px;animation:svs-drift 18s ease-in-out infinite alternate-reverse;z-index:0;pointer-events:none}

/* approach timeline */
.svs .svs-line{background:#e2e8f0!important;overflow:hidden}
.svs .svs-line::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(180deg,#3b82f6,#22d3ee,#7c3aed);transform-origin:top;transform:scaleY(var(--svs-p,0))}
.svs .svs-step > div:first-child{transition:background 400ms var(--svs-ease),box-shadow 400ms,transform 400ms var(--svs-ease),border-color 400ms}
.svs .svs-step.svs-on > div:first-child{background:var(--svs-grad)!important;border-color:transparent!important;transform:scale(1.06);box-shadow:0 12px 24px -10px rgba(37,99,235,.55)}
.svs .svs-step.svs-on > div:first-child span{color:#fff!important;-webkit-text-fill-color:#fff;background:none}

/* tables */
.svs table tbody tr{transition:background-color 200ms}
.svs table tbody tr:hover{background:rgba(59,130,246,.05)}

/* final CTA */
.svs .svs-cta{position:relative;overflow:hidden;isolation:isolate}
.svs .svs-cta::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.28),transparent 65%);top:-180px;left:-120px;animation:svs-drift 14s ease-in-out infinite alternate;z-index:0;pointer-events:none}
.svs .svs-cta > :not(.absolute){position:relative;z-index:1}

@keyframes svs-pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes svs-glint{0%{transform:translateX(-100%)}18%,100%{transform:translateX(100%)}}
@keyframes svs-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes svs-shine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes svs-wiggle{0%{transform:rotate(0)}25%{transform:rotate(-10deg) scale(1.08)}55%{transform:rotate(8deg) scale(1.08)}100%{transform:rotate(0)}}
@keyframes svs-drift{from{transform:translate(0,0)}to{transform:translate(-120px,100px)}}

@media (prefers-reduced-motion:reduce){
  .svs .svs-net{display:none}
  .svs .svs-rv{opacity:1;transform:none;transition:none}
  .svs .svs-glance,.svs .svs-glance::after,.svs .svs-live::before,.svs h1 .gradient-text,.svs .svs-shine,.svs .svs-band::after,.svs .svs-band::before,.svs .svs-cta::after,.svs .card-hover:hover > div:first-child svg{animation:none}
  .svs .svs-line::after{transform:scaleY(1)}
}

/* v2: tighter section rhythm (PPC Spider uses roughly 40 to 56px per section) */
.svs section:not(.svs-hero):not([class*="pt-3"]):not([class*="pt-4"]){padding-top:56px!important;padding-bottom:56px!important}
.svs .svs-hero{padding-bottom:56px!important}
.svs .mb-14,.svs .mb-16{margin-bottom:32px!important}
.svs .mb-12{margin-bottom:28px!important}
@media (max-width:640px){
  .svs section:not(.svs-hero):not([class*="pt-3"]):not([class*="pt-4"]){padding-top:40px!important;padding-bottom:40px!important}
  .svs .svs-hero{padding-bottom:40px!important}
}

/* v2: springy reveal (like gsap back.out) */
.svs .svs-rv{transform:translateY(26px) scale(.98);transition:opacity 600ms cubic-bezier(.22,1,.36,1),transform 750ms cubic-bezier(.34,1.56,.64,1);transition-delay:var(--svs-d,0ms)}
.svs .svs-rv.svs-in{transform:none}

/* v2: hover. Icon cards flip to the dark theme; other cards lift */
.svs .card-hover{transition:transform 300ms cubic-bezier(.34,1.56,.64,1),box-shadow 300ms,background-color 350ms,border-color 300ms!important}
.svs .card-hover:hover{transform:translateY(-6px)!important;box-shadow:0 28px 50px -24px rgba(11,18,32,.45)!important}
.svs .card-hover:has(> div:first-child > svg):hover{background:#0b1220!important;border-color:transparent!important}
.svs .card-hover:has(> div:first-child > svg):hover h3{color:#fff!important}
.svs .card-hover:has(> div:first-child > svg):hover p,.svs .card-hover:has(> div:first-child > svg):hover li{color:#cbd5e1!important}
.svs .card-hover:has(> div:first-child > svg):hover > div:first-child{background:linear-gradient(135deg,#3b82f6,#22d3ee,#7c3aed)!important;color:#fff!important}
.svs a svg.lucide-arrow-right,.svs a svg.lucide-chevron-right{transition:transform 250ms cubic-bezier(.34,1.56,.64,1)}
.svs a:hover svg.lucide-arrow-right,.svs a:hover svg.lucide-chevron-right{transform:translateX(4px)}
.svs .space-y-4 > .border{transition:border-color 250ms,box-shadow 250ms}
.svs .space-y-4 > .border:hover{border-color:#bfdbfe;box-shadow:0 10px 28px -14px rgba(15,23,42,.18)}
.svs .space-y-4 > .border button:hover span{color:#2563eb}
.svs ul li a,.svs ol li a{transition:color 200ms}
@media (prefers-reduced-motion:reduce){.svs .card-hover:hover{transform:none!important}.svs a:hover svg.lucide-arrow-right{transform:none}}

/* ===== Live widgets that replace static illustrations ===== */
.svw{--ink:#0b1220;--muted:#64748b;--line:#e2e8f0;--pos:#16a34a;--blue:#2563eb;--grad:linear-gradient(135deg,#3b82f6 0%,#22d3ee 50%,#7c3aed 100%);--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
  position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px -18px rgba(16,24,40,.28);overflow:hidden;display:flex;flex-direction:column;min-height:300px;font-family:Inter,system-ui,sans-serif;color:#334155}
.svw::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-100%);pointer-events:none}
.svw.on::after{animation:svw-glint 7s ease-in-out 2.5s infinite}
.svw-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:#fbfcfe}
.svw-dots{display:flex;gap:5px}.svw-dots i{width:9px;height:9px;border-radius:50%;background:#e2e8f0;display:block}
.svw-title{font:600 13px var(--font-mono,monospace);color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svw-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:600 12px var(--font-mono,monospace);color:var(--pos)}
.svw-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pos);animation:svw-blink 1.6s ease-in-out infinite}
.svw-body{flex:1;padding:14px;display:flex;flex-direction:column;gap:12px;min-height:0}
.svw-foot{padding:0 14px 10px;text-align:right;font:500 12px var(--font-mono,monospace);color:#94a3b8}
.svw-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.svw-kpis:has(> :nth-child(2):last-child){grid-template-columns:1fr 1fr}.svw-kpis.one{grid-template-columns:1fr;max-width:220px}
.svw-kpi{border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.svw-kpi span{display:block;font:600 12px var(--font-mono,monospace);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.svw-kpi b{display:block;font:700 clamp(1rem,1.8vw,1.25rem)/1.2 var(--font-mono,monospace);color:var(--ink);margin:2px 0}
.svw-kpi em{font-style:normal;font-size:12px;font-weight:600;color:var(--muted)}.svw-kpi em.up{color:var(--pos)}.svw-kpi em.dn{color:#dc2626}
.svw-bars{flex:1;display:flex;align-items:flex-end;gap:10px;min-height:56px;padding:0 4px}
.svw-b{flex:1;display:flex;align-items:flex-end;gap:3px;height:100%}
.svw-b i{flex:1;height:var(--h);border-radius:4px 4px 0 0;transform-origin:bottom;transform:scaleY(0);transition:transform 800ms var(--spring);transition-delay:calc(var(--i)*80ms + 200ms)}
.svw-b .sp{background:#f59e0b}.svw-b .sa{background:var(--blue)}
.svw.on .svw-b i{transform:scaleY(1)}
.svw-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.svw-list li{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:13.5px}
.svw-list .k{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-weight:500}
.svw-list .v{font:500 12.5px var(--font-mono,monospace);color:var(--muted)}.svw-list .v b{color:var(--ink)}
.tag{font:700 12px var(--font-mono,monospace);border-radius:6px;padding:3px 8px;white-space:nowrap;background:#f1f5f9;color:#475569}
.svw .tag.up{background:#dcfce7;color:#15803d}.svw .tag.dn{background:#fee2e2;color:#b91c1c}.svw .tag.st{background:#fef3c7;color:#92400e}
[data-seq]{opacity:0;transform:translateY(10px);transition:opacity 450ms var(--ease),transform 600ms var(--spring)}
[data-seq].in{opacity:1;transform:none}
.svw-rank .rank{font:700 15px var(--font-mono,monospace);color:var(--blue);min-width:42px;text-align:right}
.svw-spark{width:60px;height:18px;flex-shrink:0}.svw-spark path{fill:none;stroke:var(--pos);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset 1.2s var(--ease) .3s}
.svw-rank li.in .svw-spark path{stroke-dashoffset:0}
.svw-split{flex:1;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.svw-gauge{position:relative;width:150px;height:150px}
.svw-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.g-track{fill:none;stroke:#eef2f7;stroke-width:12}
.g-fill{fill:none;stroke:url(#svwg);stroke:#2563eb;stroke-width:12;stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:314;transition:stroke-dashoffset 1.8s var(--ease) .3s,stroke 1.8s}
.svw.on .g-fill{stroke-dashoffset:calc(314 - 314 * var(--to))}
.svw-gauge.ahr .g-fill{stroke:#dc2626}.svw.on .svw-gauge.ahr .g-fill{stroke:var(--pos)}
.svw-gauge b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 2rem var(--font-mono,monospace);color:var(--ink);margin-top:-10px}
.svw-gauge span{position:absolute;left:0;right:0;bottom:34px;text-align:center;font-size:12px;font-weight:600;color:var(--muted)}
.svw-checks{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.svw-checks li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--ink)}
.chk{width:20px;height:20px;border-radius:50%;border:2px solid #cbd5e1;flex-shrink:0;position:relative;transition:background 300ms,border-color 300ms}
.svw-checks li.in .chk{background:var(--pos);border-color:var(--pos)}
.svw-checks li.in .chk::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.svw-issues .tag,.svw-cases .tag{transition:background-color 400ms,color 400ms}
.svw .tag.flip{background:#fee2e2;color:#b91c1c}.svw .tag.flip.done{background:#dcfce7;color:#15803d}
.svw-feed .tag{min-width:58px;text-align:center}.svw-feed .t0{background:#dbeafe;color:#1d4ed8}.svw-feed .t1{background:#cffafe;color:#0e7490}.svw-feed .t2{background:#fef3c7;color:#92400e}.svw-feed .t3{background:#dcfce7;color:#15803d}.svw-feed .t4{background:#ede9fe;color:#6d28d9}
.svw-feed .st{width:18px;height:18px;border-radius:50%;border:2px solid #cbd5e1;border-top-color:#22d3ee;animation:svw-rot .8s linear infinite;flex-shrink:0}
.svw-feed li.done .st{animation:none;border-color:var(--pos);background:var(--pos);position:relative}
.svw-feed li.done .st::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.svw-chart{position:relative;flex:1;min-height:90px}
.svw-chart svg{width:100%;height:100%;display:block;overflow:visible}
.rop{stroke:#f59e0b;stroke-width:1.5;stroke-dasharray:5 5}
.stock,.restock{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.stock{stroke:var(--blue);transition:stroke-dashoffset 1.6s var(--ease) .3s}.restock{stroke:var(--pos);transition:stroke-dashoffset 1.2s var(--ease) 2.6s}
.svw.on .stock,.svw.on .restock{stroke-dashoffset:0}
.svw-chart .dot{fill:#dc2626;opacity:0;transition:opacity 300ms 1.9s}.svw.on .svw-chart .dot{opacity:1}
.rop-l{position:absolute;right:4px;top:calc(65% - 20px);font:600 12px var(--font-mono,monospace);color:#b45309}
.svw-alert{position:absolute;left:58%;top:42%;transform:translate(-50%,-50%) scale(0);background:#dc2626;color:#fff;font:700 12px Inter,sans-serif;padding:5px 10px;border-radius:999px;box-shadow:0 8px 18px -8px rgba(220,38,38,.7);transition:transform 500ms var(--spring) 2s}
.svw.on .svw-alert{transform:translate(-50%,-50%) scale(1)}
.svw-intl{position:relative;flex:1;min-height:250px}.svw-intl.hubw{min-height:300px;max-height:360px}
.svw-intl svg{position:absolute;inset:0;width:100%;height:100%}
.svw-intl line{stroke:#93c5fd;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 800ms var(--ease);transition-delay:calc(var(--i)*140ms + 200ms);vector-effect:non-scaling-stroke}
.svw.on .svw-intl line{stroke-dashoffset:0}
.svw-intl .orb{fill:none;stroke:#cbd5e1;stroke-dasharray:1.5 2.5;vector-effect:non-scaling-stroke}
.svw-intl .hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--grad);color:#fff;font:700 13px Inter,sans-serif;padding:10px 14px;border-radius:999px;box-shadow:0 12px 24px -10px rgba(37,99,235,.6);white-space:nowrap;z-index:2}
.svw-intl .mk{position:absolute;transform:translate(-50%,-50%) scale(.6);font:700 12.5px var(--font-mono,monospace);background:#fff;border:1.5px solid #cbd5e1;color:#475569;border-radius:999px;padding:5px 9px;transition:transform 500ms var(--spring),background-color 300ms,color 300ms,border-color 300ms,opacity 400ms}
.svw-intl .mk.in{transform:translate(-50%,-50%) scale(1);background:#eff6ff;border-color:#60a5fa;color:#1d4ed8}
.svw-intl .mk.svc.in{background:#fff;border-color:#93c5fd;color:var(--ink);font-family:Inter,sans-serif}
.hubw .mk.svc:hover{background:var(--blue);color:#fff}
.svw-mods{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:center}
.svw-mods li{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13.5px;font-weight:600;color:var(--ink)}
.svw-mods li i{width:46px;height:26px;border-radius:6px;background:linear-gradient(110deg,#e0e7ff 30%,#f5f3ff 50%,#e0e7ff 70%);background-size:200% 100%;animation:svw-shim 1.6s linear infinite}
.svw-split.cr{grid-template-columns:1.1fr .9fr}
.svw-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:center;position:relative}
.svw-imgs span{aspect-ratio:1;border-radius:8px;background:linear-gradient(135deg,#dbeafe,#ede9fe)}
.svw-imgs span:first-child{grid-column:span 2;grid-row:span 2;background:var(--grad);opacity:.85}
.svw-imgs span.in{opacity:1}.svw-imgs span:first-child.in{opacity:.9}
.svw-imgs em{grid-column:1 / -1;font-style:normal;font:600 12px var(--font-mono,monospace);color:var(--muted)}
@media (max-width:520px){.svw-split{grid-template-columns:1fr;justify-items:center}.svw-split.cr{grid-template-columns:1fr}.svw-kpis{grid-template-columns:1fr 1fr}.svw-bars{min-height:90px}.svw-body{padding-bottom:8px}}
@keyframes svw-glint{0%{transform:translateX(-100%)}18%,100%{transform:translateX(100%)}}
@keyframes svw-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes svw-rot{to{transform:rotate(360deg)}}
@keyframes svw-shim{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.svw *,.svw::after{animation:none!important;transition:none!important}[data-seq]{opacity:1;transform:none}}