/* Ratify Media: animated service visuals (shared by the home page and every service page) */
.vz{position:relative;width:100%;height:100%;display:grid;place-items:center;color:#fff}
.vz svg{overflow:visible}
.tile{border:1px solid rgba(255,255,255,.14);background:linear-gradient(#1a1a1a,#0b0b0b);border-radius:14px;box-shadow:0 10px 30px -12px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)}
.tile-ic{display:grid;place-items:center}
.tile-ic svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@keyframes vzFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes vzPulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes vzDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* 1. Clipping: long recording -> cuts -> platform formats */
.vz-clip{gap:22px;align-content:center;width:86%;margin:0 auto}
.vz-clip .tl{position:relative;height:58px;width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#0d0d0d;overflow:hidden}
.vz-clip .wave{position:absolute;inset:14px 12px;display:flex;align-items:center;gap:3px}
.vz-clip .wave i{flex:1;border-radius:2px;background:rgba(255,255,255,.22)}
.vz-clip .cut{position:absolute;top:6px;bottom:6px;border-radius:8px;border:1.5px solid #fff;background:rgba(255,255,255,.08);opacity:.25;animation:vzCut 4.5s ease-in-out infinite}
.vz-clip .cut.c2{animation-delay:1.5s}.vz-clip .cut.c3{animation-delay:3s}
@keyframes vzCut{0%,8%{opacity:.25}14%,30%{opacity:1;box-shadow:0 0 18px rgba(255,255,255,.35)}40%,100%{opacity:.25;box-shadow:none}}
.vz-clip .ph{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 10px #fff;animation:vzHead 4.5s linear infinite}
@keyframes vzHead{from{left:2%}to{left:98%}}
.vz-clip .outs{display:flex;justify-content:center;align-items:flex-end;gap:14px}
.vz-clip .o{border-radius:12px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg,#1c1c1c,#0b0b0b);position:relative;overflow:hidden;animation:vzOut 4.5s ease-in-out infinite}
.vz-clip .o::after{content:"";position:absolute;left:12%;right:30%;bottom:12%;height:4px;border-radius:9px;background:rgba(255,255,255,.4);box-shadow:0 -9px 0 rgba(255,255,255,.18)}
.vz-clip .o b{position:absolute;top:8px;left:8px;font:600 10px/1 Inter,system-ui,sans-serif;color:#cfcfcf;background:rgba(0,0,0,.5);padding:3px 6px;border-radius:6px}
.vz-clip .o1{width:64px;height:114px}.vz-clip .o2{width:90px;height:90px;animation-delay:1.5s}.vz-clip .o3{width:128px;height:72px;animation-delay:3s}
@keyframes vzOut{0%,12%{border-color:rgba(255,255,255,.14)}20%,38%{border-color:#fff;box-shadow:0 0 30px -6px rgba(255,255,255,.45)}48%,100%{border-color:rgba(255,255,255,.14);box-shadow:none}}

/* 2. Video production: player with progress */
.vz-video .player{width:82%;aspect-ratio:16/10;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:radial-gradient(120% 90% at 30% 10%,#262626,#080808 70%);position:relative;overflow:hidden;box-shadow:0 30px 60px -30px rgba(255,255,255,.18)}
.vz-video .rec{position:absolute;top:14px;left:16px;display:flex;align-items:center;gap:7px;font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;color:#ddd}
.vz-video .rec::before{content:"";width:8px;height:8px;border-radius:50%;background:#ff4d4d;animation:vzPulse 1.4s ease-in-out infinite}
.vz-video .tc{position:absolute;top:14px;right:16px;font:500 11px/1 Inter,system-ui,sans-serif;color:#aaa;font-variant-numeric:tabular-nums}
.vz-video .pl{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:16px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 10px rgba(255,255,255,.08),0 0 50px -4px rgba(255,255,255,.4);animation:vzBreathe 2.8s ease-in-out infinite}
.vz-video .pl svg{width:22px;height:22px;fill:#000;margin-left:3px}
@keyframes vzBreathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}
.vz-video .bar{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:10px}
.vz-video .bar .tr{flex:1;height:4px;border-radius:9px;background:rgba(255,255,255,.15);overflow:hidden}
.vz-video .bar .tr i{display:block;height:100%;width:100%;background:#fff;transform-origin:left;animation:vzProg 6s linear infinite}
@keyframes vzProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.vz-video .bar svg{width:14px;height:14px;fill:none;stroke:#ccc;stroke-width:2;stroke-linecap:round}
.vz-video .fmt{position:absolute;bottom:-1px;left:50%;transform:translate(-50%,0)}

/* 3. Social media: growth chart */
.vz-social .chart{width:86%}
.vz-social .head{display:flex;align-items:center;gap:12px;margin:0 0 6px 4px;font:500 17px/1 Inter,system-ui,sans-serif;color:#fff}
.vz-social .head .tile{width:42px;height:42px}
.vz-social .head em{font-style:normal;font-size:12px;color:#9a9a9a;margin-left:4px}
.vz-social .grid line{stroke:rgba(255,255,255,.12);stroke-dasharray:3 5}
.vz-social .area{fill:url(#vzArea);opacity:0;animation:vzFadeIn 1s ease .9s forwards}
@keyframes vzFadeIn{to{opacity:1}}
.vz-social .ln{fill:none;stroke:#fff;stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:vzDraw 1.6s cubic-bezier(.16,1,.3,1) .2s forwards}
.vz-social .pt{fill:#fff;stroke:#000;stroke-width:3;opacity:0;animation:vzFadeIn .3s ease forwards}
.vz-social .ax{font:500 11px Inter,system-ui,sans-serif;fill:#5f5f5f}

/* 4. Distribution: one message, many channels */
.vz-dist svg{width:88%;height:auto}
.vz-dist .ln{stroke:rgba(255,255,255,.16);stroke-width:1.5;fill:none}
.vz-dist .pulse{fill:#fff;filter:drop-shadow(0 0 6px #fff)}
.vz-dist .nd>rect{fill:url(#vzTile);stroke:rgba(255,255,255,.16)}
.vz-dist .nd svg rect{fill:none;stroke:#fff;stroke-width:1.7}
.vz-dist .nd path,.vz-dist .nd circle.s{fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vz-dist .nd text{font:500 11px Inter,system-ui,sans-serif;fill:#8f8f8f;text-anchor:middle}
.vz-dist .hub>rect{stroke:rgba(255,255,255,.4)}

/* 5. Owned audience: rings + list */
.vz-aud{width:86%;margin:0 auto}
.vz-aud .wrap{position:relative;width:300px;height:300px;margin:auto;transform:scale(.86)}
.vz-aud .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.vz-aud .ring.r2{inset:45px}.vz-aud .ring.r3{inset:90px;border-color:rgba(255,255,255,.2)}
.vz-aud .wave{position:absolute;inset:90px;border-radius:50%;border:1px solid rgba(255,255,255,.5);animation:vzWave 3.2s ease-out infinite}
.vz-aud .wave.w2{animation-delay:1.6s}
@keyframes vzWave{from{transform:scale(1);opacity:.7}to{transform:scale(2.6);opacity:0}}
.vz-aud .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:24px;display:grid;place-items:center;text-align:center;font:600 12px/1.25 Inter,system-ui,sans-serif;color:#fff}
.vz-aud .core svg{width:24px;height:24px;margin:0 auto 6px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vz-aud .dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;opacity:0;animation:vzDot 6s ease-in-out infinite}
@keyframes vzDot{0%{opacity:0;transform:scale(.4)}10%,85%{opacity:.9;transform:scale(1)}100%{opacity:0}}
.vz-aud .chip{position:absolute;display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:10px;font:500 12px/1 Inter,system-ui,sans-serif;color:#ddd}
.vz-aud .chip svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vz-aud .chip.a{left:-6px;top:34px;animation:vzFloat 5s ease-in-out infinite}
.vz-aud .chip.b{right:-6px;bottom:44px;animation:vzFloat 5s ease-in-out 2.5s infinite}
@keyframes vzFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* 6. Creators / UGC: many voices around one campaign */
.vz-ugc svg{width:86%;height:auto}
.vz-ugc .ln{stroke:rgba(255,255,255,.16);stroke-width:1.5;stroke-dasharray:4 6;animation:vzDash 2s linear infinite}
@keyframes vzDash{to{stroke-dashoffset:-20}}
.vz-ugc .av{fill:url(#vzAv);stroke:rgba(255,255,255,.25);stroke-width:1.5}
.vz-ugc .av.hi{stroke:#fff}
.vz-ugc .face path,.vz-ugc .face circle{fill:none;stroke:#e6e6e6;stroke-width:1.6;stroke-linecap:round}
.vz-ugc .bub rect{fill:#fff}
.vz-ugc .bub text{font:600 10px Inter,system-ui,sans-serif;fill:#000}
.vz-ugc .bub{opacity:0;animation:vzBub 6s ease-in-out infinite}
@keyframes vzBub{0%,4%{opacity:0;transform:translateY(6px)}10%,28%{opacity:1;transform:none}34%,100%{opacity:0}}
.vz-ugc .hubt{font:600 12px Inter,system-ui,sans-serif;fill:#fff;text-anchor:middle}

/* 7. Experiential: stage, lights, crowd */
.vz-exp svg{width:90%;height:auto}
.vz-exp .beam{fill:url(#vzBeam);transform-box:fill-box;transform-origin:50% 0;animation:vzSweep 5s ease-in-out infinite}
.vz-exp .beam.b2{animation-delay:-2.5s}
@keyframes vzSweep{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
.vz-exp .stage{fill:url(#vzTile);stroke:rgba(255,255,255,.18)}
.vz-exp .banner{fill:#0f0f0f;stroke:rgba(255,255,255,.3)}
.vz-exp .bt{font:600 13px Inter,system-ui,sans-serif;letter-spacing:.18em;fill:#fff;text-anchor:middle}
.vz-exp .pod{fill:#1d1d1d;stroke:rgba(255,255,255,.3)}
.vz-exp .crowd circle{fill:rgba(255,255,255,.55);animation:vzBob 1.8s ease-in-out infinite}
@keyframes vzBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.vz-exp .flash{fill:#fff;opacity:0;animation:vzFlash 3.4s ease-in-out infinite}
@keyframes vzFlash{0%,90%,100%{opacity:0}93%{opacity:.9}}

/* 8. Websites / web apps: donation flow */
.vz-web .win{width:84%;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:#0c0c0c;overflow:hidden;box-shadow:0 30px 60px -30px rgba(255,255,255,.16)}
.vz-web .top{height:32px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.vz-web .top i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}
.vz-web .top span{margin-left:10px;flex:1;height:16px;border-radius:6px;background:rgba(255,255,255,.06);font:500 10px/16px Inter,system-ui,sans-serif;color:#8a8a8a;padding-left:8px}
.vz-web .pg{padding:18px;display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
.vz-web .sk{height:9px;border-radius:5px;background:rgba(255,255,255,.1);margin-bottom:8px}
.vz-web .sk.h{height:15px;width:80%;background:rgba(255,255,255,.22)}
.vz-web .form{border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px;position:relative}
.vz-web .amts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.vz-web .amts b{height:26px;border-radius:7px;border:1px solid rgba(255,255,255,.12);font:600 11px/26px Inter,system-ui,sans-serif;text-align:center;color:#cfcfcf}
.vz-web .amts b.on{animation:vzPick 4s ease-in-out infinite}
@keyframes vzPick{0%,25%{background:transparent;color:#cfcfcf;border-color:rgba(255,255,255,.12)}32%,100%{background:#fff;color:#000;border-color:#fff}}
.vz-web .fld{height:24px;border-radius:7px;border:1px solid rgba(255,255,255,.1);margin-bottom:8px;position:relative;overflow:hidden}
.vz-web .fld i{position:absolute;left:8px;top:8px;height:7px;border-radius:4px;background:rgba(255,255,255,.4);width:0;animation:vzType 4s ease-in-out infinite}
.vz-web .fld.f2 i{animation-delay:.4s}
@keyframes vzType{0%,35%{width:0}60%,100%{width:58%}}
.vz-web .go{height:30px;border-radius:8px;background:#fff;color:#000;font:600 12px/30px Inter,system-ui,sans-serif;text-align:center;position:relative;overflow:hidden}
.vz-web .go::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:rgba(0,0,0,.25);opacity:0;animation:vzClick 4s ease-out infinite}
@keyframes vzClick{0%,74%{opacity:0;transform:scale(1)}76%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(14)}}
.vz-web .cur{position:absolute;width:16px;height:16px;animation:vzCur 4s ease-in-out infinite}
.vz-web .cur svg{width:16px;height:16px;fill:#fff;stroke:#000;stroke-width:1}
@keyframes vzCur{0%,20%{right:70%;bottom:78%}30%,55%{right:72%;bottom:74%}75%,100%{right:38%;bottom:6px}}
.vz-web .ok{position:absolute;inset:0;border-radius:12px;background:rgba(10,10,10,.92);display:grid;place-items:center;font:600 12px Inter,system-ui,sans-serif;color:#fff;opacity:0;animation:vzOk 4s ease-in-out infinite}
@keyframes vzOk{0%,80%{opacity:0}86%,96%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){.vz *,.vz *::before,.vz *::after{animation-duration:.001s!important;animation-iteration-count:1!important}}