/* services: bento grid */
.sv-head{display:flex;align-items:end;justify-content:space-between;gap:48px;margin-bottom:40px}
.sv-head h2{margin:0}
.sv-intro{max-width:340px;margin:0;font-size:15px;line-height:1.6;color:var(--t-muted,#5b6170)}
.sv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sv-card{display:flex;flex-direction:column;padding:22px}
.sv-card .svc-art{margin:0 0 20px}
.sv-wide{grid-column:span 2;display:grid;grid-template-columns:1fr 1.05fr;gap:28px;align-items:center;padding:26px}
.sv-wide .svc-art{order:2;margin:0;height:100%;display:flex;align-items:center;justify-content:center;min-height:230px}
.sv-wide .svc-art svg{width:100%;max-width:none;height:auto}
.sv-wide .svc-art{padding:10px}
.sv-body{display:flex;flex-direction:column;flex:1;padding:0 6px}
.sv-feat{align-self:flex-start;margin-bottom:12px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--brand-a,#3040c8);background:color-mix(in srgb,var(--brand-b,#7c5cff) 12%,transparent);border:1px solid color-mix(in srgb,var(--brand-b,#7c5cff) 22%,transparent)}
.sv-card h3{font-size:19px;font-weight:550;letter-spacing:-.015em;margin:0 0 8px}
.sv-wide h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.025em;line-height:1.2}
.sv-card p{margin:0;font-size:15px;line-height:1.55}
.sv-wide p{font-size:16px;max-width:38ch}
.sv-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:16px 0 0;padding:0}
.sv-tags li{font-size:12px;padding:5px 10px;border-radius:999px;color:var(--t-body,#2b3140);background:var(--glass,rgba(255,255,255,.65));border:1px solid var(--glass-line,rgba(255,255,255,.95));box-shadow:inset 0 1px 0 #fff}
.sv-go{align-self:flex-start;margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:7px;border:0;background:none;cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:var(--brand-a,#3040c8)}
.sv-go svg{transition:transform .2s}
.sv-go:hover svg,.sv-go:focus-visible svg{transform:translateX(4px)}
.sv-go:focus-visible{outline:2px solid var(--brand-b,#7c5cff);outline-offset:4px;border-radius:6px}
.sv-card .svc-art svg{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sv-card:hover .svc-art svg{transform:translateY(-4px) scale(1.03)}

.sv-cta{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:28px;border-radius:22px;color:var(--inv-ink,#fff);
  background:radial-gradient(80% 70% at 100% 0%,color-mix(in srgb,var(--brand-b,#7c5cff) 55%,transparent),transparent 60%),var(--inv-bg,linear-gradient(160deg,#1b1f33,#0e1018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 24px 50px rgba(20,22,40,.28)}
.sv-cta::after{content:"";position:absolute;right:-60px;bottom:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--brand-b,#7c5cff) 45%,transparent),transparent 70%);filter:blur(10px)}
.sv-cta-k{margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-l,#b9b0ff)!important}
.sv-cta h3{margin:0 0 10px;font-size:22px;font-weight:550;letter-spacing:-.02em;line-height:1.25;color:var(--inv-ink,#fff)!important}
.sv-cta p{margin:0;font-size:14px;line-height:1.55;color:var(--inv-muted,#c4c9d6)!important}
.sv-cta-btn{position:relative;z-index:1;align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:600;color:var(--t-ink,#111318);background:var(--glass,#fff);box-shadow:0 10px 24px rgba(0,0,0,.3);transition:transform .2s}
.sv-cta p:not(.sv-cta-k){margin-bottom:24px}
.sv-cta-btn:hover{transform:translateY(-2px)}

@media(max-width:1100px){.sv-grid{grid-template-columns:repeat(2,1fr)}.sv-wide{grid-column:span 2}}
@media(max-width:800px){.sv-head{display:block}.sv-intro{margin-top:14px}}
@media(max-width:640px){.sv-grid{grid-template-columns:1fr}.sv-wide{grid-column:auto;display:flex;flex-direction:column;align-items:stretch;padding:22px}.sv-wide .svc-art{order:0;min-height:0;margin-bottom:20px}}
@media(max-width:640px){.sv-grid{grid-template-columns:minmax(0,1fr)}.sv-card,.sv-body{min-width:0}.sv-card,.sv-cta{overflow-wrap:anywhere}.sv-tags li,.sv-cta-btn{max-width:100%}}
@media (prefers-reduced-motion: reduce){.sv-card .svc-art svg,.sv-go svg,.sv-cta-btn{transition:none!important}}

/* neo-brutal */
body[data-theme="neo"] .sv-feat{background:#ffd84d;color:#000;border:2px solid #000}
body[data-theme="neo"] .sv-tags li{background:#fff;border:2px solid #000;box-shadow:none;color:#000;font-weight:600}
body[data-theme="neo"] .sv-go{color:#000;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
body[data-theme="neo"] .sv-cta{background:#000;border:3px solid #000;border-radius:16px;box-shadow:6px 6px 0 #ffd84d}
body[data-theme="neo"] .sv-cta::after{display:none}
body[data-theme="neo"] .sv-cta-k{color:#ffd84d!important}
body[data-theme="neo"] .sv-cta-btn{background:#ffd84d;border:2px solid #fff;box-shadow:none;color:#000}

/* dark */
body[data-theme="dark"] .sv-feat{color:var(--brand-l,#c4b8ff);background:color-mix(in srgb,var(--brand-b,#7c5cff) 16%,transparent);border-color:color-mix(in srgb,var(--brand-l,#a08cff) 30%,transparent)}
body[data-theme="dark"] .sv-tags li{background:var(--glass-d,rgba(255,255,255,.06));border-color:var(--glass-line-d,rgba(255,255,255,.12));box-shadow:none;color:#c9d0de}
body[data-theme="dark"] .sv-go{color:var(--brand-l,#a99bff)}
body[data-theme="dark"] .services .sv-intro{color:var(--t-body-d,#aab3c7)!important}
body[data-theme="dark"] .sv-cta{background:radial-gradient(80% 70% at 100% 0%,color-mix(in srgb,var(--brand-b,#7c5cff) 45%,transparent),transparent 60%),var(--inv-bg,linear-gradient(160deg,#1c1f2e,#121420));border:1px solid var(--glass-line-d,rgba(255,255,255,.12))}
body[data-theme="neo"] .sv-cta p:not(.sv-cta-k){color:#e5e5e5!important}
body[data-theme="neo"] .sv-cta h3{color:#fff!important}

/* service graphics */
.g-art{display:block;width:100%;height:auto;overflow:visible}
.g-panel{fill:#fff}.g-soft{fill:#f3f2f9}.g-line{fill:#e1e2ec}.g-line2{fill:#e9e8f3}.g-ink{fill:#1b2142}.g-inkfill{fill:var(--t-ink,#111318)}
.g-dot{fill:#c8c9db}.g-brand-soft{fill:var(--brand-s,#c9bff7)}.g-brand-soft2{fill:var(--brand-s,#a99bf0)}.g-brand-line{fill:var(--brand-b,#7c5cff)}
.g-t-ink{fill:var(--t-ink,#111318)}.g-t-mut{fill:var(--t-muted,#6b7181)}.g-t-brand{fill:var(--brand-a,#3040c8)}
.g-okc{fill:#22c55e}.g-stepc{fill:var(--brand-a,#3040c8)}.g-step3o{stroke:#d4d5e2}.g-bub{fill:#f1f0f8}.g-field{fill:#fff;stroke:var(--brand-s,#c9bff7);stroke-width:1.2}
.g-chip{fill:var(--brand-s,#efedfc)}.g-strk{stroke:var(--t-muted,#6b7181)}.g-ringbg{stroke:#ecebf4}.g-fill{fill:#22c55e}
.g-sh{filter:drop-shadow(0 8px 14px rgba(36,41,69,.12))}
.g-ring{stroke-dasharray:100;stroke-dashoffset:6}
.g-cursor{transform:translate(118px,170px)}
.g-cta,.g-add,.g-badge,.g-toast,.g-ok,.g-step3,.g-in,.g-bar,.g-type,.g-fill,.g-cite,.g-shield,.g-prog{transform-box:fill-box;transform-origin:center}
.g-bar{transform-origin:50% 100%}.g-type,.g-fill,.g-prog{transform-origin:0 50%}
.g-typing{opacity:0}

/* animations run only while the card is on screen */
.is-live .g-cursor{animation:gCursor 6s ease-in-out infinite}
.is-live .g-cta{animation:gPress 6s ease-in-out infinite}
@keyframes gCursor{0%{transform:translate(300px,226px);opacity:0}10%{opacity:1}40%,85%{transform:translate(118px,170px);opacity:1}100%{transform:translate(118px,170px);opacity:0}}
@keyframes gPress{0%,42%,50%,100%{transform:scale(1)}46%{transform:scale(.93)}}
@keyframes gPop{0%,50%{opacity:0;transform:translateY(10px) scale(.96)}56%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}

.is-live .g-add{animation:gAdd 6s ease-in-out infinite}
.is-live .g-badge{animation:gBadge 6s ease-out infinite}
.is-live .g-prog{animation:gProg 6s ease-in-out infinite}
.is-live .g-step3{animation:gStep 6s ease-out infinite}
.is-live .g-ok{animation:gOk 6s ease-out infinite}
@keyframes gAdd{0%,14%,22%,100%{transform:scale(1)}18%{transform:scale(.94)}}
@keyframes gBadge{0%,20%{opacity:0;transform:scale(.3)}26%{opacity:1;transform:scale(1.2)}30%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes gProg{0%,30%{transform:scaleX(0)}45%{transform:scaleX(.5)}62%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes gStep{0%,62%{opacity:0;transform:scale(.4)}68%,94%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes gOk{0%,70%{opacity:0;transform:translateY(6px)}76%,94%{opacity:1;transform:none}100%{opacity:0}}

.is-live .g-bar{animation:gBar 7s cubic-bezier(.2,.8,.2,1) infinite}
.is-live .g-type{animation:gType 7s ease-out infinite}
@keyframes gBar{0%{transform:scaleY(0)}18%,90%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes gType{0%,20%{transform:scaleX(0)}38%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}

.is-live .g-in1{animation:gIn1 7s ease-out infinite}
.is-live .g-in2{animation:gIn2 7s ease-out infinite}
.is-live .g-in3{animation:gIn3 7s ease-out infinite}
.is-live .g-typing{animation:gTyping 7s linear infinite}
.is-live.sv-card .g-toast{animation:gToast 7s ease-out infinite}
.sv-card:first-child.is-live .g-toast{animation:gPop 6s ease-out infinite}
@keyframes gIn1{0%,6%{opacity:0;transform:translateY(8px)}12%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes gTyping{0%,15%{opacity:0}17%,29%{opacity:1}31%,100%{opacity:0}}
@keyframes gIn2{0%,30%{opacity:0;transform:translateY(8px)}36%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes gIn3{0%,46%{opacity:0;transform:translateY(8px)}52%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes gToast{0%,62%{opacity:0;transform:translateY(10px) scale(.96)}68%,94%{opacity:1;transform:none}100%{opacity:0}}

.is-live .g-rise{animation:gRise 6s cubic-bezier(.5,0,.2,1) infinite}
.is-live .g-r1{animation:gDown 6s cubic-bezier(.5,0,.2,1) infinite}
.is-live .g-r2{animation:gDown 6s cubic-bezier(.5,0,.2,1) infinite}
.is-live .g-cite{animation:gCite 6s ease-in-out infinite}
@keyframes gRise{0%,30%{transform:translateY(0)}55%,92%{transform:translateY(-48px)}100%{transform:translateY(0)}}
@keyframes gDown{0%,30%{transform:translateY(0)}55%,92%{transform:translateY(24px)}100%{transform:translateY(0)}}
@keyframes gCite{0%,55%,100%{opacity:1;transform:scale(1)}62%{transform:scale(1.06)}70%{transform:scale(1)}}

.is-live .g-ring{animation:gRing 6s cubic-bezier(.3,.7,.2,1) infinite}
.is-live .g-fill{animation:gFill 6s ease-out infinite}
.is-live .g-shield{animation:gBob 4s ease-in-out infinite}
@keyframes gRing{0%{stroke-dashoffset:100}40%,92%{stroke-dashoffset:6}100%{stroke-dashoffset:100}}
@keyframes gFill{0%,10%{transform:scaleX(0)}40%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes gBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* workflow automation and CRM graphics */
.g-flow{fill:none;stroke:#b9adf5;stroke-width:2;stroke-dasharray:4 5;stroke-linecap:round}
.is-live .g-flow{animation:gFlow 1.1s linear infinite}
@keyframes gFlow{to{stroke-dashoffset:-18}}
.g-node,.g-deal{transform-box:fill-box;transform-origin:center}
.is-live .g-node{animation:gBob 4s ease-in-out infinite}
.is-live .g-deal{animation:gDeal 7s cubic-bezier(.5,0,.2,1) infinite}
@keyframes gDeal{0%,8%{opacity:0;transform:translateX(-34px)}20%,46%{opacity:1;transform:none}60%,92%{opacity:1;transform:translateX(64px)}100%{opacity:0;transform:translateX(64px)}}
body[data-theme="dark"] .g-flow{stroke:#5b4fb0}
body[data-theme="neo"] .g-flow{stroke:#000}
@media (prefers-reduced-motion: reduce){.is-live .g-art *{animation:none!important}.g-typing{opacity:0}}

/* graphics: dark */
body[data-theme="dark"] .g-panel,body[data-theme="dark"] .g-field{fill:#1d2131}
body[data-theme="dark"] .g-soft,body[data-theme="dark"] .g-bub{fill:#272b3c}
body[data-theme="dark"] .g-line,body[data-theme="dark"] .g-line2{fill:#373c50}
body[data-theme="dark"] .g-ink{fill:#d7dbe7}
body[data-theme="dark"] .g-inkfill{fill:#3a3f55}
body[data-theme="dark"] .g-t-ink{fill:var(--t-ink-d,#eef1f7)}
body[data-theme="dark"] .g-t-mut{fill:var(--t-muted-d,#9aa3b5)}
body[data-theme="dark"] .g-t-brand{fill:var(--brand-l,#b4a8ff)}
body[data-theme="dark"] .g-chip{fill:color-mix(in srgb,var(--brand-b,#7c5cff) 20%,transparent)}
body[data-theme="dark"] .g-ringbg,body[data-theme="dark"] .g-step3o{stroke:#30344a}
body[data-theme="dark"] .g-strk{stroke:var(--t-muted-d,#9aa3b5)}
body[data-theme="dark"] .g-dot{fill:#4a5068}
body[data-theme="dark"] .g-sh{filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}

/* graphics: neo-brutal */
body[data-theme="neo"] .g-sh{filter:none}
body[data-theme="neo"] .g-panel{stroke:#000;stroke-width:2}
body[data-theme="neo"] .g-field{stroke:#000;stroke-width:2}
body[data-theme="neo"] .g-t-brand{fill:#000}
.sv-all{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:14px;font-weight:600;color:var(--brand-a,#3040c8);text-decoration:none}
body[data-theme="neo"] .sv-all{color:#000}
body[data-theme="dark"] .sv-all{color:var(--brand-l,#a99bff)}