/* 3CX platform page — loaded only on /3cx-platform */

/* Reference-led remote-working story, using an unaltered official 3CX app screen. */
.remote-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,5vw,76px);align-items:center}
.remote-copy .h-1{font-size:clamp(34px,4.4vw,60px);line-height:1.07}
.remote-copy .lede{margin-top:22px}
.remote-benefits{list-style:none;margin:28px 0 20px;padding:0}
.remote-benefits li{display:flex;gap:18px;padding:18px 0;border-top:1px solid var(--line-l)}
.remote-benefits li>span{flex:none;padding-top:3px;color:#3C63B8;font-size:13px;font-variant-numeric:tabular-nums}
.remote-benefits h3{margin:0 0 7px;font-size:19px;line-height:1.3;color:var(--d-hi)}
.remote-benefits p{margin:0;font-size:16px;line-height:1.6;color:var(--d-mid)}
.remote-note{font-size:14px;line-height:1.6;color:var(--d-mid);margin:0 0 20px}
.remote-visual{margin:0;border:1px solid var(--line-l);border-radius:20px;overflow:hidden;background:var(--pearl,#F5F7FB);box-shadow:0 30px 70px -50px rgba(11,20,48,.45)}
.remote-visual-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px;color:var(--d-mid);font-size:14px}
.remote-visual-top img{height:auto;width:72px}
.remote-screen{display:block;width:100%;height:auto}
.remote-visual figcaption{display:flex;justify-content:space-between;gap:16px;padding:20px 24px;font-size:14px;line-height:1.5;color:var(--d-mid)}
.remote-visual figcaption a{display:inline-flex;align-items:center;gap:6px;color:var(--d-hi);text-decoration:underline;text-underline-offset:4px}
.remote-visual figcaption svg{width:14px;height:14px;flex:none}
@media(max-width:900px){.remote-grid{grid-template-columns:1fr}.remote-visual{max-width:720px}.remote-copy .eyebrow{line-height:1.65}}
@media(max-width:480px){.remote-visual-top,.remote-visual figcaption{padding:18px;align-items:flex-start;flex-direction:column;gap:10px}.remote-benefits li{gap:12px}}

/* ---------- hero ---------- */
.cxh{padding:clamp(150px,15vw,196px) 0 clamp(70px,8vw,112px)}
.cxh-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.cxh-mark,.cxh-line{position:absolute;right:-7%;top:56%;width:min(1060px,78vw);aspect-ratio:450/164;transform:translateY(-50%)}
.cxh-mark{background:linear-gradient(120deg,rgba(169,194,238,.075),rgba(60,99,184,.05) 60%,rgba(146,214,60,.04));-webkit-mask:url(../3cx/3cx-mark.svg) center/contain no-repeat;mask:url(../3cx/3cx-mark.svg) center/contain no-repeat}
.cxh-line{overflow:hidden;-webkit-mask:url(../3cx/3cx-mark-line.svg) center/contain no-repeat;mask:url(../3cx/3cx-mark-line.svg) center/contain no-repeat;background:rgba(169,194,238,.13)}
.cxh-line i{position:absolute;inset:0 auto 0 0;width:40%;background:linear-gradient(90deg,transparent,rgba(184,235,79,.85) 45%,rgba(169,194,238,.9) 55%,transparent);transform:translateX(-110%);will-change:transform}
@media (prefers-reduced-motion:no-preference){.cxh-line i{animation:cxhSweep 9s cubic-bezier(.45,.05,.35,1) 1.2s infinite}}
@keyframes cxhSweep{0%{transform:translateX(-110%)}55%,100%{transform:translateX(260%)}}
.cxh-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(36px,5vw,80px);align-items:center}
.cxh-copy{display:grid;gap:22px;align-content:start}
.cxh-copy .lede{max-width:56ch}
.cxh-ti{display:flex;align-items:center;gap:12px;margin-top:6px;color:var(--t-mid);font-size:15px;line-height:1.3}
.cxh-ti img{width:56px;height:56px}
.cxh-ti b{display:block;color:var(--t-hi);font-weight:600;font-size:16px}

.cxh-vis{position:relative;display:grid;gap:16px;max-width:500px;justify-self:end;width:100%}
.cxh-call,.cxh-sum{border-radius:20px;border:1px solid rgba(169,194,238,.16);box-shadow:0 40px 80px -40px rgba(0,0,0,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cxh-call{background:linear-gradient(180deg,rgba(42,45,51,.96),rgba(32,34,40,.96));padding:16px 18px 18px;color:#E8EAEE}
.cxh-sum{background:linear-gradient(180deg,rgba(17,29,64,.92),rgba(11,20,48,.94));padding:16px 18px 18px;margin-left:clamp(0px,6%,48px);margin-right:-4%}
.cxh-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cxh-top img{height:16px;width:auto;opacity:.95}
.cxh-k{font-size:14px;font-weight:600;color:#C9D0DC;letter-spacing:.01em}
.cxh-sum .cxh-k{color:var(--ice)}
.cxh-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#9BE07A}
.cxh-live i{width:7px;height:7px;border-radius:50%;background:#7BD957;box-shadow:0 0 0 0 rgba(123,217,87,.6)}
@media (prefers-reduced-motion:no-preference){.cxh-live i{animation:cxhPing 2s ease-out infinite}}
@keyframes cxhPing{0%{box-shadow:0 0 0 0 rgba(123,217,87,.55)}80%,100%{box-shadow:0 0 0 8px rgba(123,217,87,0)}}
.cxh-tag{margin-left:auto;font-size:14px;font-weight:600;color:var(--spark)}
.cxh-who{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(116,194,45,.35)}
.cxh-who b{display:block;font-size:15px;font-weight:600}
.cxh-who small{display:block;font-size:14px;color:#AEB4BF}
.cxh-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;color:#fff;flex:none}
.cxh-av.ai{background:linear-gradient(135deg,#74C22D,#1E9C6B)}
.cxh-wave{margin-left:auto;display:flex;align-items:center;gap:3px;height:22px}
.cxh-wave i{width:3px;height:30%;border-radius:2px;background:#92D63C}
@media (prefers-reduced-motion:no-preference){.cxh-wave i{animation:cxhWave 1.1s ease-in-out infinite}.cxh-wave i:nth-child(2){animation-delay:.15s}.cxh-wave i:nth-child(3){animation-delay:.3s}.cxh-wave i:nth-child(4){animation-delay:.45s}.cxh-wave i:nth-child(5){animation-delay:.6s}}
@keyframes cxhWave{0%,100%{height:25%}50%{height:95%}}
.cxh-msgs{display:grid;gap:8px;margin:14px 0}
.cxh-msgs p{max-width:86%;padding:10px 13px;border-radius:14px;font-size:15px;line-height:1.4}
.cxh-msgs .c{background:rgba(255,255,255,.07);border-bottom-left-radius:4px}
.cxh-msgs .a{justify-self:end;background:rgba(116,194,45,.16);color:#E9F7DA;border-bottom-right-radius:4px}
.cxh-route{display:flex;align-items:center;gap:10px;font-size:14px;color:#C9D0DC;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.cxh-route svg{width:18px;height:18px;color:#92D63C;flex:none}
.cxh-route b{color:#fff;font-weight:600}
.cxh-sum dl{display:grid;gap:10px;margin:0}
.cxh-sum dl div{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:baseline}
.cxh-sum dt{font-size:14px;font-weight:600;color:var(--t-mid)}
.cxh-sum dd{margin:0;font-size:15px;line-height:1.45;color:var(--t-hi)}
.cxh-sent{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-d);font-size:14px;color:var(--t-mid)}
.cxh-sent .bar{flex:1;height:6px;border-radius:6px;background:rgba(169,194,238,.14);overflow:hidden}
.cxh-sent .bar i{display:block;height:100%;width:82%;border-radius:inherit;background:linear-gradient(90deg,#3C63B8,#74C22D)}
.cxh-sent b{color:var(--spark);font-weight:600}
.cxh-note{font-size:14px;line-height:1.45;color:var(--t-lo);margin:2px 0 0 clamp(0px,6%,48px)}
.js .cxh-vis.rv .cxh-sum{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease) .35s,transform .7s var(--ease) .35s}
.js .cxh-vis.rv.is-in .cxh-sum{opacity:1;transform:none}

@media (max-width:960px){
  .cxh-grid{grid-template-columns:1fr}
  .cxh-vis{justify-self:start;max-width:560px}
  .cxh-mark,.cxh-line{right:-30%;top:30%;width:150vw}
}
@media (max-width:560px){
  .cxh-sum{margin-left:0;margin-right:0}
  .cxh-note{margin-left:0}
  .cxh-sum dl div{grid-template-columns:1fr;gap:2px}
  .cxh-mark,.cxh-line{right:-60%;top:18%;width:190vw}
}

/* ---------- bento ---------- */
.cxb{background:linear-gradient(180deg,#fff 0,var(--pearl) 220px)}
.cxb-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(36px,4.5vw,56px)}
.cxb-head > div{display:grid;gap:16px}
.cxb-head .lede{margin:0}
.cxb-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.cxb-t{position:relative;overflow:hidden;border-radius:24px;background:#fff;border:1px solid rgba(11,20,48,.07);box-shadow:0 1px 2px rgba(11,20,48,.04),0 24px 50px -36px rgba(11,20,48,.35);padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:10px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
@media (hover:hover){.cxb-t:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(11,20,48,.04),0 34px 60px -34px rgba(11,20,48,.42)}}
.cxb-t h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);font-weight:600;letter-spacing:-.02em;color:var(--d-hi);line-height:1.15}
.cxb-t p{font-size:16px;line-height:1.55;color:var(--d-mid);margin:0}
.cxb-k{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--emerald)}
.cxb-apps{grid-column:span 4;flex-direction:row;gap:28px;align-items:center}
.cxb-video,.cxb-inbox,.cxb-cc,.cxb-lic{grid-column:span 2}
.cxb-tools,.cxb-ai{grid-column:span 3}
.cxb-apps .cxb-txt{display:grid;gap:10px;flex:1 1 40%;min-width:0}
.cxb-os{display:flex;gap:16px;align-items:center;margin-top:6px}
.cxb-os img{height:22px;width:auto;opacity:.85}
.cxb-dash{flex:1 1 60%;min-width:0;border-radius:16px;background:#2A2D33;padding:12px;box-shadow:0 30px 60px -34px rgba(0,0,0,.6);color:#E8EAEE}
.cxb-dtop{display:flex;align-items:center;gap:10px;padding:2px 4px 10px;font-size:14px;font-weight:600}
.cxb-dtop img{height:14px;width:auto}
.cxb-exts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cxb-exts span{position:relative;display:grid;justify-items:center;text-align:center;gap:2px;padding:10px 6px;border-radius:12px;background:#33363D;border:1px solid rgba(255,255,255,.06)}
.cxb-exts i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;color:#fff;margin-bottom:4px;box-shadow:0 0 0 2px #2A2D33,0 0 0 4px #4FBF6A}
.cxb-exts .busy i{box-shadow:0 0 0 2px #2A2D33,0 0 0 4px #E5534B}
.cxb-exts .away i{box-shadow:0 0 0 2px #2A2D33,0 0 0 4px #E3A73A}
.cxb-exts .ai{border-color:rgba(116,194,45,.55)}
.cxb-exts .ai i{background:linear-gradient(135deg,#74C22D,#1E9C6B)}
.cxb-exts b{font-size:12px;font-weight:600;line-height:1.2}
.cxb-exts small{font-size:12px;color:#AEB4BF}
.cxb-video{background:linear-gradient(160deg,#1C2F5F,#0B1430);border-color:transparent}
.cxb-video h3{color:#fff}.cxb-video p{color:var(--t-mid)}
.cxb-meet{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:6px}
.cxb-meet i{aspect-ratio:16/10;border-radius:8px;background:linear-gradient(160deg,rgba(169,194,238,.18),rgba(169,194,238,.06));border:1px solid rgba(169,194,238,.12)}
.cxb-meet i.me{border-color:rgba(146,214,60,.7);background:linear-gradient(160deg,rgba(146,214,60,.25),rgba(30,156,107,.1))}
.cxb-big{font-size:clamp(3rem,2.4rem + 2vw,4.25rem);font-weight:600;letter-spacing:-.04em;line-height:1;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:auto}
.cxb-ch{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
.cxb-ch li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--d-hi);padding:9px 12px;border-radius:12px;background:var(--pearl)}
.cxb-ch img{width:22px;height:22px}
.cxb-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:auto;padding-top:8px}
.cxb-wall span{display:grid;gap:4px;padding:12px;border-radius:14px;background:#0B1430;color:#fff}
.cxb-wall small{font-size:12px;color:var(--t-mid);line-height:1.2}
.cxb-wall b{font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cxb-wall .ok b{color:var(--spark)}
.cxb-ill{font-size:14px!important;color:var(--d-lo)!important}
.cxb-sc{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:10px}
.cxb-sc .ppl{display:grid;grid-template-columns:repeat(5,12px);gap:6px}
.cxb-sc .ppl i{width:12px;height:12px;border-radius:50%;background:#C9D6EE}
.cxb-sc .arw svg{width:18px;height:18px;color:var(--d-lo)}
.cxb-sc .calls{display:grid;gap:5px}
.cxb-sc .calls i{display:block;width:64px;height:6px;border-radius:6px;background:linear-gradient(90deg,#3C63B8,#74C22D)}
.cxb-logos{display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px;margin-top:auto;padding-top:14px}
.cxb-logos img{height:26px;width:auto}
.cxb-ai{background:radial-gradient(70% 90% at 100% 0%,rgba(60,99,184,.35),transparent 60%),linear-gradient(165deg,#1C2F5F,#0B1430);border-color:transparent}
.cxb-ai h3{color:#fff}.cxb-ai p{color:var(--t-mid)}.cxb-ai .cxb-k{color:var(--spark)}
.cxb-bi{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px;font-size:15px;font-weight:600;color:#fff}
.cxb-bi img{width:26px;height:26px}
.cxb-bi span{margin-right:14px}
@media (max-width:1040px){
  .cxb-apps{grid-column:span 6}
  .cxb-video,.cxb-inbox,.cxb-cc,.cxb-lic{grid-column:span 3}
  .cxb-tools,.cxb-ai{grid-column:span 6}
}
@media (max-width:760px){
  .cxb-head{grid-template-columns:1fr}
  .cxb-grid{grid-template-columns:1fr;gap:14px}
  .cxb-t,.cxb-apps,.cxb-video,.cxb-inbox,.cxb-cc,.cxb-lic,.cxb-tools,.cxb-ai{grid-column:auto}
  .cxb-apps{flex-direction:column;align-items:stretch}
  .cxb-exts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cxb-exts span:nth-child(n+5){display:none}
  .cxb-exts b,.cxb-exts small,.cxb-wall small{font-size:13px}
}

/* ---------- connectivity ---------- */
.cxc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center}
.cxc-copy{display:grid;gap:18px}
.cxc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:10px 0 0}
.cxc-list div{position:relative;padding:14px 0 0 22px;border-top:1px solid var(--line-l)}
.cxc-list div::before{content:"";position:absolute;left:0;top:20px;width:10px;height:10px;background:linear-gradient(var(--green),var(--green)) center/10px 2px no-repeat,linear-gradient(var(--green),var(--green)) center/2px 10px no-repeat}
.cxc-list dt{font-size:16px;font-weight:600;color:var(--d-hi)}
.cxc-list dd{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--d-mid)}
.cxc-vis{position:relative;margin:0;aspect-ratio:520/420;border-radius:28px;background:radial-gradient(70% 70% at 30% 40%,rgba(60,99,184,.28),transparent 70%),linear-gradient(165deg,#13224A,#0B1430);box-shadow:0 50px 90px -50px rgba(11,20,48,.7);overflow:hidden}
.cxc-vis > svg{position:absolute;inset:0;width:100%;height:100%}
.cxc-vis .p1{stroke:url(#cxcg);stroke-width:3}
.cxc-vis .p2{stroke:rgba(169,194,238,.4);stroke-width:2;stroke-dasharray:6 8}
.cxc-vis .dot{fill:#B8EB4F;filter:drop-shadow(0 0 6px rgba(184,235,79,.9))}
@media (prefers-reduced-motion:no-preference){.cxc-vis .p2{animation:cxcDash 1.6s linear infinite}}
@keyframes cxcDash{to{stroke-dashoffset:-28}}
@media (prefers-reduced-motion:reduce){.cxc-vis .dot{display:none}}
.cxc-n{position:absolute;transform:translate(0,-50%);display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:center;padding:12px 18px 12px 12px;border-radius:16px;background:rgba(17,29,64,.92);border:1px solid var(--line-d2);box-shadow:0 18px 40px -18px rgba(0,0,0,.7);color:#fff;white-space:nowrap}
.cxc-n:not(.you){transform:translate(-50%,-50%)}
.cxc-n .ic{grid-row:span 2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(169,194,238,.14);color:var(--ice)}
.cxc-n .ic.g{background:rgba(146,214,60,.16);color:var(--spark)}
.cxc-n .ic svg{width:17px;height:17px}
.cxc-n b{font-size:16px;font-weight:600}
.cxc-n small{font-size:14px;color:var(--t-mid)}
.cxc-vis figcaption{position:absolute;left:20px;right:20px;bottom:16px;font-size:14px;line-height:1.4;color:var(--t-mid)}
@media (max-width:960px){.cxc-grid{grid-template-columns:1fr}.cxc-vis{max-width:620px}}
@media (max-width:560px){
  .cxc-list{grid-template-columns:1fr}
  .cxc-vis{aspect-ratio:auto;height:380px}
  .cxc-n{padding:8px 10px 8px 8px}
  .cxc-n .ic{width:30px;height:30px}
  .cxc-n:not(.you){left:auto!important;right:10px;transform:translate(0,-50%)}
}

/* stack section texture */
.cxs{overflow:hidden}

.cxs .h-1{font-size:var(--fs-2xl);line-height:1.08}
.cxs .stack-wrap{align-items:center}
/* fade the mark's left edge behind the headline copy */
.cxh-mark{-webkit-mask:url(../3cx/3cx-mark.svg) center/contain no-repeat,linear-gradient(90deg,transparent 4%,#000 34%);-webkit-mask-composite:source-in;mask:url(../3cx/3cx-mark.svg) center/contain no-repeat,linear-gradient(90deg,transparent 4%,#000 34%);mask-composite:intersect}
.cxh-line{-webkit-mask:url(../3cx/3cx-mark-line.svg) center/contain no-repeat,linear-gradient(90deg,transparent 4%,#000 34%);-webkit-mask-composite:source-in;mask:url(../3cx/3cx-mark-line.svg) center/contain no-repeat,linear-gradient(90deg,transparent 4%,#000 34%);mask-composite:intersect}
.cxh-mark{background:linear-gradient(120deg,rgba(169,194,238,.10),rgba(60,99,184,.07) 60%,rgba(146,214,60,.05))}
.cxh-line{background:rgba(169,194,238,.2)}