{"id":2978,"date":"2026-05-23T17:42:48","date_gmt":"2026-05-23T17:42:48","guid":{"rendered":"https:\/\/localhost\/digi\/?page_id=2978"},"modified":"2026-05-23T17:48:27","modified_gmt":"2026-05-23T17:48:27","slug":"telecom-media","status":"publish","type":"page","link":"https:\/\/digi.alphanzo.com\/?page_id=2978","title":{"rendered":"telecom media"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nTelecommunications & Media \u2014 DT Solutions<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Syne:wght@400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n\n<style>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TOKENS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n:root {\n --ink: #000408;\n --ink1: #020b14;\n --ink2: #040f1c;\n --ink3: #071525;\n --ink4: #0b1e35;\n\n --ice: #e8f4ff;\n --ice2: #9bbddc;\n --ice3: #4d7fa8;\n --ice4: #1e3a54;\n\n --neon-b: #00aaff;\n --neon-bm: rgba(0,170,255,.12);\n --neon-bx: rgba(0,170,255,.06);\n --glow-b: 0 0 60px rgba(0,170,255,.35), 0 0 120px rgba(0,170,255,.15);\n\n --neon-o: #ff6b00;\n --neon-om: rgba(255,107,0,.12);\n --glow-o: 0 0 50px rgba(255,107,0,.3), 0 0 100px rgba(255,107,0,.12);\n\n --neon-p: #9b5cff;\n --neon-pm: rgba(155,92,255,.12);\n --glow-p: 0 0 50px rgba(155,92,255,.28);\n\n --brd: rgba(255,255,255,.055);\n --brd-b: rgba(0,170,255,.18);\n --brd-o: rgba(255,107,0,.2);\n --brd-p: rgba(155,92,255,.18);\n\n --fh: 'Syne', sans-serif;\n --fb: 'Space Grotesk', sans-serif;\n --fc: 'JetBrains Mono', monospace;\n\n --ease: cubic-bezier(.16,1,.3,1);\n --ease2: cubic-bezier(.4,0,.2,1);\n}\n\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\nhtml { scroll-behavior: smooth; font-size: 16px; }\n\nbody {\n font-family: var(--fb);\n background: var(--ink);\n color: var(--ice);\n overflow-x: hidden;\n line-height: 1.6;\n cursor: none;\n}\n\n\/* custom cursor *\/\n.cursor {\n position: fixed; pointer-events: none; z-index: 9999;\n width: 12px; height: 12px; border-radius: 50%;\n background: var(--neon-b); mix-blend-mode: screen;\n transform: translate(-50%,-50%);\n transition: transform .1s, width .25s var(--ease), height .25s var(--ease), opacity .25s;\n}\n.cursor-ring {\n position: fixed; pointer-events: none; z-index: 9998;\n width: 36px; height: 36px; border-radius: 50%;\n border: 1px solid rgba(0,170,255,.5);\n transform: translate(-50%,-50%);\n transition: transform .18s var(--ease), width .35s var(--ease), height .35s var(--ease), opacity .3s;\n}\n\n::-webkit-scrollbar { width: 3px; }\n::-webkit-scrollbar-track { background: var(--ink); }\n::-webkit-scrollbar-thumb { background: var(--neon-b); border-radius: 2px; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TYPE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nh1,h2,h3 { font-family: var(--fh); line-height: 1.1; }\n.mono { font-family: var(--fc); }\n\n.grad-text {\n background: linear-gradient(120deg, #00aaff 0%, #9b5cff 50%, #ff6b00 100%);\n -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\n}\n.grad-text-b {\n background: linear-gradient(120deg, #00aaff, #5ddcff);\n -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\n}\n\n.tag {\n font-family: var(--fc); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;\n color: var(--neon-b); display: flex; align-items: center; gap: 10px; margin-bottom: 20px;\n}\n.tag::before { content: ''; width: 24px; height: 1px; background: var(--neon-b); }\n.tag.orange { color: var(--neon-o); }\n.tag.orange::before { background: var(--neon-o); }\n.tag.purple { color: var(--neon-p); }\n.tag.purple::before { background: var(--neon-p); }\n.tag.center { justify-content: center; }\n.tag.center::before { display: none; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 LAYOUT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.container { max-width: 1320px; margin: 0 auto; padding: 0 52px; }\n@media(max-width: 768px) { .container { padding: 0 22px; } }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SCROLL REVEAL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.sr {\n opacity: 0; transform: translateY(40px);\n transition: opacity 1s var(--ease), transform 1s var(--ease);\n}\n.sr.left { transform: translateX(-40px); }\n.sr.right { transform: translateX(40px); }\n.sr.scale { transform: scale(.92); }\n.sr.in { opacity: 1; transform: none; }\n\n.d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; }\n.d3 { transition-delay: .3s; } .d4 { transition-delay: .4s; }\n.d5 { transition-delay: .5s; } .d6 { transition-delay: .6s; }\n.d7 { transition-delay: .7s; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NOISE OVERLAY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nbody::after {\n content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;\n opacity: .025;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'\/%3E%3C\/svg%3E\");\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BLOCK 1 \u2014 HERO\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#b1 {\n min-height: 100vh; position: relative;\n display: flex; align-items: center; overflow: hidden;\n}\n\n#three-canvas {\n position: absolute; inset: 0; z-index: 1;\n width: 100%; height: 100%;\n}\n\n.hero-grid {\n position: absolute; inset: 0; z-index: 2;\n background-image:\n linear-gradient(rgba(0,170,255,.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0,170,255,.03) 1px, transparent 1px);\n background-size: 80px 80px;\n mask-image: radial-gradient(ellipse 60% 80% at 60% 50%, black 20%, transparent 75%);\n}\n\n\/* ambient glows behind everything *\/\n.hero-glow {\n position: absolute; border-radius: 50%; pointer-events: none; z-index: 2;\n}\n.hg1 {\n width: 900px; height: 900px; top: -200px; right: 0;\n background: radial-gradient(circle, rgba(0,170,255,.08) 0%, transparent 68%);\n animation: gpulse 8s ease-in-out infinite;\n}\n.hg2 {\n width: 600px; height: 600px; bottom: -100px; left: 200px;\n background: radial-gradient(circle, rgba(155,92,255,.07) 0%, transparent 65%);\n animation: gpulse 11s ease-in-out infinite 3s;\n}\n.hg3 {\n width: 400px; height: 400px; top: 30%; right: 35%;\n background: radial-gradient(circle, rgba(255,107,0,.06) 0%, transparent 65%);\n animation: gpulse 9s ease-in-out infinite 6s;\n}\n@keyframes gpulse { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.15)} }\n\n.hero-inner {\n position: relative; z-index: 10;\n display: grid; grid-template-columns: 52% 48%;\n align-items: center; gap: 60px;\n padding: 130px 0 100px;\n}\n@media(max-width: 1100px) { .hero-inner { grid-template-columns: 1fr; } }\n\n\/* eyebrow *\/\n.eyebrow {\n font-family: var(--fc); font-size: 10px; letter-spacing: .25em; text-transform: uppercase;\n color: var(--neon-b); display: flex; align-items: center; gap: 12px;\n margin-bottom: 28px;\n opacity: 0; animation: fadeUp .9s var(--ease) .3s forwards;\n}\n.ey-dot {\n width: 8px; height: 8px; border-radius: 50%;\n background: var(--neon-b); box-shadow: 0 0 14px var(--neon-b), 0 0 28px rgba(0,170,255,.4);\n animation: blink 2.5s ease-in-out infinite;\n}\n@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }\n.ey-line { width: 32px; height: 1px; background: linear-gradient(90deg,var(--neon-b),transparent); }\n\n.hero-h1 {\n font-size: clamp(54px, 6.5vw, 96px);\n font-weight: 800;\n color: var(--ice);\n margin-bottom: 24px;\n letter-spacing: -.02em;\n opacity: 0; animation: fadeUp .9s var(--ease) .55s forwards;\n}\n.hero-h1 .accent {\n display: block;\n background: linear-gradient(120deg, #00aaff 0%, #9b5cff 55%, #ff6b00 100%);\n -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\n}\n\n.hero-hl {\n font-size: clamp(16px, 1.5vw, 20px); font-weight: 400;\n color: var(--ice2); line-height: 1.55; margin-bottom: 24px; max-width: 580px;\n opacity: 0; animation: fadeUp .9s var(--ease) .75s forwards;\n}\n.hero-sub {\n font-size: 14px; color: var(--ice3); line-height: 1.85; margin-bottom: 52px; max-width: 570px;\n opacity: 0; animation: fadeUp .9s var(--ease) .95s forwards;\n}\n\n\/* KPs *\/\n.kps {\n margin-bottom: 52px;\n opacity: 0; animation: fadeUp .9s var(--ease) 1.1s forwards;\n}\n.kp {\n display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start;\n padding: 20px 0; border-bottom: 1px solid var(--brd);\n position: relative; overflow: hidden;\n transition: padding-left .35s var(--ease2);\n}\n.kp:first-child { border-top: 1px solid var(--brd); }\n.kp::after {\n content: ''; position: absolute; inset: 0;\n background: linear-gradient(90deg, rgba(0,170,255,.04), transparent);\n opacity: 0; transition: opacity .35s;\n}\n.kp:hover { padding-left: 12px; }\n.kp:hover::after { opacity: 1; }\n.kp-num {\n font-family: var(--fc); font-size: 11px; color: var(--neon-b);\n opacity: .4; letter-spacing: .1em; padding-top: 5px;\n}\n.kp-label {\n font-family: var(--fh); font-size: 12px; font-weight: 600;\n color: var(--ice2); text-transform: uppercase; letter-spacing: .08em;\n margin-bottom: 5px; display: flex; align-items: center; gap: 8px;\n}\n.kp-label i { color: var(--neon-o); font-size: 10px; }\n.kp-txt { font-size: 13px; color: var(--ice3); line-height: 1.7; }\n\n\/* CTA *\/\n.hero-cta { opacity: 0; animation: fadeUp .9s var(--ease) 1.3s forwards; }\n\n@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }\n\n\/* Buttons *\/\n.btn-prime {\n display: inline-flex; align-items: center; gap: 10px;\n padding: 16px 34px;\n background: transparent;\n border: 1px solid rgba(0,170,255,.45);\n color: var(--neon-b);\n font-family: var(--fh); font-size: 13px; font-weight: 600; letter-spacing: .06em;\n text-decoration: none; border-radius: 4px;\n position: relative; overflow: hidden;\n cursor: none; transition: all .4s var(--ease);\n}\n.btn-prime::before {\n content: ''; position: absolute; inset: 0;\n background: linear-gradient(135deg, rgba(0,170,255,.14), rgba(155,92,255,.08));\n opacity: 0; transition: opacity .3s;\n}\n.btn-prime:hover {\n border-color: var(--neon-b);\n box-shadow: var(--glow-b), inset 0 0 30px rgba(0,170,255,.08);\n transform: translateY(-2px);\n}\n.btn-prime:hover::before { opacity: 1; }\n.btn-prime i { font-size: 11px; transition: transform .3s var(--ease); }\n.btn-prime:hover i:last-child { transform: translateY(4px); }\n\n\/* Hero Visual *\/\n.hero-vis {\n position: relative; height: 640px;\n}\n#hero-canvas2d {\n width: 100%; height: 100%; display: block;\n}\n\n\/* Floating labels *\/\n.fl {\n position: absolute;\n background: rgba(2,11,20,.85); backdrop-filter: blur(16px);\n border: 1px solid var(--brd-b); border-radius: 6px;\n padding: 9px 14px;\n font-family: var(--fc); font-size: 10px; letter-spacing: .08em;\n color: var(--ice2); white-space: nowrap;\n display: flex; align-items: center; gap: 8px;\n pointer-events: none;\n animation: floatY 5s ease-in-out infinite;\n}\n.fl::before {\n content: ''; width: 6px; height: 6px; border-radius: 50%;\n background: var(--neon-b); box-shadow: 0 0 8px var(--neon-b);\n animation: blink 2s ease-in-out infinite;\n}\n.fl.o { border-color: var(--brd-o); }\n.fl.o::before { background: var(--neon-o); box-shadow: 0 0 8px var(--neon-o); }\n.fl.p { border-color: var(--brd-p); }\n.fl.p::before { background: var(--neon-p); box-shadow: 0 0 8px var(--neon-p); }\n.fl:nth-child(1){top:8%;left:3%;animation-delay:0s}\n.fl:nth-child(2){top:22%;right:2%;animation-delay:1.2s}\n.fl:nth-child(3){top:50%;left:5%;animation-delay:2.1s}\n.fl:nth-child(4){bottom:24%;right:5%;animation-delay:.7s}\n.fl:nth-child(5){bottom:10%;left:28%;animation-delay:1.7s}\n@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }\n\n\/* 3D CSS orbital *\/\n.orb-wrap {\n position: absolute; top: 50%; left: 50%;\n transform: translate(-50%,-50%);\n width: 280px; height: 280px;\n transform-style: preserve-3d;\n animation: orbspin 20s linear infinite;\n}\n.orb-ring {\n position: absolute; inset: 0; border-radius: 50%;\n border: 1px solid; transform-style: preserve-3d;\n animation: ringspin linear infinite;\n}\n.orb-ring:nth-child(1) {\n border-color: rgba(0,170,255,.3); animation-duration: 10s;\n transform: rotateX(72deg);\n box-shadow: 0 0 20px rgba(0,170,255,.1);\n}\n.orb-ring:nth-child(2) {\n border-color: rgba(155,92,255,.22); animation-duration: 14s;\n transform: rotateX(38deg) rotateY(55deg);\n box-shadow: 0 0 20px rgba(155,92,255,.08);\n}\n.orb-ring:nth-child(3) {\n border-color: rgba(255,107,0,.18); animation-duration: 19s;\n transform: rotateX(10deg) rotateY(110deg);\n}\n.orb-core {\n position: absolute; inset: 45px; border-radius: 50%;\n background: radial-gradient(circle at 35% 35%, rgba(0,170,255,.2), rgba(155,92,255,.1) 60%, transparent);\n border: 1px solid rgba(0,170,255,.2);\n box-shadow: inset 0 0 40px rgba(0,170,255,.12), 0 0 80px rgba(0,170,255,.1);\n}\n.orb-pulse {\n position: absolute; inset: 80px; border-radius: 50%;\n background: radial-gradient(circle, rgba(0,170,255,.15), transparent);\n animation: pulse 3s ease-in-out infinite;\n}\n@keyframes pulse { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.2);opacity:1} }\n@keyframes orbspin { to{transform:translate(-50%,-50%) rotateY(360deg)} }\n@keyframes ringspin { to{rotate:360deg} }\n\n.orb-node {\n position: absolute; width: 10px; height: 10px; border-radius: 50%;\n animation: npulse 2.8s ease-in-out infinite;\n}\n.orb-node:nth-child(5) { top: 8%; left: 47%; background: var(--neon-b); box-shadow: 0 0 14px var(--neon-b); }\n.orb-node:nth-child(6) { top: 47%; right: 3%; background: var(--neon-o); box-shadow: 0 0 14px var(--neon-o); animation-delay: .8s; }\n.orb-node:nth-child(7) { bottom: 8%; left: 47%; background: var(--neon-p); box-shadow: 0 0 14px var(--neon-p); animation-delay: 1.6s; }\n.orb-node:nth-child(8) { top: 47%; left: 3%; background: var(--neon-b); box-shadow: 0 0 14px var(--neon-b); animation-delay: 2.4s; }\n@keyframes npulse { 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.6)} }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BLOCK 2 \u2014 INDUSTRY CHALLENGES\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#b2 {\n padding: 130px 0; background: var(--ink1); position: relative; overflow: hidden;\n}\n.b2-glow {\n position: absolute; border-radius: 50%; pointer-events: none;\n width: 700px; height: 700px;\n top: 50%; left: -150px; transform: translateY(-50%);\n background: radial-gradient(circle, rgba(155,92,255,.06), transparent 65%);\n}\n.b2-glow2 {\n position: absolute; width: 500px; height: 500px;\n top: -100px; right: 50px; border-radius: 50%;\n background: radial-gradient(circle, rgba(0,170,255,.05), transparent 65%);\n}\n\n.sec-head { text-align: center; margin-bottom: 80px; }\n.sec-h2 {\n font-size: clamp(28px, 3.5vw, 50px); color: var(--ice);\n margin-bottom: 20px; max-width: 860px; margin-left: auto; margin-right: auto;\n letter-spacing: -.02em;\n}\n.sec-sub {\n font-size: 15px; color: var(--ice3); max-width: 680px;\n margin: 0 auto; line-height: 1.8;\n}\n\n.ch-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 1px;\n background: var(--brd); border-radius: 16px; overflow: hidden;\n border: 1px solid var(--brd); position: relative;\n}\n@media(max-width: 768px) { .ch-grid { grid-template-columns: 1fr; } }\n\n.ch-cell {\n background: var(--ink2); padding: 52px 46px;\n position: relative; overflow: hidden; transition: background .4s;\n}\n.ch-cell:hover { background: var(--ink3); }\n.ch-cell::before {\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;\n opacity: 0; transition: opacity .4s;\n}\n.ch-cell:nth-child(1)::before, .ch-cell:nth-child(3)::before {\n background: linear-gradient(90deg, transparent, var(--neon-b), transparent);\n}\n.ch-cell:nth-child(2)::before, .ch-cell:nth-child(4)::before {\n background: linear-gradient(90deg, transparent, var(--neon-o), transparent);\n}\n.ch-cell:hover::before { opacity: 1; }\n\n\/* glow on hover *\/\n.ch-cell:nth-child(1):hover, .ch-cell:nth-child(3):hover {\n box-shadow: inset 0 0 80px rgba(0,170,255,.04);\n}\n.ch-cell:nth-child(2):hover, .ch-cell:nth-child(4):hover {\n box-shadow: inset 0 0 80px rgba(255,107,0,.04);\n}\n\n.ch-badge {\n display: flex; align-items: center; gap: 14px; margin-bottom: 24px;\n}\n.ch-num {\n font-family: var(--fc); font-size: 11px; letter-spacing: .15em;\n padding: 7px 12px; border-radius: 4px;\n}\n.ch-cell:nth-child(1) .ch-num, .ch-cell:nth-child(3) .ch-num {\n color: var(--neon-b); background: rgba(0,170,255,.08); border: 1px solid rgba(0,170,255,.2);\n}\n.ch-cell:nth-child(2) .ch-num, .ch-cell:nth-child(4) .ch-num {\n color: var(--neon-o); background: rgba(255,107,0,.08); border: 1px solid rgba(255,107,0,.2);\n}\n.ch-icon { font-size: 22px; }\n.ch-cell:nth-child(1) .ch-icon, .ch-cell:nth-child(3) .ch-icon { color: var(--neon-b); }\n.ch-cell:nth-child(2) .ch-icon, .ch-cell:nth-child(4) .ch-icon { color: var(--neon-o); }\n\n.ch-title { font-size: 19px; font-weight: 700; color: var(--ice); margin-bottom: 14px; letter-spacing: -.01em; }\n.ch-desc { font-size: 13.5px; color: var(--ice3); line-height: 1.78; }\n\n.ch-bg-icon {\n position: absolute; bottom: 18px; right: 24px; font-size: 80px;\n color: rgba(255,255,255,.018); pointer-events: none;\n}\n\n\/* center nexus node *\/\n.nexus {\n position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);\n width: 50px; height: 50px; z-index: 10;\n background: var(--ink1); border: 1px solid rgba(0,170,255,.35); border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n box-shadow: 0 0 30px rgba(0,170,255,.3), 0 0 60px rgba(0,170,255,.1);\n}\n.nexus i { font-size: 16px; color: var(--neon-b); }\n.nexus::before {\n content: ''; position: absolute; inset: -6px; border-radius: 50%;\n border: 1px solid rgba(0,170,255,.15); animation: ringgrow 3s ease-in-out infinite;\n}\n.nexus::after {\n content: ''; position: absolute; inset: -14px; border-radius: 50%;\n border: 1px solid rgba(0,170,255,.08); animation: ringgrow 3s ease-in-out infinite .8s;\n}\n@keyframes ringgrow { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.8)} }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BLOCK 3 \u2014 SECTOR COVERAGE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#b3 {\n padding: 130px 0; background: var(--ink); position: relative; overflow: hidden;\n}\n.b3-glow {\n position: absolute; inset: 0; pointer-events: none;\n background:\n radial-gradient(ellipse 55% 45% at 50% 0%, rgba(0,170,255,.05) 0%, transparent 65%),\n radial-gradient(ellipse 40% 50% at 80% 100%, rgba(155,92,255,.04) 0%, transparent 60%);\n}\n\n\/* Tabs *\/\n.stabs {\n display: flex; justify-content: center; gap: 2px; margin-bottom: 60px;\n background: rgba(4,15,28,.9); border: 1px solid var(--brd);\n padding: 4px; border-radius: 8px; width: fit-content;\n margin-left: auto; margin-right: auto; backdrop-filter: blur(12px);\n}\n.stab {\n padding: 10px 24px; font-family: var(--fh); font-size: 12px; font-weight: 600;\n color: var(--ice3); background: transparent; border: none; cursor: none;\n border-radius: 6px; transition: all .3s var(--ease2);\n display: flex; align-items: center; gap: 8px; letter-spacing: .04em;\n}\n.stab:hover { color: var(--ice2); }\n.stab.act {\n background: linear-gradient(135deg, rgba(0,170,255,.2), rgba(155,92,255,.12));\n color: var(--neon-b);\n border: 1px solid rgba(0,170,255,.3);\n box-shadow: 0 4px 24px rgba(0,170,255,.2);\n}\n\n.cpanel { display: none; animation: plin .5s var(--ease) forwards; }\n.cpanel.act { display: block; }\n@keyframes plin { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }\n\n.cv-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 18px;\n}\n@media(max-width: 768px) { .cv-grid { grid-template-columns: 1fr; } }\n\n.cv-card {\n background: var(--ink2); border: 1px solid var(--brd);\n border-radius: 12px; padding: 36px;\n position: relative; overflow: hidden;\n transition: all .4s var(--ease); cursor: default;\n}\n.cv-card::before {\n content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 0;\n transition: height .5s var(--ease);\n}\n#pn .cv-card::before { background: linear-gradient(180deg, var(--neon-b), var(--neon-p)); }\n#pm .cv-card::before { background: linear-gradient(180deg, var(--neon-o), var(--neon-p)); }\n#pc .cv-card::before { background: linear-gradient(180deg, var(--neon-p), var(--neon-b)); }\n\n.cv-card:hover {\n border-color: rgba(0,170,255,.25);\n transform: translateY(-6px);\n box-shadow: 0 28px 72px rgba(0,0,0,.55), 0 0 40px rgba(0,170,255,.06);\n}\n.cv-card:hover::before { height: 100%; }\n\n.cv-hd { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }\n.cv-num {\n font-family: var(--fc); font-size: 48px; font-weight: 400;\n color: transparent; line-height: .9; min-width: 36px;\n}\n#pn .cv-num { -webkit-text-stroke: 1px rgba(0,170,255,.22); }\n#pm .cv-num { -webkit-text-stroke: 1px rgba(255,107,0,.22); }\n#pc .cv-num { -webkit-text-stroke: 1px rgba(155,92,255,.22); }\n\n.cv-title { font-size: 16px; font-weight: 600; color: var(--ice); padding-top: 8px; }\n.cv-ico {\n position: absolute; top: 24px; right: 24px; font-size: 20px;\n transition: all .4s var(--ease);\n}\n#pn .cv-ico { color: rgba(0,170,255,.08); }\n#pm .cv-ico { color: rgba(255,107,0,.08); }\n#pc .cv-ico { color: rgba(155,92,255,.08); }\n#pn .cv-card:hover .cv-ico { color: var(--neon-b); text-shadow: var(--glow-b); }\n#pm .cv-card:hover .cv-ico { color: var(--neon-o); text-shadow: var(--glow-o); }\n#pc .cv-card:hover .cv-ico { color: var(--neon-p); }\n.cv-desc { font-size: 13px; color: var(--ice3); line-height: 1.75; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BLOCK 4 \u2014 DELIVERY CAPABILITIES\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#b4 {\n padding: 130px 0; background: var(--ink1); position: relative; overflow: hidden;\n}\n.b4-glow {\n position: absolute; inset: 0; pointer-events: none;\n background:\n radial-gradient(ellipse 55% 60% at 90% 55%, rgba(255,107,0,.045) 0%, transparent 60%),\n radial-gradient(ellipse 45% 50% at 15% 70%, rgba(0,170,255,.055) 0%, transparent 58%);\n}\n\n.b4-in {\n display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center;\n}\n@media(max-width: 1050px) { .b4-in { grid-template-columns: 1fr; } }\n\n.b4-h2 { font-size: clamp(24px, 2.8vw, 42px); color: var(--ice); margin-bottom: 18px; letter-spacing: -.02em; }\n.b4-sub { font-size: 15px; color: var(--ice3); line-height: 1.8; margin-bottom: 50px; }\n\n.capstack { display: flex; flex-direction: column; }\n.cap {\n display: grid; grid-template-columns: 58px 1fr; gap: 20px; align-items: start;\n padding: 20px 0; border-bottom: 1px solid var(--brd);\n transition: all .32s var(--ease2); border-radius: 6px; cursor: default;\n}\n.cap:hover { padding-left: 12px; background: rgba(0,170,255,.02); }\n.cap-ni { display: flex; flex-direction: column; align-items: center; gap: 8px; }\n.cap-n { font-family: var(--fc); font-size: 9px; letter-spacing: .15em; color: var(--ice4); }\n.cap-iw {\n width: 42px; height: 42px; border-radius: 8px;\n display: flex; align-items: center; justify-content: center; font-size: 16px;\n transition: all .32s;\n}\n.cap:nth-child(1) .cap-iw { background: rgba(0,170,255,.1); color: var(--neon-b); border: 1px solid rgba(0,170,255,.2); }\n.cap:nth-child(2) .cap-iw { background: rgba(255,107,0,.08); color: var(--neon-o); border: 1px solid rgba(255,107,0,.2); }\n.cap:nth-child(3) .cap-iw { background: rgba(155,92,255,.08); color: var(--neon-p); border: 1px solid rgba(155,92,255,.2); }\n.cap:nth-child(4) .cap-iw { background: rgba(0,170,255,.1); color: var(--neon-b); border: 1px solid rgba(0,170,255,.2); }\n.cap:nth-child(5) .cap-iw { background: rgba(255,107,0,.08); color: var(--neon-o); border: 1px solid rgba(255,107,0,.2); }\n.cap:hover .cap-iw { transform: scale(1.12); box-shadow: 0 0 20px rgba(0,170,255,.2); }\n.cap-tx h3 { font-size: 14px; font-weight: 600; color: var(--ice); margin-bottom: 6px; }\n.cap-tx p { font-size: 12.5px; color: var(--ice3); line-height: 1.68; }\n\n\/* B4 Visual *\/\n.b4-vis { position: relative; height: 500px; }\n\n\/* Advanced 3D signal tower visualization *\/\n#signal-canvas {\n width: 100%; height: 100%; display: block;\n border-radius: 16px;\n border: 1px solid var(--brd);\n background: radial-gradient(ellipse at 50% 50%, rgba(0,170,255,.04) 0%, transparent 70%);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BLOCK 5 \u2014 DELIVERY & TRANSFORMATION\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#b5 {\n padding: 130px 0; background: var(--ink); position: relative; overflow: hidden;\n}\n.b5-glow {\n position: absolute; inset: 0; pointer-events: none;\n background:\n radial-gradient(ellipse 40% 55% at 2% 55%, rgba(0,170,255,.055) 0%, transparent 55%),\n radial-gradient(ellipse 40% 55% at 98% 55%, rgba(155,92,255,.05) 0%, transparent 55%);\n}\n\n.b5-h2 { font-size: clamp(24px, 3vw, 44px); letter-spacing: -.02em; }\n.b5-sub { font-size: 15px; color: var(--ice3); max-width: 640px; margin: 0 auto; line-height: 1.8; }\n\n.pgrid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;\n}\n@media(max-width: 900px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }\n@media(max-width: 600px) { .pgrid { grid-template-columns: 1fr; } }\n\n.pitem {\n background: var(--ink2); border: 1px solid var(--brd);\n border-radius: 12px; padding: 32px;\n position: relative; overflow: hidden;\n transition: all .4s var(--ease); cursor: default;\n}\n.pitem::after {\n content: ''; position: absolute; inset: 0; border-radius: 12px;\n opacity: 0; transition: opacity .35s;\n}\n.pitem:hover { transform: translateY(-7px); box-shadow: 0 28px 70px rgba(0,0,0,.55); }\n.pitem:nth-child(1):hover, .pitem:nth-child(4):hover {\n border-color: rgba(0,170,255,.25);\n box-shadow: 0 28px 70px rgba(0,0,0,.55), 0 0 40px rgba(0,170,255,.07);\n}\n.pitem:nth-child(2):hover, .pitem:nth-child(5):hover {\n border-color: rgba(255,107,0,.22);\n box-shadow: 0 28px 70px rgba(0,0,0,.55), 0 0 40px rgba(255,107,0,.06);\n}\n.pitem:nth-child(3):hover, .pitem:nth-child(6):hover {\n border-color: rgba(155,92,255,.22);\n box-shadow: 0 28px 70px rgba(0,0,0,.55), 0 0 40px rgba(155,92,255,.07);\n}\n\n.ps { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }\n.psn {\n width: 32px; height: 32px; border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-family: var(--fc); font-size: 11px;\n}\n.pitem:nth-child(1) .psn, .pitem:nth-child(4) .psn {\n background: rgba(0,170,255,.12); color: var(--neon-b); border: 1px solid rgba(0,170,255,.28);\n}\n.pitem:nth-child(2) .psn, .pitem:nth-child(5) .psn {\n background: rgba(255,107,0,.1); color: var(--neon-o); border: 1px solid rgba(255,107,0,.28);\n}\n.pitem:nth-child(3) .psn, .pitem:nth-child(6) .psn {\n background: rgba(155,92,255,.1); color: var(--neon-p); border: 1px solid rgba(155,92,255,.28);\n}\n.psi {\n font-size: 16px;\n}\n.pitem:nth-child(1) .psi, .pitem:nth-child(4) .psi { color: var(--neon-b); }\n.pitem:nth-child(2) .psi, .pitem:nth-child(5) .psi { color: var(--neon-o); }\n.pitem:nth-child(3) .psi, .pitem:nth-child(6) .psi { color: var(--neon-p); }\n\n.pt { font-size: 14px; font-weight: 600; color: var(--ice); margin-bottom: 10px; letter-spacing: -.01em; }\n.pd { font-size: 12.5px; color: var(--ice3); line-height: 1.72; }\n\n\/* count-up stat bar inside pitem *\/\n.pbar {\n margin-top: 20px; height: 2px; border-radius: 2px;\n background: rgba(255,255,255,.05); overflow: hidden;\n}\n.pbar-fill {\n height: 100%; width: 0; border-radius: 2px;\n transition: width 1.4s var(--ease) .4s;\n}\n.pitem:nth-child(1) .pbar-fill, .pitem:nth-child(4) .pbar-fill { background: linear-gradient(90deg, var(--neon-b), var(--neon-p)); }\n.pitem:nth-child(2) .pbar-fill, .pitem:nth-child(5) .pbar-fill { background: linear-gradient(90deg, var(--neon-o), var(--neon-p)); }\n.pitem:nth-child(3) .pbar-fill, .pitem:nth-child(6) .pbar-fill { background: linear-gradient(90deg, var(--neon-p), var(--neon-b)); }\n.pitem.in .pbar-fill { width: var(--w, 75%); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BLOCK 6 \u2014 WHY DT SOLUTIONS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#b6 {\n padding: 130px 0; background: var(--ink1); position: relative; overflow: hidden;\n}\n.b6-glow {\n position: absolute; inset: 0; pointer-events: none;\n background:\n radial-gradient(ellipse 50% 60% at 50% 110%, rgba(0,170,255,.07) 0%, transparent 58%),\n radial-gradient(ellipse 40% 45% at 88% 5%, rgba(155,92,255,.05) 0%, transparent 55%);\n}\n\n.b6-in {\n display: grid; grid-template-columns: 2fr 3fr; gap: 90px; align-items: start;\n}\n@media(max-width: 960px) { .b6-in { grid-template-columns: 1fr; } }\n\n.b6-sticky { position: sticky; top: 40px; }\n.b6-h2 { font-size: clamp(24px, 2.8vw, 42px); color: var(--ice); margin-bottom: 18px; letter-spacing: -.02em; }\n.b6-sub { font-size: 14.5px; color: var(--ice3); line-height: 1.8; margin-bottom: 36px; }\n\n.b6-badge {\n display: flex; align-items: center; gap: 14px; padding: 16px 20px;\n background: linear-gradient(135deg, rgba(0,170,255,.1), rgba(155,92,255,.07));\n border: 1px solid rgba(0,170,255,.22); border-radius: 10px;\n margin-bottom: 32px;\n}\n.b6-badge i { font-size: 20px; color: var(--neon-b); }\n.b6-badge span { font-family: var(--fh); font-size: 13px; font-weight: 500; color: var(--ice2); line-height: 1.4; }\n\n.icon-cluster { display: flex; gap: 8px; flex-wrap: wrap; }\n.ic-item {\n width: 42px; height: 42px;\n border-radius: 8px; display: flex; align-items: center; justify-content: center;\n font-size: 14px; transition: all .3s var(--ease);\n}\n.ic-item:hover { transform: translateY(-3px) scale(1.1); }\n.ic-b { background: rgba(0,170,255,.1); color: var(--neon-b); border: 1px solid rgba(0,170,255,.2); }\n.ic-b:hover { box-shadow: 0 8px 24px rgba(0,170,255,.25); }\n.ic-o { background: rgba(255,107,0,.08); color: var(--neon-o); border: 1px solid rgba(255,107,0,.2); }\n.ic-o:hover { box-shadow: 0 8px 24px rgba(255,107,0,.2); }\n.ic-p { background: rgba(155,92,255,.08); color: var(--neon-p); border: 1px solid rgba(155,92,255,.2); }\n.ic-p:hover { box-shadow: 0 8px 24px rgba(155,92,255,.2); }\n\n.diffs { display: flex; flex-direction: column; }\n.diff {\n display: grid; grid-template-columns: 64px 1fr; gap: 24px;\n padding: 28px 0; border-bottom: 1px solid var(--brd); align-items: start;\n transition: padding-left .32s var(--ease2); cursor: default;\n}\n.diff:first-child { border-top: 1px solid var(--brd); }\n.diff:hover { padding-left: 10px; }\n.d-num {\n font-family: var(--fc); font-size: 36px; font-weight: 300;\n color: transparent; line-height: 1;\n}\n.diff:nth-child(1) .d-num { -webkit-text-stroke: 1px rgba(0,170,255,.4); }\n.diff:nth-child(2) .d-num { -webkit-text-stroke: 1px rgba(255,107,0,.4); }\n.diff:nth-child(3) .d-num { -webkit-text-stroke: 1px rgba(155,92,255,.4); }\n.diff:nth-child(4) .d-num { -webkit-text-stroke: 1px rgba(0,170,255,.4); }\n.diff:nth-child(5) .d-num { -webkit-text-stroke: 1px rgba(255,107,0,.4); }\n.d-ico { font-size: 16px; margin-top: 6px; }\n.diff:nth-child(1) .d-ico, .diff:nth-child(4) .d-ico { color: var(--neon-b); }\n.diff:nth-child(2) .d-ico, .diff:nth-child(5) .d-ico { color: var(--neon-o); }\n.diff:nth-child(3) .d-ico { color: var(--neon-p); }\n.d-num-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }\n.dt h3 { font-size: 15px; font-weight: 600; color: var(--ice); margin-bottom: 9px; letter-spacing: -.01em; }\n.dt p { font-size: 13px; color: var(--ice3); line-height: 1.75; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BLOCK 7 \u2014 CTA\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#b7 {\n padding: 140px 0; background: var(--ink);\n position: relative; overflow: hidden;\n border-top: 1px solid var(--brd);\n}\n\n\/* Large ambient glow center *\/\n.b7-orb {\n position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);\n width: 1000px; height: 500px; border-radius: 50%; pointer-events: none;\n background: radial-gradient(ellipse, rgba(0,170,255,.09) 0%, rgba(155,92,255,.06) 40%, transparent 68%);\n animation: gpulse 10s ease-in-out infinite;\n}\n\n\/* Grid *\/\n.b7-grid {\n position: absolute; inset: 0;\n background-image:\n linear-gradient(rgba(0,170,255,.035) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0,170,255,.035) 1px, transparent 1px);\n background-size: 60px 60px;\n}\n\n.b7-in {\n text-align: center; position: relative; z-index: 10;\n max-width: 960px; margin: 0 auto;\n}\n\n.b7-h2 {\n font-size: clamp(28px, 4vw, 56px); color: var(--ice);\n margin-bottom: 24px; line-height: 1.12; letter-spacing: -.03em;\n}\n.b7-sub {\n font-size: 16px; color: var(--ice3); line-height: 1.8;\n max-width: 700px; margin: 0 auto 60px;\n}\n\n.ctabuts { display: flex; flex-direction: column; align-items: center; gap: 22px; }\n\n.btn-cp {\n display: inline-flex; align-items: center; gap: 12px;\n padding: 18px 54px;\n background: linear-gradient(135deg, var(--neon-b), #0066cc);\n color: white; font-family: var(--fh); font-size: 15px; font-weight: 700;\n letter-spacing: .04em; text-decoration: none; border-radius: 6px;\n border: 1px solid rgba(255,255,255,.12);\n cursor: none; transition: all .4s var(--ease);\n position: relative; overflow: hidden;\n}\n.btn-cp::before {\n content: ''; position: absolute; inset: 0;\n background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);\n opacity: 0; transition: opacity .3s;\n}\n.btn-cp:hover {\n transform: translateY(-4px);\n box-shadow: var(--glow-b);\n}\n.btn-cp:hover::before { opacity: 1; }\n\n.btn-cs-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }\n.btn-cs {\n display: inline-flex; align-items: center; gap: 10px;\n padding: 13px 30px;\n background: transparent; color: var(--ice3);\n font-family: var(--fh); font-size: 13px; font-weight: 500;\n text-decoration: none; border-radius: 6px;\n border: 1px solid var(--brd);\n cursor: none; transition: all .35s var(--ease2); letter-spacing: .03em;\n}\n.btn-cs:hover { border-color: rgba(0,170,255,.3); color: var(--ice); background: rgba(0,170,255,.05); }\n.csl { font-size: 12.5px; color: var(--ice4); max-width: 500px; text-align: center; line-height: 1.68; }\n\n.cta-close {\n margin-top: 64px; padding-top: 48px;\n border-top: 1px solid var(--brd);\n}\n.cta-close p {\n font-family: var(--fh); font-size: 17px; font-weight: 400;\n color: var(--ice3); max-width: 680px; margin: 0 auto; line-height: 1.65;\n}\n\n\/* Signal wave *\/\n.swv {\n position: absolute; bottom: -1px; left: 0; right: 0;\n height: 70px; pointer-events: none; opacity: .3;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECTION DIVIDER\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.sdiv { width: 100%; height: 1px; background: var(--brd); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SCROLL PROGRESS BAR\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.spbar {\n position: fixed; top: 0; left: 0; height: 2px; z-index: 9997;\n background: linear-gradient(90deg, var(--neon-b), var(--neon-p), var(--neon-o));\n width: 0; transition: width .1s linear;\n box-shadow: 0 0 8px var(--neon-b);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MEDIA QUERIES\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media(max-width: 768px) {\n .hero-inner { padding: 100px 0 80px; }\n .b4-in, .b6-in { gap: 50px; }\n}\n<\/style>\n<\/head>\n<body>\n\n<!-- Cursor -->\n<div class=\"cursor\" id=\"cursor\"><\/div>\n<div class=\"cursor-ring\" id=\"cursor-ring\"><\/div>\n\n<!-- Scroll Progress -->\n<div class=\"spbar\" id=\"spbar\"><\/div>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BLOCK 1 \u2014 HERO\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section id=\"b1\">\n <canvas id=\"three-canvas\"><\/canvas>\n <div class=\"hero-grid\"><\/div>\n <div class=\"hero-glow hg1\"><\/div>\n <div class=\"hero-glow hg2\"><\/div>\n <div class=\"hero-glow hg3\"><\/div>\n\n <div class=\"container\">\n <div class=\"hero-inner\">\n\n <!-- Content -->\n <div>\n <div class=\"eyebrow\">\n <div class=\"ey-line\"><\/div>\n <div class=\"ey-dot\"><\/div>\n DT Solutions \u00b7 Sector Practice\n <\/div>\n\n <h1 class=\"hero-h1\">\n Telecomm<span class=\"accent\">unications<br>& Media<\/span>\n <\/h1>\n\n <p class=\"hero-hl\">Support connected service environments where networks, platforms, content, and customer experience must perform at scale<\/p>\n\n <p class=\"hero-sub\">DT Solutions supports telecommunications providers, media organizations, digital platform teams, and service operations groups with talent, delivery, and advisory capacity across environments where connectivity, subscriber experience, content delivery, network performance, and digital operations must stay responsive.<\/p>\n\n <div class=\"kps\">\n <div class=\"kp\">\n <div class=\"kp-num\">01<\/div>\n <div>\n <div class=\"kp-label\"><i class=\"fas fa-network-wired\"><\/i>Telecom & Media Operating Environments<\/div>\n <div class=\"kp-txt\">Support across network operations, service platforms, customer support functions, media workflows, digital channels, infrastructure programs, and enterprise support teams.<\/div>\n <\/div>\n <\/div>\n <div class=\"kp\">\n <div class=\"kp-num\">02<\/div>\n <div>\n <div class=\"kp-label\"><i class=\"fas fa-globe\"><\/i>Connectivity, Platform & Content Ecosystems<\/div>\n <div class=\"kp-txt\">Talent and execution support for network modernization, service activation, digital media platforms, customer systems, data initiatives, workflow improvement, and operational support.<\/div>\n <\/div>\n <\/div>\n <div class=\"kp\">\n <div class=\"kp-num\">03<\/div>\n <div>\n <div class=\"kp-label\"><i class=\"fas fa-users\"><\/i>High-Volume Service Environments<\/div>\n <div class=\"kp-txt\">Delivery models designed for organizations balancing subscriber expectations, uptime demands, platform change, content movement, technical support, and fast-changing digital consumption patterns.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"hero-cta\">\n <a href=\"#b3\" class=\"btn-prime\" id=\"hero-cta-btn\">\n <i class=\"fas fa-compass\"><\/i>\n Explore Sector Coverage\n <i class=\"fas fa-arrow-down\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- Visual -->\n <div class=\"hero-vis\">\n <canvas id=\"hero-canvas2d\"><\/canvas>\n\n <!-- Orbital rings overlay -->\n <div class=\"orb-wrap\" style=\"opacity:.6\">\n <div class=\"orb-ring\"><\/div>\n <div class=\"orb-ring\"><\/div>\n <div class=\"orb-ring\"><\/div>\n <div class=\"orb-core\"><\/div>\n <div class=\"orb-pulse\"><\/div>\n <div class=\"orb-node\"><\/div>\n <div class=\"orb-node\"><\/div>\n <div class=\"orb-node\"><\/div>\n <div class=\"orb-node\"><\/div>\n <\/div>\n\n <!-- Floating labels -->\n <div style=\"position:absolute;inset:0;pointer-events:none\">\n <div class=\"fl\"><i class=\"fas fa-signal\"><\/i>Network Operations<\/div>\n <div class=\"fl o\"><i class=\"fas fa-play-circle\"><\/i>Streaming Platforms<\/div>\n <div class=\"fl\"><i class=\"fas fa-users-cog\"><\/i>Subscriber Experience<\/div>\n <div class=\"fl p\"><i class=\"fas fa-broadcast-tower\"><\/i>Content Distribution<\/div>\n <div class=\"fl\"><i class=\"fas fa-chart-line\"><\/i>Service Assurance<\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BLOCK 2 \u2014 INDUSTRY CHALLENGES\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section id=\"b2\">\n <div class=\"b2-glow\"><\/div>\n <div class=\"b2-glow2\"><\/div>\n <div class=\"container\">\n\n <div class=\"sec-head sr\">\n <div class=\"tag center\">Industry Challenges<\/div>\n <h2 class=\"sec-h2\">Telecommunications & Media Challenges Across Connectivity, Platforms, and Subscriber Experience<\/h2>\n <p class=\"sec-sub\">Telecommunications and media organizations are managing rising service expectations, expanding digital channels, network and platform complexity, content movement, and high-volume customer interactions across always-on operating environments.<\/p>\n <\/div>\n\n <div class=\"sr d2\" style=\"position:relative\">\n <div class=\"ch-grid\">\n <div class=\"ch-cell\">\n <div class=\"ch-badge\">\n <div class=\"ch-num\">01<\/div>\n <i class=\"fas fa-wifi ch-icon\"><\/i>\n <\/div>\n <h3 class=\"ch-title\">Customers expect uninterrupted connected experiences<\/h3>\n <p class=\"ch-desc\">Subscribers, viewers, businesses, and digital users expect fast, reliable service across mobile, broadband, streaming, support channels, and connected platforms.<\/p>\n <i class=\"fas fa-signal ch-bg-icon\"><\/i>\n <\/div>\n <div class=\"ch-cell\">\n <div class=\"ch-badge\">\n <div class=\"ch-num\">02<\/div>\n <i class=\"fas fa-sitemap ch-icon\"><\/i>\n <\/div>\n <h3 class=\"ch-title\">Network and platform environments are harder to coordinate<\/h3>\n <p class=\"ch-desc\">Service providers must manage infrastructure updates, platform changes, provisioning workflows, data systems, service activation, and technical support without creating customer disruption.<\/p>\n <i class=\"fas fa-network-wired ch-bg-icon\"><\/i>\n <\/div>\n <div class=\"ch-cell\">\n <div class=\"ch-badge\">\n <div class=\"ch-num\">03<\/div>\n <i class=\"fas fa-film ch-icon\"><\/i>\n <\/div>\n <h3 class=\"ch-title\">Content and digital consumption patterns keep shifting<\/h3>\n <p class=\"ch-desc\">Media organizations must support changing audience behaviour, multi-channel distribution, streaming platforms, digital advertising workflows, and faster content operations.<\/p>\n <i class=\"fas fa-photo-video ch-bg-icon\"><\/i>\n <\/div>\n <div class=\"ch-cell\">\n <div class=\"ch-badge\">\n <div class=\"ch-num\">04<\/div>\n <i class=\"fas fa-headset ch-icon\"><\/i>\n <\/div>\n <h3 class=\"ch-title\">Service teams must respond across high-volume interaction points<\/h3>\n <p class=\"ch-desc\">Customer care, technical support, field service, digital operations, billing support, and escalation teams need accurate coordination when demand spikes or service issues occur.<\/p>\n <i class=\"fas fa-users ch-bg-icon\"><\/i>\n <\/div>\n <\/div>\n <div class=\"nexus\"><i class=\"fas fa-circle-nodes\"><\/i><\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BLOCK 3 \u2014 SECTOR COVERAGE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section id=\"b3\">\n <div class=\"b3-glow\"><\/div>\n <div class=\"container\">\n\n <div class=\"sec-head sr\">\n <div class=\"tag blue center\" style=\"color:var(--neon-b)\">Sector Coverage<\/div>\n <h2 class=\"sec-h2\">Sector Coverage Across Telecommunications and Media Environments<\/h2>\n <p class=\"sec-sub\">DT Solutions supports telecommunications and media organizations across the network, platform, content, customer, and service environments that keep connected experiences running at scale.<\/p>\n <\/div>\n\n <div class=\"stabs sr d2\">\n <button class=\"stab act\" data-p=\"pn\"><i class=\"fas fa-network-wired\"><\/i>Network & Connectivity<\/button>\n <button class=\"stab\" data-p=\"pm\"><i class=\"fas fa-tv\"><\/i>Media & Digital Platforms<\/button>\n <button class=\"stab\" data-p=\"pc\"><i class=\"fas fa-headset\"><\/i>Customer & Service Operations<\/button>\n <\/div>\n\n <!-- Network & Connectivity -->\n <div class=\"cpanel act sr d3\" id=\"pn\">\n <div class=\"cv-grid\">\n <div class=\"cv-card\"><i class=\"fas fa-broadcast-tower cv-ico\"><\/i>\n <div class=\"cv-hd\"><div class=\"cv-num\">01<\/div><h3 class=\"cv-title\">Mobile, Broadband & Connectivity Operations<\/h3><\/div>\n <p class=\"cv-desc\">Support for telecom environments connected to mobile services, broadband operations, connectivity programs, provisioning workflows, service activation, and network support functions.<\/p>\n <\/div>\n <div class=\"cv-card\"><i class=\"fas fa-server cv-ico\"><\/i>\n <div class=\"cv-hd\"><div class=\"cv-num\">02<\/div><h3 class=\"cv-title\">Network Operations & Service Performance<\/h3><\/div>\n <p class=\"cv-desc\">Capacity for teams supporting monitoring, incident coordination, service assurance, performance tracking, outage response, technical escalation, and network-facing operational workflows.<\/p>\n <\/div>\n <div class=\"cv-card\"><i class=\"fas fa-tools cv-ico\"><\/i>\n <div class=\"cv-hd\"><div class=\"cv-num\">03<\/div><h3 class=\"cv-title\">Infrastructure, Field & Deployment Support<\/h3><\/div>\n <p class=\"cv-desc\">Support for field-service coordination, rollout activity, site work tracking, dispatch workflows, vendor coordination, documentation, and deployment-related operating support.<\/p>\n <\/div>\n <div class=\"cv-card\"><i class=\"fas fa-database cv-ico\"><\/i>\n <div class=\"cv-hd\"><div class=\"cv-num\">04<\/div><h3 class=\"cv-title\">Telecom Systems, Data & Platform Support<\/h3><\/div>\n <p class=\"cv-desc\">Coverage across operational platforms, customer systems, data workflows, service management tools, reporting environments, automation, and technology-enabled network operations.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Media & Digital Platforms -->\n <div class=\"cpanel\" id=\"pm\">\n <div class=\"cv-grid\">\n <div class=\"cv-card\"><i class=\"fas fa-play-circle cv-ico\"><\/i>\n <div class=\"cv-hd\"><div class=\"cv-num\">01<\/div><h3 class=\"cv-title\">Streaming, Digital Content & Platform Operations<\/h3><\/div>\n <p class=\"cv-desc\">Support for streaming platforms, digital media operations, content workflows, publishing processes, platform support, user experience programs, and service availability.<\/p>\n <\/div>\n <div class=\"cv-card\"><i class=\"fas fa-share-alt cv-ico\"><\/i>\n <div class=\"cv-hd\"><div class=\"cv-num\">02<\/div><h3 class=\"cv-title\">Content Distribution & Channel Enablement<\/h3><\/div>\n <p class=\"cv-desc\">Capacity for teams managing multi-channel distribution, digital publishing, audience engagement workflows, campaign operations, scheduling support, and content movement.<\/p>\n <\/div>\n <div class=\"cv-card\"><i class=\"fas fa-film cv-ico\"><\/i>\n <div class=\"cv-hd\"><div class=\"cv-num\">03<\/div><h3 class=\"cv-title\">Media Technology & Production Support Functions<\/h3><\/div>\n <p class=\"cv-desc\">Assistance with media systems, production-adjacent workflows, digital asset processes, technical coordination, platform administration, and operational documentation.<\/p>\n <\/div>\n <div class=\"cv-card\"><i class=\"fas fa-chart-bar cv-ico\"><\/i>\n <div class=\"cv-hd\"><div class=\"cv-num\">04<\/div><h3 class=\"cv-title\">Audience Data, Reporting & Digital Performance<\/h3><\/div>\n <p class=\"cv-desc\">Support for audience analytics, performance reporting, advertising operations, dashboard support, user behaviour insights, and data-informed media operations.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Customer & Service Operations -->\n <div class=\"cpanel\" id=\"pc\">\n <div class=\"cv-grid\">\n <div class=\"cv-card\"><i class=\"fas fa-headset cv-ico\"><\/i>\n <div class=\"cv-hd\"><div class=\"cv-num\">01<\/div><h3 class=\"cv-title\">Subscriber Support & Customer Care Environments<\/h3><\/div>\n <p class=\"cv-desc\">Support for customer care, subscriber services, service requests, issue resolution, escalation workflows, billing-adjacent support, and digital support channels.<\/p>\n <\/div>\n <div class=\"cv-card\"><i class=\"fas fa-tasks cv-ico\"><\/i>\n <div class=\"cv-hd\"><div class=\"cv-num\">02<\/div><h3 class=\"cv-title\">Service Activation, Provisioning & Order Management<\/h3><\/div>\n <p class=\"cv-desc\">Capacity for activation workflows, order coordination, provisioning support, service setup, account changes, documentation, and fulfillment tracking.<\/p>\n <\/div>\n <div class=\"cv-card\"><i class=\"fas fa-truck cv-ico\"><\/i>\n <div class=\"cv-hd\"><div class=\"cv-num\">03<\/div><h3 class=\"cv-title\">Field Service, Dispatch & Technical Support Coordination<\/h3><\/div>\n <p class=\"cv-desc\">Support for dispatch operations, technician coordination, appointment workflows, trouble ticket support, field updates, and customer-facing service restoration.<\/p>\n <\/div>\n <div class=\"cv-card\"><i class=\"fas fa-heart cv-ico\"><\/i>\n <div class=\"cv-hd\"><div class=\"cv-num\">04<\/div><h3 class=\"cv-title\">Digital Service Experience & Retention Support<\/h3><\/div>\n <p class=\"cv-desc\">Coverage across customer journey improvements, self-service platforms, retention workflows, service communications, digital channel support, and experience improvement initiatives.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BLOCK 4 \u2014 DELIVERY CAPABILITIES\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section id=\"b4\">\n <div class=\"b4-glow\"><\/div>\n <div class=\"container\">\n <div class=\"b4-in\">\n\n <div class=\"sr left\">\n <div class=\"tag orange\">Delivery Capabilities<\/div>\n <h2 class=\"b4-h2\">Delivery Capabilities for Telecommunications and Media Operations<\/h2>\n <p class=\"b4-sub\">DT Solutions provides delivery capacity across the network, platform, customer, field, and content operations that help telecommunications and media organizations keep connected services responsive at scale.<\/p>\n\n <div class=\"capstack\">\n <div class=\"cap\">\n <div class=\"cap-ni\"><span class=\"cap-n\">01<\/span><div class=\"cap-iw\"><i class=\"fas fa-shield-alt\"><\/i><\/div><\/div>\n <div class=\"cap-tx\"><h3>Network Operations & Service Assurance Support<\/h3><p>Support for monitoring workflows, incident coordination, outage response, service assurance, performance tracking, technical escalation, and network-facing operational functions.<\/p><\/div>\n <\/div>\n <div class=\"cap\">\n <div class=\"cap-ni\"><span class=\"cap-n\">02<\/span><div class=\"cap-iw\"><i class=\"fas fa-headset\"><\/i><\/div><\/div>\n <div class=\"cap-tx\"><h3>Subscriber Care & Service Operations Capacity<\/h3><p>Capacity for customer support, subscriber services, issue resolution, service requests, billing-adjacent workflows, retention activity, and high-volume interaction environments.<\/p><\/div>\n <\/div>\n <div class=\"cap\">\n <div class=\"cap-ni\"><span class=\"cap-n\">03<\/span><div class=\"cap-iw\"><i class=\"fas fa-map-marked-alt\"><\/i><\/div><\/div>\n <div class=\"cap-tx\"><h3>Service Activation, Provisioning & Field Coordination<\/h3><p>Support for order management, provisioning workflows, activation tracking, dispatch coordination, technician communication, field updates, and service completion processes.<\/p><\/div>\n <\/div>\n <div class=\"cap\">\n <div class=\"cap-ni\"><span class=\"cap-n\">04<\/span><div class=\"cap-iw\"><i class=\"fas fa-photo-video\"><\/i><\/div><\/div>\n <div class=\"cap-tx\"><h3>Media Platform & Content Operations Support<\/h3><p>Talent and delivery support for streaming platforms, content workflows, publishing operations, digital asset handling, audience reporting, advertising operations, and platform administration.<\/p><\/div>\n <\/div>\n <div class=\"cap\">\n <div class=\"cap-ni\"><span class=\"cap-n\">05<\/span><div class=\"cap-iw\"><i class=\"fas fa-chart-line\"><\/i><\/div><\/div>\n <div class=\"cap-tx\"><h3>Telecom Systems, Data & Digital Channel Support<\/h3><p>Capacity for customer systems, service management platforms, reporting environments, automation initiatives, digital support channels, data workflows, and operational dashboards.<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- 3D Signal Canvas -->\n <div class=\"b4-vis sr right d2\">\n <canvas id=\"signal-canvas\"><\/canvas>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BLOCK 5 \u2014 DELIVERY & TRANSFORMATION\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section id=\"b5\">\n <div class=\"b5-glow\"><\/div>\n <div class=\"container\">\n\n <div class=\"sec-head sr\" style=\"margin-bottom:70px\">\n <div class=\"tag purple center\" style=\"color:var(--neon-p)\">Delivery & Transformation Support<\/div>\n <h2 class=\"b5-h2 sec-h2\">Supporting Network Change, Platform Operations, and Subscriber Service Performance<\/h2>\n <p class=\"b5-sub sec-sub\">DT Solutions helps telecommunications and media organizations add capacity where connectivity programs, service activation, digital platforms, content operations, customer support, and technical service teams need to move in sync.<\/p>\n <\/div>\n\n <div class=\"pgrid\">\n <div class=\"pitem sr d1\" style=\"--w:82%\">\n <div class=\"ps\"><div class=\"psn\">01<\/div><i class=\"fas fa-network-wired psi\"><\/i><\/div>\n <div class=\"pt\">Network Program & Service Operations Support<\/div>\n <div class=\"pd\">Support for network-facing initiatives, service assurance workflows, outage coordination, performance tracking, incident follow-up, documentation, and operational support across connected service environments.<\/div>\n <div class=\"pbar\"><div class=\"pbar-fill\"><\/div><\/div>\n <\/div>\n <div class=\"pitem sr d2\" style=\"--w:74%\">\n <div class=\"ps\"><div class=\"psn\">02<\/div><i class=\"fas fa-cogs psi\"><\/i><\/div>\n <div class=\"pt\">Activation, Provisioning & Order Flow Support<\/div>\n <div class=\"pd\">Capacity for service setup, provisioning workflows, order management, activation tracking, account updates, fulfillment coordination, and customer-facing service readiness.<\/div>\n <div class=\"pbar\"><div class=\"pbar-fill\"><\/div><\/div>\n <\/div>\n <div class=\"pitem sr d3\" style=\"--w:88%\">\n <div class=\"ps\"><div class=\"psn\">03<\/div><i class=\"fas fa-headset psi\"><\/i><\/div>\n <div class=\"pt\">Subscriber Care & Escalation Support<\/div>\n <div class=\"pd\">Support for customer care teams, technical support queues, issue resolution, billing-adjacent workflows, retention activity, service communications, and escalation coordination.<\/div>\n <div class=\"pbar\"><div class=\"pbar-fill\"><\/div><\/div>\n <\/div>\n <div class=\"pitem sr d1\" style=\"--w:79%\">\n <div class=\"ps\"><div class=\"psn\">04<\/div><i class=\"fas fa-film psi\"><\/i><\/div>\n <div class=\"pt\">Media Platform & Content Workflow Support<\/div>\n <div class=\"pd\">Talent and delivery support for streaming operations, publishing workflows, digital asset handling, content scheduling, platform administration, audience reporting, and campaign operations.<\/div>\n <div class=\"pbar\"><div class=\"pbar-fill\"><\/div><\/div>\n <\/div>\n <div class=\"pitem sr d2\" style=\"--w:91%\">\n <div class=\"ps\"><div class=\"psn\">05<\/div><i class=\"fas fa-mobile-alt psi\"><\/i><\/div>\n <div class=\"pt\">Digital Channel & Customer Experience Support<\/div>\n <div class=\"pd\">Capacity for self-service platforms, digital support channels, customer journey improvements, service notifications, user experience programs, and subscriber engagement workflows.<\/div>\n <div class=\"pbar\"><div class=\"pbar-fill\"><\/div><\/div>\n <\/div>\n <div class=\"pitem sr d3\" style=\"--w:85%\">\n <div class=\"ps\"><div class=\"psn\">06<\/div><i class=\"fas fa-truck psi\"><\/i><\/div>\n <div class=\"pt\">Field, Vendor & Technical Coordination Support<\/div>\n <div class=\"pd\">Support for dispatch activity, technician updates, field-service documentation, vendor coordination, rollout tracking, service completion, and field-to-customer communication.<\/div>\n <div class=\"pbar\"><div class=\"pbar-fill\"><\/div><\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BLOCK 6 \u2014 WHY DT SOLUTIONS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section id=\"b6\">\n <div class=\"b6-glow\"><\/div>\n <div class=\"container\">\n <div class=\"b6-in\">\n\n <div class=\"b6-sticky sr left\">\n <div class=\"tag\">Why DT Solutions<\/div>\n <h2 class=\"b6-h2\">Why DT Solutions<\/h2>\n <p class=\"b6-sub\">DT Solutions brings practical delivery capacity to telecommunications and media environments where service responsiveness, subscriber experience, platform reliability, content movement, and operational coordination must stay aligned.<\/p>\n <div class=\"b6-badge\">\n <i class=\"fas fa-shield-check\"><\/i>\n <span>Practical delivery for<br>always-on environments<\/span>\n <\/div>\n <div class=\"icon-cluster\">\n <div class=\"ic-item ic-b\"><i class=\"fas fa-signal\"><\/i><\/div>\n <div class=\"ic-item ic-o\"><i class=\"fas fa-users\"><\/i><\/div>\n <div class=\"ic-item ic-p\"><i class=\"fas fa-server\"><\/i><\/div>\n <div class=\"ic-item ic-b\"><i class=\"fas fa-play-circle\"><\/i><\/div>\n <div class=\"ic-item ic-o\"><i class=\"fas fa-sync-alt\"><\/i><\/div>\n <div class=\"ic-item ic-p\"><i class=\"fas fa-project-diagram\"><\/i><\/div>\n <div class=\"ic-item ic-b\"><i class=\"fas fa-chart-line\"><\/i><\/div>\n <div class=\"ic-item ic-o\"><i class=\"fas fa-headset\"><\/i><\/div>\n <\/div>\n <\/div>\n\n <div class=\"sr right d2\">\n <div class=\"diffs\">\n <div class=\"diff\">\n <div class=\"d-num-wrap\"><div class=\"d-num\">01<\/div><i class=\"fas fa-sitemap d-ico\"><\/i><\/div>\n <div class=\"dt\">\n <h3>Connected-Service Operating Understanding<\/h3>\n <p>We understand the pace of telecommunications and media environments, where outages, activations, platform updates, content workflows, and customer interactions can quickly affect service experience.<\/p>\n <\/div>\n <\/div>\n <div class=\"diff\">\n <div class=\"d-num-wrap\"><div class=\"d-num\">02<\/div><i class=\"fas fa-user-check d-ico\"><\/i><\/div>\n <div class=\"dt\">\n <h3>Support Built Around Subscriber Impact<\/h3>\n <p>Our model helps organizations add capacity where service requests, technical issues, digital channels, billing-adjacent activity, and customer communications directly shape subscriber satisfaction.<\/p>\n <\/div>\n <\/div>\n <div class=\"diff\">\n <div class=\"d-num-wrap\"><div class=\"d-num\">03<\/div><i class=\"fas fa-server d-ico\"><\/i><\/div>\n <div class=\"dt\">\n <h3>Capacity for Always-On Network and Platform Environments<\/h3>\n <p>DT Solutions supports teams working across uptime demands, service assurance, streaming availability, operational queues, incident follow-up, and fast-moving platform activity.<\/p>\n <\/div>\n <\/div>\n <div class=\"diff\">\n <div class=\"d-num-wrap\"><div class=\"d-num\">04<\/div><i class=\"fas fa-project-diagram d-ico\"><\/i><\/div>\n <div class=\"dt\">\n <h3>Coordination Across Network, Field, Platform, and Content Teams<\/h3>\n <p>We help telecom and media organizations keep execution connected across service operations, field activity, platform ownership, vendor workflows, content movement, and customer-facing teams.<\/p>\n <\/div>\n <\/div>\n <div class=\"diff\">\n <div class=\"d-num-wrap\"><div class=\"d-num\">05<\/div><i class=\"fas fa-sync-alt d-ico\"><\/i><\/div>\n <div class=\"dt\">\n <h3>Adaptability for Changing Digital Consumption Patterns<\/h3>\n <p>Our support model fits environments adjusting to streaming growth, self-service adoption, subscriber behaviour shifts, content velocity, platform change, and evolving connected-service expectations.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BLOCK 7 \u2014 CTA\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section id=\"b7\">\n <div class=\"b7-orb\"><\/div>\n <div class=\"b7-grid\"><\/div>\n <div class=\"container\">\n <div class=\"b7-in\">\n\n <div class=\"tag center sr\" style=\"justify-content:center;margin-bottom:28px\">Connect With DT Solutions<\/div>\n\n <h2 class=\"b7-h2 sr d1\">\n Strengthen the capacity behind connected services,<br>\n <span class=\"grad-text\">content platforms, and subscriber experience<\/span>\n <\/h2>\n\n <p class=\"b7-sub sr d2\">Connect with DT Solutions to support telecommunications and media environments where network operations, service activation, customer care, content workflows, digital channels, and platform performance must stay responsive at scale.<\/p>\n\n <div class=\"ctabuts sr d3\">\n <a href=\"#\" class=\"btn-cp\">\n <i class=\"fas fa-headset\"><\/i>\n Discuss Telecommunications & Media Support\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/a>\n <div class=\"btn-cs-wrap\">\n <a href=\"#\" class=\"btn-cs\">\n <i class=\"fas fa-compass\"><\/i>\n Explore Telecommunications & Media Delivery Support\n <\/a>\n <p class=\"csl\">Practical delivery capacity for network teams, subscriber operations, media platforms, service activation groups, digital channels, and field-service coordination.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"cta-close sr d4\">\n <p>Build dependable support across the service functions that keep networks performing, content moving, subscribers supported, and connected experiences available.<\/p>\n <\/div>\n\n <\/div>\n <\/div>\n\n <svg class=\"swv\" viewBox=\"0 0 1440 80\" preserveAspectRatio=\"none\">\n <path d=\"M0,40 Q120,10 240,40 Q360,70 480,40 Q600,10 720,40 Q840,70 960,40 Q1080,10 1200,40 Q1320,70 1440,40\" fill=\"none\" stroke=\"rgba(0,170,255,.3)\" stroke-width=\"1.5\"\/>\n <path d=\"M0,55 Q180,25 360,55 Q540,85 720,55 Q900,25 1080,55 Q1260,85 1440,55\" fill=\"none\" stroke=\"rgba(155,92,255,.2)\" stroke-width=\"1\"\/>\n <\/svg>\n<\/section>\n\n\n<script>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CURSOR\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst cur = document.getElementById('cursor');\nconst curR = document.getElementById('cursor-ring');\nlet mx = 0, my = 0, rx = 0, ry = 0;\n\ndocument.addEventListener('mousemove', e => {\n mx = e.clientX; my = e.clientY;\n cur.style.left = mx + 'px'; cur.style.top = my + 'px';\n});\n\nfunction animCursor() {\n rx += (mx - rx) * .14; ry += (my - ry) * .14;\n curR.style.left = rx + 'px'; curR.style.top = ry + 'px';\n requestAnimationFrame(animCursor);\n}\nanimCursor();\n\ndocument.querySelectorAll('a,button,.cap,.kp,.diff,.cv-card,.pitem').forEach(el => {\n el.addEventListener('mouseenter', () => {\n cur.style.width = '20px'; cur.style.height = '20px';\n curR.style.width = '54px'; curR.style.height = '54px';\n curR.style.borderColor = 'rgba(0,170,255,.8)';\n });\n el.addEventListener('mouseleave', () => {\n cur.style.width = '12px'; cur.style.height = '12px';\n curR.style.width = '36px'; curR.style.height = '36px';\n curR.style.borderColor = 'rgba(0,170,255,.5)';\n });\n});\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SCROLL PROGRESS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst spbar = document.getElementById('spbar');\nwindow.addEventListener('scroll', () => {\n const pct = window.scrollY \/ (document.documentElement.scrollHeight - window.innerHeight);\n spbar.style.width = (pct * 100) + '%';\n});\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n THREE.JS HERO BG\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n(function(){\n const canvas = document.getElementById('three-canvas');\n const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n\n const scene = new THREE.Scene();\n const camera = new THREE.PerspectiveCamera(60, 1, .1, 1000);\n camera.position.z = 80;\n\n function resize() {\n const w = canvas.offsetWidth, h = canvas.offsetHeight;\n renderer.setSize(w, h, false);\n camera.aspect = w \/ h;\n camera.updateProjectionMatrix();\n }\n resize();\n window.addEventListener('resize', resize);\n\n \/\/ Particle field \u2014 network nodes\n const N = 200;\n const geo = new THREE.BufferGeometry();\n const pos = new Float32Array(N * 3);\n const col = new Float32Array(N * 3);\n const sizes = new Float32Array(N);\n const colors = [\n [0, .67, 1], \/\/ cyan-blue\n [.61, .36, 1], \/\/ purple\n [1, .42, 0], \/\/ orange\n ];\n for (let i = 0; i < N; i++) {\n pos[i*3] = (Math.random() - .5) * 200;\n pos[i*3+1] = (Math.random() - .5) * 120;\n pos[i*3+2] = (Math.random() - .5) * 80;\n const c = colors[Math.floor(Math.random() * 3)];\n col[i*3] = c[0]; col[i*3+1] = c[1]; col[i*3+2] = c[2];\n sizes[i] = .5 + Math.random() * 1.5;\n }\n geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));\n geo.setAttribute('color', new THREE.BufferAttribute(col, 3));\n geo.setAttribute('size', new THREE.BufferAttribute(sizes, 1));\n\n const mat = new THREE.PointsMaterial({\n size: 1.2, vertexColors: true, transparent: true, opacity: .7,\n sizeAttenuation: true,\n });\n const pts = new THREE.Points(geo, mat);\n scene.add(pts);\n\n \/\/ Lines connecting nearby nodes\n const lineMat = new THREE.LineBasicMaterial({\n color: 0x0088ff, transparent: true, opacity: .07, vertexColors: false,\n });\n const lineGeo = new THREE.BufferGeometry();\n const linePos = [];\n for (let i = 0; i < N; i++) {\n for (let j = i + 1; j < N; j++) {\n const dx = pos[i*3] - pos[j*3];\n const dy = pos[i*3+1] - pos[j*3+1];\n const dz = pos[i*3+2] - pos[j*3+2];\n const d = Math.sqrt(dx*dx + dy*dy + dz*dz);\n if (d < 28) {\n linePos.push(pos[i*3], pos[i*3+1], pos[i*3+2]);\n linePos.push(pos[j*3], pos[j*3+1], pos[j*3+2]);\n }\n }\n }\n lineGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(linePos), 3));\n const lines = new THREE.LineSegments(lineGeo, lineMat);\n scene.add(lines);\n\n \/\/ Central signal sphere\n const sphereGeo = new THREE.SphereGeometry(8, 32, 32);\n const sphereMat = new THREE.MeshBasicMaterial({\n color: 0x0044aa, wireframe: true, transparent: true, opacity: .12,\n });\n const sphere = new THREE.Mesh(sphereGeo, sphereMat);\n sphere.position.set(40, 0, 0);\n scene.add(sphere);\n\n \/\/ Torus rings\n const rings = [];\n [[12, .3, 0x0088ff, .08], [18, .4, 0x7733ff, .05], [24, .5, 0xff6600, .04]].forEach(([r, t, c, o]) => {\n const g = new THREE.TorusGeometry(r, t, 8, 80);\n const m = new THREE.MeshBasicMaterial({ color: c, transparent: true, opacity: o });\n const mesh = new THREE.Mesh(g, m);\n mesh.position.set(40, 0, 0);\n scene.add(mesh); rings.push(mesh);\n });\n\n \/\/ Mouse parallax\n let tmx = 0, tmy = 0;\n document.addEventListener('mousemove', e => {\n tmx = (e.clientX \/ window.innerWidth - .5) * 2;\n tmy = (e.clientY \/ window.innerHeight - .5) * 2;\n });\n\n let t = 0;\n function animate() {\n requestAnimationFrame(animate);\n t += .005;\n\n pts.rotation.y = t * .04 + tmx * .06;\n pts.rotation.x = tmy * .04;\n lines.rotation.y = pts.rotation.y;\n lines.rotation.x = pts.rotation.x;\n\n sphere.rotation.y = t * .3;\n sphere.rotation.x = t * .15;\n rings[0].rotation.y = t * .5;\n rings[0].rotation.z = t * .25;\n rings[1].rotation.x = -t * .35;\n rings[1].rotation.z = t * .2;\n rings[2].rotation.y = -t * .2;\n rings[2].rotation.x = t * .3;\n\n renderer.render(scene, camera);\n }\n animate();\n})();\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HERO 2D CANVAS \u2014 Node network\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n(function(){\n const c = document.getElementById('hero-canvas2d');\n const ctx = c.getContext('2d');\n function resize(){ c.width = c.offsetWidth; c.height = c.offsetHeight; }\n resize();\n window.addEventListener('resize', resize);\n\n const N = 52;\n const nodes = [];\n const cArr = ['rgba(0,170,255', 'rgba(255,107,0', 'rgba(155,92,255'];\n\n for (let i = 0; i < N; i++) {\n nodes.push({\n x: Math.random(), y: Math.random(), z: Math.random() * 2 - 1,\n vx: (Math.random() - .5) * .00022, vy: (Math.random() - .5) * .00022,\n vz: (Math.random() - .5) * .0015,\n r: 1.5 + Math.random() * 2.5,\n t: Math.floor(Math.random() * 3),\n ph: Math.random() * Math.PI * 2, ps: .015 + Math.random() * .02\n });\n }\n\n let tm = 0;\n function gc(t, a){ return cArr[t] + ',' + a + ')'; }\n function proj(x, y, z){\n const w = c.width, h = c.height;\n const s = 1.5 \/ (1.5 + z * .25);\n return { x: (x-.5)*w*s + w\/2, y: (y-.5)*h*s + h\/2, s };\n }\n\n function draw(){\n ctx.clearRect(0, 0, c.width, c.height);\n tm += .007;\n nodes.forEach(n => {\n n.x += n.vx; n.y += n.vy; n.z += n.vz; n.ph += n.ps;\n if(n.x<0||n.x>1) n.vx*=-1;\n if(n.y<0||n.y>1) n.vy*=-1;\n if(n.z<-1||n.z>1) n.vz*=-1;\n });\n\n for (let i = 0; i < nodes.length; i++) {\n for (let j = i+1; j < nodes.length; j++) {\n const a = nodes[i], b = nodes[j];\n const dx = a.x - b.x, dy = a.y - b.y;\n const d = Math.sqrt(dx*dx + dy*dy);\n if (d < .25) {\n const al = (1 - d\/.25) * .18;\n const pa = proj(a.x, a.y, a.z), pb = proj(b.x, b.y, b.z);\n const g = ctx.createLinearGradient(pa.x, pa.y, pb.x, pb.y);\n g.addColorStop(0, gc(a.t, al));\n g.addColorStop(1, gc(b.t, al));\n ctx.beginPath(); ctx.moveTo(pa.x, pa.y); ctx.lineTo(pb.x, pb.y);\n ctx.strokeStyle = g; ctx.lineWidth = .6; ctx.stroke();\n\n \/\/ signal packet\n const tp = (tm * .35 + i * .22) % 1;\n const px = pa.x + (pb.x - pa.x) * tp, py = pa.y + (pb.y - pa.y) * tp;\n if (Math.floor((tm + i) * .2) % 3 === 0) {\n ctx.beginPath(); ctx.arc(px, py, 1.8, 0, Math.PI*2);\n ctx.fillStyle = gc(a.t, .6); ctx.fill();\n }\n }\n }\n }\n\n nodes.forEach(n => {\n const p = proj(n.x, n.y, n.z);\n const pr = n.r * p.s * (.9 + .1 * Math.sin(n.ph));\n const al = .4 + .35 * (n.z + 1) * .5;\n const gr = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, pr * 5);\n gr.addColorStop(0, gc(n.t, al * .5));\n gr.addColorStop(1, gc(n.t, 0));\n ctx.beginPath(); ctx.arc(p.x, p.y, pr * 5, 0, Math.PI*2);\n ctx.fillStyle = gr; ctx.fill();\n ctx.beginPath(); ctx.arc(p.x, p.y, pr, 0, Math.PI*2);\n ctx.fillStyle = gc(n.t, al); ctx.fill();\n });\n\n requestAnimationFrame(draw);\n }\n draw();\n})();\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SIGNAL TOWER CANVAS (B4)\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n(function(){\n const c = document.getElementById('signal-canvas');\n if (!c) return;\n const ctx = c.getContext('2d');\n\n function resize(){ c.width = c.offsetWidth; c.height = c.offsetHeight; }\n resize();\n window.addEventListener('resize', resize);\n\n let t = 0;\n\n function draw(){\n const w = c.width, h = c.height;\n ctx.clearRect(0, 0, w, h);\n t += .012;\n\n const cx = w \/ 2, cy = h \/ 2;\n\n \/\/ Radial grid\n ctx.save();\n for (let i = 1; i <= 5; i++) {\n ctx.beginPath();\n ctx.arc(cx, cy, i * Math.min(w, h) * .085, 0, Math.PI * 2);\n ctx.strokeStyle = `rgba(0,170,255,${.03 + i * .007})`;\n ctx.lineWidth = .5;\n ctx.stroke();\n }\n \/\/ spokes\n for (let a = 0; a < 12; a++) {\n const ang = (a \/ 12) * Math.PI * 2;\n ctx.beginPath();\n ctx.moveTo(cx, cy);\n ctx.lineTo(cx + Math.cos(ang) * Math.min(w, h) * .43, cy + Math.sin(ang) * Math.min(w, h) * .43);\n ctx.strokeStyle = 'rgba(0,170,255,.04)';\n ctx.lineWidth = .5; ctx.stroke();\n }\n ctx.restore();\n\n \/\/ Rotating outer ring with nodes\n const R = Math.min(w, h) * .38;\n const nodeCount = 8;\n const nodeData = [];\n for (let i = 0; i < nodeCount; i++) {\n const ang = (i \/ nodeCount) * Math.PI * 2 + t * .4;\n const nx = cx + Math.cos(ang) * R;\n const ny = cy + Math.sin(ang) * R;\n nodeData.push({ x: nx, y: ny, i });\n\n const colors = ['rgba(0,170,255', 'rgba(155,92,255', 'rgba(255,107,0'];\n const co = colors[i % 3];\n const pulse = .5 + .5 * Math.sin(t * 2 + i);\n\n \/\/ glow\n const gr = ctx.createRadialGradient(nx, ny, 0, nx, ny, 14);\n gr.addColorStop(0, co + `,${.35 * pulse})`);\n gr.addColorStop(1, co + ',0)');\n ctx.beginPath(); ctx.arc(nx, ny, 14, 0, Math.PI * 2);\n ctx.fillStyle = gr; ctx.fill();\n\n \/\/ dot\n ctx.beginPath(); ctx.arc(nx, ny, 4, 0, Math.PI * 2);\n ctx.fillStyle = co + `,${.7 + .3 * pulse})`; ctx.fill();\n }\n\n \/\/ Connect all nodes to center\n nodeData.forEach(nd => {\n const prog = ((t * .35 + nd.i * .4) % 1);\n const px = nd.x + (cx - nd.x) * prog;\n const py = nd.y + (cy - nd.y) * prog;\n\n ctx.beginPath();\n ctx.moveTo(nd.x, nd.y); ctx.lineTo(cx, cy);\n ctx.strokeStyle = 'rgba(0,170,255,.07)'; ctx.lineWidth = .6; ctx.stroke();\n\n ctx.beginPath(); ctx.arc(px, py, 2.5, 0, Math.PI * 2);\n ctx.fillStyle = 'rgba(0,170,255,.7)'; ctx.fill();\n });\n\n \/\/ Connect adjacent nodes\n for (let i = 0; i < nodeData.length; i++) {\n const a = nodeData[i], b = nodeData[(i + 1) % nodeData.length];\n ctx.beginPath();\n ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y);\n ctx.strokeStyle = 'rgba(155,92,255,.08)'; ctx.lineWidth = .5; ctx.stroke();\n }\n\n \/\/ Inner rotating ring\n const R2 = Math.min(w, h) * .22;\n const ic2 = 6;\n const nodes2 = [];\n for (let i = 0; i < ic2; i++) {\n const ang = (i \/ ic2) * Math.PI * 2 - t * .7;\n nodes2.push({ x: cx + Math.cos(ang) * R2, y: cy + Math.sin(ang) * R2 });\n }\n nodes2.forEach(nd => {\n const gr2 = ctx.createRadialGradient(nd.x, nd.y, 0, nd.x, nd.y, 10);\n gr2.addColorStop(0, 'rgba(255,107,0,.25)');\n gr2.addColorStop(1, 'rgba(255,107,0,0)');\n ctx.beginPath(); ctx.arc(nd.x, nd.y, 10, 0, Math.PI * 2);\n ctx.fillStyle = gr2; ctx.fill();\n ctx.beginPath(); ctx.arc(nd.x, nd.y, 3, 0, Math.PI * 2);\n ctx.fillStyle = 'rgba(255,107,0,.7)'; ctx.fill();\n });\n\n \/\/ Center glowing core\n const pulse = .7 + .3 * Math.sin(t * 3);\n const cg = ctx.createRadialGradient(cx, cy, 0, cx, cy, 40 * pulse);\n cg.addColorStop(0, 'rgba(0,170,255,.5)');\n cg.addColorStop(.4, 'rgba(155,92,255,.18)');\n cg.addColorStop(1, 'rgba(0,170,255,0)');\n ctx.beginPath(); ctx.arc(cx, cy, 40 * pulse, 0, Math.PI * 2);\n ctx.fillStyle = cg; ctx.fill();\n\n ctx.beginPath(); ctx.arc(cx, cy, 10, 0, Math.PI * 2);\n ctx.fillStyle = `rgba(0,170,255,${.8 + .2 * pulse})`; ctx.fill();\n\n \/\/ Outer glow ring\n ctx.beginPath();\n ctx.arc(cx, cy, 10, 0, Math.PI * 2);\n ctx.strokeStyle = 'rgba(0,170,255,.4)'; ctx.lineWidth = 1; ctx.stroke();\n\n \/\/ Signal waves (arcs emanating outward)\n for (let w2 = 1; w2 <= 3; w2++) {\n const pct = ((t * .4 + w2 * .33) % 1);\n const maxR = Math.min(w, h) * .44;\n const rr = pct * maxR;\n const opacity = (1 - pct) * .2;\n ctx.beginPath();\n ctx.arc(cx, cy, rr, 0, Math.PI * 2);\n ctx.strokeStyle = `rgba(0,170,255,${opacity})`;\n ctx.lineWidth = 1; ctx.stroke();\n }\n\n requestAnimationFrame(draw);\n }\n draw();\n})();\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SCROLL REVEAL\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst srEls = document.querySelectorAll('.sr');\nconst io = new IntersectionObserver(es => {\n es.forEach(e => {\n if (e.isIntersecting) {\n e.target.classList.add('in');\n io.unobserve(e.target);\n }\n });\n}, { threshold: .1, rootMargin: '0px 0px -50px 0px' });\nsrEls.forEach(el => io.observe(el));\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECTOR TABS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\ndocument.querySelectorAll('.stab').forEach(tab => {\n tab.addEventListener('click', () => {\n document.querySelectorAll('.stab').forEach(t => t.classList.remove('act'));\n document.querySelectorAll('.cpanel').forEach(p => p.classList.remove('act'));\n tab.classList.add('act');\n document.getElementById(tab.dataset.p).classList.add('act');\n });\n});\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SMOOTH SCROLL\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\ndocument.getElementById('hero-cta-btn').addEventListener('click', e => {\n e.preventDefault();\n document.getElementById('b3').scrollIntoView({ behavior: 'smooth' });\n});\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PBAR ANIMATION (on reveal)\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst pbarObs = new IntersectionObserver(es => {\n es.forEach(e => {\n if (e.isIntersecting) {\n e.target.classList.add('in');\n pbarObs.unobserve(e.target);\n }\n });\n}, { threshold: .2 });\ndocument.querySelectorAll('.pitem').forEach(el => pbarObs.observe(el));\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PARALLAX GLOW\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nwindow.addEventListener('scroll', () => {\n const sy = window.scrollY;\n document.querySelectorAll('.hero-glow').forEach((g, i) => {\n g.style.transform = `translateY(${sy * (.08 + i * .03)}px)`;\n });\n});\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Telecommunications & Media \u2014 DT Solutions DT Solutions \u00b7 Sector Practice Telecommunications& Media Support connected service environments where networks, platforms, content, and customer experience must perform at scale DT Solutions supports telecommunications providers, media organizations, digital platform teams, and service operations groups with talent, delivery, and advisory capacity across environments where connectivity, subscriber experience, content […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2978","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/digi.alphanzo.com\/index.php?rest_route=\/wp\/v2\/pages\/2978","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digi.alphanzo.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digi.alphanzo.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digi.alphanzo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digi.alphanzo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2978"}],"version-history":[{"count":10,"href":"https:\/\/digi.alphanzo.com\/index.php?rest_route=\/wp\/v2\/pages\/2978\/revisions"}],"predecessor-version":[{"id":2989,"href":"https:\/\/digi.alphanzo.com\/index.php?rest_route=\/wp\/v2\/pages\/2978\/revisions\/2989"}],"wp:attachment":[{"href":"https:\/\/digi.alphanzo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}