/* Page styles for /voip/, extracted from voip.html (all selectors start with .pg-voip) */
.pg-voip .phero{padding:56px 0 64px}
.pg-voip .phero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.pg-voip .phero .pw{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px;align-items:center}
.pg-voip .phero p.lead{max-width:34em}
.pg-voip .hacts{display:flex;flex-wrap:wrap;gap:12px}
.pg-voip .pbtn{max-width:100%;text-align:center;line-height:1.25}
.pg-voip .jump{display:inline-flex;align-items:center;gap:8px;margin-top:20px;color:#cfe2f4;font:600 14.5px var(--body);text-decoration:none;border-radius:8px;padding:4px 2px}
.pg-voip .jump svg{width:16px;height:16px;animation:vo_bob 1.6s ease-in-out infinite}
.pg-voip .live{display:flex;align-items:center;gap:8px;margin-top:12px;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#9fb0c4}
.pg-voip .ldot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2fd08f;animation:vo_blink 1.6s ease-in-out infinite;flex:none}
.pg-voip .ldot.red{background:#ff6b4a;animation-name:vo_blinkr}
.pg-voip .ldot.blue{background:#3fa9f5;animation-name:vo_blinkb}
@keyframes vo_blink{0%,100%{box-shadow:0 0 0 0 rgba(47,208,143,.6);opacity:1}50%{box-shadow:0 0 0 7px rgba(47,208,143,0);opacity:.55}}
@keyframes vo_blinkr{0%,100%{box-shadow:0 0 0 0 rgba(255,107,74,.6);opacity:1}50%{box-shadow:0 0 0 7px rgba(255,107,74,0);opacity:.55}}
@keyframes vo_blinkb{0%,100%{box-shadow:0 0 0 0 rgba(63,169,245,.6);opacity:1}50%{box-shadow:0 0 0 7px rgba(63,169,245,0);opacity:.55}}
@keyframes vo_bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.pg-voip .hart{position:relative;min-width:0}
.pg-voip .hart svg{display:block;width:100%;height:auto;max-width:520px;margin-inline:auto}
.pg-voip .hchip{position:absolute;display:flex;align-items:center;gap:8px;background:rgba(20,23,27,.85);border:1px solid #3a4654;color:#e9eef3;font:600 13px var(--body);padding:7px 12px;border-radius:999px;white-space:nowrap}
.pg-voip .hchip.c1{left:2%;top:6%}.pg-voip .hchip.c2{right:2%;bottom:6%}
.pg-voip svg .flow{fill:none;stroke-dasharray:6 8;animation:vo_dash 1.2s linear infinite}
@keyframes vo_dash{to{stroke-dashoffset:-28}}
.pg-voip svg .mv{fill:none;stroke-linecap:round;stroke-dasharray:0 200;animation:vo_mv 2.8s linear infinite}
@keyframes vo_mv{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
.pg-voip svg .spin{transform-box:fill-box;transform-origin:center;animation:vo_spin 24s linear infinite}
@keyframes vo_spin{to{transform:rotate(360deg)}}
.pg-voip svg .tw{transform-box:fill-box;transform-origin:center;animation:vo_tw 2.4s ease-in-out infinite}
@keyframes vo_tw{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.45}}
/* stats */
.pg-voip .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pg-voip .stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;transition:transform .25s,box-shadow .25s}
.pg-voip .stat:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,23,27,.08)}
.pg-voip .stat b{display:block;font:800 34px var(--display);color:var(--alert);letter-spacing:-.02em;line-height:1.1}
.pg-voip .stat p{margin:6px 0 8px;font-size:15px}
.pg-voip .stat small{display:block;font-size:12.5px;color:var(--sub)}
/* tool shell */
.pg-voip .tool{position:relative;background:radial-gradient(120% 90% at 100% 0%,#26303b 0%,#22272e 45%,#14171b 100%);color:#e9eef3;border-radius:22px;padding:30px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:30px;row-gap:14px;overflow:hidden;box-shadow:0 30px 60px rgba(20,23,27,.18)}
.pg-voip .tool::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.pg-voip .tool>*{position:relative;min-width:0}
.pg-voip .tool .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--blue-hi)}
.pg-voip .tool h2{color:#fff;font-size:clamp(24px,2.6vw,30px);margin:10px 0 6px}
.pg-voip .tool p.tsub{color:#aeb8c4;margin:0;font-size:15.5px}
.pg-voip .tpanel{background:#161a20;border:1px solid #333d49;border-radius:18px;padding:16px}
.pg-voip .tbtn{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1.5px solid #4a5a6c;color:#e9eef3;border-radius:12px;padding:10px 16px;font:700 14px var(--display);cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.pg-voip .tbtn:hover{border-color:var(--blue-hi)}
.pg-voip .tbtn.go{background:var(--blue-hi);color:var(--blue-ink);border-color:var(--blue-hi)}
.pg-voip .tbtn.sm{padding:7px 12px;font-size:13px}
.pg-voip .tbtn[aria-pressed=true]{background:#2f3b48;border-color:var(--amber);color:#ffd48a}
.pg-voip .demo{font-size:12.5px;color:#9aa6b3;margin:0 0 12px}
.pg-voip .tfoot{align-self:end;padding-top:6px}
.pg-voip .bar8{height:8px;border-radius:8px;background:#2f3b48;overflow:hidden}
.pg-voip .bar8 i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--blue-hi));border-radius:8px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.pg-voip .tool .pbtn.hi{box-shadow:0 10px 24px rgba(63,169,245,.25)}
/* what you get */
.pg-voip .wyg{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.pg-voip .wy{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;transition:transform .25s,box-shadow .25s,border-color .25s}
.pg-voip .wy:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(20,23,27,.1);border-color:#b9d6ea}
.pg-voip .wy svg{width:56px;height:56px;display:block;margin-bottom:14px;overflow:visible}
.pg-voip .wy h3{font-size:18px;margin-bottom:6px}
.pg-voip .wy p{margin:0;color:var(--sub);font-size:15px}
.pg-voip .wy .ibg{fill:#e6f1f8}
.pg-voip .wy .is{fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pg-voip .wy .if{fill:var(--blue)}
.pg-voip .wy .ia{transform-box:fill-box;transform-origin:center}
.pg-voip .wy a{color:var(--blue);font-weight:600}
.pg-voip .wy.feat{background:linear-gradient(135deg,#04243a,#026399);border-color:#026399;color:#fff}.pg-voip .wy.feat p{color:#d7e8f5}.pg-voip .wy.feat a{color:#9fd4fb}.pg-voip .wy.feat .ibg{fill:rgba(255,255,255,.12)}.pg-voip .wy.feat .is{stroke:#9fd4fb}.pg-voip .wy.feat .if{fill:#9fd4fb}
/* how we work strip */
.pg-voip .steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pg-voip .steps::before{content:"";position:absolute;left:22px;right:22px;top:21px;height:2px;background:repeating-linear-gradient(90deg,#9cc8e6 0 6px,transparent 6px 12px)}
.pg-voip .runner{position:absolute;top:16px;left:22px;width:12px;height:12px;border-radius:50%;background:var(--blue-hi);box-shadow:0 0 0 5px rgba(63,169,245,.22);animation:vo_run 7s ease-in-out infinite}
@keyframes vo_run{0%{left:22px}100%{left:calc(100% - 34px)}}
.pg-voip .st{position:relative;z-index:1}
.pg-voip .st .n{width:44px;height:44px;border-radius:13px;background:var(--blue);color:#fff;font:700 14px var(--mono);display:grid;place-items:center;margin-bottom:12px;box-shadow:0 0 0 6px var(--bg)}
.pg-voip .st .c{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;height:calc(100% - 56px);transition:transform .25s,border-color .25s}
.pg-voip .st:hover .c{transform:translateY(-3px);border-color:#9cc8e6}
.pg-voip .st h3{font-size:17px;margin-bottom:4px}
.pg-voip .st p{margin:0;color:var(--sub);font-size:14.5px}
/* faq */
.pg-voip .faq{display:grid;gap:10px;max-width:860px}
.pg-voip .faq details{background:#fff;border:1px solid var(--line);border-radius:14px;transition:border-color .25s,box-shadow .25s}
.pg-voip .faq details[open]{border-color:#9cc8e6;box-shadow:0 10px 26px rgba(2,99,153,.08)}
.pg-voip .faq summary{list-style:none;cursor:pointer;padding:16px 18px;font:700 16.5px var(--display);display:flex;justify-content:space-between;gap:14px;align-items:center;border-radius:14px}
.pg-voip .faq summary::-webkit-details-marker{display:none}
.pg-voip .faq .pm{flex:none;width:28px;height:28px;border-radius:50%;background:#e6f1f8;position:relative;transition:transform .3s,background .3s}
.pg-voip .faq .pm::before,.pg-voip .faq .pm::after{content:"";position:absolute;left:8px;right:8px;top:13px;height:2px;background:var(--blue);border-radius:2px;transition:transform .3s,background .3s}
.pg-voip .faq .pm::after{transform:rotate(90deg)}
.pg-voip .faq details[open] .pm{transform:rotate(180deg);background:var(--blue)}
.pg-voip .faq details[open] .pm::before,.pg-voip .faq details[open] .pm::after{background:#fff}
.pg-voip .faq details[open] .pm::after{transform:rotate(0)}
.pg-voip .faq .a{padding:0 18px 16px;color:var(--sub);animation:vo_fin .35s ease-out}
.pg-voip .faq .a p{margin:0}
@keyframes vo_fin{from{transform:translateY(-6px)}to{transform:none}}
/* plan chip */
.pg-voip .plan{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin-bottom:22px}
.pg-voip .plan .pl{font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sub)}
.pg-voip .pchip{display:inline-flex;align-items:center;gap:8px;background:#e6f1f8;color:var(--blue);font:800 15px var(--display);padding:9px 16px;border-radius:999px;text-decoration:none;border:1.5px solid #b9d6ea}
.pg-voip .plan p{margin:0;flex:1 1 320px;color:var(--sub);font-size:15px}
.pg-voip .plan a.more{font:700 14.5px var(--display);color:var(--blue);text-decoration:none;border-radius:8px;padding:4px}
@media (max-width:980px){
 .pg-voip .phero .pw{grid-template-columns:minmax(0,1fr)}
 .pg-voip .hart{max-width:520px;width:100%;margin-inline:auto}
 .pg-voip .tool{grid-template-columns:minmax(0,1fr);padding:22px}
 .pg-voip .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
 .pg-voip .steps{grid-template-columns:minmax(0,1fr);gap:12px}
 .pg-voip .steps::before{left:21px;right:auto;top:10px;bottom:10px;width:2px;height:auto;background:repeating-linear-gradient(180deg,#9cc8e6 0 6px,transparent 6px 12px)}
 .pg-voip .runner{left:16px;top:10px;animation-name:vo_runv}
 @keyframes vo_runv{0%{top:10px}100%{top:calc(100% - 22px)}}
 .pg-voip .st{display:flex;gap:14px;align-items:flex-start}
 .pg-voip .st .n{flex:none;margin:0}
 .pg-voip .st .c{height:auto;flex:1}
}
@media (max-width:520px){
 .pg-voip .psec{padding:52px 0}
 .pg-voip .phero{padding:40px 0 48px}
 .pg-voip .stat{padding:14px}.pg-voip .stat b{font-size:27px}.pg-voip .stat p{font-size:14px}
 .pg-voip .tool{padding:18px;border-radius:18px}
 .pg-voip .tpanel{padding:12px}
 .pg-voip .hchip{font-size:12px;padding:6px 10px}
 .pg-voip .plan{padding:18px}
}

/* hero */
.pg-voip .wave{transform-box:fill-box;transform-origin:center;animation:vo_wave 3s ease-out infinite}
.pg-voip .w2{animation-delay:1s}.pg-voip .w3{animation-delay:2s}
@keyframes vo_wave{from{transform:scale(1);opacity:.7}to{transform:scale(1.8);opacity:0}}
.pg-voip .hset{transform-box:fill-box;transform-origin:center;animation:vo_ring 3s ease-in-out infinite}
@keyframes vo_ring{0%,55%,100%{transform:rotate(0)}60%{transform:rotate(-12deg)}65%{transform:rotate(12deg)}70%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}80%{transform:rotate(0)}}
.pg-voip .hart .ht{font:700 17px var(--body);fill:#fff}
.pg-voip .hart .kn{font:800 17px var(--mono);fill:#04243a}
.pg-voip .dbox rect{fill:#1b2027;stroke:#3a4654;stroke-width:2;animation:vo_lit 2.8s linear infinite}
.pg-voip .dbox circle{fill:#3fa9f5}
.pg-voip .m2,.pg-voip .b2 rect{animation-delay:.93s}.pg-voip .m3,.pg-voip .b3 rect{animation-delay:1.86s}
.pg-voip .hart .mv{animation-duration:2.8s}
@keyframes vo_lit{0%,30%{stroke:#3a4654}36%{stroke:#2fd08f}60%{stroke:#2fd08f}70%,100%{stroke:#3a4654}}
.pg-voip .bars rect{fill:#9fd4fb;transform-box:fill-box;transform-origin:bottom;animation:vo_bar 1.4s ease-in-out infinite}
.pg-voip .bars rect:nth-child(2){animation-delay:.2s}.pg-voip .bars rect:nth-child(3){animation-delay:.4s}
@keyframes vo_bar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}
/* icons */
.pg-voip .i-ring{animation:vo_ring 2.6s ease-in-out infinite}
.pg-voip .i-b1{animation:vo_tw 1.2s ease-in-out infinite}.pg-voip .i-b2{animation:vo_tw 1.2s ease-in-out .2s infinite}.pg-voip .i-b3{animation:vo_tw 1.2s ease-in-out .4s infinite}
.pg-voip .i-w1{animation:vo_tw 1.6s ease-in-out infinite}.pg-voip .i-w2{animation:vo_tw 1.6s ease-in-out .4s infinite}
.pg-voip .i-rt{animation:vo_rt 2.4s ease-in-out infinite}
@keyframes vo_rt{0%{transform:translate(0,0)}40%{transform:translate(20px,-10px)}60%{transform:translate(20px,-10px);opacity:0}61%{transform:translate(0,0);opacity:0}100%{opacity:1}}
.pg-voip .i-rot{animation:vo_spin 6s linear infinite}
/* builder layout */
.pg-voip .tool{grid-template-areas:"head flow" "ctl flow" "sum flow" "foot flow";grid-template-rows:auto auto auto 1fr}
.pg-voip .t-head{grid-area:head}.pg-voip .t-ctl{grid-area:ctl}.pg-voip .t-flow{grid-area:flow}.pg-voip .t-sum{grid-area:sum}.pg-voip .t-foot{grid-area:foot}
.pg-voip .t-flow>.tpanel{position:sticky;top:96px}
.pg-voip .ctl{background:rgba(255,255,255,.04);border:1px solid #333d49;border-radius:14px;padding:14px 16px;margin-bottom:10px;transition:border-color .3s}
.pg-voip .ctl:focus-within{border-color:#4f8fc0}
.pg-voip .lab{display:flex;justify-content:space-between;align-items:center;gap:10px;font:700 14.5px var(--display);color:#fff;margin-bottom:10px}
.pg-voip .lab label{cursor:pointer}
.pg-voip .lab output{font:800 22px var(--display);color:var(--blue-hi);min-width:3ch;text-align:right}
.pg-voip .lab output.bump{animation:vo_bump .3s ease-out}
@keyframes vo_bump{50%{transform:scale(1.25)}}
.pg-voip input[type=range]{width:100%;accent-color:#3fa9f5;height:28px;cursor:pointer;border-radius:10px;margin:0}
.pg-voip .rngl{display:flex;justify-content:space-between;font:500 12px var(--mono);color:#8a96a3}
.pg-voip .tg{display:flex;flex-wrap:wrap;gap:8px}
.pg-voip .tgb{display:inline-flex;align-items:center;gap:8px;background:#1b2027;color:#aeb8c4;border:1.5px solid #3a4654;border-radius:12px;padding:9px 13px;font:700 14px var(--display);cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .2s}
.pg-voip .tgb:hover{transform:translateY(-2px);border-color:var(--blue-hi)}
.pg-voip .tgb[aria-pressed=true]{background:rgba(63,169,245,.16);border-color:#3fa9f5;color:#fff}
.pg-voip .tgb .n{width:22px;height:22px;border-radius:7px;background:#2f3b48;color:#aeb8c4;font:700 12px var(--mono);display:grid;place-items:center;transition:background .25s,color .25s}
.pg-voip .tgb[aria-pressed=true] .n{background:#3fa9f5;color:#04243a}
.pg-voip .tgb .ck{width:14px;height:14px;border-radius:4px;border:1.5px solid #4a5a6c;position:relative;transition:background .25s,border-color .25s}
.pg-voip .tgb[aria-pressed=true] .ck{background:#3fa9f5;border-color:#3fa9f5}
.pg-voip .tgb[aria-pressed=true] .ck::after{content:"";position:absolute;left:3px;top:0;width:4px;height:8px;border:solid #04243a;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pg-voip .hint{margin:8px 0 0;font-size:13px;color:#9aa6b3}
.pg-voip .hrs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pg-voip .hrs label{display:flex;align-items:center;gap:8px;font:600 14px var(--body);color:#cfd8e3}
.pg-voip .hrs select{font:700 14px var(--body);color:#fff;background:#1b2027;border:1.5px solid #3a4654;border-radius:10px;padding:8px 10px;cursor:pointer;transition:border-color .25s}
.pg-voip .hrs select:hover{border-color:var(--blue-hi)}
.pg-voip #vBuild{width:100%;margin-top:4px}
.pg-voip .vsum{background:rgba(255,255,255,.04);border:1px dashed #3a4654;border-radius:16px;padding:16px;transition:border-color .4s,background .4s}
.pg-voip .vsum.done{border:1px solid #2fd08f;background:rgba(18,145,107,.08)}
.pg-voip .vsum.flash{animation:vo_qin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes vo_qin{from{transform:translateY(12px)}to{transform:none}}
.pg-voip .sumh{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.pg-voip .sumh b{font:800 17px var(--display);color:#fff}
.pg-voip .vsum .pchip{font-size:13px;padding:6px 12px;background:rgba(63,169,245,.14);color:#cfe8fb;border-color:#3fa9f5}
.pg-voip .sl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pg-voip .sl li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:14.5px;color:#e9eef3}
.pg-voip .sl svg{width:22px;height:22px}
.pg-voip .sl .dim{color:#aeb8c4}
/* flow diagram */
.pg-voip .flowhead{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-bottom:6px}
.pg-voip .flowhead .nt{display:flex;align-items:center;gap:8px;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#cfe2f4}
.pg-voip .sim{display:flex;gap:6px;flex-wrap:wrap}
.pg-voip #vFlow{display:block;width:100%;height:auto;max-width:470px;margin:0 auto}
.pg-voip #vFlow text{font:600 18px var(--body);fill:#e9eef3}
.pg-voip #vFlow .t-b{font-weight:800;fill:#fff}
.pg-voip #vFlow .t-m{fill:#aeb8c4;font-weight:600}
.pg-voip #vFlow .t-k{fill:#9fd4fb;font-weight:700}
.pg-voip #vFlow .ln{fill:none;stroke:#4f6275;stroke-width:3;stroke-linejoin:round}
.pg-voip #vFlow .ln.on{transition:stroke-dashoffset .6s ease-out}
.pg-voip #vFlow .nb{fill:#1b2027;stroke:#4a5a6c;stroke-width:2.5;transition:stroke .3s,fill .3s}
.pg-voip #vFlow .nb.blue{stroke:#3fa9f5}.pg-voip #vFlow .nb.amber{stroke:#f5a524}
.pg-voip #vFlow .pop{transform-box:fill-box;transform-origin:center;transform:scale(.8);opacity:.15;transition:transform .45s cubic-bezier(.3,1.5,.5,1),opacity .35s}
.pg-voip #vFlow .pop.in{transform:none;opacity:1}
.pg-voip #vFlow .ring .nb{stroke:#2fd08f;fill:#0f3a2d}
.pg-voip #vFlow .ring{animation:vo_shk .5s ease-in-out 2}
@keyframes vo_shk{0%,100%{transform:none}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.pg-voip #vDot{fill:#fff;filter:drop-shadow(0 0 7px #3fa9f5)}
.pg-voip #vFlow .callerc{fill:url(#vCg);stroke:#9fd4fb;stroke-width:2}
.pg-voip .now{margin:6px 0 0;font:600 13.5px var(--body);color:#cfd8e3;min-height:1.4em;display:flex;align-items:center;gap:8px}
@media (max-width:980px){
 .pg-voip .tool{grid-template-areas:"head" "ctl" "flow" "sum" "foot";grid-template-rows:none}
 .pg-voip .t-flow>.tpanel{position:static}
}
@media (max-width:520px){
 .pg-voip .ctl{padding:12px}
 .pg-voip .tgb{padding:8px 10px;font-size:13.5px}
}