/* ADroom — 3D hero visuals for service pages */
.bn-im{perspective:1400px}
.s3d{position:relative;width:min(78%,460px);aspect-ratio:1/1;transform-style:preserve-3d;transform:rotateX(18deg) rotateY(-24deg);transition:transform .3s ease-out;font-family:Montserrat,sans-serif}
.s3d *{box-sizing:border-box}
.s3d .chip{position:absolute;background:#111;color:#fff;font:700 13px/1 Montserrat,sans-serif;padding:10px 14px;border-radius:8px;box-shadow:0 16px 30px rgba(0,0,0,.25);white-space:nowrap;animation:s3dFloat 5s ease-in-out infinite;z-index:3}
.s3d .chip em{font-style:normal;color:#ff5a5a;margin-left:6px}
.s3d .chip.red{background:#b00000}.s3d .chip.red em{color:#fff}
.s3d .chip.wh{background:#fff;color:#111}.s3d .chip.wh em{color:#b00000}
.s3d .z1{transform:translateZ(80px)}.s3d .z2{transform:translateZ(110px);animation-delay:-2.5s}.s3d .z3{transform:translateZ(100px);animation-delay:-1.2s}
/* SMM */
.s3d .phone{position:absolute;left:22%;top:0;width:56%;height:100%;background:#111;border-radius:30px;padding:10px;box-shadow:0 40px 70px rgba(0,0,0,.28),8px 0 0 #2a2a2a;transform:translateZ(30px)}
.s3d .scr{background:#fff;border-radius:22px;height:100%;overflow:hidden;display:flex;flex-direction:column}
.s3d .ph-top{display:flex;align-items:center;gap:8px;padding:12px 12px 8px;font-size:11px;font-weight:700;color:#111}
.s3d .ph-top i{width:24px;height:24px;border-radius:50%;background:conic-gradient(#b00000,#ff7a59,#b00000);border:2px solid #fff;outline:2px solid #b00000;display:block}
.s3d .post{flex:1;background:linear-gradient(150deg,#b00000,#ff6b4a 60%,#ffc2a8);position:relative}
.s3d .post:after{content:'';position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;translate:-50% -50%;border:6px solid rgba(255,255,255,.85);border-radius:16px}
.s3d .ph-act{display:flex;gap:12px;padding:10px 12px;font-size:11px;font-weight:700;color:#111;align-items:center}
.s3d .ph-act svg{width:18px}
.s3d .heart{position:absolute;width:30px;transform:translateZ(120px);animation:s3dRise 3.2s ease-in infinite;opacity:0;z-index:4}
.s3d .bubble{position:absolute;left:-6%;bottom:16%;background:#fff;border-radius:14px 14px 14px 2px;padding:10px 14px;font-size:12px;color:#111;box-shadow:0 16px 30px rgba(0,0,0,.2);transform:translateZ(90px);animation:s3dFloat 5s ease-in-out infinite -1.8s;z-index:3}
.s3d .bubble b{display:block;font-size:10px;color:#b00000;margin-bottom:3px}
/* SEO */
.s3d .serp{position:absolute;left:0;top:8%;width:100%;background:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 30px 60px rgba(0,0,0,.18);transform:translateZ(20px)}
.s3d .bar{height:32px;border:1px solid #e4e4e8;border-radius:20px;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:12px;color:#555;margin-bottom:12px}
.s3d .bar i{width:12px;height:12px;border:2px solid #999;border-radius:50%;display:block}
.s3d .res{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:10px;margin-bottom:6px}
.s3d .res .t{flex:1}.s3d .res .t div{height:8px;border-radius:4px;background:#ececf0;margin:4px 0}.s3d .res .t div+div{width:70%}
.s3d .res.top{background:#fff6f6;border:2px solid #b00000;transform:translateZ(40px);box-shadow:0 14px 28px rgba(176,0,0,.18)}
.s3d .res.top h4{margin:0 0 2px;font-size:14px;color:#1a0dab;font-weight:600}.s3d .res.top p{margin:0;font-size:11px;color:#555}
.s3d .line{position:absolute;left:2%;bottom:-2%;width:62%;height:36%;transform:translateZ(70px);filter:drop-shadow(0 14px 18px rgba(0,0,0,.2))}
.s3d .line path.l{stroke-dasharray:400;stroke-dashoffset:400;animation:s3dDraw 4s ease-in-out infinite}
.s3d .mag{position:absolute;right:-4%;top:-6%;width:84px;transform:translateZ(130px);filter:drop-shadow(6px 14px 12px rgba(0,0,0,.3));animation:s3dFloat 5s ease-in-out infinite -3s;z-index:4}
/* TARGETING */
.s3d .tgt{position:absolute;left:10%;top:6%;width:80%;aspect-ratio:1;transform-style:preserve-3d}
.s3d .tgt b{position:absolute;inset:var(--i);border-radius:50%;background:var(--c);transform:translateZ(var(--z));box-shadow:0 18px 30px rgba(0,0,0,.18)}
.s3d .arrow{position:absolute;left:50%;top:50%;width:46%;height:8px;transform-origin:0 50%;transform:translateZ(150px) rotate(-38deg);animation:s3dHit 3s ease-in-out infinite;z-index:4}
.s3d .arrow:before{content:'';position:absolute;inset:0;background:#111;border-radius:4px}
.s3d .arrow:after{content:'';position:absolute;left:-6px;top:-10px;width:28px;height:28px;background:linear-gradient(135deg,#b00000 50%,#7a0000 50%);clip-path:polygon(0 50%,100% 0,70% 50%,100% 100%)}
.s3d .arrow i{position:absolute;right:-4px;top:-9px;width:26px;height:26px;background:#b00000;clip-path:polygon(0 50%,40% 0,100% 0,60% 50%,100% 100%,40% 100%)}
.s3d .who{position:absolute;width:44px;height:44px;border-radius:50%;background:#fff;border:3px solid #b00000;box-shadow:0 12px 22px rgba(0,0,0,.22);display:grid;place-items:center;animation:s3dFloat 5s ease-in-out infinite;z-index:3}
.s3d .who svg{width:24px}
.s3d .who.g{border-color:#bbb;opacity:.7}
/* overrides for the old number/photo label styles */
.bn-im .s3d span,.bn-im .s3d em{position:static;display:inline;font-size:inherit;line-height:inherit;letter-spacing:normal;text-transform:none;background:none;border:0;padding:0;opacity:1;background-clip:border-box;font-family:inherit!important;color:inherit!important;font-weight:inherit;font-style:normal!important}
.bn-im .s3d .chip em{color:#ff5a5a!important;margin-left:6px}
.bn-im .s3d .chip.red em{color:#fff!important}.bn-im .s3d .chip.wh em{color:#b00000!important}
.bn-im .s3d .res .n{display:block;flex:none;width:26px;height:26px;border-radius:6px;text-align:center;background:#ececf0;color:#999!important;font:800 12px/26px Montserrat,sans-serif!important}
.bn-im .s3d .res.top .n{background:#b00000;color:#fff!important}
/* PPC */
.ppc3d{position:relative;width:min(78%,460px);aspect-ratio:1/1;transform-style:preserve-3d;transform:rotateX(18deg) rotateY(-24deg);transition:transform .3s ease-out}
.ppc3d *{box-sizing:border-box}
.ppc3d .card{position:absolute;left:0;top:6%;width:100%;background:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 30px 60px rgba(0,0,0,.18),0 2px 0 #e3e3e8;transform:translateZ(20px);font-family:Montserrat,sans-serif}
.ppc3d .bar{height:34px;border:1px solid #e4e4e8;border-radius:20px;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:13px;color:#555;margin-bottom:14px}
.ppc3d .bar i{width:12px;height:12px;border:2px solid #999;border-radius:50%;display:block}
.ppc3d .ad{border:2px solid #b00000;border-radius:10px;padding:10px 12px;position:relative;background:#fff6f6}
.ppc3d .ad small{font-size:11px;font-weight:700;color:#111}
.ppc3d .ad small b{background:#b00000;color:#fff;padding:1px 6px;border-radius:3px;margin-right:6px;font-size:10px}
.ppc3d .ad h4{margin:6px 0 2px;font-size:16px;color:#1a0dab;font-weight:600}
.ppc3d .ad p{margin:0;font-size:12px;color:#555}
.ppc3d .ln{height:9px;border-radius:5px;background:#ececf0;margin-top:12px}.ppc3d .ln.s{width:60%}
.ppc3d .cur{position:absolute;right:16%;top:44%;width:34px;transform:translateZ(90px);filter:drop-shadow(4px 8px 6px rgba(0,0,0,.3));animation:ppcClick 2.4s ease-in-out infinite}
.ppc3d .chart{position:absolute;left:4%;bottom:0;width:58%;height:34%;display:flex;align-items:flex-end;gap:8%;transform:translateZ(60px)}
.bn-im .ppc3d .chart span{all:unset;flex:1;background:linear-gradient(#d40000,#8a0000);border-radius:4px 4px 0 0;box-shadow:6px 0 0 #6e0000,0 18px 30px rgba(0,0,0,.2);animation:ppcGrow 3s ease-in-out infinite;transform-origin:bottom}
.ppc3d .chip{position:absolute;background:#111;color:#fff;font:700 13px/1 Montserrat,sans-serif;padding:10px 14px;border-radius:8px;box-shadow:0 16px 30px rgba(0,0,0,.25);white-space:nowrap;animation:ppcFloat 5s ease-in-out infinite}
.bn-im .ppc3d .chip em{all:unset;color:#ff5a5a!important;margin-left:6px}
.ppc3d .c1{right:-6%;bottom:22%;transform:translateZ(110px)}
.ppc3d .c2{right:4%;bottom:2%;transform:translateZ(80px);background:#b00000;animation-delay:-2.5s}
.bn-im .ppc3d .c2 em{color:#fff!important}
.ppc3d .c3{left:-8%;top:0;transform:translateZ(100px);background:#fff;color:#111;animation-delay:-1.2s}
.bn-im .ppc3d .c3 em{color:#b00000!important}
/* Web design */
.bn-im .wd-shot{position:relative;width:88%;height:auto;border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
@keyframes s3dFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes s3dRise{0%{opacity:0;translate:0 20px;scale:.6}20%{opacity:1}100%{opacity:0;translate:0 -120px;scale:1.1}}
@keyframes s3dDraw{0%{stroke-dashoffset:400}60%,100%{stroke-dashoffset:0}}
@keyframes s3dHit{0%,15%{translate:60px -50px;opacity:0}40%{translate:0 0;opacity:1}46%{translate:-4px 3px}52%,85%{translate:0 0;opacity:1}100%{opacity:0}}
@keyframes ppcClick{0%,100%{translate:0 0}45%{translate:-6px -4px}50%{translate:-6px -4px;scale:.85}55%{scale:1}}
@keyframes ppcGrow{0%,100%{scale:1 .85}50%{scale:1 1}}
@keyframes ppcFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (prefers-reduced-motion:reduce){.s3d *,.ppc3d *{animation:none!important;opacity:1!important}}
@media (max-width:980px){.s3d,.ppc3d{width:min(80%,360px);margin:40px 0}}