/* Service preview pages (svc-*.html): same look as the Mix 1 + video homepage */
.sp main{position:relative;z-index:2}
.sp main>section{position:relative;z-index:1}
/* hero */
.sp-hero{padding:132px 0 70px}
.sp-hg{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.sp-bc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:22px;font-size:13px;font-weight:700;color:#9EA3D6}
.sp-bc a{color:#C4C8EE;text-decoration:none}.sp-bc a:hover{color:#fff}
.sp-bc span{opacity:.5}.sp-bc b{color:#fff}
.sp-hero .kick{color:#AEB5FF}
.sp-hero h1.hx{margin:0;color:#fff;font-size:clamp(54px,7.4vw,120px);line-height:.9}
.sp-hero h1.hx em{display:block;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-style:italic;font-weight:800;text-transform:none;letter-spacing:-.055em;font-size:.62em;line-height:1.08;color:#AEB5FF}
.sp-hero .subp{color:#D5D8F5;font-size:19px;max-width:560px}
.sp-hero .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.sp-hero .btn-o{color:#fff}
.sp-inplan{display:inline-flex;align-items:center;gap:10px;margin:22px 0 0;padding:9px 14px;border-radius:999px;background:rgba(8,10,38,.6);border:1px solid rgba(174,181,255,.22);font-size:13.5px;font-weight:700;color:#DDE1FF;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sp-inplan i{width:8px;height:8px;border-radius:50%;background:#2CC46B;box-shadow:0 0 10px rgba(44,196,107,.8)}
.sp-art{min-height:520px;box-shadow:0 40px 100px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.08)}
/* demo chapter: one pinned scene */
.sp-demo .sx-copy .hx{color:#fff}
.sp-demo .sx-copy .hx em{color:#AEB5FF}
/* sections */
.sp-sec{padding:0 0 70px}
.sp-sec>.w>.kick{color:#AEB5FF}
.sp-sec h2.hx{margin:0 0 30px;font-size:clamp(44px,5.6vw,92px)}
.sp-sec h2.hx.dk{color:#fff}.sp-sec h2.hx.dk em{color:#AEB5FF}
/* included */
.sp-inc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sp-inc.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.sp-i{position:relative;padding:26px 24px 24px;border-radius:24px;background:rgba(255,255,255,.04);border:1px solid rgba(174,181,255,.16);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
.sp-i::after{content:"";position:absolute;left:12%;right:12%;bottom:-40px;height:60px;border-radius:50%;background:rgba(75,87,240,.55);filter:blur(30px);pointer-events:none}
.sp-i:hover{transform:translateY(-4px);border-color:rgba(174,181,255,.4)}
.sp-i .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(145deg,rgba(120,132,255,.35),rgba(37,50,214,.2));border:1px solid rgba(174,181,255,.45);box-shadow:0 0 22px rgba(75,87,240,.55),inset 0 0 12px rgba(174,181,255,.25)}
.sp-i .ic svg{width:24px;height:24px;fill:none;stroke:#E4E7FF;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(174,181,255,.9))}
.sp-i h3{margin:18px 0 6px;font-size:19px;font-weight:800;letter-spacing:-.02em;color:#fff}
.sp-i p{margin:0;font-size:15px;line-height:1.55;color:#C4C8EE}
/* steps */
.sp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:st}
.sp-st{position:relative;padding:28px 26px;border-radius:24px;background:rgba(8,10,38,.78);border:1px solid rgba(174,181,255,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.sp-st b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#2532D6;color:#fff;font:800 18px/1 "Plus Jakarta Sans",sans-serif;box-shadow:0 0 0 6px rgba(37,50,214,.25),0 0 24px rgba(75,87,240,.7)}
.sp-st:not(:last-child)::after{content:"";position:absolute;top:49px;left:calc(26px + 52px);right:-16px;height:2px;background:repeating-linear-gradient(90deg,rgba(174,181,255,.5) 0 6px,transparent 6px 12px)}
.sp-st h3{margin:20px 0 6px;font-size:20px;font-weight:800;color:#fff}
.sp-st p{margin:0;color:#C4C8EE;font-size:15.5px;line-height:1.55}
/* plans */
.sp-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:26px}
.sp-pl{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 20px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(174,181,255,.16);color:#fff;text-decoration:none;transition:transform .3s,border-color .3s}
.sp-pl:hover{transform:translateY(-4px);border-color:rgba(174,181,255,.45)}
.sp-pl small{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#AEB5FF}
.sp-pl b{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:26px;line-height:1}
.sp-pl .pr{font-size:34px;font-weight:800;letter-spacing:-.04em}.sp-pl .pr sup{font-size:.5em;vertical-align:.7em}.sp-pl .pr i{font-style:normal;font-size:14px;font-weight:700;color:#AEB5FF;margin-left:3px}
.sp-pl .st{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:13.5px;font-weight:800}
.sp-pl .st i{width:20px;height:20px;border-radius:50%;background:#2CC46B;position:relative}
.sp-pl .st i::after{content:"";position:absolute;left:6px;top:6.5px;width:8px;height:4.5px;border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(-45deg)}
.sp-pl.off{opacity:.55}.sp-pl.off .st i{background:rgba(255,255,255,.18)}.sp-pl.off .st i::after{left:5px;top:9px;width:10px;height:0;border-left:0;border-bottom:2.2px solid #fff;transform:none}
.sp-pl.pop{background:linear-gradient(180deg,#2532D6,#141A8A);border-color:transparent;box-shadow:0 30px 60px -20px rgba(37,50,214,.8)}
.sp-pl.pop small{color:#fff}
.sp-fine{margin:16px 0 0;font-size:13.5px;color:#9EA3D6}
.sp-sec .gl .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.sp-sec .btn-o{color:#fff}
/* CRM application */
.sp-apply{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:start}
.sp-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}
.sp-form h3{grid-column:1/-1;margin:0 0 4px;font-size:22px;font-weight:800;color:#fff}
.sp-form .full{grid-column:1/-1}
.sp-form label{display:grid;gap:7px;font-size:13.5px;font-weight:700;color:#DDE1FF}
.sp-form input,.sp-form select,.sp-form textarea{width:100%;box-sizing:border-box;padding:13px 14px;border-radius:14px;border:1px solid rgba(174,181,255,.25);background:rgba(255,255,255,.06);color:#fff;font:500 15px "Plus Jakarta Sans",system-ui,sans-serif;outline:none;transition:border-color .2s,box-shadow .2s}
.sp-form select option{color:#0B0B0F}
.sp-form input::placeholder,.sp-form textarea::placeholder{color:#8A8FC2}
.sp-form input:focus,.sp-form select:focus,.sp-form textarea:focus{border-color:#7884FF;box-shadow:0 0 0 4px rgba(75,87,240,.25)}
.sp-form .agree{display:flex;align-items:center;gap:10px;font-weight:600}.sp-form .agree input{width:18px;height:18px;padding:0}
.sp-form .agree a{color:#AEB5FF}
.sp-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sp-form .err{margin:0;min-height:1em;color:#FF8A8A;font-size:14px;font-weight:700}
.sp-form button{justify-content:center;border:0;cursor:pointer;font-family:inherit}
/* more services */
.sp-more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sp-m{position:relative;display:grid;gap:8px;padding:14px 14px 18px;border-radius:24px;background:rgba(8,10,38,.78);border:1px solid rgba(174,181,255,.16);color:#fff;text-decoration:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
.sp-m:hover{transform:translateY(-5px);border-color:rgba(174,181,255,.45)}
.sp-mart{position:relative;display:block;height:170px;border-radius:16px;background:var(--c);overflow:hidden}
.sp-mart img{position:absolute;left:50%;bottom:0;height:92%;width:auto;transform:translateX(-50%);filter:drop-shadow(0 10px 16px rgba(0,0,0,.25));transition:transform .4s cubic-bezier(.34,1.4,.5,1)}
.sp-m:hover .sp-mart img{transform:translateX(-50%) translateY(-6px)}
.sp-m .n{display:inline-grid;place-items:center;width:30px;height:22px;margin-top:8px;border-radius:7px;background:#FF3D3D;color:#fff;font-size:11.5px;font-weight:800}
.sp-m b{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1}
.sp-m>i{position:absolute;right:16px;bottom:18px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#2532D6}
.sp-m>i svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* Local SEO device: listings */
.cit,.crm{position:relative;width:100%;max-width:620px;border-radius:22px;background:#fff;color:#0B0B0F;box-shadow:0 40px 90px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.1);padding:20px 20px 22px;font-family:"Plus Jakarta Sans",system-ui,sans-serif}
.ct-top,.cr-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 90px 14px 4px;border-bottom:1px solid #ECEDF5;margin-bottom:6px}
.ct-top b,.cr-top b{font-size:16px;font-weight:800;letter-spacing:-.02em}
.ct-score span{display:inline-flex;height:28px;align-items:center;padding:0 12px;border-radius:999px;background:#EEF0FF;color:#2532D6;font-size:12.5px;font-weight:800}
.ct-r{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid #F2F3F8}
.ct-r>i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--b);color:#fff;font:800 16px/1 "Plus Jakarta Sans",sans-serif;font-style:normal}
.ct-r b{display:block;font-size:14px;font-weight:800}
.ct-v{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:3px;font-size:13px;color:#4A4E6A}
.ct-v em{font-style:normal;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:#E8F8EF;color:#14834A}
.ct-bad{color:#9A3B3B}.ct-bad em{background:#FFE9E9;color:#C22222}
.ct-area{display:flex;align-items:center;gap:8px;margin-top:14px;padding:11px 14px;border-radius:14px;background:#2532D6;color:#fff;font-size:13.5px;font-weight:700}
.ct-area i{width:8px;height:8px;border-radius:50%;background:#2CC46B;box-shadow:0 0 8px #2CC46B}
.ct-v[data-at].on,.ct-score span[data-at].on{display:flex}.ct-score span[data-at].on{display:inline-flex}.ct-area[data-at].on{display:flex}
/* CRM device: board */
.cr-note{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:#FFE9E9;color:#C22222;font-size:12px;font-weight:800}
.cr-note[data-at].on{display:inline-flex}
.cr-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.cr-col{min-height:250px;padding:12px;border-radius:16px;background:#F4F5FB}
.cr-col h5{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6B6F8E}
.cr-c{display:grid;gap:2px;padding:11px 12px;margin-bottom:9px;border-radius:12px;background:#fff;box-shadow:0 6px 16px rgba(20,25,80,.08),0 0 0 1px rgba(11,11,15,.05)}
.cr-c[data-at].on{display:grid}
.cr-c b{font-size:13.5px;font-weight:800}.cr-c span{font-size:12.5px;color:#4A4E6A}.cr-c small{font-size:11px;font-weight:700;color:#2532D6}
.cr-c.hot{box-shadow:0 0 0 2px #FF3D3D,0 8px 18px rgba(255,61,61,.2)}.cr-c.hot small{color:#C22222}
.cr-c.won{background:#E8F8EF}.cr-c.won small{color:#14834A}
.cr-empty{margin:0;font-size:12.5px;color:#9A9CB5}
/* responsive */
@media(max-width:1000px){
 .sp-hg,.sp-apply{grid-template-columns:1fr;gap:34px}
 .sp-inc,.sp-inc.four,.sp-plans,.sp-more{grid-template-columns:1fr 1fr}
 .sp-steps{grid-template-columns:1fr}.sp-st::after{display:none}
 .sp-art{min-height:380px}
}
@media(max-width:640px){
 .sp-hero{padding:104px 0 44px}
 .sp-hero .subp{font-size:16.5px}
 .sp-inc,.sp-inc.four,.sp-plans{grid-template-columns:1fr}
 .sp-more{grid-template-columns:1fr 1fr;gap:10px}.sp-mart{height:120px}.sp-m b{font-size:18px}.sp-m>i{width:30px;height:30px;right:10px;bottom:12px}
 .sp-form{grid-template-columns:1fr}
 .cit,.crm{padding:14px}.ct-top,.cr-top{padding-right:80px}.ct-v{font-size:12px}
 .cr-cols{gap:6px}.cr-col{padding:8px;min-height:200px}.cr-c{padding:8px}.cr-c b{font-size:12px}.cr-c span{font-size:11px}
}
/* step states win over the device's own display rules */
.cit [data-at]:not(.on),.crm [data-at]:not(.on),.cit [data-until].off,.crm [data-until].off{display:none!important}
@media(max-width:640px){.cr-top{flex-wrap:wrap;gap:6px}.cr-top b{font-size:14px}.cr-note{height:24px;font-size:11px}}