{"id":17,"date":"2026-05-19T12:12:35","date_gmt":"2026-05-19T12:12:35","guid":{"rendered":"https:\/\/lis.sa\/?page_id=17"},"modified":"2026-05-31T17:49:47","modified_gmt":"2026-05-31T17:49:47","slug":"%d9%85%d9%86-%d9%86%d8%ad%d9%86","status":"publish","type":"page","link":"https:\/\/lis.sa\/en\/%d9%85%d9%86-%d9%86%d8%ad%d9%86\/","title":{"rendered":"About us"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"17\" class=\"elementor elementor-17\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ff6827d e-con-full e-flex e-con e-parent\" data-id=\"ff6827d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c0d1007 elementor-widget elementor-widget-html\" data-id=\"c0d1007\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n.lis-inner-hero {\r\n    --lis-hero-bg: #00163F;\r\n    --lis-hero-text: #FFFFFF;\r\n    --lis-hero-accent: #4da6ff;\r\n    --lis-hero-muted: rgba(255, 255, 255, 0.6);\r\n    --lis-font: 'Almarai', sans-serif;\r\n    \r\n    position: relative;\r\n    width: 100%;\r\n    \/* \u0627\u0631\u062a\u0641\u0627\u0639 \u0631\u0634\u064a\u0642 (\u0623\u0642\u0644 \u0645\u0646 \u0627\u0644\u0634\u0627\u0634\u0629 \u0627\u0644\u0643\u0627\u0645\u0644\u0629) *\/\r\n    padding: 160px 0 100px 0;\r\n    background-color: var(--lis-hero-bg);\r\n    font-family: var(--lis-font);\r\n    overflow: hidden;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.lis-inner-hero * {\r\n    box-sizing: border-box !important;\r\n}\r\n\r\n\/* \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0635\u0648\u0631\u0629 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0648\u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u062a\u062d\u0631\u064a\u0643 *\/\r\n.lis-hero-bg-image {\r\n    position: absolute;\r\n    inset: 0;\r\n    background-image: url('https:\/\/lis.sa\/wp-content\/uploads\/2026\/05\/LIS\u0647\u064a\u062f\u0631-scaled.webp');\r\n    background-size: cover !important;\r\n    background-position: center !important;\r\n    z-index: 0;\r\n    transform: scale(1.05);\r\n    animation: lis-inner-pan 20s linear infinite alternate;\r\n}\r\n\r\n\/* \u0627\u0644\u062a\u0631\u0627\u0643\u0628 \u0627\u0644\u0643\u062d\u0644\u064a \u0627\u0644\u062f\u0627\u0643\u0646 \u0627\u0644\u0645\u062a\u062f\u0631\u062c \u0644\u062c\u0639\u0644 \u0627\u0644\u0646\u0635 \u0648\u0627\u0636\u062d\u0627\u064b \u0648\u0627\u0644\u062f\u0645\u062c \u0645\u0639 \u0627\u0644\u0634\u0628\u0643\u0629 *\/\r\n.lis-hero-dark-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(to bottom, rgba(0, 22, 63, 0.1) 0%, rgba(0, 22, 63, 1) 100%);\r\n    z-index: 1;\r\n}\r\n\r\n.lis-ambient-glow {\r\n    position: absolute;\r\n    top: -50%;\r\n    left: 50%;\r\n    width: 80%;\r\n    height: 100%;\r\n    background: radial-gradient(ellipse at center, rgba(77, 166, 255, 0.15) 0%, transparent 70%);\r\n    transform: translateX(-50%);\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n\r\n.lis-cyber-grid-container {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 60%; \/* \u064a\u063a\u0637\u064a \u0627\u0644\u0646\u0635\u0641 \u0627\u0644\u0633\u0641\u0644\u064a \u0641\u0642\u0637 *\/\r\n    overflow: hidden;\r\n    z-index: 2;\r\n    \/* \u0645\u0633\u062d \u0636\u0648\u0626\u064a \u0644\u062f\u0645\u062c \u0627\u0644\u0634\u0628\u0643\u0629 \u0645\u0639 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0645\u0646 \u0627\u0644\u0623\u0639\u0644\u0649 *\/\r\n    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);\r\n    mask-image: linear-gradient(to bottom, transparent 0%, black 100%);\r\n}\r\n\r\n.lis-cyber-grid {\r\n    position: absolute;\r\n    bottom: -50%;\r\n    left: -50%;\r\n    width: 200%;\r\n    height: 200%;\r\n    background-image: \r\n        linear-gradient(rgba(77, 166, 255, 0.15) 1px, transparent 1px),\r\n        linear-gradient(90deg, rgba(77, 166, 255, 0.15) 1px, transparent 1px);\r\n    background-size: 40px 40px;\r\n    background-position: center bottom;\r\n    \/* \u0627\u0644\u0645\u0646\u0638\u0648\u0631 \u062b\u0644\u0627\u062b\u064a \u0627\u0644\u0623\u0628\u0639\u0627\u062f *\/\r\n    transform: perspective(600px) rotateX(70deg) translateY(0);\r\n    animation: lis-grid-forward 3s linear infinite;\r\n}\r\n\r\n.lis-inner-content {\r\n    position: relative;\r\n    z-index: 10;\r\n    text-align: center;\r\n    max-width: 800px;\r\n    padding: 0 5%;\r\n}\r\n\r\n.lis-breadcrumb {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    background: rgba(255, 255, 255, 0.05);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    padding: 8px 20px;\r\n    border-radius: 50px;\r\n    margin-bottom: 30px;\r\n    backdrop-filter: blur(5px);\r\n    transform: translateY(20px);\r\n    opacity: 0;\r\n    animation: lis-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;\r\n}\r\n\r\n.lis-path-link {\r\n    color: var(--lis-hero-muted);\r\n    text-decoration: none;\r\n    font-size: 0.85rem;\r\n    font-weight: 700;\r\n    transition: color 0.3s ease;\r\n}\r\n\r\n.lis-path-link:hover {\r\n    color: var(--lis-hero-accent);\r\n}\r\n\r\n.lis-path-current {\r\n    color: var(--lis-hero-accent);\r\n    font-size: 0.85rem;\r\n    font-weight: 800;\r\n    letter-spacing: 0.5px;\r\n}\r\n\r\n.lis-breadcrumb i {\r\n    color: rgba(255, 255, 255, 0.3);\r\n    font-size: 0.7rem;\r\n}\r\n\r\n.lis-contact-icon-wrapper {\r\n    position: relative;\r\n    width: 60px;\r\n    height: 60px;\r\n    margin: 0 auto 20px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    border-radius: 50%;\r\n    background: rgba(77, 166, 255, 0.1);\r\n    color: var(--lis-hero-accent);\r\n    font-size: 1.5rem;\r\n    transform: scale(0.8);\r\n    opacity: 0;\r\n    animation: lis-pop-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s;\r\n}\r\n\r\n\/* \u0645\u0648\u062c\u0627\u062a \u0627\u0644\u0627\u062a\u0635\u0627\u0644 (Pulse) *\/\r\n.lis-contact-icon-wrapper::before,\r\n.lis-contact-icon-wrapper::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    border-radius: 50%;\r\n    border: 1px solid var(--lis-hero-accent);\r\n    animation: lis-pulse-wave 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\r\n}\r\n.lis-contact-icon-wrapper::after {\r\n    animation-delay: 1s;\r\n}\r\n\r\n.lis-inner-title {\r\n    color: var(--lis-hero-text);\r\n    font-size: 3.2rem;\r\n    font-weight: 800;\r\n    margin: 0 0 15px 0;\r\n    letter-spacing: -0.5px;\r\n    transform: translateY(30px);\r\n    opacity: 0;\r\n    animation: lis-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s;\r\n}\r\n\r\n.lis-inner-desc {\r\n    color: var(--lis-hero-muted);\r\n    font-size: 1.15rem;\r\n    line-height: 1.8;\r\n    margin: 0;\r\n    max-width: 600px;\r\n    margin: 0 auto;\r\n    transform: translateY(20px);\r\n    opacity: 0;\r\n    animation: lis-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.7s;\r\n}\r\n\r\n@keyframes lis-grid-forward {\r\n    0% { transform: perspective(600px) rotateX(70deg) translateY(0); }\r\n    100% { transform: perspective(600px) rotateX(70deg) translateY(40px); }\r\n}\r\n\r\n@keyframes lis-fade-up {\r\n    from { opacity: 0; transform: translateY(20px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n@keyframes lis-pop-in {\r\n    from { opacity: 0; transform: scale(0.5); }\r\n    to { opacity: 1; transform: scale(1); }\r\n}\r\n\r\n@keyframes lis-pulse-wave {\r\n    0% { transform: scale(1); opacity: 0.8; }\r\n    100% { transform: scale(1.8); opacity: 0; }\r\n}\r\n\r\n@keyframes lis-inner-pan {\r\n    from { transform: scale(1.05) translate(0, 0); }\r\n    to { transform: scale(1.1) translate(-1%, 1%); }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .lis-inner-hero {\r\n        padding: 130px 0 80px 0;\r\n    }\r\n    \r\n    .lis-inner-title {\r\n        font-size: 2.2rem;\r\n    }\r\n    \r\n    .lis-inner-desc {\r\n        font-size: 0.95rem;\r\n    }\r\n    \r\n    .lis-cyber-grid-container {\r\n        height: 50%;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"lis-inner-hero\">\r\n    \r\n    <!-- \u0627\u0644\u0635\u0648\u0631\u0629 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0648\u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u062a\u0631\u0627\u0643\u0628 -->\r\n    <div class=\"lis-hero-bg-image\"><\/div>\r\n    <div class=\"lis-hero-dark-overlay\"><\/div>\r\n    \r\n    <!-- \u0627\u0644\u0625\u0636\u0627\u0621\u0629 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0646\u0627\u0639\u0645\u0629 -->\r\n    <div class=\"lis-ambient-glow\"><\/div>\r\n    \r\n    <!-- \u0627\u0644\u0634\u0628\u0643\u0629 \u062b\u0644\u0627\u062b\u064a\u0629 \u0627\u0644\u0623\u0628\u0639\u0627\u062f \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 -->\r\n    <div class=\"lis-cyber-grid-container\">\r\n        <div class=\"lis-cyber-grid\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"lis-inner-content\">\r\n        \r\n        <!-- \u0645\u0633\u0627\u0631 \u0627\u0644\u0635\u0641\u062d\u0627\u062a (Breadcrumb) -->\r\n        <div class=\"lis-breadcrumb\">\r\n            <a href=\"https:\/\/lis.sa\/en\/\" class=\"lis-path-link\">Home<\/a>\r\n            <i class=\"fa-solid fa-chevron-left\"><\/i>\r\n            <span class=\"lis-path-current\">About us<\/span>\r\n        <\/div>\r\n\r\n        <!-- \u0623\u064a\u0642\u0648\u0646\u0629 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0646\u0627\u0628\u0636\u0629 -->\r\n        <div class=\"lis-contact-icon-wrapper\">\r\n            <i class=\"fa-solid fa-fingerprint\"><\/i>\r\n        <\/div>\r\n\r\n        <!-- \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0648\u0627\u0644\u0648\u0635\u0641 -->\r\n        <h1 class=\"lis-inner-title\">About us<\/h1>\r\n        <p class=\"lis-inner-desc\">\r\n            A professional company specialized in legal technology, we develop intelligent systems specifically designed to empower the modern lawyer by integrating deep legal expertise with the latest artificial intelligence technologies.\r\n        <\/p>\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0fd6d76 elementor-widget elementor-widget-html\" data-id=\"0fd6d76\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n\/* =======================================================\r\n   \u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645 \u0627\u0644\u0634\u0627\u0645\u0644\u0629 (CSS Variables) - \u062a\u0642\u062f\u0631 \u062a\u0639\u062f\u0644 \u0623\u064a \u0644\u0648\u0646 \u0645\u0646 \u0647\u0646\u0627\r\n   ======================================================= *\/\r\n.lis-about-pro {\r\n    \/* \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 *\/\r\n    --lis-primary-dark: #00163F;      \/* \u0627\u0644\u0643\u062d\u0644\u064a \u0627\u0644\u062e\u0627\u0635 \u0628\u0643 *\/\r\n    --lis-primary-light: #FFFFFF;     \/* \u0627\u0644\u0623\u0628\u064a\u0636 \u0627\u0644\u0646\u0642\u064a *\/\r\n    \r\n    \/* \u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u062e\u0644\u0641\u064a\u0627\u062a *\/\r\n    --lis-bg-main: #FFFFFF;           \/* \u0644\u0648\u0646 \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0633\u0643\u0634\u0646 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 *\/\r\n    --lis-bg-pattern: #F0F4F8;        \/* \u0644\u0648\u0646 \u062e\u0637\u0648\u0637 \u0627\u0644\u0634\u0628\u0643\u0629 \u0641\u064a \u0627\u0644\u062e\u0644\u0641\u064a\u0629 *\/\r\n    \r\n    \/* \u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0646\u0635\u0648\u0635 *\/\r\n    --lis-text-title: #00163F;        \/* \u0644\u0648\u0646 \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 *\/\r\n    --lis-text-desc: #475569;         \/* \u0644\u0648\u0646 \u0627\u0644\u0646\u0635\u0648\u0635 \u0627\u0644\u0641\u0631\u0639\u064a\u0629 (\u0631\u0645\u0627\u062f\u064a \u062f\u0627\u0643\u0646 \u0645\u0631\u064a\u062d \u0644\u0644\u0639\u064a\u0646) *\/\r\n    \r\n    \/* \u0623\u0644\u0648\u0627\u0646 \u0628\u0637\u0627\u0642\u0629 \"\u0627\u0644\u0645\u0645\u064a\u0632\u0627\u062a\" *\/\r\n    --lis-card-bg: #00163F;           \/* \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n    --lis-card-text: #FFFFFF;         \/* \u0646\u0635 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n    --lis-card-desc: rgba(255, 255, 255, 0.7); \/* \u0648\u0635\u0641 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n    --lis-card-accent: #4da6ff;       \/* \u0644\u0648\u0646 \u0627\u0644\u062e\u0637 \u0627\u0644\u0645\u0636\u064a\u0621 \u0648\u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0629 \u0641\u064a \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n    --lis-card-shadow: rgba(0, 22, 63, 0.15); \/* \u0644\u0648\u0646 \u0638\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n    \r\n    \/* \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u062e\u0637\u0648\u0637 *\/\r\n    --lis-font: 'Almarai', sans-serif;\r\n    --lis-title-size: 2.5rem;\r\n    --lis-card-title-size: 1.4rem;\r\n}\r\n\r\n\/* ---------------------------------------------------\r\n   \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0627\u062a \u0648\u0627\u0644\u062e\u0644\u0641\u064a\u0629\r\n--------------------------------------------------- *\/\r\n.lis-about-pro {\r\n    position: relative;\r\n    width: 100%;\r\n    padding: 120px 0;\r\n    font-family: var(--lis-font);\r\n    background-color: var(--lis-bg-main);\r\n    overflow: hidden;\r\n}\r\n\r\n\/* \u0634\u0628\u0643\u0629 \u0647\u0646\u062f\u0633\u064a\u0629 \u062e\u0641\u064a\u0641\u0629 \u0641\u064a \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0644\u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u062a\u0642\u0646\u064a\u0629 *\/\r\n.lis-about-pattern {\r\n    position: absolute;\r\n    inset: 0;\r\n    background-image: \r\n        linear-gradient(to right, var(--lis-bg-pattern) 1px, transparent 1px),\r\n        linear-gradient(to bottom, var(--lis-bg-pattern) 1px, transparent 1px);\r\n    background-size: 50px 50px;\r\n    z-index: 1;\r\n    opacity: 0.7;\r\n}\r\n\r\n.lis-about-wrapper {\r\n    position: relative;\r\n    z-index: 10;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 0 5%;\r\n    display: grid;\r\n    grid-template-columns: 5fr 7fr; \/* \u062a\u0642\u0633\u064a\u0645 \u063a\u064a\u0631 \u0645\u062a\u0645\u0627\u062b\u0644 (\u062a\u0643\u0648\u064a\u0646 \u062c\u0631\u064a\u0621) *\/\r\n    gap: 0;\r\n    align-items: center;\r\n}\r\n\r\n\/* ---------------------------------------------------\r\n   \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0623\u064a\u0645\u0646: \u0635\u0648\u0631\u0629 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0645\u0639 \u0643\u0634\u0641 \u0627\u0644\u0633\u062a\u0627\u0631\r\n--------------------------------------------------- *\/\r\n.lis-image-col {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 600px; \/* \u0635\u0648\u0631\u0629 \u0637\u0648\u0644\u064a\u0629 \u0641\u062e\u0645\u0629 *\/\r\n    z-index: 2;\r\n}\r\n\r\n.lis-image-box {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n    \/* \u0625\u0637\u0627\u0631 \u062a\u0642\u0646\u064a \u0635\u0644\u0628 *\/\r\n    border: 1px solid rgba(0, 22, 63, 0.1);\r\n}\r\n\r\n.lis-image-box img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    transform: scale(1.2);\r\n    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n\/* \u0627\u0644\u0633\u062a\u0627\u0631 \u0627\u0644\u0644\u064a \u0628\u064a\u0641\u062a\u062d \u0644\u0645\u0627 \u062a\u0639\u0645\u0644 \u0633\u0643\u0631\u0648\u0644 *\/\r\n.lis-image-shutter {\r\n    position: absolute;\r\n    inset: 0;\r\n    background-color: var(--lis-bg-main);\r\n    z-index: 5;\r\n    transform-origin: inline-start; \/* \u064a\u0641\u062a\u062d \u062f\u0627\u0626\u0645\u0627\u064b \u0641\u064a \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0635\u062d\u064a\u062d *\/\r\n    transition: transform 1.2s cubic-bezier(0.8, 0, 0.2, 1);\r\n}\r\n\r\n\/* ---------------------------------------------------\r\n   \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0623\u064a\u0633\u0631: \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u0645\u064a\u0632\u0627\u062a\r\n--------------------------------------------------- *\/\r\n.lis-content-col {\r\n    position: relative;\r\n    \/* \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u062c\u0648\u0647\u0631\u064a: inline-start \u062a\u0636\u0645\u0646 \u0623\u0646 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u062f\u0627\u0626\u0645\u0627\u064b \u062a\u0643\u0648\u0646 \u0628\u064a\u0646 \u0627\u0644\u0646\u0635 \u0648\u0627\u0644\u0635\u0648\u0631\u0629 *\/\r\n    padding-inline-start: 60px; \r\n    z-index: 3;\r\n}\r\n\r\n.lis-mask-text {\r\n    overflow: hidden;\r\n    padding-bottom: 10px;\r\n}\r\n\r\n.lis-section-label {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    color: var(--lis-card-accent);\r\n    font-size: 0.8rem;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 2px;\r\n    margin-bottom: 20px;\r\n    transform: translateY(100%);\r\n    opacity: 0;\r\n    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n.lis-section-label::before {\r\n    content: '';\r\n    width: 30px;\r\n    height: 2px;\r\n    background-color: var(--lis-card-accent);\r\n}\r\n\r\n.lis-about-heading {\r\n    color: var(--lis-text-title);\r\n    font-size: var(--lis-title-size);\r\n    font-weight: 800;\r\n    line-height: 1.2;\r\n    margin: 0 0 20px 0;\r\n    transform: translateY(100%);\r\n    opacity: 0;\r\n    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;\r\n}\r\n\r\n.lis-about-paragraph {\r\n    color: var(--lis-text-desc);\r\n    font-size: 1.05rem;\r\n    font-weight: 400;\r\n    line-height: 1.8;\r\n    margin: 0 0 40px 0;\r\n    max-width: 90%;\r\n    transform: translateY(30px);\r\n    opacity: 0;\r\n    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;\r\n}\r\n\r\n\/* ---------------------------------------------------\r\n   \u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u0645\u064a\u0632\u0627\u062a \"\u0627\u0644\u0645\u062a\u062f\u0627\u062e\u0644\u0629\" (The overlapping module)\r\n--------------------------------------------------- *\/\r\n.lis-feature-module {\r\n    position: relative;\r\n    background-color: var(--lis-card-bg);\r\n    padding: 40px;\r\n    \/* \u0627\u0644\u062a\u062f\u0627\u062e\u0644: \u0633\u062d\u0628 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0644\u062a\u0642\u0637\u0639 \u0627\u0644\u0635\u0648\u0631\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0645\u0646\u0637\u0642\u064a\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629 *\/\r\n    margin-inline-start: -100px;\r\n    border-inline-start: 4px solid var(--lis-card-accent); \r\n    box-shadow: -15px 25px 50px var(--lis-card-shadow);\r\n    transform: translateY(40px);\r\n    opacity: 0;\r\n    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;\r\n}\r\n\r\n\/* \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u062e\u0637 \u0627\u0644\u0645\u0636\u064a\u0621 \u0627\u0644\u0644\u064a \u0628\u064a\u062a\u062d\u0631\u0643 \u0641\u064a \u0627\u0644\u062e\u0644\u0641\u064a\u0629 *\/\r\n.lis-feature-module::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    inset-inline-start: -4px; \/* \u0644\u064a\u062a\u0637\u0627\u0628\u0642 \u0645\u0639 \u0645\u0643\u0627\u0646 \u0627\u0644\u0628\u0648\u0631\u062f\u0631 \u0641\u064a \u0643\u0644\u0627 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u064a\u0646 *\/\r\n    width: 4px;\r\n    height: 0;\r\n    background-color: var(--lis-primary-light);\r\n    transition: height 0.4s ease;\r\n    z-index: 2;\r\n}\r\n\r\n.lis-module-header {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.lis-module-icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 50px;\r\n    height: 50px;\r\n    background: rgba(255, 255, 255, 0.05);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    color: var(--lis-card-accent);\r\n    font-size: 1.2rem;\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.lis-module-title {\r\n    color: var(--lis-card-text);\r\n    font-size: var(--lis-card-title-size);\r\n    font-weight: 800;\r\n    margin: 0;\r\n}\r\n\r\n.lis-module-desc {\r\n    color: var(--lis-card-desc);\r\n    font-size: 0.95rem;\r\n    font-weight: 300;\r\n    line-height: 1.8;\r\n    margin: 0;\r\n    transition: color 0.4s ease;\r\n}\r\n\r\n\/* \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0647\u0648\u0641\u0631 \u0627\u0644\u0635\u0644\u0628 \u0648\u0627\u0644\u0631\u0634\u064a\u0642 \u0644\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n.lis-feature-module:hover {\r\n    transform: translateY(-5px); \/* \u0631\u0641\u0639 \u0635\u0644\u0628 *\/\r\n    box-shadow: -20px 35px 60px var(--lis-card-shadow);\r\n}\r\n\r\n.lis-feature-module:hover::before {\r\n    height: 100%; \/* \u0627\u0644\u062e\u0637 \u0627\u0644\u0623\u0628\u064a\u0636 \u0628\u064a\u0645\u0644\u0649 \u0627\u0644\u062d\u0627\u0641\u0629 *\/\r\n}\r\n\r\n.lis-feature-module:hover .lis-module-icon {\r\n    background: var(--lis-card-accent);\r\n    color: var(--lis-primary-dark);\r\n    transform: rotate(15deg) scale(1.1);\r\n}\r\n\r\n.lis-feature-module:hover .lis-module-desc {\r\n    color: var(--lis-primary-light);\r\n}\r\n\r\n\/* ---------------------------------------------------\r\n   \u0641\u0626\u0629 \u0627\u0644\u062a\u0634\u063a\u064a\u0644 (Trigger Classes) \u0639\u0646\u062f \u0627\u0644\u0633\u0643\u0631\u0648\u0644\r\n--------------------------------------------------- *\/\r\n.lis-animate-in .lis-image-shutter {\r\n    transform: scaleX(0); \/* \u0641\u062a\u062d \u0627\u0644\u0633\u062a\u0627\u0631 *\/\r\n}\r\n\r\n.lis-animate-in .lis-image-box img {\r\n    transform: scale(1); \/* \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0627\u0644\u0635\u0648\u0631\u0629 *\/\r\n}\r\n\r\n.lis-animate-in .lis-section-label,\r\n.lis-animate-in .lis-about-heading {\r\n    transform: translateY(0);\r\n    opacity: 1;\r\n}\r\n\r\n.lis-animate-in .lis-about-paragraph {\r\n    transform: translateY(0);\r\n    opacity: 1;\r\n}\r\n\r\n.lis-animate-in .lis-feature-module {\r\n    transform: translateY(0);\r\n    opacity: 1;\r\n}\r\n\r\n\/* ---------------------------------------------------\r\n   \u0627\u0644\u062a\u062c\u0627\u0648\u0628 \u0645\u0639 \u0627\u0644\u0634\u0627\u0634\u0627\u062a (Mobile & Tablet)\r\n--------------------------------------------------- *\/\r\n@media (max-width: 992px) {\r\n    .lis-about-wrapper {\r\n        grid-template-columns: 1fr;\r\n        gap: 50px;\r\n    }\r\n    \r\n    .lis-content-col {\r\n        padding-inline-start: 0; \/* \u062a\u0635\u0641\u064a\u0631 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0641\u064a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 *\/\r\n        order: -1; \/* \u0631\u0641\u0639 \u0627\u0644\u0646\u0635 \u0641\u0648\u0642 \u0627\u0644\u0635\u0648\u0631\u0629 \u0641\u064a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 *\/\r\n    }\r\n    \r\n    .lis-image-col {\r\n        height: 400px;\r\n    }\r\n    \r\n    .lis-feature-module {\r\n        margin-inline-start: 0;\r\n        margin-top: -60px; \/* \u062a\u062f\u0627\u062e\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0645\u0639 \u0627\u0644\u0635\u0648\u0631\u0629 \u0645\u0646 \u0627\u0644\u0623\u0633\u0641\u0644 *\/\r\n        margin-inline-end: 5%; \/* \u0645\u0633\u0627\u0641\u0629 \u0645\u062a\u0646\u0627\u0633\u0642\u0629 \u0641\u064a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 *\/\r\n        z-index: 10;\r\n    }\r\n    \r\n    .lis-animate-in .lis-feature-module {\r\n        transform: translateY(0);\r\n    }\r\n    \r\n    .lis-feature-module:hover {\r\n        transform: translateY(-5px);\r\n    }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .lis-about-pro { padding: 80px 0; }\r\n    .lis-about-heading { font-size: 2rem; }\r\n    .lis-module-title { font-size: 1.2rem; }\r\n    .lis-feature-module { padding: 30px; margin-inline-end: 0; margin-top: -40px; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"lis-about-pro\" id=\"lis-about-section\">\r\n    \r\n    <!-- \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0634\u0628\u0643\u0629 \u0627\u0644\u0647\u0646\u062f\u0633\u064a\u0629 -->\r\n    <div class=\"lis-about-pattern\"><\/div>\r\n\r\n    <div class=\"lis-about-wrapper\">\r\n        \r\n        <!-- \u0627\u0644\u0635\u0648\u0631\u0629 (\u0627\u0644\u064a\u0633\u0627\u0631 \u0641\u064a \u0627\u0644\u062f\u064a\u0633\u0643\u062a\u0648\u0628) -->\r\n        <div class=\"lis-image-col\">\r\n            <div class=\"lis-image-box\">\r\n                <div class=\"lis-image-shutter\"><\/div>\r\n                <!-- \u0635\u0648\u0631\u0629 \u062a\u0648\u062d\u064a \u0628\u0645\u0643\u062a\u0628 \u0639\u0635\u0631\u064a \u064a\u062c\u0645\u0639 \u0628\u064a\u0646 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0648\u0627\u0644\u062a\u0642\u0646\u064a\u0629 -->\r\n                <img decoding=\"async\" src=\"https:\/\/lis.sa\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-31-at-7.08.02-PM.jpeg\" alt=\"\u0628\u064a\u0626\u0629 \u0639\u0645\u0644 LIS\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- \u0627\u0644\u0645\u062d\u062a\u0648\u0649 (\u0627\u0644\u064a\u0645\u064a\u0646 \u0641\u064a \u0627\u0644\u062f\u064a\u0633\u0643\u062a\u0648\u0628) -->\r\n        <div class=\"lis-content-col\">\r\n            \r\n            <div class=\"lis-mask-text\">\r\n                <span class=\"lis-section-label\">System identity<\/span>\r\n            <\/div>\r\n            \r\n            <div class=\"lis-mask-text\">\r\n                <h2 class=\"lis-about-heading\">What is LIS?<\/h2>\r\n            <\/div>\r\n            \r\n            <p class=\"lis-about-paragraph\">\r\nLIS is a legal technology company\ndeveloping intelligent systems \n\npowered by specialized programming and artificial intelligence to redefine legal workflows with greater precision, efficiency, and better outcomes.\r\n            <\/p>\r\n\r\n            <!-- \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u062a\u062f\u0627\u062e\u0644\u0629 -->\r\n            \r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    \/* \u0633\u0643\u0631\u064a\u0628\u062a Intersection Observer \u0644\u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0623\u0646\u064a\u0645\u064a\u0634\u0646 \u0639\u0646\u062f \u0627\u0644\u0633\u0643\u0631\u0648\u0644 *\/\r\n    const aboutSection = document.getElementById('lis-about-section');\r\n    \r\n    if (aboutSection) {\r\n        const observerOptions = {\r\n            root: null,\r\n            rootMargin: '0px',\r\n            threshold: 0.3 \/* \u064a\u0628\u062f\u0623 \u0627\u0644\u0623\u0646\u064a\u0645\u064a\u0634\u0646 \u0644\u0645\u0627 30% \u0645\u0646 \u0627\u0644\u0633\u0643\u0634\u0646 \u064a\u0638\u0647\u0631 \u0641\u064a \u0627\u0644\u0634\u0627\u0634\u0629 *\/\r\n        };\r\n\r\n        const observer = new IntersectionObserver((entries, observer) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    \/\/ \u0625\u0636\u0627\u0641\u0629 \u0643\u0644\u0627\u0633 \u0627\u0644\u062a\u0634\u063a\u064a\u0644\r\n                    entry.target.classList.add('lis-animate-in');\r\n                    \/\/ \u0625\u064a\u0642\u0627\u0641 \u0627\u0644\u0645\u0631\u0627\u0642\u0628\u0629 \u0639\u0634\u0627\u0646 \u0627\u0644\u0623\u0646\u064a\u0645\u064a\u0634\u0646 \u0645\u0627 \u064a\u0634\u062a\u063a\u0644\u0634 \u0643\u0644 \u0645\u0631\u0629 \u0646\u0637\u0644\u0639 \u0648\u0646\u0646\u0632\u0644 (\u062a\u062c\u0631\u0628\u0629 \u0645\u0633\u062a\u062e\u062f\u0645 \u0623\u0641\u0636\u0644)\r\n                    observer.unobserve(entry.target);\r\n                }\r\n            });\r\n        }, observerOptions);\r\n\r\n        observer.observe(aboutSection);\r\n    }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-82089d9 elementor-widget elementor-widget-html\" data-id=\"82089d9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n.lis-vm-section {\r\n    \/* \u0627\u0644\u0623\u0644\u0648\u0627\u0646 - \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0641\u0627\u062a\u062d\u0629 *\/\r\n    --lis-bg-light: #F8FAFC;        \r\n    --lis-surface: #FFFFFF;         \r\n    --lis-primary: #00163F;         \r\n    --lis-text-body: #475569;       \r\n    --lis-accent: #4da6ff;     \r\n    --lis-font: 'Almarai', sans-serif;\r\n    \r\n    position: relative;\r\n    width: 100%;\r\n    padding: 120px 0;\r\n    background-color: var(--lis-bg-light);\r\n    font-family: var(--lis-font);\r\n    overflow: hidden;\r\n}\r\n\r\n.lis-vm-section * { box-sizing: border-box !important; }\r\n\r\n\/* \u0634\u0628\u0643\u0629 \u0646\u0642\u0637\u064a\u0629 \u0630\u0643\u064a\u0629 \u0641\u064a \u0627\u0644\u062e\u0644\u0641\u064a\u0629 *\/\r\n.lis-vm-section::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background-image: radial-gradient(rgba(0, 22, 63, 0.05) 2px, transparent 2px);\r\n    background-size: 40px 40px;\r\n    z-index: 1;\r\n}\r\n\r\n\/* \u062a\u0648\u0647\u062c \u0639\u0644\u0648\u064a \u0646\u0627\u0639\u0645 *\/\r\n.lis-vm-section::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: -50%;\r\n    left: 50%;\r\n    width: 60%;\r\n    height: 100%;\r\n    background: radial-gradient(ellipse at center, rgba(77, 166, 255, 0.05) 0%, transparent 60%);\r\n    transform: translateX(-50%);\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n\r\n.lis-vm-container {\r\n    position: relative;\r\n    z-index: 10;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 0 5%;\r\n}\r\n\r\n\/* \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0633\u0643\u0634\u0646 *\/\r\n.lis-vm-header {\r\n    text-align: center;\r\n    margin-bottom: 70px;\r\n}\r\n\r\n.lis-vm-tag {\r\n    display: inline-block;\r\n    color: var(--lis-accent);\r\n    font-size: 0.85rem;\r\n    font-weight: 800;\r\n    letter-spacing: 1px;\r\n    background: rgba(77, 166, 255, 0.1);\r\n    padding: 6px 20px;\r\n    border-radius: 50px;\r\n    margin-bottom: 15px;\r\n    transform: translateY(20px);\r\n    opacity: 0;\r\n    animation: lis-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n}\r\n\r\n.lis-vm-main-title {\r\n    color: var(--lis-primary);\r\n    font-size: 2.5rem;\r\n    font-weight: 800;\r\n    margin: 0;\r\n    transform: translateY(20px);\r\n    opacity: 0;\r\n    animation: lis-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;\r\n}\r\n\r\n\/* \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 (\u0645\u0648\u0633\u0651\u0637\u0629) *\/\r\n.lis-vm-grid {\r\n    max-width: 800px;\r\n    margin: 0 auto;\r\n    position: relative;\r\n}\r\n\r\n\/* \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n.lis-vm-card {\r\n    background: var(--lis-surface);\r\n    border: 1px solid rgba(0, 22, 63, 0.05);\r\n    border-radius: 24px;\r\n    padding: 50px 40px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n    box-shadow: 0 10px 30px rgba(0, 22, 63, 0.03);\r\n    z-index: 10;\r\n    \r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n}\r\n\r\n.lis-vm-grid.lis-animated .lis-vm-card { \r\n    animation: lis-fade-up 0.8s forwards 0.4s; \r\n}\r\n\r\n.lis-vm-grid .lis-vm-card:hover {\r\n    transform: translateY(-15px) scale(1.02);\r\n    box-shadow: 0 30px 60px rgba(0, 22, 63, 0.08);\r\n    border-color: rgba(77, 166, 255, 0.3);\r\n    z-index: 20;\r\n}\r\n\r\n\/* \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0625\u0636\u0627\u0621\u0629 \u0627\u0644\u062f\u0627\u062e\u0644\u064a\u0629 \u0641\u064a \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n.lis-vm-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    width: 150px;\r\n    height: 150px;\r\n    background: radial-gradient(circle, rgba(77, 166, 255, 0.1) 0%, transparent 70%);\r\n    opacity: 0;\r\n    transition: opacity 0.6s ease;\r\n    border-radius: 50%;\r\n    transform: translate(50%, -50%);\r\n}\r\n\r\n.lis-vm-card:hover::before { opacity: 1; }\r\n\r\n\/* \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0629 \u0627\u0644\u0639\u0644\u0648\u064a\u0629 *\/\r\n.lis-card-icon-box {\r\n    width: 70px;\r\n    height: 70px;\r\n    background: var(--lis-bg-light);\r\n    border-radius: 18px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 1.8rem;\r\n    color: var(--lis-primary);\r\n    margin-bottom: 30px;\r\n    position: relative;\r\n    transition: all 0.5s ease;\r\n    border: 1px solid rgba(0, 22, 63, 0.05);\r\n}\r\n\r\n.lis-vm-card:hover .lis-card-icon-box {\r\n    background: var(--lis-primary);\r\n    color: var(--lis-surface);\r\n    transform: scale(1.1) rotate(-5deg);\r\n    box-shadow: 0 15px 30px rgba(0, 22, 63, 0.15);\r\n}\r\n\r\n\/* \u0627\u0644\u0646\u0635\u0648\u0635 \u062f\u0627\u062e\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n.lis-card-title {\r\n    color: var(--lis-primary);\r\n    font-size: 1.8rem;\r\n    font-weight: 800;\r\n    margin: 0 0 20px 0;\r\n}\r\n\r\n.lis-card-desc {\r\n    color: var(--lis-text-body);\r\n    font-size: 1.15rem;\r\n    line-height: 1.9;\r\n    margin: 0;\r\n    font-weight: 400;\r\n}\r\n\r\n\/* \u062a\u0645\u064a\u064a\u0632 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0641\u062a\u0627\u062d\u064a\u0629 *\/\r\n.lis-word-highlight {\r\n    color: var(--lis-primary);\r\n    font-weight: 800;\r\n    background: linear-gradient(120deg, rgba(77, 166, 255, 0.15) 0%, rgba(77, 166, 255, 0) 100%);\r\n    padding: 0 5px;\r\n    border-radius: 4px;\r\n}\r\n\r\n\/* \u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0643\u064a \u0641\u0631\u064a\u0645\u0632 *\/\r\n@keyframes lis-fade-up {\r\n    from { opacity: 0; transform: translateY(30px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n@media (max-width: 992px) {\r\n    .lis-vm-card {\r\n        padding: 40px 30px;\r\n    }\r\n    \r\n    .lis-vm-main-title {\r\n        font-size: 2rem;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"lis-vm-section\" id=\"lis-vision-mission\">\r\n    <div class=\"lis-vm-container\">\r\n        \r\n        <div class=\"lis-vm-header\">\r\n            <span class=\"lis-vm-tag\">Our purpose and goals<\/span>\r\n            <h2 class=\"lis-vm-main-title\">Vision<\/h2>\r\n        <\/div>\r\n\r\n        <div class=\"lis-vm-grid\" id=\"lis-vm-grid-container\">\r\n            \r\n            <div class=\"lis-vm-card\">\r\n                <div class=\"lis-card-icon-box\">\r\n                    <i class=\"fa-solid fa-eye\"><\/i>\r\n                <\/div>\r\n                <h3 class=\"lis-card-title\">Our Vision<\/h3>\r\n                <p class=\"lis-card-desc translation-block\">To place people at <span class=\"lis-word-highlight\">the center of innovation<\/span>\nby building intelligent systems that enhance human capability and empower better decision-making through a refined, human-centered, and technologically advanced approach.<br><br>\nWe believe technology should not merely accelerate the world, but guide it toward greater awareness, precision, and meaningful progress \u2014 with systems designed to move innovation in the right direction.<\/p>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const gridContainer = document.getElementById('lis-vm-grid-container');\r\n    \r\n    if (gridContainer) {\r\n        const observer = new IntersectionObserver((entries, obs) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    entry.target.classList.add('lis-animated');\r\n                    obs.unobserve(entry.target); \r\n                }\r\n            });\r\n        }, {\r\n            threshold: 0.2 \r\n        });\r\n\r\n        observer.observe(gridContainer);\r\n    }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0a1be9f elementor-widget elementor-widget-html\" data-id=\"0a1be9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n.lis-separator-pro {\r\n    \/* \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 *\/\r\n    --lis-sep-bg: #00163F;           \/* \u0627\u0644\u0643\u062d\u0644\u064a \u0627\u0644\u062f\u0627\u0643\u0646 \u0644\u0644\u0641\u0627\u0635\u0644 *\/\r\n    --lis-sep-text: #FFFFFF;         \/* \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u0628\u064a\u0636 \u0644\u0644\u0646\u0635\u0648\u0635 *\/\r\n    --lis-sep-accent: #4da6ff;       \/* \u0627\u0644\u0623\u0632\u0631\u0642 \u0627\u0644\u0645\u0636\u064a\u0621 \u0644\u0644\u062a\u0623\u062b\u064a\u0631\u0627\u062a *\/\r\n    \r\n    \/* \u0627\u0644\u062e\u0637\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u062c\u0627\u0645 *\/\r\n    --lis-font: 'Almarai', sans-serif;\r\n    --lis-icon-size: 2.2rem;         \/* \u062a\u0643\u0628\u064a\u0631 \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0629 \u0642\u0644\u064a\u0644\u0627\u064b \u0644\u0644\u0641\u062e\u0627\u0645\u0629 *\/\r\n    --lis-title-size: 1.1rem;\r\n    \r\n    \/* \u0623\u0628\u0639\u0627\u062f \u0627\u0644\u0633\u0643\u0634\u0646 *\/\r\n    --lis-sep-padding: 50px 0;\r\n}\r\n\r\n.lis-separator-pro {\r\n    position: relative;\r\n    width: 100%;\r\n    padding: var(--lis-sep-padding);\r\n    font-family: var(--lis-font);\r\n    background-color: var(--lis-sep-bg);\r\n    overflow: hidden;\r\n    \/* \u0638\u0644 \u062f\u0627\u062e\u0644\u064a \u0644\u062f\u0645\u062c \u0627\u0644\u0641\u0627\u0635\u0644 \u0645\u0639 \u0627\u0644\u0633\u0643\u0627\u0634\u0646 \u0627\u0644\u0645\u062c\u0627\u0648\u0631\u0629 \u0628\u0646\u0639\u0648\u0645\u0629 *\/\r\n    box-shadow: inset 0 10px 40px rgba(0,0,0,0.2), inset 0 -10px 40px rgba(0,0,0,0.2);\r\n}\r\n\r\n\/* \u0634\u0628\u0643\u0629 \u0646\u0642\u0637\u064a\u0629 \u062e\u0641\u064a\u0641\u0629 \u062c\u062f\u0627\u064b \u0641\u064a \u0627\u0644\u062e\u0644\u0641\u064a\u0629 (Tech Grid) *\/\r\n.lis-separator-pro::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);\r\n    background-size: 30px 30px;\r\n    z-index: 1;\r\n}\r\n\r\n\/* \u0633\u064f\u062d\u0628 \u0627\u0644\u0625\u0636\u0627\u0621\u0629 \u0627\u0644\u0645\u062d\u064a\u0637\u064a\u0629 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 (Ambient Glow) *\/\r\n.lis-ambient-glow {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 60%;\r\n    height: 60%;\r\n    background: radial-gradient(circle, rgba(77, 166, 255, 0.08) 0%, transparent 70%);\r\n    transform: translate(-50%, -50%);\r\n    filter: blur(40px);\r\n    z-index: 2;\r\n    animation: lis-pulse-glow 6s infinite alternate ease-in-out;\r\n}\r\n\r\n.lis-sep-container {\r\n    max-width: 1100px; \r\n    margin: 0 auto;\r\n    padding: 0 5%;\r\n    position: relative;\r\n    z-index: 10;\r\n}\r\n\r\n.lis-sep-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 30px;\r\n    position: relative;\r\n}\r\n\r\n\/* --- \u0627\u0644\u0633\u0631 \u0647\u0646\u0627: \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0634\u0628\u0643\u0629 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 \u0645\u0639 \u0627\u0644\u0647\u0648\u0641\u0631 (\u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0648\u0627\u0644\u062a\u0645\u0648\u064a\u0647) --- *\/\r\n\/* \u0644\u0645\u0627 \u0627\u0644\u0645\u0627\u0648\u0633 \u064a\u062f\u062e\u0644 \u0627\u0644\u0634\u0628\u0643\u0629\u060c \u062e\u0641\u062a \u0643\u0644 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0648\u0627\u0639\u0645\u0644\u0647\u0627 Blur *\/\r\n.lis-sep-grid:hover .lis-sep-item {\r\n    opacity: 0.2;\r\n    filter: blur(6px) grayscale(50%);\r\n    transform: scale(0.95);\r\n}\r\n\r\n\/* \u0627\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u0644\u064a \u0627\u0644\u0645\u0627\u0648\u0633 \u0639\u0644\u064a\u0647 \u064a\u0643\u0633\u0631 \u0627\u0644\u0640 Blur\u060c \u064a\u0643\u0628\u0631\u060c \u0648\u064a\u0646\u0648\u0631 *\/\r\n.lis-sep-grid .lis-sep-item:hover {\r\n    opacity: 1;\r\n    filter: blur(0) grayscale(0%);\r\n    transform: scale(1.15) translateY(-15px);\r\n    z-index: 20;\r\n}\r\n\r\n.lis-sep-item {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    text-align: center;\r\n    cursor: pointer;\r\n    position: relative;\r\n    \/* \u062d\u0631\u0643\u0629 \u0646\u0627\u0639\u0645\u0629 \u062c\u062f\u0627\u064b \u0644\u0644\u0627\u0646\u062a\u0642\u0627\u0644 \u0628\u064a\u0646 \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0648\u0627\u0644\u062a\u0645\u0648\u064a\u0647 *\/\r\n    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n    \r\n    \/* \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u062f\u062e\u0648\u0644 \u0627\u0644\u0623\u0648\u0644\u064a\u0629 (\u0644\u0644\u0623\u0646\u064a\u0645\u064a\u0634\u0646 \u0639\u0646\u062f \u0627\u0644\u0633\u0643\u0631\u0648\u0644) *\/\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n}\r\n\r\n\/* \u0645\u0646\u0635\u0629 \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0629 3D *\/\r\n.lis-holo-wrapper {\r\n    position: relative;\r\n    width: 100px;\r\n    height: 120px; \/* \u0645\u0633\u0627\u062d\u0629 \u0637\u0648\u0644\u064a\u0629 \u0644\u0644\u0623\u064a\u0642\u0648\u0646\u0629 \u0648\u0627\u0644\u0642\u0627\u0639\u062f\u0629 *\/\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n\/* \u062e\u0637 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0639\u0645\u0648\u062f\u064a (Data Beam) *\/\r\n.lis-data-beam {\r\n    position: absolute;\r\n    top: -50px;\r\n    width: 1px;\r\n    height: 50px;\r\n    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15), var(--lis-sep-accent));\r\n    opacity: 0.3;\r\n    transition: all 0.5s ease;\r\n}\r\n\r\n\/* \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0629 \u0627\u0644\u0639\u0627\u0626\u0645\u0629 *\/\r\n.lis-sep-icon {\r\n    font-size: var(--lis-icon-size);\r\n    color: var(--lis-sep-text);\r\n    position: relative;\r\n    z-index: 5;\r\n    transform: translateY(10px);\r\n    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n    text-shadow: 0 5px 15px rgba(0,0,0,0.5);\r\n}\r\n\r\n\/* \u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0647\u0648\u0644\u0648\u062c\u0631\u0627\u0645 \u05d4\u05de\u0636\u064a\u0626\u0629 (Hologram Base) *\/\r\n.lis-holo-base {\r\n    position: absolute;\r\n    bottom: 20px;\r\n    width: 60px;\r\n    height: 8px;\r\n    background: radial-gradient(ellipse at center, rgba(77, 166, 255, 0.3) 0%, transparent 70%);\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 10px rgba(77, 166, 255, 0.1);\r\n    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n    transform: scale(0.8);\r\n}\r\n\r\n.lis-sep-title {\r\n    color: var(--lis-sep-text);\r\n    font-size: var(--lis-title-size);\r\n    font-weight: 700;\r\n    letter-spacing: 0.5px;\r\n    margin: 0;\r\n    transition: all 0.5s ease;\r\n}\r\n\r\n.lis-sep-item:hover .lis-data-beam {\r\n    height: 80px;\r\n    top: -80px;\r\n    opacity: 1;\r\n    box-shadow: 0 0 15px var(--lis-sep-accent);\r\n}\r\n\r\n.lis-sep-item:hover .lis-sep-icon {\r\n    color: var(--lis-sep-accent);\r\n    transform: translateY(-5px); \/* \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0629 \u062a\u0631\u062a\u0641\u0639 \u0623\u0643\u062b\u0631 *\/\r\n    text-shadow: 0 10px 25px rgba(77, 166, 255, 0.6);\r\n}\r\n\r\n.lis-sep-item:hover .lis-holo-base {\r\n    width: 80px;\r\n    height: 12px;\r\n    background: radial-gradient(ellipse at center, rgba(77, 166, 255, 0.8) 0%, transparent 70%);\r\n    box-shadow: 0 0 25px rgba(77, 166, 255, 0.5);\r\n    transform: scale(1); \/* \u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u062a\u062a\u0633\u0639 \u0648\u062a\u0636\u064a\u0621 \u0628\u0634\u062f\u0629 *\/\r\n}\r\n\r\n.lis-sep-item:hover .lis-sep-title {\r\n    color: var(--lis-sep-accent);\r\n    text-shadow: 0 0 15px rgba(77, 166, 255, 0.4);\r\n}\r\n\r\n\/* \u0643\u0644\u0627\u0633 \u0627\u0644\u062a\u0634\u063a\u064a\u0644 \u0644\u0645\u0627 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u064a\u0648\u0635\u0644 \u0644\u0644\u0633\u0643\u0634\u0646 *\/\r\n.lis-separator-pro.is-visible .lis-sep-item {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n\/* \u062a\u0623\u062e\u064a\u0631 \u0645\u062a\u062f\u0631\u062c (Staggered Delay) \u0644\u0644\u0639\u0646\u0627\u0635\u0631 \u0644\u062a\u062f\u062e\u0644 \u0648\u0627\u062d\u062f\u0629 \u062a\u0644\u0648 \u0627\u0644\u0623\u062e\u0631\u0649 *\/\r\n.lis-separator-pro.is-visible .lis-sep-item:nth-child(1) { transition-delay: 0.1s; }\r\n.lis-separator-pro.is-visible .lis-sep-item:nth-child(2) { transition-delay: 0.2s; }\r\n.lis-separator-pro.is-visible .lis-separator-pro .lis-sep-item:nth-child(3) { transition-delay: 0.3s; }\r\n.lis-separator-pro.is-visible .lis-sep-item:nth-child(4) { transition-delay: 0.4s; }\r\n\r\n\/* \u0646\u0628\u0636 \u0627\u0644\u0625\u0636\u0627\u0621\u0629 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 *\/\r\n@keyframes lis-pulse-glow {\r\n    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }\r\n    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }\r\n}\r\n\r\n\/* \u0627\u0644\u062a\u062c\u0627\u0648\u0628 \u0645\u0639 \u0627\u0644\u062a\u0627\u0628\u0644\u062a \u0648\u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 *\/\r\n@media (max-width: 992px) {\r\n    .lis-sep-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 60px 20px;\r\n    }\r\n}\r\n\r\n@media (max-width: 576px) {\r\n    .lis-separator-pro { padding: 80px 0; }\r\n    .lis-sep-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 50px;\r\n    }\r\n    \r\n    \/* \u0641\u064a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644\u060c \u0625\u063a\u0644\u0627\u0642 \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0640 Blur \u0639\u0644\u0649 \u0643\u0644 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0639\u0634\u0627\u0646 \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0644\u0645\u0633 (Touch) *\/\r\n    .lis-sep-grid:hover .lis-sep-item {\r\n        opacity: 1;\r\n        filter: none;\r\n        transform: none;\r\n    }\r\n    .lis-sep-grid .lis-sep-item:active {\r\n        transform: scale(1.05);\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"lis-separator-pro\" id=\"lis-separator-sec\">\r\n    \r\n    <!-- \u0625\u0636\u0627\u0621\u0629 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0646\u0627\u0628\u0636\u0629 -->\r\n    <div class=\"lis-ambient-glow\"><\/div>\r\n\r\n    <div class=\"lis-sep-container\">\r\n        <div class=\"lis-sep-grid\">\r\n            \r\n            <!-- \u0627\u0644\u0645\u064a\u0632\u0629 1 -->\r\n            <div class=\"lis-sep-item\">\r\n                <div class=\"lis-holo-wrapper\">\r\n                    <div class=\"lis-data-beam\"><\/div>\r\n                    <i class=\"fa-solid fa-code lis-sep-icon\"><\/i>\r\n                    <div class=\"lis-holo-base\"><\/div>\r\n                <\/div>\r\n                <h3 class=\"lis-sep-title\">Specialized Programming<\/h3>\r\n            <\/div>\r\n            \r\n            <!-- \u0627\u0644\u0645\u064a\u0632\u0629 2 -->\r\n            <div class=\"lis-sep-item\">\r\n                <div class=\"lis-holo-wrapper\">\r\n                    <div class=\"lis-data-beam\"><\/div>\r\n                    <i class=\"fa-solid fa-brain lis-sep-icon\"><\/i>\r\n                    <div class=\"lis-holo-base\"><\/div>\r\n                <\/div>\r\n                <h3 class=\"lis-sep-title\">Artificial Intelligence<\/h3>\r\n            <\/div>\r\n            \r\n            <!-- \u0627\u0644\u0645\u064a\u0632\u0629 3 -->\r\n            <div class=\"lis-sep-item\">\r\n                <div class=\"lis-holo-wrapper\">\r\n                    <div class=\"lis-data-beam\"><\/div>\r\n                    <i class=\"fa-solid fa-scale-balanced lis-sep-icon\"><\/i>\r\n                    <div class=\"lis-holo-base\"><\/div>\r\n                <\/div>\r\n                <h3 class=\"lis-sep-title\">Legal Experience<\/h3>\r\n            <\/div>\r\n            \r\n            <!-- \u0627\u0644\u0645\u064a\u0632\u0629 4 -->\r\n            <div class=\"lis-sep-item\">\r\n                <div class=\"lis-holo-wrapper\">\r\n                    <div class=\"lis-data-beam\"><\/div>\r\n                    <i class=\"fa-solid fa-bolt lis-sep-icon\"><\/i>\r\n                    <div class=\"lis-holo-base\"><\/div>\r\n                <\/div>\r\n                <h3 class=\"lis-sep-title\">Operational Efficiency<\/h3>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const separatorSection = document.getElementById('lis-separator-sec');\r\n    \r\n    if (separatorSection) {\r\n        const observer = new IntersectionObserver((entries, obs) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    entry.target.classList.add('is-visible');\r\n                    obs.unobserve(entry.target); \/\/ \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062d\u0631\u0643\u0629 \u0645\u0631\u0629 \u0648\u0627\u062d\u062f\u0629 \u0641\u0642\u0637\r\n                }\r\n            });\r\n        }, {\r\n            threshold: 0.2 \/\/ \u064a\u0628\u062f\u0623 \u0644\u0645\u0627 20% \u0645\u0646 \u0627\u0644\u0633\u0643\u0634\u0646 \u064a\u0638\u0647\u0631\r\n        });\r\n\r\n        observer.observe(separatorSection);\r\n    }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-60e1ec0 elementor-widget elementor-widget-html\" data-id=\"60e1ec0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n.lis-distinction-sec {\r\n    \/* \u0627\u0644\u0623\u0644\u0648\u0627\u0646 - \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0641\u0627\u062a\u062d\u0629 *\/\r\n    --lis-bg-light: #F8FAFC;        \r\n    --lis-surface: #FFFFFF;         \r\n    --lis-primary: #00163F;         \r\n    --lis-text-body: #475569;       \r\n    --lis-accent-glow: #4da6ff;     \r\n    \r\n    \/* \u0627\u0644\u062e\u0637\u0648\u0637 *\/\r\n    --lis-font: 'Almarai', sans-serif;\r\n    \r\n    position: relative;\r\n    width: 100%;\r\n    padding: 100px 0;\r\n    background-color: var(--lis-bg-light);\r\n    font-family: var(--lis-font);\r\n    overflow: hidden;\r\n}\r\n\r\n\/* \u0634\u0628\u0643\u0629 \u0647\u0646\u062f\u0633\u064a\u0629 \u062e\u0644\u0641\u064a\u0629 \u062e\u0641\u064a\u0641\u0629 \u062c\u062f\u0627\u064b *\/\r\n.lis-distinction-sec::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background-image: radial-gradient(rgba(0, 22, 63, 0.04) 1px, transparent 1px);\r\n    background-size: 40px 40px;\r\n    z-index: 1;\r\n}\r\n\r\n.lis-dist-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 0 5%;\r\n    position: relative;\r\n    z-index: 10;\r\n    display: grid;\r\n    grid-template-columns: 1.2fr 1fr;\r\n    gap: 60px;\r\n    align-items: center;\r\n}\r\n\r\n\/* --- \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0623\u064a\u0645\u0646: \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0646\u0635\u064a \u0648\u0627\u0644\u062e\u0637\u0648\u0627\u062a --- *\/\r\n.lis-dist-content {\r\n    opacity: 0;\r\n    transform: translateX(30px);\r\n    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n.lis-dist-sec-tag {\r\n    display: inline-block;\r\n    color: var(--lis-accent-glow);\r\n    font-size: 0.85rem;\r\n    font-weight: 800;\r\n    letter-spacing: 1px;\r\n    background: rgba(77, 166, 255, 0.1);\r\n    padding: 6px 15px;\r\n    border-radius: 50px;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.lis-dist-title {\r\n    color: var(--lis-primary);\r\n    font-size: 2.2rem;\r\n    font-weight: 800;\r\n    line-height: 1.4;\r\n    margin: 0 0 30px 0;\r\n}\r\n\r\n\/* \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u062e\u0637\u0648\u0627\u062a \u0627\u0644\u062b\u0644\u0627\u062b *\/\r\n.lis-steps-wrapper {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 25px;\r\n    position: relative;\r\n}\r\n\r\n.lis-step-item {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    position: relative;\r\n    padding: 20px;\r\n    background: var(--lis-surface);\r\n    border-radius: 16px;\r\n    border: 1px solid rgba(0, 22, 63, 0.05);\r\n    box-shadow: 0 10px 30px rgba(0, 22, 63, 0.02);\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.lis-step-item:hover {\r\n    transform: translateY(-5px);\r\n    box-shadow: 0 15px 40px rgba(0, 22, 63, 0.06);\r\n    border-color: rgba(77, 166, 255, 0.2);\r\n}\r\n\r\n.lis-step-num {\r\n    width: 45px;\r\n    height: 45px;\r\n    background: var(--lis-primary);\r\n    color: #fff;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 1.2rem;\r\n    font-weight: 800;\r\n    flex-shrink: 0;\r\n    \/* \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u062c\u0648\u0647\u0631\u064a \u0644\u0644\u0645\u0633\u0627\u0641\u0627\u062a: *\/\r\n    margin-inline-end: 20px;\r\n    box-shadow: 0 5px 15px rgba(0, 22, 63, 0.15);\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.lis-step-item:hover .lis-step-num {\r\n    background: var(--lis-accent-glow);\r\n    transform: scale(1.1) rotate(-5deg);\r\n}\r\n\r\n.lis-step-text-content h3 {\r\n    color: var(--lis-primary);\r\n    font-size: 1.2rem;\r\n    font-weight: 800;\r\n    margin: 0 0 8px 0;\r\n}\r\n\r\n.lis-step-text-content p {\r\n    color: var(--lis-text-body);\r\n    font-size: 1rem;\r\n    line-height: 1.8;\r\n    margin: 0;\r\n}\r\n\r\n.lis-highlight {\r\n    color: var(--lis-primary);\r\n    font-weight: 700;\r\n    background: linear-gradient(120deg, rgba(77, 166, 255, 0.2) 0%, rgba(77, 166, 255, 0) 100%);\r\n    padding: 0 5px;\r\n    border-radius: 4px;\r\n}\r\n\r\n\/* --- \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0623\u064a\u0633\u0631: \u0627\u0644\u0625\u0646\u0641\u0648\u062c\u0631\u0627\u0641\u064a\u0643 --- *\/\r\n.lis-dist-visual {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 520px;\r\n    background: var(--lis-surface);\r\n    border-radius: 20px;\r\n    box-shadow: 0 20px 50px rgba(0, 22, 63, 0.05);\r\n    border: 1px solid rgba(0, 22, 63, 0.05);\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding: 50px 20px;\r\n    overflow: hidden;\r\n    opacity: 0;\r\n    transform: translateX(-30px);\r\n    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;\r\n    cursor: pointer;\r\n}\r\n\r\n\/* \u0645\u0633\u0627\u0631 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0631\u0643\u0632\u064a *\/\r\n.lis-data-path {\r\n    position: absolute;\r\n    top: 120px;\r\n    bottom: 120px;\r\n    width: 2px;\r\n    background: rgba(0, 22, 63, 0.1);\r\n    z-index: 1;\r\n}\r\n\r\n.lis-data-pulse {\r\n    position: absolute;\r\n    top: 0;\r\n    \/* \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u062c\u0648\u0647\u0631\u064a \u0644\u0644\u0646\u0628\u0636\u0629: *\/\r\n    inset-inline-start: -1px;\r\n    width: 4px;\r\n    height: 30px;\r\n    background: var(--lis-accent-glow);\r\n    border-radius: 4px;\r\n    box-shadow: 0 0 10px var(--lis-accent-glow);\r\n    animation: lis-data-flow 2s infinite linear;\r\n    opacity: 0;\r\n}\r\n\r\n\/* \u0643\u062a\u0644\u0629 \u0627\u0644\u0640 AI \u0627\u0644\u0639\u0627\u0645 *\/\r\n.lis-ai-block {\r\n    position: relative;\r\n    z-index: 2;\r\n    text-align: center;\r\n}\r\n\r\n.lis-ai-icon-box {\r\n    width: 70px;\r\n    height: 70px;\r\n    border-radius: 50%;\r\n    background: rgba(0, 22, 63, 0.03);\r\n    border: 2px dashed rgba(0, 22, 63, 0.2);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 1.5rem;\r\n    color: var(--lis-text-body);\r\n    margin: 0 auto 10px;\r\n    position: relative;\r\n}\r\n\r\n\/* \u0627\u0644\u062f\u0648\u0627\u0626\u0631 \u0627\u0644\u0645\u0634\u062a\u062a\u0629 - \u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u062a \u0644\u0645\u0646\u0637\u0642\u064a\u0629 *\/\r\n.lis-scatter-dot {\r\n    position: absolute;\r\n    width: 8px;\r\n    height: 8px;\r\n    background: #cbd5e1;\r\n    border-radius: 50%;\r\n    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n.lis-dot-1 { top: -15px; inset-inline-end: -10px; animation: lis-float 3s infinite alternate; }\r\n.lis-dot-2 { bottom: 10px; inset-inline-start: -20px; animation: lis-float 4s infinite alternate-reverse; }\r\n.lis-dot-3 { top: 20px; inset-inline-end: -25px; animation: lis-float 2.5s infinite alternate; }\r\n.lis-dot-4 { top: -10px; inset-inline-start: -5px; animation: lis-float 3.5s infinite alternate-reverse; }\r\n\r\n.lis-visual-label {\r\n    font-size: 0.95rem;\r\n    font-weight: 700;\r\n    color: var(--lis-text-body);\r\n}\r\n\r\n\/* \u0643\u062a\u0644\u0629 \u0623\u0646\u0638\u0645\u0629 LIS *\/\r\n.lis-lis-block {\r\n    position: relative;\r\n    z-index: 2;\r\n    text-align: center;\r\n}\r\n\r\n.lis-lis-icon-box {\r\n    width: 85px;\r\n    height: 85px;\r\n    border-radius: 16px;\r\n    background: var(--lis-primary);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin: 0 auto 10px;\r\n    box-shadow: 0 10px 25px rgba(0, 22, 63, 0.2);\r\n    transition: all 0.5s ease;\r\n    position: relative;\r\n}\r\n\r\n.lis-lis-icon-box img {\r\n    max-width: 65%;\r\n    max-height: 65%;\r\n    object-fit: contain;\r\n    position: relative;\r\n    z-index: 5;\r\n    transition: transform 0.5s ease;\r\n}\r\n\r\n.lis-lis-icon-box::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: -5px;\r\n    border-radius: 20px;\r\n    border: 1px solid var(--lis-accent-glow);\r\n    opacity: 0;\r\n    transform: scale(0.8);\r\n    transition: all 0.5s ease;\r\n}\r\n\r\n.lis-lis-block .lis-visual-label {\r\n    color: var(--lis-primary);\r\n    font-size: 1.05rem;\r\n}\r\n\r\n\/* \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0627\u0644\u0645\u0627\u0648\u0633 \u0644\u0644\u0631\u0633\u0645 \u0627\u0644\u062a\u0648\u0636\u064a\u062d\u064a *\/\r\n.lis-dist-visual:hover .lis-data-pulse { opacity: 1; }\r\n.lis-dist-visual:hover .lis-scatter-dot {\r\n    top: 50%; \r\n    inset-inline-start: 50%; \r\n    transform: translate(-50%, -50%) scale(0);\r\n    opacity: 0; \r\n    background: var(--lis-accent-glow);\r\n}\r\n.lis-dist-visual:hover .lis-ai-icon-box { border-color: rgba(0, 22, 63, 0.1); color: rgba(0, 22, 63, 0.3); }\r\n.lis-dist-visual:hover .lis-lis-icon-box { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(77, 166, 255, 0.3); }\r\n.lis-dist-visual:hover .lis-lis-icon-box img { transform: scale(1.15); }\r\n.lis-dist-visual:hover .lis-lis-icon-box::before {\r\n    opacity: 1; transform: scale(1); animation: lis-ping-border 1.5s infinite cubic-bezier(0, 0, 0.2, 1);\r\n}\r\n\r\n\/* \u0643\u0644\u0627\u0633\u0627\u062a \u0627\u0644\u062a\u0641\u0639\u064a\u0644 \u0639\u0646\u062f \u0627\u0644\u062a\u0645\u0631\u064a\u0631 *\/\r\n.lis-dist-visible .lis-dist-content { opacity: 1; transform: translateX(0); }\r\n.lis-dist-visible .lis-dist-visual { opacity: 1; transform: translateX(0); }\r\n\r\n\/* \u0627\u0644\u0627\u0646\u064a\u0645\u064a\u0634\u0646\u0632 *\/\r\n@keyframes lis-data-flow { 0% { top: 10%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 90%; opacity: 0; } }\r\n@keyframes lis-float { 0% { transform: translateY(0px) translateX(0px); } 100% { transform: translateY(-8px) translateX(5px); } }\r\n@keyframes lis-ping-border { 75%, 100% { transform: scale(1.3); opacity: 0; } }\r\n\r\n@media (max-width: 992px) {\r\n    .lis-dist-container {\r\n        grid-template-columns: 1fr;\r\n        gap: 50px;\r\n    }\r\n    .lis-dist-visual {\r\n        height: 450px;\r\n        order: -1;\r\n    }\r\n    .lis-dist-title {\r\n        font-size: 1.8rem;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"lis-distinction-sec\" id=\"lis-distinction-sec\">\r\n    <div class=\"lis-dist-container\">\r\n        \r\n        <div class=\"lis-dist-content\">\r\n            <span class=\"lis-dist-sec-tag\">Philosophy and Technology<\/span>\r\n            <h2 class=\"lis-dist-title\">What makes LIS different from general AI?<\/h2>\r\n            \r\n            <div class=\"lis-steps-wrapper\">\r\n                \r\n                <div class=\"lis-step-item\">\r\n                    <div class=\"lis-step-num\">1<\/div>\r\n                    <div class=\"lis-step-text-content\">\r\n                        <h3>General AI<\/h3>\r\n                        <p>is designed to generate broad information across multiple fields and industries.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"lis-step-item\">\r\n                    <div class=\"lis-step-num\">2<\/div>\r\n                    <div class=\"lis-step-text-content\">\r\n                        <h3>LIS is built differently<\/h3>\r\n                        <p class=\"translation-block\">Every LIS system begins with   <span class=\"lis-highlight\">specialized programming<\/span> designed to solve a specific legal challenge with structure, precision, and practical clarity.<br>\nArtificial intelligence is then integrated to support communication and streamline workflows intelligently \u2014 not to replace the system itself.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"lis-step-item\">\r\n                    <div class=\"lis-step-num\">3<\/div>\r\n                    <div class=\"lis-step-text-content\">\r\n                        <h3>The result<\/h3>\r\n                        <p class=\"translation-block\">is not a generic AI experience,<span class=\"lis-highlight\">\nbut a purpose-built legal system<\/span> designed around the real demands of modern legal practice.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"lis-dist-visual\" title=\"\u0645\u0631\u0631 \u0627\u0644\u0645\u0627\u0648\u0633 \u0644\u0645\u0639\u0631\u0641\u0629 \u0643\u064a\u0641 \u062a\u0639\u0645\u0644 \u0623\u0646\u0638\u0645\u0629 LIS\">\r\n            \r\n            <div class=\"lis-data-path\">\r\n                <div class=\"lis-data-pulse\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"lis-ai-block\">\r\n                <div class=\"lis-ai-icon-box\">\r\n                    <i class=\"fa-solid fa-brain\"><\/i>\r\n                    <div class=\"lis-scatter-dot lis-dot-1\"><\/div>\r\n                    <div class=\"lis-scatter-dot lis-dot-2\"><\/div>\r\n                    <div class=\"lis-scatter-dot lis-dot-3\"><\/div>\r\n                    <div class=\"lis-scatter-dot lis-dot-4\"><\/div>\r\n                <\/div>\r\n                <div class=\"lis-visual-label translation-block\">General Artificial Intelligence<br><span style=\"font-size:0.75rem;font-weight:400;opacity:0.7\">(General and dispersed information)<\/span><\/div>\r\n            <\/div>\r\n\r\n            <div style=\"z-index: 5; background: var(--lis-surface); padding: 5px; color: var(--lis-accent-glow); font-size: 1.3rem;\">\r\n                <i class=\"fa-solid fa-laptop-code\"><\/i>\r\n            <\/div>\r\n\r\n            <div class=\"lis-lis-block\">\r\n                <div class=\"lis-lis-icon-box\">\r\n                    <img decoding=\"async\" src=\"https:\/\/lis.sa\/wp-content\/uploads\/2026\/05\/image-18.webp\" alt=\"\u0634\u0639\u0627\u0631 LIS\">\r\n                <\/div>\r\n                <div class=\"lis-visual-label\">LIS Systems<br><span style=\"font-size:0.75rem; font-weight:400; opacity:0.8;\">(Specialized Legal System)<\/span><\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const distSection = document.getElementById('lis-distinction-sec');\r\n    \r\n    if (distSection) {\r\n        const observer = new IntersectionObserver((entries, obs) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    entry.target.classList.add('lis-dist-visible');\r\n                    obs.unobserve(entry.target); \r\n                }\r\n            });\r\n        }, {\r\n            threshold: 0.2 \r\n        });\r\n\r\n        observer.observe(distSection);\r\n    }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0645\u0646 \u0646\u062d\u0646 \u0645\u0646 \u0646\u062d\u0646 \u0634\u0631\u0643\u0629 \u0645\u0647\u0646\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629 \u0641\u064a \u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u0642\u0627\u0646\u0648\u0646\u060c \u0646\u0637\u0648\u0651\u0631 \u0623\u0646\u0638\u0645\u0629 \u0630\u0643\u064a\u0629 \u0645\u0635\u0645\u0645\u0629 \u062e\u0635\u064a\u0635\u0627\u064b \u0644\u062a\u0645\u0643\u064a\u0646 \u0627\u0644\u0645\u062d\u0627\u0645\u064a \u0627\u0644\u062d\u062f\u064a\u062b \u0645\u0646 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-17","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lis.sa\/en\/wp-json\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lis.sa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lis.sa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lis.sa\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lis.sa\/en\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":25,"href":"https:\/\/lis.sa\/en\/wp-json\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":249,"href":"https:\/\/lis.sa\/en\/wp-json\/wp\/v2\/pages\/17\/revisions\/249"}],"wp:attachment":[{"href":"https:\/\/lis.sa\/en\/wp-json\/wp\/v2\/media?parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}