/* ===== Service pages: interactive "By The Numbers" panels (one per service) ===== */
.sw{display:flex;flex-direction:column;gap:14px;height:100%}
.sw-note{font-size:11.5px;color:var(--muted-2);font-style:italic;line-height:1.5;margin:0}
.sw-seg{display:inline-flex;align-self:flex-start;gap:4px;background:var(--bg);border:1px solid var(--line-2);border-radius:100px;padding:4px}
.sw-seg button{font:inherit;font-size:12px;font-weight:600;color:var(--muted);background:none;border:0;border-radius:100px;padding:6px 13px;cursor:pointer;transition:background .25s,color .25s}
.sw-seg button:hover{color:var(--text)}
.sw-seg button.on{background:linear-gradient(120deg,var(--orange),var(--red));color:#fff}
.sw-btn{font:inherit;font-size:12.5px;font-weight:600;color:#fff;background:linear-gradient(120deg,var(--orange),var(--red));border:0;border-radius:100px;padding:8px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;box-shadow:0 8px 24px -8px rgba(255,90,30,.6);transition:transform .2s}
.sw-btn:hover{transform:translateY(-1px)}
.sw-btn svg{width:13px;height:13px}
.sw-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:12px;overflow:hidden}
.sw-stats>div{background:var(--bg);padding:11px 10px;display:flex;flex-direction:column;gap:4px;min-width:0}
.sw-stats .l{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.sw-stats .v{font-family:"Clash Display",sans-serif;font-weight:700;font-size:16px;color:var(--text);transition:color .3s}
.sw-stats .v.flash{color:var(--orange)}

/* --- Web design: style playground --- */
.wd-demo{--acc:#ff5a1e;--on:#fff;--rad:10px;--hf:"Clash Display",sans-serif;--bf:"General Sans",sans-serif;--hw:700}
.wd-ctrls{display:flex;flex-direction:column;gap:10px}
.wd-ctrl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wd-ctrl>.l{width:58px;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.wd-sw{display:flex;gap:8px}
.wd-sw button{width:24px;height:24px;border-radius:50%;border:0;background:var(--c);cursor:pointer;box-shadow:0 0 0 2px var(--bg),0 0 0 3px transparent;transition:box-shadow .2s,transform .2s}
.wd-sw button:hover{transform:scale(1.1)}
.wd-sw button.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--c)}
.wd-prev{border-radius:14px;background:#f7f5f2;color:#16161b;overflow:hidden;border:1px solid var(--line-2);font-family:var(--bf)}
.wd-pnav{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #e7e3dd;font-size:10px;color:#55555f}
.wd-pnav b{width:18px;height:18px;border-radius:calc(var(--rad)*.5);background:var(--acc);transition:.35s}
.wd-pnav span:first-of-type{margin-left:auto}
.wd-pnav em{font-style:normal;font-weight:700;font-size:10px;background:var(--acc);color:var(--on);padding:5px 10px;border-radius:var(--rad);transition:.35s}
.wd-pbody{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;padding:16px 14px 18px;align-items:center}
.wd-copy{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.wd-pill{font-size:9.5px;font-weight:700;color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent);border-radius:var(--rad);padding:4px 9px;transition:.35s}
.wd-copy strong{font-family:var(--hf);font-weight:var(--hw);font-size:clamp(17px,1.9vw,22px);line-height:1.08;letter-spacing:-.01em;transition:font-family .2s}
.wd-copy p{font-size:11px;line-height:1.5;color:#5d5d68;margin:0}
.wd-btns{display:flex;gap:7px;margin-top:2px}
.wd-btns em,.wd-btns i{font-style:normal;font-size:10.5px;font-weight:700;padding:7px 12px;border-radius:var(--rad);transition:.35s}
.wd-btns em{background:var(--acc);color:var(--on)}
.wd-btns i{border:1.5px solid var(--acc);color:#16161b}
.wd-card{background:#fff;border-radius:calc(var(--rad) + 4px);padding:8px;box-shadow:0 10px 24px -14px rgba(0,0,0,.35);transition:.35s}
.wd-img{aspect-ratio:4/3;border-radius:var(--rad);background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 70%,#fff),var(--acc));transition:.35s}
.wd-cl{display:flex;flex-direction:column;gap:5px;margin:9px 2px}
.wd-cl span{height:6px;border-radius:3px;background:#e4e0da;width:85%}
.wd-cl span.s{width:55%}
.wd-price{display:flex;align-items:center;justify-content:space-between;padding:0 2px}
.wd-price b{font-family:var(--hf);font-weight:var(--hw);font-size:13px}
.wd-price em{font-style:normal;font-size:9.5px;font-weight:700;background:var(--acc);color:var(--on);padding:4px 9px;border-radius:var(--rad);transition:.35s}

/* --- WordPress: speed audit --- */
.wp-gauges{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.wp-g{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line-2);border-radius:14px;padding:14px 6px 12px}
.wp-ring{position:relative;width:62px;height:62px}
.wp-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.wp-ring circle{fill:none;stroke-width:5}
.wp-ring .bg{stroke:#26262e}
.wp-ring .fg{stroke:#28c840;stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:163.4;transition:stroke-dashoffset 1.2s var(--ease)}
.wp-ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:"Clash Display",sans-serif;font-size:17px;color:#28c840}
.wp-g span{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.25}
.wp-list{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;list-style:none}
.wp-list li{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line-2);border-radius:11px;padding:9px 12px;font-size:12.5px;color:var(--muted);transition:color .3s,border-color .3s}
.wp-list li i{flex:0 0 auto;width:16px;height:16px;border-radius:50%;border:1.5px solid #3a3a44;display:grid;place-items:center;transition:.3s}
.wp-list li i::after{content:"";width:6px;height:3px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg) translate(1px,-1px);opacity:0;transition:.2s}
.wp-list li em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;color:var(--muted-2)}
.wp-list li.done{color:var(--text);border-color:rgba(40,200,64,.28)}
.wp-list li.done i{background:#28c840;border-color:#28c840}
.wp-list li.done i::after{opacity:1}
.wp-list li.done em{color:#28c840}

/* --- Social: post preview --- */
.sm-wrap{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:center}
.sm-phone{--sm-brand:#e1306c;background:#0d0d10;border:1px solid var(--line-2);border-radius:26px;padding:10px 9px 12px;box-shadow:0 20px 40px -24px rgba(0,0,0,.9)}
.sm-top{display:flex;align-items:center;gap:8px;padding:2px 3px 8px}
.sm-av{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--red));box-shadow:0 0 0 2px #0d0d10,0 0 0 3.5px var(--sm-brand)}
.sm-who{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.sm-who b{font-size:11px;color:var(--text)}
.sm-who small{font-size:9.5px;color:var(--muted-2)}
.sm-pico{margin-left:auto;width:18px;height:18px;color:var(--sm-brand)}
.sm-pico svg{width:100%;height:100%}
.sm-media{position:relative;aspect-ratio:var(--sm-ar,4/5);border-radius:12px;overflow:hidden;background:var(--sm-bg,linear-gradient(160deg,#ff8a3d,#c22706));transition:aspect-ratio .4s var(--ease)}
.sm-post{position:absolute;inset:0;padding:14px;display:flex;flex-direction:column;justify-content:center;gap:7px;color:#fff}
.sm-post::before{content:"";position:absolute;right:-30%;top:-30%;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.3),transparent 65%)}
.sm-post .k{align-self:flex-start;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(0,0,0,.25);padding:3px 7px;border-radius:5px}
.sm-post strong{font-family:"Clash Display",sans-serif;font-size:19px;line-height:1.05;font-weight:700;max-width:90%}
.sm-post .ln{height:4px;border-radius:3px;background:rgba(255,255,255,.55);width:80%}
.sm-post .ln.s{width:55%}
.sm-post .sw-arrow{position:absolute;right:12px;bottom:12px;font-size:9.5px;font-weight:700;opacity:.9}
.sm-media .tagl{position:absolute;right:10px;top:10px;font-size:9.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.35);border-radius:6px;padding:3px 7px}
.sm-dots{display:flex;justify-content:center;gap:4px;padding:8px 0 0}
.sm-dots i{width:5px;height:5px;border-radius:50%;background:#3a3a44}
.sm-dots i.on{background:var(--sm-brand)}
.sm-dots.hide{visibility:hidden}
.sm-acts{display:flex;align-items:center;gap:12px;padding:6px 3px 4px}
.sm-like{font:inherit;display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;color:var(--text);font-size:11px;font-weight:700;cursor:pointer}
.sm-like svg{width:17px;height:17px;transition:transform .25s}
.sm-like.on svg{fill:#ff3b5c;stroke:#ff3b5c;transform:scale(1.15)}
.sm-acts span{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted)}
.sm-acts span em{font-style:normal}
.sm-acts svg{width:15px;height:15px}
.sm-cap{height:5px;border-radius:3px;background:#2e2e36;margin:6px 3px 0;width:88%}
.sm-cap.s{width:60%}
.sm-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.sm-plats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sm-plats button{font:inherit;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px 7px;border-radius:12px;background:var(--bg);border:1px solid var(--line-2);color:var(--muted);cursor:pointer;transition:.25s}
.sm-plats button svg{width:20px;height:20px}
.sm-plats button span{font-size:9.5px;font-weight:700}
.sm-plats button:hover{color:var(--text)}
.sm-plats button.on{color:#fff;border-color:transparent;background:var(--pc)}
.sm-plats [data-p=instagram]{--pc:linear-gradient(135deg,#f58529,#dd2a7b 55%,#8134af)}
.sm-plats [data-p=facebook]{--pc:#1877f2}
.sm-plats [data-p=tiktok]{--pc:linear-gradient(135deg,#25f4ee,#111 45%,#fe2c55)}
.sm-plats [data-p=linkedin]{--pc:#0a66c2}
.sm-kpis{display:flex;flex-direction:column;gap:8px}
.sm-kpi{background:var(--bg);border:1px solid var(--line-2);border-radius:12px;padding:10px 12px}
.sm-kpi .l{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.sm-kpi .v{display:flex;align-items:baseline;gap:8px;font-family:"Clash Display",sans-serif;font-weight:700;font-size:20px;color:var(--text);margin-top:2px}
.sm-kpi .v small{font-family:"General Sans",sans-serif;font-size:11px;font-weight:700;color:#28c840}

/* --- Paid ads: budget planner --- */
.pa-budget{background:var(--bg);border:1px solid var(--line-2);border-radius:14px;padding:14px 16px}
.pa-budget .sw-row .l{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.pa-budget .sw-row .v{font-family:"Clash Display",sans-serif;font-weight:700;font-size:22px;color:var(--orange)}
.pa-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;margin:12px 0 2px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,var(--orange) var(--p,40%),#2a2a32 var(--p,40%))}
.pa-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--orange);box-shadow:0 0 12px rgba(255,90,30,.7)}
.pa-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:4px solid var(--orange);box-shadow:0 0 12px rgba(255,90,30,.7)}
.pa-range:focus-visible{box-shadow:0 0 0 3px rgba(255,90,30,.35)}
.pa-ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--muted-2)}
.pa-ch{display:flex;flex-direction:column;gap:7px}
.pa-c{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(40px,90px) auto auto;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line-2);border-radius:11px;padding:8px 12px;font-size:12.5px;color:var(--text);transition:opacity .3s}
.pa-c.off{opacity:.45}
.pa-c .ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:#fff}
.pa-c .ic svg{width:14px;height:14px}
.pa-c .ic.fb{background:#1877f2}
.pa-c .ic.ig{background:linear-gradient(135deg,#f58529,#dd2a7b 55%,#8134af)}
.pa-c .ic.st{background:linear-gradient(135deg,#8134af,#1877f2)}
.pa-c .bar{height:6px;border-radius:6px;background:#2a2a32;overflow:hidden;min-width:40px}
.pa-c .bar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--orange),var(--orange-2,#ff8a3d));transition:width .5s var(--ease)}
.pa-c .amt{font-size:11.5px;color:var(--muted);min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
.pa-tg{position:relative;width:30px;height:17px;border-radius:17px;background:#3a3a44;border:0;cursor:pointer;transition:background .25s;padding:0}
.pa-tg::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:transform .25s}
.pa-tg[aria-pressed="true"]{background:var(--orange)}
.pa-tg[aria-pressed="true"]::after{transform:translateX(13px)}

/* --- Graphic & video: editor --- */
.gv-stage{height:200px;border-radius:14px;background:var(--bg);border:1px solid var(--line-2);display:grid;place-items:center;overflow:hidden;position:relative}
.gv-frame{position:relative;height:84%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;transition:aspect-ratio .5s var(--ease),height .5s var(--ease);
  background:linear-gradient(135deg,#ff8a3d 0%,#e24a12 45%,#6a1606 100%)}
.gv-frame.r916{aspect-ratio:9/16;height:92%}
.gv-frame.r11{aspect-ratio:1/1;height:88%}
.gv-frame::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;left:var(--gx,15%);top:-30%;background:radial-gradient(circle,rgba(255,220,180,.55),transparent 65%);transition:left .1s linear}
.gv-title{position:absolute;left:0;right:0;bottom:14%;text-align:center;font-family:"Clash Display",sans-serif;font-weight:700;font-size:clamp(13px,1.4vw,17px);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4);opacity:.25;transform:translateY(6px);transition:opacity .35s,transform .35s}
.gv-title.show{opacity:1;transform:none}
.gv-ratio{position:absolute;top:8px;right:8px;font-size:9.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.4);border-radius:5px;padding:2px 6px}
.gv-tl{position:relative;background:var(--bg);border:1px solid var(--line-2);border-radius:12px;padding:10px 12px 12px}
.gv-tl .sw-row{margin-bottom:8px}
.gv-tc{font-size:11px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.gv-play{font:inherit;width:28px;height:28px;border-radius:50%;border:0;background:linear-gradient(120deg,var(--orange),var(--red));display:grid;place-items:center;cursor:pointer}
.gv-play::after{content:"";margin-left:2px;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.gv-play.on::after{margin:0;width:8px;height:10px;border:0;border-left:3px solid #fff;border-right:3px solid #fff;box-sizing:border-box}
.gv-tracks{position:relative;display:flex;flex-direction:column;gap:5px}
.gv-track{display:flex;gap:3px;height:16px}
.gv-track i{border-radius:4px;height:100%}
.gv-track.v i{background:linear-gradient(90deg,#ff7a36,#e0461a)}
.gv-track.t i{background:#6b5cff}
.gv-track.a{align-items:center;gap:2px}
.gv-track.a i{flex:1;min-width:0;background:#28c840;border-radius:2px;opacity:.8}
.gv-head{position:absolute;top:-4px;bottom:-4px;left:0;width:2px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.7);pointer-events:none}
.gv-head::before{content:"";position:absolute;top:-4px;left:-4px;border:5px solid transparent;border-top-color:#fff}

@media(max-width:600px){
  .sm-wrap{grid-template-columns:1fr}
  .sm-phone{max-width:220px;margin:0 auto}
  .wp-gauges{grid-template-columns:repeat(2,1fr)}
  .wd-pbody{grid-template-columns:1fr}
  .wd-ctrl{flex-direction:column;align-items:flex-start;gap:6px}
  .wd-card{max-width:170px}
  .sm-plats button span{font-size:8.5px}
  .pa-c{grid-template-columns:auto minmax(0,1fr) auto auto}
  .pa-c .bar{display:none}
}
@media(prefers-reduced-motion:reduce){
  .wp-ring .fg,.gv-frame,.pa-c .bar i,.sm-media{transition:none}
}