{"id":194,"date":"2026-09-16T11:44:19","date_gmt":"2026-09-16T11:44:19","guid":{"rendered":"https:\/\/www.pershatech.ir\/?page_id=194"},"modified":"2026-09-18T07:33:05","modified_gmt":"2026-09-18T07:33:05","slug":"%d9%81%d9%86%d8%a7%d9%88%d8%b1%db%8c-%d9%87%d8%a7%db%8c-%d9%86%d9%88%d8%b8%d9%87%d9%88%d8%b1","status":"publish","type":"page","link":"https:\/\/www.pershatech.ir\/?page_id=194","title":{"rendered":"\u0641\u0646\u0627\u0648\u0631\u06cc \u0647\u0627\u06cc \u0646\u0648\u0638\u0647\u0648\u0631"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   SMART STRUCT \/ PERSHATECH\n   TECHNOLOGY UNIVERSE\n   PRODUCTION CSS\n   ========================================================= *\/\n\n\n\/* =========================================================\n   01. ROOT COMPONENT\n   ========================================================= *\/\n\n#smart-technology-universe.stu {\n\n    --stu-bg-1: #02050a;\n    --stu-bg-2: #030912;\n    --stu-bg-3: #010409;\n\n    --stu-text: #ffffff;\n    --stu-muted: rgba(220,240,250,.58);\n\n    --stu-board-border: rgba(90,210,255,.14);\n\n    --stu-gap: 13px;\n\n    position: relative;\n\n    width: 100%;\n    min-height: 820px;\n\n    overflow: hidden;\n\n    isolation: isolate;\n\n    color: var(--stu-text);\n\n    font-family:\n        Inter,\n        Arial,\n        Helvetica,\n        sans-serif;\n\n    background:\n        radial-gradient(\n            circle at 50% 48%,\n            rgba(15,65,100,.24),\n            transparent 34%\n        ),\n        radial-gradient(\n            circle at 15% 20%,\n            rgba(75,35,130,.12),\n            transparent 28%\n        ),\n        linear-gradient(\n            180deg,\n            var(--stu-bg-1) 0%,\n            var(--stu-bg-2) 50%,\n            var(--stu-bg-3) 100%\n        );\n}\n\n\n\/* =========================================================\n   02. BOX SIZING\n   ========================================================= *\/\n\n#smart-technology-universe.stu *,\n#smart-technology-universe.stu *::before,\n#smart-technology-universe.stu *::after {\n\n    box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   03. HEADER\n   ========================================================= *\/\n\n#smart-technology-universe .stu__header {\n\n    position: relative;\n\n    z-index: 20;\n\n    padding:\n        42px\n        20px\n        0;\n\n    text-align: center;\n\n    pointer-events: none;\n}\n\n\n#smart-technology-universe .stu__eyebrow {\n\n    margin-bottom: 12px;\n\n    color: #62ddff;\n\n    font-size: 10px;\n\n    font-weight: 800;\n\n    letter-spacing: .28em;\n\n    text-transform: uppercase;\n}\n\n\n#smart-technology-universe .stu__title {\n\n    margin: 0;\n\n    color: #ffffff;\n\n    font-size:\n        clamp(30px, 4vw, 52px);\n\n    line-height: 1;\n\n    font-weight: 850;\n\n    letter-spacing: -.04em;\n\n    text-shadow:\n        0 0 24px rgba(0,220,255,.18);\n}\n\n\n#smart-technology-universe .stu__subtitle {\n\n    margin:\n        12px\n        0\n        0;\n\n    color: var(--stu-muted);\n\n    font-size: 12px;\n\n    line-height: 1.4;\n\n    letter-spacing: .08em;\n}\n\n\n\/* =========================================================\n   04. BOARD WRAPPER\n   ========================================================= *\/\n\n#smart-technology-universe .stu__board-wrap {\n\n    position: relative;\n\n    width:\n        min(\n            1160px,\n            calc(100% - 40px)\n        );\n\n    height: 600px;\n\n    margin:\n        28px\n        auto\n        0;\n\n    perspective: 1300px;\n\n    perspective-origin:\n        50% 46%;\n}\n\n\n\/* =========================================================\n   05. BOARD\n   ========================================================= *\/\n\n#smart-technology-universe .stu__board {\n\n    position: absolute;\n\n    inset: 0;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(5, minmax(0, 1fr));\n\n    grid-template-rows:\n        repeat(6, minmax(0, 1fr));\n\n    gap: var(--stu-gap);\n\n    padding: 18px;\n\n    transform:\n        rotateX(9deg)\n        rotateY(-2deg);\n\n    transform-style: preserve-3d;\n\n    transition:\n        transform\n        .65s\n        cubic-bezier(.2,.75,.2,1);\n}\n\n\n\/* =========================================================\n   06. BOARD FLOOR\n   ========================================================= *\/\n\n#smart-technology-universe .stu__board::before {\n\n    content: \"\";\n\n    position: absolute;\n\n    inset: 0;\n\n    z-index: -2;\n\n    border:\n        1px solid\n        var(--stu-board-border);\n\n    border-radius: 20px;\n\n    background:\n\n        linear-gradient(\n            90deg,\n            rgba(255,255,255,.018) 1px,\n            transparent 1px\n        ),\n\n        linear-gradient(\n            rgba(255,255,255,.018) 1px,\n            transparent 1px\n        );\n\n    background-size:\n        20% 16.66%;\n\n    box-shadow:\n        0 30px 90px rgba(0,0,0,.55),\n        inset 0 0 70px rgba(0,120,180,.05);\n}\n\n\n\/* =========================================================\n   07. NODE BASE\n   ========================================================= *\/\n\n#smart-technology-universe .stu-node {\n\n    --node-color: #00e5ff;\n\n    position: relative;\n\n    display: block;\n\n    min-width: 0;\n    min-height: 0;\n\n    padding: 0;\n\n    border:\n        1px solid\n        rgba(255,255,255,.10);\n\n    border-radius: 11px;\n\n    outline: none;\n\n    overflow: visible;\n\n    color: #ffffff;\n\n    cursor: pointer;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(15,30,45,.82),\n            rgba(2,9,17,.92)\n        );\n\n    transform:\n        translate3d(0,0,0);\n\n    transform-style: preserve-3d;\n\n    transition:\n\n        transform\n        .55s\n        cubic-bezier(.16,.8,.2,1),\n\n        opacity\n        .35s\n        ease,\n\n        border-color\n        .35s\n        ease,\n\n        box-shadow\n        .35s\n        ease,\n\n        background\n        .35s\n        ease;\n\n    will-change:\n        transform;\n}\n\n\n\/* =========================================================\n   08. CHESSBOARD ALTERNATION\n   ========================================================= *\/\n\n#smart-technology-universe .stu-node:nth-child(odd) {\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(18,38,54,.84),\n            rgba(2,9,17,.93)\n        );\n}\n\n\n#smart-technology-universe .stu-node:nth-child(even) {\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(30,45,58,.78),\n            rgba(3,10,18,.94)\n        );\n}\n\n\n\/* =========================================================\n   09. NODE TOP DEPTH\n   ========================================================= *\/\n\n#smart-technology-universe .stu-node::before {\n\n    content: \"\";\n\n    position: absolute;\n\n    left: 7px;\n    right: 7px;\n\n    top: -4px;\n\n    height: 4px;\n\n    border-radius:\n        4px\n        4px\n        0\n        0;\n\n    background:\n        rgba(255,255,255,.08);\n\n    transform:\n        translateZ(-1px);\n\n    opacity: .8;\n}\n\n\n\/* =========================================================\n   10. NODE NUMBER\n   ========================================================= *\/\n\n#smart-technology-universe .stu-node__number {\n\n    position: absolute;\n\n    top: 8px;\n    left: 10px;\n\n    z-index: 5;\n\n    color:\n        var(--node-color);\n\n    font-size: 8px;\n\n    font-weight: 800;\n\n    letter-spacing: .12em;\n\n    opacity: .85;\n}\n\n\n\/* =========================================================\n   11. CORE\n   ========================================================= *\/\n\n#smart-technology-universe .stu-node__core {\n\n    position: absolute;\n\n    top: 50%;\n    left: 50%;\n\n    width: 34px;\n    height: 34px;\n\n    border-radius: 50%;\n\n    background:\n        radial-gradient(\n            circle at 35% 30%,\n            #ffffff 0%,\n            var(--node-color) 18%,\n            var(--node-color) 48%,\n            rgba(0,0,0,.80) 100%\n        );\n\n    box-shadow:\n        0 0 8px var(--node-color),\n        0 0 24px var(--node-color),\n        0 0 45px rgba(0,229,255,.20);\n\n    transform:\n        translate3d(-50%,-50%,22px);\n\n    transform-style: preserve-3d;\n\n    transition:\n        transform\n        .55s\n        cubic-bezier(.16,.8,.2,1),\n\n        width\n        .45s\n        ease,\n\n        height\n        .45s\n        ease;\n}\n\n\n\/* =========================================================\n   12. CORE RING\n   ========================================================= *\/\n\n#smart-technology-universe .stu-node__core::before {\n\n    content: \"\";\n\n    position: absolute;\n\n    inset: -9px;\n\n    border:\n        1px solid\n        var(--node-color);\n\n    border-radius: 50%;\n\n    opacity: .55;\n\n    animation:\n        stu-core-spin\n        5s\n        linear\n        infinite;\n}\n\n\n@keyframes stu-core-spin {\n\n    from {\n        transform: rotate(0deg);\n    }\n\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n\n\/* =========================================================\n   13. NODE TITLE\n   ========================================================= *\/\n\n#smart-technology-universe .stu-node__title {\n\n    position: absolute;\n\n    left: 8px;\n    right: 8px;\n    bottom: 9px;\n\n    z-index: 6;\n\n    color:\n        rgba(255,255,255,.86);\n\n    font-size:\n        clamp(8px,.8vw,11px);\n\n    font-weight: 750;\n\n    line-height: 1.2;\n\n    letter-spacing: -.01em;\n\n    text-align: center;\n\n    text-shadow:\n        0 2px 7px #000;\n}\n\n\n\/* =========================================================\n   14. HOVER\n   ========================================================= *\/\n\n#smart-technology-universe .stu-node:hover {\n\n    z-index: 50;\n\n    border-color:\n        var(--node-color);\n\n    box-shadow:\n        0 0 0 1px\n        rgba(255,255,255,.08),\n\n        0 0 28px\n        rgba(0,229,255,.16);\n\n    transform:\n        translate3d(0,0,42px)\n        rotateX(-2deg)\n        rotateY(2deg)\n        scale(1.035);\n}\n\n\n#smart-technology-universe .stu-node:hover\n.stu-node__core {\n\n    width: 42px;\n    height: 42px;\n\n    transform:\n        translate3d(-50%,-50%,36px);\n}\n\n\n\/* =========================================================\n   15. KEYBOARD FOCUS\n   ========================================================= *\/\n\n#smart-technology-universe .stu-node:focus-visible {\n\n    z-index: 60;\n\n    border-color:\n        var(--node-color);\n\n    box-shadow:\n        0 0 0 2px\n        rgba(255,255,255,.95),\n\n        0 0 0 5px\n        rgba(0,229,255,.16);\n}\n\n\n\/* =========================================================\n   16. SELECTED NODE\n   ========================================================= *\/\n\n#smart-technology-universe .stu-node.is-selected {\n\n    z-index: 100;\n\n    border-color:\n        var(--node-color);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(15,30,45,.97),\n            rgba(2,8,15,.97)\n        );\n\n    box-shadow:\n\n        0 0 0 1px\n        var(--node-color),\n\n        0 0 35px\n        rgba(0,229,255,.30),\n\n        0 25px 70px\n        rgba(0,0,0,.60);\n\n    transform:\n        translate3d(0,0,150px)\n        rotateX(-5deg)\n        rotateY(5deg)\n        scale(1.12);\n}\n\n\n\/* =========================================================\n   17. SELECTED CORE\n   ========================================================= *\/\n\n#smart-technology-universe\n.stu-node.is-selected\n.stu-node__core {\n\n    width: 70px;\n    height: 70px;\n\n    transform:\n        translate3d(-50%,-50%,80px);\n\n    box-shadow:\n\n        0 0 12px\n        var(--node-color),\n\n        0 0 38px\n        var(--node-color),\n\n        0 0 85px\n        rgba(0,229,255,.55);\n}\n\n\n\/* =========================================================\n   18. SELECTED TITLE\n   ========================================================= *\/\n\n#smart-technology-universe\n.stu-node.is-selected\n.stu-node__title {\n\n    bottom: 15px;\n\n    color: #ffffff;\n\n    font-size:\n        clamp(10px,1vw,14px);\n\n    font-weight: 850;\n}\n\n\n\/* =========================================================\n   19. DIM OTHER NODES\n   ========================================================= *\/\n\n#smart-technology-universe\n.stu__board.has-selection\n.stu-node:not(.is-selected) {\n\n    opacity: .46;\n\n    transform:\n        translate3d(0,0,-14px)\n        scale(.96);\n}\n\n\n#smart-technology-universe\n.stu__board.has-selection\n.stu-node:hover {\n\n    opacity: 1;\n\n    transform:\n        translate3d(0,0,35px)\n        scale(1.025);\n}\n\n\n\/* =========================================================\n   20. INFORMATION LAYER\n   ========================================================= *\/\n\n#smart-technology-universe .stu-node__info {\n\n    position: absolute;\n\n    top: 50%;\n    left: 50%;\n\n    width: 84%;\n\n    z-index: 10;\n\n    text-align: center;\n\n    opacity: 0;\n\n    pointer-events: none;\n\n    transform:\n        translate3d(-50%,-50%,95px);\n\n    transition:\n        opacity\n        .30s\n        ease\n        .10s;\n}\n\n\n#smart-technology-universe\n.stu-node.is-selected\n.stu-node__info {\n\n    opacity: 1;\n}\n\n\n\/* =========================================================\n   21. INFORMATION TITLE\n   ========================================================= *\/\n\n#smart-technology-universe .stu-node__info-title {\n\n    display: block;\n\n    margin-top: 92px;\n\n    color: #ffffff;\n\n    font-size: 13px;\n\n    line-height: 1.25;\n\n    font-weight: 850;\n}\n\n\n\/* =========================================================\n   22. INFORMATION DESCRIPTION\n   ========================================================= *\/\n\n#smart-technology-universe .stu-node__info-description {\n\n    display: block;\n\n    margin-top: 7px;\n\n    color:\n        rgba(225,240,248,.70);\n\n    font-size: 9px;\n\n    line-height: 1.5;\n}\n\n\n\/* =========================================================\n   23. FOOTER\n   ========================================================= *\/\n\n#smart-technology-universe .stu__footer {\n\n    position: relative;\n\n    z-index: 20;\n\n    margin-top: -4px;\n\n    padding:\n        0\n        15px;\n\n    color:\n        rgba(180,220,235,.38);\n\n    font-size: 8px;\n\n    font-weight: 700;\n\n    line-height: 1.5;\n\n    letter-spacing: .22em;\n\n    text-align: center;\n\n    user-select: none;\n}\n\n\n#smart-technology-universe .stu__footer span {\n\n    margin:\n        0\n        5px;\n}\n\n\n\/* =========================================================\n   24. TABLET\n   ========================================================= *\/\n\n@media (max-width: 900px) {\n\n    #smart-technology-universe.stu {\n\n        min-height: 760px;\n    }\n\n\n    #smart-technology-universe .stu__board-wrap {\n\n        width:\n            calc(100% - 18px);\n\n        height: 560px;\n\n        perspective: 1000px;\n    }\n\n\n    #smart-technology-universe .stu__board {\n\n        gap: 7px;\n\n        padding: 9px;\n\n        transform:\n            rotateX(6deg);\n    }\n\n\n    #smart-technology-universe .stu-node {\n\n        border-radius: 8px;\n    }\n\n\n    #smart-technology-universe .stu-node__core {\n\n        width: 24px;\n        height: 24px;\n    }\n\n\n    #smart-technology-universe .stu-node__number {\n\n        left: 5px;\n        top: 5px;\n\n        font-size: 6px;\n    }\n\n\n    #smart-technology-universe .stu-node__title {\n\n        left: 4px;\n        right: 4px;\n        bottom: 5px;\n\n        font-size: 7px;\n    }\n\n\n    #smart-technology-universe\n    .stu-node.is-selected {\n\n        transform:\n            translate3d(0,0,100px)\n            scale(1.08);\n    }\n}\n\n\n\/* =========================================================\n   25. MOBILE\n   ========================================================= *\/\n\n@media (max-width: 600px) {\n\n    #smart-technology-universe.stu {\n\n        min-height: 700px;\n    }\n\n\n    #smart-technology-universe .stu__header {\n\n        padding-top: 28px;\n    }\n\n\n    #smart-technology-universe .stu__title {\n\n        font-size: 28px;\n    }\n\n\n    #smart-technology-universe .stu__subtitle {\n\n        font-size: 10px;\n    }\n\n\n    #smart-technology-universe .stu__board-wrap {\n\n        width:\n            calc(100% - 10px);\n\n        height: 500px;\n\n        margin-top: 20px;\n    }\n\n\n    #smart-technology-universe .stu__board {\n\n        gap: 5px;\n\n        padding: 6px;\n\n        transform:\n            rotateX(4deg);\n    }\n\n\n    #smart-technology-universe .stu-node {\n\n        border-radius: 6px;\n    }\n\n\n    #smart-technology-universe .stu-node__core {\n\n        width: 17px;\n        height: 17px;\n\n        box-shadow:\n            0 0 6px var(--node-color),\n            0 0 15px var(--node-color);\n    }\n\n\n    #smart-technology-universe\n    .stu-node__core::before {\n\n        inset: -5px;\n    }\n\n\n    #smart-technology-universe .stu-node__title {\n\n        font-size: 6px;\n\n        line-height: 1.05;\n    }\n\n\n    #smart-technology-universe .stu-node__number {\n\n        display: none;\n    }\n\n\n    #smart-technology-universe .stu__footer {\n\n        font-size: 6px;\n\n        letter-spacing: .15em;\n    }\n}\n\n\n\/* =========================================================\n   26. VERY SMALL DEVICES\n   ========================================================= *\/\n\n@media (max-width: 380px) {\n\n    #smart-technology-universe .stu__board-wrap {\n\n        height: 460px;\n    }\n\n\n    #smart-technology-universe .stu__board {\n\n        gap: 4px;\n\n        padding: 5px;\n    }\n\n\n    #smart-technology-universe .stu-node__title {\n\n        font-size: 5.5px;\n    }\n}\n\n\n\/* =========================================================\n   27. REDUCED MOTION\n   ========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    #smart-technology-universe .stu-node,\n    #smart-technology-universe .stu-node__core,\n    #smart-technology-universe .stu-node__core::before,\n    #smart-technology-universe .stu-node__info {\n\n        animation: none !important;\n\n        transition: none !important;\n    }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n<script>\n(function () {\n\n    \"use strict\";\n\n\n    \/* =========================================================\n       SMART STRUCT TECHNOLOGY UNIVERSE\n       Production JavaScript\n       ========================================================= *\/\n\n    function initTechnologyUniverse() {\n\n        const root =\n            document.getElementById(\n                \"smart-technology-universe\"\n            );\n\n        if (!root) {\n            return;\n        }\n\n\n        \/* -----------------------------------------------------\n           Prevent duplicate initialization\n           ----------------------------------------------------- *\/\n\n        if (\n            root.dataset.stuInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        root.dataset.stuInitialized = \"true\";\n\n\n        const board =\n            root.querySelector(\n                \"#stu-board\"\n            );\n\n\n        if (!board) {\n            return;\n        }\n\n\n        const nodes =\n            Array.from(\n                board.querySelectorAll(\n                    \".stu-node\"\n                )\n            );\n\n\n        \/* -----------------------------------------------------\n           Validate node count\n           ----------------------------------------------------- *\/\n\n        if (nodes.length !== 30) {\n\n            console.error(\n                \"[SMART STRUCT] Expected 30 technology nodes. Found:\",\n                nodes.length\n            );\n\n            return;\n        }\n\n\n        \/* -----------------------------------------------------\n           State\n           ----------------------------------------------------- *\/\n\n        let selectedNode = null;\n\n\n        \/* -----------------------------------------------------\n           Build internal information layer\n           ----------------------------------------------------- *\/\n\n        nodes.forEach(function (node) {\n\n            if (\n                node.querySelector(\n                    \".stu-node__info\"\n                )\n            ) {\n                return;\n            }\n\n\n            const name =\n                node.getAttribute(\n                    \"data-name\"\n                ) || \"\";\n\n\n            const description =\n                node.getAttribute(\n                    \"data-description\"\n                ) || \"\";\n\n\n            const info =\n                document.createElement(\n                    \"span\"\n                );\n\n            info.className =\n                \"stu-node__info\";\n\n\n            const title =\n                document.createElement(\n                    \"span\"\n                );\n\n            title.className =\n                \"stu-node__info-title\";\n\n            title.textContent =\n                name;\n\n\n            const text =\n                document.createElement(\n                    \"span\"\n                );\n\n            text.className =\n                \"stu-node__info-description\";\n\n            text.textContent =\n                description;\n\n\n            info.appendChild(title);\n            info.appendChild(text);\n\n            node.appendChild(info);\n\n\n            node.setAttribute(\n                \"aria-pressed\",\n                \"false\"\n            );\n        });\n\n\n        \/* -----------------------------------------------------\n           Select node\n           ----------------------------------------------------- *\/\n\n        function selectNode(node) {\n\n            if (!node) {\n                return;\n            }\n\n\n            nodes.forEach(function (item) {\n\n                item.classList.remove(\n                    \"is-selected\"\n                );\n\n                item.setAttribute(\n                    \"aria-pressed\",\n                    \"false\"\n                );\n            });\n\n\n            node.classList.add(\n                \"is-selected\"\n            );\n\n            node.setAttribute(\n                \"aria-pressed\",\n                \"true\"\n            );\n\n\n            board.classList.add(\n                \"has-selection\"\n            );\n\n\n            selectedNode = node;\n        }\n\n\n        \/* -----------------------------------------------------\n           Deselect all\n           ----------------------------------------------------- *\/\n\n        function clearSelection() {\n\n            nodes.forEach(function (node) {\n\n                node.classList.remove(\n                    \"is-selected\"\n                );\n\n                node.setAttribute(\n                    \"aria-pressed\",\n                    \"false\"\n                );\n            });\n\n\n            board.classList.remove(\n                \"has-selection\"\n            );\n\n\n            selectedNode = null;\n        }\n\n\n        \/* -----------------------------------------------------\n           Node click\n           ----------------------------------------------------- *\/\n\n        nodes.forEach(function (node) {\n\n            node.addEventListener(\n                \"click\",\n                function (event) {\n\n                    event.stopPropagation();\n\n\n                    if (\n                        selectedNode === node\n                    ) {\n\n                        clearSelection();\n\n                        return;\n                    }\n\n\n                    selectNode(node);\n                }\n            );\n\n\n            \/* -------------------------------------------------\n               Keyboard\n               ------------------------------------------------- *\/\n\n            node.addEventListener(\n                \"keydown\",\n                function (event) {\n\n                    if (\n                        event.key === \"Enter\" ||\n                        event.key === \" \"\n                    ) {\n\n                        event.preventDefault();\n\n                        node.click();\n                    }\n                }\n            );\n        });\n\n\n        \/* -----------------------------------------------------\n           Click board background\n           ----------------------------------------------------- *\/\n\n        board.addEventListener(\n            \"click\",\n            function (event) {\n\n                if (\n                    event.target === board\n                ) {\n\n                    clearSelection();\n                }\n            }\n        );\n\n\n        \/* -----------------------------------------------------\n           Escape closes selected node\n           ----------------------------------------------------- *\/\n\n        document.addEventListener(\n            \"keydown\",\n            function (event) {\n\n                if (\n                    event.key === \"Escape\" &&\n                    selectedNode\n                ) {\n\n                    clearSelection();\n\n                    selectedNode.focus();\n                }\n            }\n        );\n\n\n        \/* -----------------------------------------------------\n           Touch behavior\n           ----------------------------------------------------- *\/\n\n        nodes.forEach(function (node) {\n\n            node.addEventListener(\n                \"touchstart\",\n                function () {\n\n                    if (\n                        selectedNode !== node\n                    ) {\n\n                        selectNode(node);\n                    }\n                },\n                {\n                    passive: true\n                }\n            );\n        });\n\n\n        \/* -----------------------------------------------------\n           Diagnostic\n           ----------------------------------------------------- *\/\n\n        console.info(\n            \"[SMART STRUCT] Technology Universe initialized successfully: 30 nodes.\"\n        );\n\n    }\n\n\n    \/* =========================================================\n       DOM READY\n       ========================================================= *\/\n\n    if (\n        document.readyState === \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initTechnologyUniverse,\n            {\n                once: true\n            }\n        );\n\n    } else {\n\n        initTechnologyUniverse();\n    }\n\n\n})();\n<\/script>\n<\/script>\n\n<!-- =========================================================\n     SMART STRUCT \/ PERSHATECH\n     FUTURE TECHNOLOGY UNIVERSE\n     30 TECHNOLOGIES \/ 6 \u00d7 5\n     Production Version\n     ========================================================= -->\n\n<section\n    id=\"smart-technology-universe\"\n    class=\"stu\"\n    aria-labelledby=\"stu-title\"\n>\n\n    <!-- =========================\n         HEADER\n         ========================= -->\n\n    <header class=\"stu__header\">\n\n        <div class=\"stu__eyebrow\">\n            SMART STRUCT \u00b7 FUTURE TECHNOLOGY\n        <\/div>\n\n        <h2 id=\"stu-title\" class=\"stu__title\">\n            Technology Universe\n        <\/h2>\n\n        <p class=\"stu__subtitle\">\n            Explore 30 emerging technologies\n        <\/p>\n\n    <\/header>\n\n\n    <!-- =========================\n         BOARD\n         ========================= -->\n\n    <div class=\"stu__board-wrap\">\n\n        <div\n            id=\"stu-board\"\n            class=\"stu__board\"\n            role=\"list\"\n            aria-label=\"30 emerging technologies\"\n        >\n\n            <!-- =================================================\n                 01\n                 ================================================= -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"01\"\n                data-name=\"Artificial Intelligence\"\n                data-description=\"Core computational field enabling intelligent perception, reasoning, prediction and decision systems.\"\n                style=\"--node-color:#00e5ff;\"\n                aria-label=\"Artificial Intelligence\"\n            >\n                <span class=\"stu-node__number\">01<\/span>\n\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n\n                <span class=\"stu-node__title\">\n                    Artificial Intelligence\n                <\/span>\n            <\/button>\n\n\n            <!-- 02 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"02\"\n                data-name=\"Generative AI\"\n                data-description=\"AI systems capable of generating text, images, audio, video, code and structured content.\"\n                style=\"--node-color:#a855f7;\"\n                aria-label=\"Generative AI\"\n            >\n                <span class=\"stu-node__number\">02<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Generative AI<\/span>\n            <\/button>\n\n\n            <!-- 03 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"03\"\n                data-name=\"Large Language Models\"\n                data-description=\"Large-scale neural models specialized in understanding and generating natural language.\"\n                style=\"--node-color:#ec4899;\"\n                aria-label=\"Large Language Models\"\n            >\n                <span class=\"stu-node__number\">03<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Large Language Models<\/span>\n            <\/button>\n\n\n            <!-- 04 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"04\"\n                data-name=\"AI Agents\"\n                data-description=\"Autonomous software entities capable of planning, reasoning, using tools and executing multi-step tasks.\"\n                style=\"--node-color:#8b5cf6;\"\n                aria-label=\"AI Agents\"\n            >\n                <span class=\"stu-node__number\">04<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">AI Agents<\/span>\n            <\/button>\n\n\n            <!-- 05 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"05\"\n                data-name=\"Multimodal AI\"\n                data-description=\"AI capable of combining and reasoning across text, vision, audio and structured data.\"\n                style=\"--node-color:#06b6d4;\"\n                aria-label=\"Multimodal AI\"\n            >\n                <span class=\"stu-node__number\">05<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Multimodal AI<\/span>\n            <\/button>\n\n\n            <!-- 06 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"06\"\n                data-name=\"Computer Vision\"\n                data-description=\"AI techniques for understanding, interpreting and analyzing visual information.\"\n                style=\"--node-color:#22d3ee;\"\n                aria-label=\"Computer Vision\"\n            >\n                <span class=\"stu-node__number\">06<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Computer Vision<\/span>\n            <\/button>\n\n\n            <!-- 07 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"07\"\n                data-name=\"Digital Twins\"\n                data-description=\"Virtual representations of physical assets, systems and processes connected to real-world data.\"\n                style=\"--node-color:#f59e0b;\"\n                aria-label=\"Digital Twins\"\n            >\n                <span class=\"stu-node__number\">07<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Digital Twins<\/span>\n            <\/button>\n\n\n            <!-- 08 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"08\"\n                data-name=\"Advanced Robotics\"\n                data-description=\"Advanced machines combining sensing, computation, control and physical action.\"\n                style=\"--node-color:#f43f5e;\"\n                aria-label=\"Advanced Robotics\"\n            >\n                <span class=\"stu-node__number\">08<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Advanced Robotics<\/span>\n            <\/button>\n\n\n            <!-- 09 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"09\"\n                data-name=\"Autonomous Systems\"\n                data-description=\"Systems capable of operating and making decisions with limited or no direct human control.\"\n                style=\"--node-color:#fb7185;\"\n                aria-label=\"Autonomous Systems\"\n            >\n                <span class=\"stu-node__number\">09<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Autonomous Systems<\/span>\n            <\/button>\n\n\n            <!-- 10 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"10\"\n                data-name=\"Edge AI\"\n                data-description=\"Artificial intelligence deployed directly on edge devices for low-latency intelligent processing.\"\n                style=\"--node-color:#14b8a6;\"\n                aria-label=\"Edge AI\"\n            >\n                <span class=\"stu-node__number\">10<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Edge AI<\/span>\n            <\/button>\n\n\n            <!-- 11 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"11\"\n                data-name=\"Internet of Things\"\n                data-description=\"Connected physical devices capable of sensing, communicating and exchanging data.\"\n                style=\"--node-color:#10b981;\"\n                aria-label=\"Internet of Things\"\n            >\n                <span class=\"stu-node__number\">11<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Internet of Things<\/span>\n            <\/button>\n\n\n            <!-- 12 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"12\"\n                data-name=\"Industrial IoT\"\n                data-description=\"Industrial-scale connected systems integrating machines, sensors, control and analytics.\"\n                style=\"--node-color:#34d399;\"\n                aria-label=\"Industrial IoT\"\n            >\n                <span class=\"stu-node__number\">12<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Industrial IoT<\/span>\n            <\/button>\n\n\n            <!-- 13 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"13\"\n                data-name=\"Quantum Computing\"\n                data-description=\"Computing based on quantum mechanical principles for specialized computational problems.\"\n                style=\"--node-color:#f472b6;\"\n                aria-label=\"Quantum Computing\"\n            >\n                <span class=\"stu-node__number\">13<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Quantum Computing<\/span>\n            <\/button>\n\n\n            <!-- 14 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"14\"\n                data-name=\"Neuromorphic Computing\"\n                data-description=\"Computing architectures inspired by biological neural systems and event-driven processing.\"\n                style=\"--node-color:#c084fc;\"\n                aria-label=\"Neuromorphic Computing\"\n            >\n                <span class=\"stu-node__number\">14<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Neuromorphic Computing<\/span>\n            <\/button>\n\n\n            <!-- 15 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"15\"\n                data-name=\"High-Performance Computing\"\n                data-description=\"High-performance computational infrastructure designed for extremely demanding workloads.\"\n                style=\"--node-color:#818cf8;\"\n                aria-label=\"High-Performance Computing\"\n            >\n                <span class=\"stu-node__number\">15<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">High-Performance Computing<\/span>\n            <\/button>\n\n\n            <!-- 16 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"16\"\n                data-name=\"Cloud Computing\"\n                data-description=\"On-demand computing infrastructure and services delivered through distributed data centers.\"\n                style=\"--node-color:#60a5fa;\"\n                aria-label=\"Cloud Computing\"\n            >\n                <span class=\"stu-node__number\">16<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Cloud Computing<\/span>\n            <\/button>\n\n\n            <!-- 17 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"17\"\n                data-name=\"Edge Computing\"\n                data-description=\"Computation performed close to data sources and users to reduce latency and bandwidth requirements.\"\n                style=\"--node-color:#38bdf8;\"\n                aria-label=\"Edge Computing\"\n            >\n                <span class=\"stu-node__number\">17<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Edge Computing<\/span>\n            <\/button>\n\n\n            <!-- 18 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"18\"\n                data-name=\"Cloud Native\"\n                data-description=\"Modern application architecture built around containers, microservices, automation and cloud platforms.\"\n                style=\"--node-color:#93c5fd;\"\n                aria-label=\"Cloud Native\"\n            >\n                <span class=\"stu-node__number\">18<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Cloud Native<\/span>\n            <\/button>\n\n\n            <!-- 19 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"19\"\n                data-name=\"Big Data\"\n                data-description=\"Large-scale datasets and technologies for storing, processing and analyzing complex information.\"\n                style=\"--node-color:#facc15;\"\n                aria-label=\"Big Data\"\n            >\n                <span class=\"stu-node__number\">19<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Big Data<\/span>\n            <\/button>\n\n\n            <!-- 20 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"20\"\n                data-name=\"Data Lakehouse\"\n                data-description=\"Unified architecture combining data lake flexibility with warehouse-grade analytics and governance.\"\n                style=\"--node-color:#eab308;\"\n                aria-label=\"Data Lakehouse\"\n            >\n                <span class=\"stu-node__number\">20<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Data Lakehouse<\/span>\n            <\/button>\n\n\n            <!-- 21 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"21\"\n                data-name=\"Knowledge Graph\"\n                data-description=\"Graph-based representation of entities, relationships and semantic knowledge.\"\n                style=\"--node-color:#84cc16;\"\n                aria-label=\"Knowledge Graph\"\n            >\n                <span class=\"stu-node__number\">21<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Knowledge Graph<\/span>\n            <\/button>\n\n\n            <!-- 22 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"22\"\n                data-name=\"Federated Learning\"\n                data-description=\"Machine learning where training data remains distributed across participating devices or organizations.\"\n                style=\"--node-color:#4ade80;\"\n                aria-label=\"Federated Learning\"\n            >\n                <span class=\"stu-node__number\">22<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Federated Learning<\/span>\n            <\/button>\n\n\n            <!-- 23 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"23\"\n                data-name=\"Synthetic Data\"\n                data-description=\"Artificially generated data designed to reproduce useful characteristics of real-world datasets.\"\n                style=\"--node-color:#a3e635;\"\n                aria-label=\"Synthetic Data\"\n            >\n                <span class=\"stu-node__number\">23<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Synthetic Data<\/span>\n            <\/button>\n\n\n            <!-- 24 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"24\"\n                data-name=\"Cybersecurity\"\n                data-description=\"Technologies and practices designed to protect systems, infrastructure, applications and information.\"\n                style=\"--node-color:#34d399;\"\n                aria-label=\"Cybersecurity\"\n            >\n                <span class=\"stu-node__number\">24<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Cybersecurity<\/span>\n            <\/button>\n\n\n            <!-- 25 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"25\"\n                data-name=\"Zero Trust\"\n                data-description=\"Security architecture based on continuous verification and explicit trust minimization.\"\n                style=\"--node-color:#2dd4bf;\"\n                aria-label=\"Zero Trust\"\n            >\n                <span class=\"stu-node__number\">25<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Zero Trust<\/span>\n            <\/button>\n\n\n            <!-- 26 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"26\"\n                data-name=\"Blockchain\"\n                data-description=\"Distributed ledger technology enabling programmable trust and decentralized transactions.\"\n                style=\"--node-color:#f97316;\"\n                aria-label=\"Blockchain\"\n            >\n                <span class=\"stu-node__number\">26<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Blockchain<\/span>\n            <\/button>\n\n\n            <!-- 27 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"27\"\n                data-name=\"Web3\"\n                data-description=\"Decentralized internet technologies built around blockchain, digital ownership and distributed applications.\"\n                style=\"--node-color:#fb923c;\"\n                aria-label=\"Web3\"\n            >\n                <span class=\"stu-node__number\">27<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Web3<\/span>\n            <\/button>\n\n\n            <!-- 28 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"28\"\n                data-name=\"Extended Reality\"\n                data-description=\"Technologies combining physical and digital environments through immersive and interactive experiences.\"\n                style=\"--node-color:#e879f9;\"\n                aria-label=\"Extended Reality\"\n            >\n                <span class=\"stu-node__number\">28<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Extended Reality<\/span>\n            <\/button>\n\n\n            <!-- 29 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"29\"\n                data-name=\"Spatial Computing\"\n                data-description=\"Computing paradigm integrating digital information directly into spatial environments.\"\n                style=\"--node-color:#d946ef;\"\n                aria-label=\"Spatial Computing\"\n            >\n                <span class=\"stu-node__number\">29<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Spatial Computing<\/span>\n            <\/button>\n\n\n            <!-- 30 -->\n\n            <button\n                type=\"button\"\n                class=\"stu-node\"\n                role=\"listitem\"\n                data-index=\"30\"\n                data-name=\"Advanced Materials\"\n                data-description=\"Advanced engineered materials designed for next-generation industrial, computational and robotic systems.\"\n                style=\"--node-color:#fbbf24;\"\n                aria-label=\"Advanced Materials\"\n            >\n                <span class=\"stu-node__number\">30<\/span>\n                <span class=\"stu-node__core\" aria-hidden=\"true\"><\/span>\n                <span class=\"stu-node__title\">Advanced Materials<\/span>\n            <\/button>\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- =========================\n         FOOTER\n         ========================= -->\n\n    <footer class=\"stu__footer\" aria-hidden=\"true\">\n        <span>30 TECHNOLOGIES<\/span>\n        <span>\u00b7<\/span>\n        <span>INTERACTIVE 3D<\/span>\n        <span>\u00b7<\/span>\n        <span>CLICK TO EXPLORE<\/span>\n    <\/footer>\n\n<\/section>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>SMART STRUCT \u00b7 FUTURE TECHNOLOGY Technology Universe Explore 30 emerging technologies 01 Artificial Intelligence 02 Generative AI 03 Large Language Models 04 AI Agents 05 Multimodal AI 06 Computer Vision 07 Digital Twins 08 Advanced Robotics 09 Autonomous Systems 10 Edge AI 11 Internet of Things 12 Industrial IoT 13 Quantum Computing 14 Neuromorphic Computing [&hellip;]<\/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-194","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.pershatech.ir\/index.php?rest_route=\/wp\/v2\/pages\/194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pershatech.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pershatech.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pershatech.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pershatech.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=194"}],"version-history":[{"count":8,"href":"https:\/\/www.pershatech.ir\/index.php?rest_route=\/wp\/v2\/pages\/194\/revisions"}],"predecessor-version":[{"id":328,"href":"https:\/\/www.pershatech.ir\/index.php?rest_route=\/wp\/v2\/pages\/194\/revisions\/328"}],"wp:attachment":[{"href":"https:\/\/www.pershatech.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}