/* First-class VoIP marketing surface. The diagram is decorative and contains no live PBX data. */
.voip-hero { padding: clamp(54px, 7vw, 96px) 0 58px; }
.voip-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(26px, 5vw, 78px); align-items: center; }
.voip-copy { min-width: 0; }
.voip-copy h1 { max-width: 680px; font-size: clamp(3.4rem, 7vw, 6.8rem); line-height: .94; letter-spacing: -.07em; }
.voip-copy p { max-width: 650px; color: #b8aec0; font-size: 1.08rem; line-height: 1.75; }
.voip-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; color: #90879e; font: 700 .7rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.voip-trust span::before { content: "✦"; margin-right: 7px; color: #b16fff; }
.voip-visual { position: relative; min-height: 440px; overflow: hidden; border: 1px solid rgba(177,111,255,.35); border-radius: 24px; background: radial-gradient(circle at 52% 44%, rgba(124,58,237,.2), transparent 34%), linear-gradient(145deg, rgba(24,13,39,.98), rgba(4,6,13,.98)); box-shadow: 0 24px 70px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.06); }
.voip-visual::before, .voip-visual::after { content: ""; position: absolute; border: 1px solid rgba(168,85,247,.22); border-radius: 50%; pointer-events: none; }
.voip-visual::before { width: 520px; height: 520px; left: 50%; top: 48%; transform: translate(-50%,-50%) rotate(-18deg); box-shadow: 0 0 0 26px rgba(168,85,247,.025), 0 0 0 58px rgba(168,85,247,.018); }
.voip-visual::after { width: 310px; height: 310px; left: 50%; top: 48%; transform: translate(-50%,-50%) rotate(38deg); border-style: dashed; opacity: .7; }
.voip-visual__bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 18px 22px; border-bottom: 1px solid rgba(177,111,255,.2); color: #bba6d1; font: 800 .67rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; }
.voip-visual__bar b { margin-left: auto; color: #f6d58b; font-size: .6rem; }
.voip-dot { width: 8px; height: 8px; border-radius: 50%; background: #f6d58b; box-shadow: 0 0 16px rgba(246,213,139,.8); }
.voip-route { position: absolute; z-index: 2; left: 12%; right: 12%; display: flex; align-items: center; gap: 13px; }
.voip-route--one { top: 31%; }
.voip-route--two { top: 67%; }
.voip-line { position: relative; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(177,111,255,.2), #b16fff, rgba(177,111,255,.2)); box-shadow: 0 0 12px rgba(177,111,255,.55); }
.voip-line::after { content: ""; position: absolute; left: 22%; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #e8c8ff; box-shadow: 0 0 15px #b16fff; animation: voip-pulse 2.8s ease-in-out infinite; }
.voip-route--two .voip-line::after { left: 68%; animation-delay: -1.1s; }
.voip-node { display: grid; place-items: center; width: 78px; height: 78px; flex: 0 0 78px; border: 1px solid rgba(177,111,255,.45); border-radius: 20px; background: rgba(10,9,20,.86); box-shadow: inset 0 0 24px rgba(124,58,237,.16); }
.voip-node i { position: relative; display: block; width: 25px; height: 25px; border: 2px solid #c79bff; border-radius: 8px; }
.voip-node i::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 12px; height: 2px; transform: translateX(-50%); background: #c79bff; box-shadow: 0 4px 0 -1px #c79bff; }
.voip-node--phone i { border-radius: 50%; }
.voip-node--phone i::before { content: ""; position: absolute; inset: 5px; border: 1px solid #c79bff; border-radius: 50%; }
.voip-node em { margin-top: -4px; color: #9b8bac; font: 800 .56rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; font-style: normal; letter-spacing: .1em; }
.voip-shield { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; place-items: center; width: 132px; height: 132px; transform: translate(-50%,-50%); border: 1px solid rgba(216,178,255,.58); border-radius: 50%; background: radial-gradient(circle, rgba(124,58,237,.35), rgba(8,8,18,.94) 66%); box-shadow: 0 0 0 10px rgba(124,58,237,.08), 0 0 38px rgba(168,85,247,.32); text-align: center; }
.voip-shield::before { content: ""; position: absolute; inset: 11px; border: 1px dashed rgba(216,178,255,.46); border-radius: 50%; }
.voip-shield span { margin-top: 8px; color: #e8d8ff; font: 800 .63rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .15em; }
.voip-shield b { color: #b16fff; font-size: 1.8rem; line-height: .7; }
.voip-shield small { color: #91839d; font: 700 .5rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; }
.voip-visual__foot { position: absolute; z-index: 2; right: 22px; bottom: 18px; left: 22px; display: flex; justify-content: space-between; gap: 12px; color: #8e829e; font: 700 .63rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .07em; text-transform: uppercase; }
.voip-visual__foot strong { color: #d8b2ff; }
.voip-checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.voip-check { min-width: 0; padding: 24px; }
.voip-check__icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(177,111,255,.45); border-radius: 10px; color: #d8b2ff; font: 800 .68rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.voip-check h3 { margin: 18px 0 8px; font-size: 1.04rem; }
.voip-check p { min-height: 84px; color: #9e94aa; font-size: .86rem; line-height: 1.6; }
.voip-check__state { color: #f6d58b; font: 800 .61rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.voip-notice { margin-top: 20px; }
@keyframes voip-pulse { 0%,100% { opacity: .25; transform: translateX(0) scale(.7); } 50% { opacity: 1; transform: translateX(32px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .voip-line::after { animation: none; } }
@media (max-width: 980px) { .voip-grid { grid-template-columns: minmax(0,1fr); } .voip-copy { max-width: 760px; } .voip-visual { min-height: 400px; } .voip-checks { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .voip-hero { padding-top: 38px; } .voip-copy h1 { font-size: clamp(3rem, 16vw, 4.5rem); overflow-wrap: anywhere; } .voip-copy p { font-size: .98rem; } .voip-visual { min-height: 350px; border-radius: 18px; } .voip-visual::before { width: 100%; height: 520px; transform: translate(-50%,-50%); } .voip-visual::after { width: 100%; height: 310px; transform: translate(-50%,-50%); } .voip-visual__bar { padding: 15px; font-size: .58rem; } .voip-route { left: 7%; right: 7%; gap: 8px; } .voip-node { width: 62px; height: 62px; flex-basis: 62px; border-radius: 15px; } .voip-node i { transform: scale(.82); } .voip-node em { font-size: .48rem; } .voip-shield { width: 104px; height: 104px; } .voip-shield span { font-size: .54rem; } .voip-shield b { font-size: 1.5rem; } .voip-shield small { font-size: .42rem; } .voip-visual__foot { right: 15px; bottom: 14px; left: 15px; font-size: .53rem; } .voip-checks { grid-template-columns: minmax(0,1fr); } .voip-check p { min-height: 0; } .sectionhead h2 { font-size: clamp(1.9rem, 9vw, 2.35rem); overflow-wrap: anywhere; } }