BrutoCode | \u0634\u0631\u064a\u0643\u0643 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a<\/title>\n<meta name=\"description\" content=\"BrutoCode \u2014 \u0634\u0631\u064a\u0643\u0643 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a \u0641\u064a \u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629. \u062d\u0644\u0648\u0644 \u0645\u0624\u0633\u0633\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0641\u064a ERP \u0648CRM \u0648\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0648\u0627\u0644\u0623\u0645\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a.\">\n\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Cairo:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ===========================\n DESIGN TOKENS\n=========================== *\/\n:root, [data-theme=\"light\"] {\n --font-display: 'Tajawal', 'Cairo', sans-serif;\n --font-body: 'Cairo', 'Tajawal', sans-serif;\n\n --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);\n --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);\n --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);\n --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);\n --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);\n --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);\n --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);\n\n --space-1: 0.25rem;\n --space-2: 0.5rem;\n --space-3: 0.75rem;\n --space-4: 1rem;\n --space-5: 1.25rem;\n --space-6: 1.5rem;\n --space-8: 2rem;\n --space-10: 2.5rem;\n --space-12: 3rem;\n --space-16: 4rem;\n --space-20: 5rem;\n --space-24: 6rem;\n\n \/* BrutoCode Brand Colors \u2014 Deep Navy + Gold *\/\n --color-bg: #f8f7f4;\n --color-surface: #faf9f7;\n --color-surface-2: #ffffff;\n --color-surface-offset: #f1efe9;\n --color-divider: #e0ddd6;\n --color-border: #d8d4cc;\n\n --color-text: #1a1714;\n --color-text-muted: #6b6863;\n --color-text-faint: #b0ada8;\n --color-text-inverse: #f8f7f4;\n\n \/* Primary: Deep Navy *\/\n --color-primary: #0d2340;\n --color-primary-hover: #091a30;\n --color-primary-active: #051020;\n --color-primary-highlight: #cdd5e0;\n\n \/* Accent: Gold *\/\n --color-gold: #c49a2b;\n --color-gold-hover: #a8801f;\n --color-gold-active: #8a6615;\n --color-gold-highlight: #f5ecd2;\n\n --radius-sm: 0.375rem;\n --radius-md: 0.5rem;\n --radius-lg: 0.75rem;\n --radius-xl: 1rem;\n --radius-2xl: 1.5rem;\n --radius-full: 9999px;\n\n --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);\n\n --shadow-sm: 0 1px 3px oklch(0.15 0.02 240 \/ 0.08);\n --shadow-md: 0 4px 16px oklch(0.15 0.02 240 \/ 0.10);\n --shadow-lg: 0 12px 40px oklch(0.15 0.02 240 \/ 0.14);\n\n --content-narrow: 640px;\n --content-default: 960px;\n --content-wide: 1200px;\n}\n\n[data-theme=\"dark\"] {\n --color-bg: #0e1117;\n --color-surface: #131720;\n --color-surface-2: #1a2030;\n --color-surface-offset: #111520;\n --color-divider: #1e2535;\n --color-border: #28304a;\n --color-text: #e8e6e2;\n --color-text-muted: #8a8680;\n --color-text-faint: #50504a;\n --color-text-inverse: #0e1117;\n --color-primary: #4a80c4;\n --color-primary-hover: #6599d4;\n --color-primary-active: #80b2e0;\n --color-primary-highlight: #1a2a3d;\n --color-gold: #d4aa44;\n --color-gold-hover: #e0be60;\n --color-gold-active: #ecd080;\n --color-gold-highlight: #2a2010;\n --shadow-sm: 0 1px 3px oklch(0 0 0 \/ 0.3);\n --shadow-md: 0 4px 16px oklch(0 0 0 \/ 0.4);\n --shadow-lg: 0 12px 40px oklch(0 0 0 \/ 0.5);\n}\n\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme]) {\n --color-bg: #0e1117; --color-surface: #131720; --color-surface-2: #1a2030;\n --color-surface-offset: #111520; --color-divider: #1e2535; --color-border: #28304a;\n --color-text: #e8e6e2; --color-text-muted: #8a8680; --color-text-faint: #50504a;\n --color-text-inverse: #0e1117; --color-primary: #4a80c4; --color-primary-hover: #6599d4;\n --color-primary-active: #80b2e0; --color-primary-highlight: #1a2a3d;\n --color-gold: #d4aa44; --color-gold-hover: #e0be60; --color-gold-active: #ecd080;\n --color-gold-highlight: #2a2010;\n }\n}\n\n\/* ===========================\n BASE\n=========================== *\/\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\nhtml {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n scroll-behavior: smooth;\n scroll-padding-top: var(--space-20);\n}\n\nbody {\n min-height: 100dvh;\n line-height: 1.7;\n font-family: var(--font-body);\n font-size: var(--text-base);\n color: var(--color-text);\n background-color: var(--color-bg);\n direction: rtl;\n}\n\nimg, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }\nul[role=\"list\"], ol[role=\"list\"] { list-style: none; }\ninput, button, textarea, select { font: inherit; color: inherit; }\nh1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.25; font-family: var(--font-display); }\np, li { text-wrap: pretty; max-width: 68ch; }\n\n::selection { background: oklch(from var(--color-gold) l c h \/ 0.2); color: var(--color-text); }\n\n:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; border-radius: var(--radius-sm); }\n\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }\n}\n\nbutton { cursor: pointer; background: none; border: none; }\n\na, button, [role=\"button\"] {\n transition: color var(--transition), background var(--transition),\n border-color var(--transition), box-shadow var(--transition),\n transform var(--transition), opacity var(--transition);\n}\n\n.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }\n\n\/* ===========================\n LAYOUT\n=========================== *\/\n.container {\n max-width: var(--content-wide);\n margin-inline: auto;\n padding-inline: clamp(var(--space-4), 4vw, var(--space-12));\n}\n\n.container--narrow { max-width: var(--content-default); }\n\n\/* ===========================\n NAVIGATION\n=========================== *\/\n.nav {\n position: fixed;\n top: 0; inset-inline: 0;\n z-index: 100;\n padding-block: var(--space-4);\n background: color-mix(in oklch, var(--color-bg) 92%, transparent);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border-bottom: 1px solid var(--color-divider);\n transition: box-shadow var(--transition);\n}\n\n.nav.scrolled { box-shadow: var(--shadow-md); }\n\n.nav__inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-8);\n}\n\n.nav__logo {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n text-decoration: none;\n color: var(--color-text);\n}\n\n.nav__logo-mark {\n width: 40px; height: 40px;\n flex-shrink: 0;\n}\n\n.nav__brand {\n font-family: var(--font-display);\n font-size: var(--text-lg);\n font-weight: 800;\n letter-spacing: -0.02em;\n color: var(--color-primary);\n}\n\n[data-theme=\"dark\"] .nav__brand { color: var(--color-text); }\n\n.nav__links {\n display: flex;\n align-items: center;\n gap: var(--space-8);\n list-style: none;\n}\n\n.nav__links a {\n font-size: var(--text-sm);\n font-weight: 500;\n color: var(--color-text-muted);\n text-decoration: none;\n}\n\n.nav__links a:hover { color: var(--color-text); }\n\n.nav__actions {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n\n.nav__toggle {\n display: none;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--color-text);\n padding: var(--space-2);\n border-radius: var(--radius-md);\n}\n\n.nav__toggle:hover { background: var(--color-surface-offset); }\n\n.theme-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px; height: 36px;\n border-radius: var(--radius-full);\n color: var(--color-text-muted);\n border: 1px solid var(--color-border);\n background: var(--color-surface);\n}\n\n.theme-btn:hover { color: var(--color-text); border-color: var(--color-primary); }\n\n.btn {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-3) var(--space-6);\n border-radius: var(--radius-full);\n font-size: var(--text-sm);\n font-weight: 600;\n text-decoration: none;\n cursor: pointer;\n white-space: nowrap;\n border: 1.5px solid transparent;\n}\n\n.btn-primary {\n background: var(--color-primary);\n color: var(--color-text-inverse);\n}\n\n[data-theme=\"dark\"] .btn-primary { color: #fff; }\n\n.btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }\n\n.btn-outline {\n background: transparent;\n color: var(--color-primary);\n border-color: var(--color-primary);\n}\n\n[data-theme=\"dark\"] .btn-outline { color: var(--color-text); border-color: var(--color-border); }\n\n.btn-outline:hover { background: var(--color-primary); color: var(--color-text-inverse); }\n\n[data-theme=\"dark\"] .btn-outline:hover { background: var(--color-surface-2); border-color: var(--color-text-muted); }\n\n.btn-gold {\n background: var(--color-gold);\n color: #fff;\n}\n\n.btn-gold:hover { background: var(--color-gold-hover); transform: translateY(-2px); box-shadow: 0 8px 24px oklch(from var(--color-gold) l c h \/ 0.35); }\n\n\/* ===========================\n HERO\n=========================== *\/\n.hero {\n position: relative;\n min-height: 100dvh;\n display: flex;\n align-items: center;\n overflow: hidden;\n padding-top: var(--space-20);\n}\n\n.hero__bg {\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse 80% 60% at 70% 40%, oklch(0.25 0.08 240 \/ 0.08) 0%, transparent 60%),\n radial-gradient(ellipse 60% 50% at 20% 80%, oklch(0.70 0.12 60 \/ 0.06) 0%, transparent 50%),\n var(--color-bg);\n z-index: 0;\n}\n\n.hero__grid-pattern {\n position: absolute;\n inset: 0;\n z-index: 0;\n background-image:\n linear-gradient(oklch(from var(--color-primary) l c h \/ 0.04) 1px, transparent 1px),\n linear-gradient(90deg, oklch(from var(--color-primary) l c h \/ 0.04) 1px, transparent 1px);\n background-size: 60px 60px;\n mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);\n -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);\n}\n\n.hero__inner {\n position: relative;\n z-index: 1;\n display: grid;\n grid-template-columns: 1fr 1fr;\n align-items: center;\n gap: var(--space-16);\n padding-block: clamp(var(--space-16), 10vh, var(--space-24));\n}\n\n.hero__badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n background: var(--color-gold-highlight);\n color: var(--color-gold);\n border: 1px solid oklch(from var(--color-gold) l c h \/ 0.25);\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-full);\n font-size: var(--text-xs);\n font-weight: 600;\n margin-bottom: var(--space-6);\n letter-spacing: 0.04em;\n}\n\n[data-theme=\"dark\"] .hero__badge { background: var(--color-gold-highlight); color: var(--color-gold); }\n\n.hero__badge-dot {\n width: 6px; height: 6px;\n background: var(--color-gold);\n border-radius: 50%;\n animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.5; transform: scale(0.85); }\n}\n\n.hero__title {\n font-size: var(--text-3xl);\n font-weight: 900;\n color: var(--color-primary);\n line-height: 1.15;\n margin-bottom: var(--space-6);\n letter-spacing: -0.025em;\n}\n\n[data-theme=\"dark\"] .hero__title { color: var(--color-text); }\n\n.hero__title em {\n font-style: normal;\n color: var(--color-gold);\n}\n\n.hero__sub {\n font-size: var(--text-lg);\n color: var(--color-text-muted);\n max-width: 52ch;\n margin-bottom: var(--space-10);\n line-height: 1.7;\n}\n\n.hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n align-items: center;\n}\n\n.hero__stats {\n display: flex;\n gap: var(--space-8);\n margin-top: var(--space-12);\n padding-top: var(--space-8);\n border-top: 1px solid var(--color-divider);\n}\n\n.hero__stat-num {\n font-family: var(--font-display);\n font-size: var(--text-xl);\n font-weight: 800;\n color: var(--color-primary);\n line-height: 1;\n margin-bottom: var(--space-1);\n}\n\n[data-theme=\"dark\"] .hero__stat-num { color: var(--color-gold); }\n\n.hero__stat-label {\n font-size: var(--text-xs);\n color: var(--color-text-muted);\n font-weight: 500;\n}\n\n.hero__visual {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.hero__card-stack {\n position: relative;\n width: 100%;\n max-width: 420px;\n margin-inline: auto;\n}\n\n.hero__card {\n background: var(--color-surface-2);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-2xl);\n padding: var(--space-6);\n box-shadow: var(--shadow-lg);\n position: relative;\n z-index: 2;\n}\n\n.hero__card-behind {\n position: absolute;\n inset: -12px -8px -auto -8px;\n bottom: -12px;\n background: color-mix(in oklch, var(--color-primary) 8%, var(--color-surface));\n border: 1px solid var(--color-border);\n border-radius: var(--radius-2xl);\n z-index: 1;\n}\n\n.hero__card-behind-2 {\n position: absolute;\n inset: -24px -18px -auto -18px;\n bottom: -24px;\n background: color-mix(in oklch, var(--color-primary) 4%, var(--color-surface));\n border: 1px solid var(--color-divider);\n border-radius: var(--radius-2xl);\n z-index: 0;\n}\n\n.hero__card-header {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin-bottom: var(--space-6);\n}\n\n.hero__card-icon {\n width: 44px; height: 44px;\n background: var(--color-primary);\n border-radius: var(--radius-lg);\n display: flex; align-items: center; justify-content: center;\n color: #fff;\n flex-shrink: 0;\n}\n\n[data-theme=\"dark\"] .hero__card-icon { background: var(--color-gold); }\n\n.hero__card-title { font-size: var(--text-base); font-weight: 700; }\n.hero__card-sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }\n\n.metric-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-3);\n margin-bottom: var(--space-4);\n}\n\n.metric-box {\n background: var(--color-surface-offset);\n border-radius: var(--radius-lg);\n padding: var(--space-4);\n text-align: center;\n}\n\n.metric-box__num {\n font-family: var(--font-display);\n font-size: var(--text-xl);\n font-weight: 800;\n color: var(--color-primary);\n line-height: 1;\n margin-bottom: var(--space-1);\n}\n\n[data-theme=\"dark\"] .metric-box__num { color: var(--color-gold); }\n\n.metric-box__label { font-size: var(--text-xs); color: var(--color-text-muted); }\n\n.progress-row { display: flex; flex-direction: column; gap: var(--space-3); }\n\n.progress-item {}\n\n.progress-item__head {\n display: flex; justify-content: space-between;\n font-size: var(--text-xs); font-weight: 600;\n margin-bottom: var(--space-2);\n color: var(--color-text-muted);\n}\n\n.progress-bar {\n height: 6px;\n background: var(--color-divider);\n border-radius: var(--radius-full);\n overflow: hidden;\n}\n\n.progress-fill {\n height: 100%;\n border-radius: var(--radius-full);\n background: linear-gradient(90deg in oklch, var(--color-primary), var(--color-gold));\n}\n\n\/* ===========================\n SECTION SPACING\n=========================== *\/\n.section {\n padding-block: clamp(var(--space-16), 8vw, var(--space-24));\n}\n\n.section-header {\n text-align: center;\n margin-bottom: clamp(var(--space-10), 4vw, var(--space-16));\n}\n\n.section-label {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-xs);\n font-weight: 700;\n color: var(--color-gold);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n margin-bottom: var(--space-4);\n}\n\n.section-label::before, .section-label::after {\n content: '';\n width: 20px; height: 1px;\n background: var(--color-gold);\n opacity: 0.5;\n}\n\n.section-title {\n font-size: var(--text-2xl);\n font-weight: 800;\n color: var(--color-primary);\n margin-bottom: var(--space-4);\n letter-spacing: -0.02em;\n}\n\n[data-theme=\"dark\"] .section-title { color: var(--color-text); }\n\n.section-desc {\n font-size: var(--text-base);\n color: var(--color-text-muted);\n max-width: 60ch;\n margin-inline: auto;\n line-height: 1.75;\n}\n\n\/* ===========================\n NUMBERS \/ IMPACT\n=========================== *\/\n.numbers-bg { background: var(--color-primary); }\n\n[data-theme=\"dark\"] .numbers-bg { background: var(--color-surface); border-block: 1px solid var(--color-border); }\n\n.numbers-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 1px;\n background: oklch(from #fff l c h \/ 0.1);\n}\n\n[data-theme=\"dark\"] .numbers-grid { background: var(--color-border); }\n\n.number-item {\n padding: var(--space-12) var(--space-8);\n text-align: center;\n background: var(--color-primary);\n}\n\n[data-theme=\"dark\"] .number-item { background: var(--color-surface); }\n\n.number-item__num {\n font-family: var(--font-display);\n font-size: var(--text-2xl);\n font-weight: 900;\n color: var(--color-gold);\n line-height: 1;\n margin-bottom: var(--space-2);\n}\n\n.number-item__label {\n font-size: var(--text-sm);\n color: oklch(from #fff l c h \/ 0.7);\n font-weight: 500;\n}\n\n[data-theme=\"dark\"] .number-item__label { color: var(--color-text-muted); }\n\n\/* ===========================\n SERVICES\n=========================== *\/\n.services-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-6);\n}\n\n.service-card {\n background: var(--color-surface-2);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-xl);\n padding: var(--space-8);\n position: relative;\n overflow: hidden;\n transition: box-shadow var(--transition), transform var(--transition);\n}\n\n.service-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }\n\n.service-card::before {\n content: '';\n position: absolute;\n top: 0; right: 0; left: 0;\n height: 3px;\n background: linear-gradient(90deg in oklch, var(--color-primary), var(--color-gold));\n opacity: 0;\n transition: opacity var(--transition);\n}\n\n.service-card:hover::before { opacity: 1; }\n\n.service-card__icon {\n width: 52px; height: 52px;\n background: color-mix(in oklch, var(--color-primary) 10%, var(--color-bg));\n border-radius: var(--radius-lg);\n display: flex; align-items: center; justify-content: center;\n margin-bottom: var(--space-5);\n color: var(--color-primary);\n}\n\n[data-theme=\"dark\"] .service-card__icon {\n background: var(--color-surface-offset);\n color: var(--color-gold);\n}\n\n.service-card__icon svg { width: 26px; height: 26px; }\n\n.service-card__title {\n font-size: var(--text-lg);\n font-weight: 700;\n margin-bottom: var(--space-3);\n color: var(--color-text);\n}\n\n.service-card__desc {\n font-size: var(--text-sm);\n color: var(--color-text-muted);\n line-height: 1.7;\n}\n\n.service-card__tags {\n display: flex; flex-wrap: wrap; gap: var(--space-2);\n margin-top: var(--space-5);\n}\n\n.tag {\n font-size: var(--text-xs);\n background: var(--color-surface-offset);\n color: var(--color-text-muted);\n padding: var(--space-1) var(--space-3);\n border-radius: var(--radius-full);\n font-weight: 500;\n}\n\n\/* ===========================\n SECTORS\n=========================== *\/\n.sectors-bg { background: var(--color-surface-offset); }\n\n.sectors-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n}\n\n.sector-card {\n background: var(--color-surface-2);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-xl);\n padding: var(--space-6) var(--space-5);\n text-align: center;\n transition: box-shadow var(--transition), transform var(--transition);\n}\n\n.sector-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }\n\n.sector-card__icon {\n font-size: 2.2rem;\n margin-bottom: var(--space-3);\n display: block;\n}\n\n.sector-card__name {\n font-size: var(--text-sm);\n font-weight: 700;\n color: var(--color-text);\n margin-bottom: var(--space-1);\n}\n\n.sector-card__sub {\n font-size: var(--text-xs);\n color: var(--color-text-muted);\n}\n\n\/* ===========================\n METHODOLOGY\n=========================== *\/\n.methodology-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-16);\n align-items: center;\n}\n\n.methodology-steps { display: flex; flex-direction: column; gap: var(--space-6); }\n\n.step {\n display: grid;\n grid-template-columns: 48px 1fr;\n gap: var(--space-5);\n align-items: start;\n}\n\n.step__num {\n width: 48px; height: 48px;\n background: var(--color-primary);\n color: #fff;\n border-radius: var(--radius-lg);\n display: flex; align-items: center; justify-content: center;\n font-weight: 800;\n font-size: var(--text-sm);\n flex-shrink: 0;\n font-family: var(--font-display);\n}\n\n[data-theme=\"dark\"] .step__num { background: var(--color-gold); color: #000; }\n\n.step__title { font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-1); }\n.step__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }\n\n.methodology-visual {\n background: var(--color-surface-2);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-2xl);\n padding: var(--space-8);\n box-shadow: var(--shadow-lg);\n}\n\n.methodology-visual__title {\n font-size: var(--text-base);\n font-weight: 700;\n margin-bottom: var(--space-6);\n color: var(--color-text-muted);\n text-align: center;\n}\n\n.tech-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-3);\n}\n\n.tech-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-4);\n background: var(--color-surface-offset);\n border-radius: var(--radius-lg);\n text-align: center;\n border: 1px solid var(--color-divider);\n font-size: var(--text-xs);\n font-weight: 600;\n color: var(--color-text-muted);\n}\n\n.tech-item svg { width: 28px; height: 28px; color: var(--color-primary); }\n\n[data-theme=\"dark\"] .tech-item svg { color: var(--color-gold); }\n\n\/* ===========================\n TRUST \/ PARTNERS\n=========================== *\/\n.trust-bg { background: var(--color-surface-offset); }\n\n.partners-strip {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-12);\n flex-wrap: wrap;\n margin-top: var(--space-10);\n}\n\n.partner-badge {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-6);\n background: var(--color-surface-2);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-xl);\n box-shadow: var(--shadow-sm);\n}\n\n.partner-badge__name {\n font-size: var(--text-sm);\n font-weight: 700;\n color: var(--color-text-muted);\n}\n\n.partner-badge__type {\n font-size: var(--text-xs);\n color: var(--color-text-faint);\n}\n\n.partner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-gold); }\n\n.compliance-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-4);\n margin-top: var(--space-10);\n}\n\n.compliance-item {\n background: var(--color-surface-2);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-xl);\n padding: var(--space-6);\n text-align: center;\n}\n\n.compliance-item__icon { font-size: 2rem; margin-bottom: var(--space-3); display: block; }\n.compliance-item__name { font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-1); }\n.compliance-item__desc { font-size: var(--text-xs); color: var(--color-text-muted); }\n\n\/* ===========================\n CTA\n=========================== *\/\n.cta-section {\n background: var(--color-primary);\n position: relative;\n overflow: hidden;\n}\n\n[data-theme=\"dark\"] .cta-section { background: var(--color-surface); border-block: 1px solid var(--color-border); }\n\n.cta-section::before {\n content: '';\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse 80% 80% at 80% 50%, oklch(from var(--color-gold) l c h \/ 0.1) 0%, transparent 60%);\n}\n\n.cta-inner {\n position: relative;\n z-index: 1;\n text-align: center;\n padding-block: clamp(var(--space-16), 8vw, var(--space-24));\n}\n\n.cta-inner .section-title {\n color: #fff;\n font-size: var(--text-2xl);\n}\n\n[data-theme=\"dark\"] .cta-inner .section-title { color: var(--color-text); }\n\n.cta-inner .section-desc {\n color: oklch(from #fff l c h \/ 0.75);\n margin-bottom: var(--space-10);\n}\n\n[data-theme=\"dark\"] .cta-inner .section-desc { color: var(--color-text-muted); }\n\n.cta-actions {\n display: flex;\n gap: var(--space-4);\n justify-content: center;\n flex-wrap: wrap;\n}\n\n.cta-actions .btn-ghost {\n background: oklch(from #fff l c h \/ 0.1);\n color: #fff;\n border: 1.5px solid oklch(from #fff l c h \/ 0.3);\n}\n\n.cta-actions .btn-ghost:hover {\n background: oklch(from #fff l c h \/ 0.2);\n}\n\n\/* ===========================\n FOOTER\n=========================== *\/\n.footer {\n background: var(--color-primary);\n color: oklch(from #fff l c h \/ 0.7);\n padding-block: var(--space-16);\n}\n\n[data-theme=\"dark\"] .footer { background: var(--color-surface); border-top: 1px solid var(--color-border); color: var(--color-text-muted); }\n\n.footer__grid {\n display: grid;\n grid-template-columns: 1.5fr 1fr 1fr 1fr;\n gap: var(--space-12);\n padding-bottom: var(--space-12);\n border-bottom: 1px solid oklch(from #fff l c h \/ 0.1);\n}\n\n[data-theme=\"dark\"] .footer__grid { border-color: var(--color-divider); }\n\n.footer__about-name {\n font-family: var(--font-display);\n font-size: var(--text-xl);\n font-weight: 800;\n color: #fff;\n margin-top: var(--space-4);\n margin-bottom: var(--space-3);\n}\n\n[data-theme=\"dark\"] .footer__about-name { color: var(--color-text); }\n\n.footer__about-desc {\n font-size: var(--text-sm);\n line-height: 1.7;\n max-width: 36ch;\n}\n\n.footer__heading {\n font-size: var(--text-sm);\n font-weight: 700;\n color: #fff;\n margin-bottom: var(--space-5);\n}\n\n[data-theme=\"dark\"] .footer__heading { color: var(--color-text); }\n\n.footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }\n\n.footer__links a {\n font-size: var(--text-sm);\n color: oklch(from #fff l c h \/ 0.65);\n text-decoration: none;\n transition: color var(--transition);\n}\n\n[data-theme=\"dark\"] .footer__links a { color: var(--color-text-muted); }\n\n.footer__links a:hover { color: var(--color-gold); }\n\n.footer__contact-item {\n display: flex; align-items: center; gap: var(--space-3);\n font-size: var(--text-sm);\n margin-bottom: var(--space-3);\n}\n\n.footer__contact-item svg { width: 16px; height: 16px; color: var(--color-gold); flex-shrink: 0; }\n\n.footer__bottom {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: var(--space-8);\n font-size: var(--text-xs);\n gap: var(--space-4);\n flex-wrap: wrap;\n}\n\n\/* ===========================\n MOBILE NAV\n=========================== *\/\n.mobile-menu {\n display: none;\n position: fixed;\n inset: 0;\n z-index: 99;\n background: var(--color-bg);\n flex-direction: column;\n padding: var(--space-20) var(--space-8) var(--space-8);\n}\n\n.mobile-menu.open { display: flex; }\n\n.mobile-menu__links {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n flex: 1;\n}\n\n.mobile-menu__links a {\n font-size: var(--text-xl);\n font-weight: 700;\n color: var(--color-text);\n text-decoration: none;\n}\n\n.mobile-menu__links a:hover { color: var(--color-gold); }\n\n\/* ===========================\n ANIMATIONS\n=========================== *\/\n.fade-up {\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.6s ease, transform 0.6s ease;\n}\n\n.fade-up.visible { opacity: 1; transform: translateY(0); }\n\n\/* ===========================\n RESPONSIVE\n=========================== *\/\n@media (max-width: 1024px) {\n .services-grid { grid-template-columns: repeat(2, 1fr); }\n .sectors-grid { grid-template-columns: repeat(2, 1fr); }\n .numbers-grid { grid-template-columns: repeat(2, 1fr); }\n .footer__grid { grid-template-columns: 1fr 1fr; }\n}\n\n@media (max-width: 768px) {\n .nav__links { display: none; }\n .nav__toggle { display: flex; }\n .hero__inner { grid-template-columns: 1fr; }\n .hero__visual { display: none; }\n .hero__stats { gap: var(--space-6); flex-wrap: wrap; }\n .methodology-grid { grid-template-columns: 1fr; }\n .methodology-visual { display: none; }\n .services-grid { grid-template-columns: 1fr; }\n .sectors-grid { grid-template-columns: repeat(2, 1fr); }\n .compliance-grid { grid-template-columns: 1fr; }\n .footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }\n .footer__bottom { flex-direction: column; text-align: center; }\n .cta-actions { flex-direction: column; align-items: center; }\n .numbers-grid { grid-template-columns: repeat(2, 1fr); }\n}\n\n@media (max-width: 480px) {\n .sectors-grid { grid-template-columns: 1fr 1fr; }\n .hero__stats { flex-direction: column; gap: var(--space-4); }\n .nav__actions .btn { display: none; }\n}\n<\/style>\n<\/head>\n\n<body>\n\n\n<a href=\"#main\" class=\"sr-only\">\u0627\u0646\u062a\u0642\u0644 \u0644\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0631\u0626\u064a\u0633\u064a<\/a>\n\n\n<header>\n <nav class=\"nav\" id=\"navbar\" role=\"navigation\" aria-label=\"\u0627\u0644\u062a\u0646\u0642\u0644 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\">\n <div class=\"container\">\n <div class=\"nav__inner\">\n \n <a href=\"#\" class=\"nav__logo\" aria-label=\"BrutoCode \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\">\n <svg class=\"nav__logo-mark\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n <rect width=\"40\" height=\"40\" rx=\"10\" fill=\"#0d2340\"\/>\n <path d=\"M8 10 L8 30 L14 30 L14 22 L18 22 L24 30 L31 30 L24 21 C27 20 29 17.5 29 14.5 C29 11.5 26.5 10 23 10 Z M14 15 L22 15 C24 15 25 15.8 25 17.5 C25 19 24 20 22 20 L14 20 Z\" fill=\"#C49A2B\"\/>\n <path d=\"M8 10 L8 14 L32 14\" stroke=\"#C49A2B\" stroke-width=\"1.2\" stroke-linecap=\"round\" opacity=\"0.35\"\/>\n <\/svg>\n <span class=\"nav__brand\">BrutoCode<\/span>\n <\/a>\n\n \n <ul class=\"nav__links\" role=\"list\">\n <li><a href=\"#services\">\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/a><\/li>\n <li><a href=\"#sectors\">\u0627\u0644\u0642\u0637\u0627\u0639\u0627\u062a<\/a><\/li>\n <li><a href=\"#methodology\">\u0627\u0644\u0645\u0646\u0647\u062c\u064a\u0629<\/a><\/li>\n <li><a href=\"#trust\">\u0627\u0644\u0634\u0631\u0627\u0643\u0627\u062a<\/a><\/li>\n <li><a href=\"#contact\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/a><\/li>\n <\/ul>\n\n \n <div class=\"nav__actions\">\n <button class=\"theme-btn\" data-theme-toggle aria-label=\"\u062a\u0628\u062f\u064a\u0644 \u0627\u0644\u0648\u0636\u0639 \u0627\u0644\u0645\u0638\u0644\u0645\" title=\"\u062a\u0628\u062f\u064a\u0644 \u0627\u0644\u0645\u0638\u0647\u0631\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"5\"\/><path d=\"M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42\"\/><\/svg>\n <\/button>\n <a href=\"#contact\" class=\"btn btn-primary\">\u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643<\/a>\n <button class=\"nav__toggle\" id=\"menuToggle\" aria-label=\"\u0641\u062a\u062d \u0627\u0644\u0642\u0627\u0626\u0645\u0629\" aria-expanded=\"false\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"\/><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"\/><line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n<\/header>\n\n\n<div class=\"mobile-menu\" id=\"mobileMenu\" role=\"dialog\" aria-modal=\"true\" aria-label=\"\u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\">\n <ul class=\"mobile-menu__links\" role=\"list\">\n <li><a href=\"#services\" onclick=\"closeMobileMenu()\">\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/a><\/li>\n <li><a href=\"#sectors\" onclick=\"closeMobileMenu()\">\u0627\u0644\u0642\u0637\u0627\u0639\u0627\u062a<\/a><\/li>\n <li><a href=\"#methodology\" onclick=\"closeMobileMenu()\">\u0627\u0644\u0645\u0646\u0647\u062c\u064a\u0629<\/a><\/li>\n <li><a href=\"#trust\" onclick=\"closeMobileMenu()\">\u0627\u0644\u0634\u0631\u0627\u0643\u0627\u062a<\/a><\/li>\n <li><a href=\"#contact\" onclick=\"closeMobileMenu()\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/a><\/li>\n <\/ul>\n <a href=\"#contact\" class=\"btn btn-primary\" onclick=\"closeMobileMenu()\" style=\"align-self:flex-start; margin-top:auto;\">\u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643<\/a>\n<\/div>\n\n\n<main id=\"main\">\n\n \n <section class=\"hero\" aria-label=\"\u0642\u0633\u0645 \u0627\u0644\u062a\u0631\u062d\u064a\u0628\">\n <div class=\"hero__bg\"><\/div>\n <div class=\"hero__grid-pattern\" aria-hidden=\"true\"><\/div>\n <div class=\"container\">\n <div class=\"hero__inner\">\n \n <div class=\"hero__text\">\n <div class=\"hero__badge\" role=\"note\">\n <span class=\"hero__badge-dot\" aria-hidden=\"true\"><\/span>\n \u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629 \u00b7 2026\n <\/div>\n <h1 class=\"hero__title\">\n \u0634\u0631\u064a\u0643\u0643 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a<br>\n \u0641\u064a <em>\u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a<\/em>\n <\/h1>\n <p class=\"hero__sub\">\n \u0646\u0635\u0645\u0651\u0645 \u0645\u0646\u0638\u0648\u0645\u0627\u062a \u0631\u0642\u0645\u064a\u0629 \u0647\u0646\u062f\u0633\u064a\u0629 \u062a\u062f\u0645\u062c \u0628\u064a\u0646 \u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631 \u0627\u0644\u062a\u0642\u0646\u064a \u0648\u0627\u0644\u0641\u0647\u0645 \u0627\u0644\u0639\u0645\u064a\u0642 \u0644\u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0627\u062a \u0627\u0644\u0623\u0639\u0645\u0627\u0644\u060c\n \u0644\u0646\u0642\u0644 \u0645\u0624\u0633\u0633\u062a\u0643 \u0646\u062d\u0648 \u0627\u0644\u0633\u064a\u0627\u062f\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0627\u0644\u0643\u0627\u0645\u0644\u0629.\n <\/p>\n <div class=\"hero__actions\">\n <a href=\"#contact\" class=\"btn btn-gold\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n \u0627\u0628\u062f\u0623 \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0622\u0646\n <\/a>\n <a href=\"#services\" class=\"btn btn-outline\">\u0627\u0643\u062a\u0634\u0641 \u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/a>\n <\/div>\n\n <div class=\"hero__stats\" aria-label=\"\u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a BrutoCode\">\n <div class=\"hero__stat\">\n <div class=\"hero__stat-num\">+250<\/div>\n <div class=\"hero__stat-label\">\u0645\u0634\u0631\u0648\u0639 \u0645\u064f\u0646\u062c\u0632<\/div>\n <\/div>\n <div class=\"hero__stat\">\n <div class=\"hero__stat-num\">+20<\/div>\n <div class=\"hero__stat-label\">\u0633\u0646\u0629 \u062e\u0628\u0631\u0629 \u062a\u0631\u0627\u0643\u0645\u064a\u0629<\/div>\n <\/div>\n <div class=\"hero__stat\">\n <div class=\"hero__stat-num\">99%<\/div>\n <div class=\"hero__stat-label\">\u0645\u0639\u062f\u0644 \u062a\u0648\u0627\u0641\u0631 \u0627\u0644\u0623\u0646\u0638\u0645\u0629<\/div>\n <\/div>\n <div class=\"hero__stat\">\n <div class=\"hero__stat-num\">7<\/div>\n <div class=\"hero__stat-label\">\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0645\u0639\u062a\u0645\u062f\u0629 \u0631\u0633\u0645\u064a\u0627\u064b<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"hero__visual\" aria-hidden=\"true\">\n <div class=\"hero__card-stack\">\n <div class=\"hero__card-behind-2\"><\/div>\n <div class=\"hero__card-behind\"><\/div>\n <div class=\"hero__card\">\n <div class=\"hero__card-header\">\n <div class=\"hero__card-icon\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 17v4\"\/><\/svg>\n <\/div>\n <div>\n <div class=\"hero__card-title\">\u0644\u0648\u062d\u0629 \u062a\u062d\u0643\u0645 \u0627\u0644\u0645\u0624\u0633\u0633\u0629<\/div>\n <div class=\"hero__card-sub\">BrutoCode Enterprise Dashboard<\/div>\n <\/div>\n <\/div>\n <div class=\"metric-row\">\n <div class=\"metric-box\">\n <div class=\"metric-box__num\">50K+<\/div>\n <div class=\"metric-box__label\">\u0645\u0633\u062a\u062e\u062f\u0645 \u0646\u0634\u0637 \u064a\u0648\u0645\u064a\u0627\u064b<\/div>\n <\/div>\n <div class=\"metric-box\">\n <div class=\"metric-box__num\">3.5K+<\/div>\n <div class=\"metric-box__label\">\u062c\u0644\u0633\u0629 \u062a\u062f\u0631\u064a\u0628\u064a\u0629<\/div>\n <\/div>\n <\/div>\n <div class=\"progress-row\">\n <div class=\"progress-item\">\n <div class=\"progress-item__head\"><span>\u0623\u0645\u0646 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a<\/span><span>98%<\/span><\/div>\n <div class=\"progress-bar\"><div class=\"progress-fill\" style=\"width:98%\"><\/div><\/div>\n <\/div>\n <div class=\"progress-item\">\n <div class=\"progress-item__head\"><span>\u0627\u0644\u0623\u062a\u0645\u062a\u0629 \u0627\u0644\u0630\u0643\u064a\u0629<\/span><span>85%<\/span><\/div>\n <div class=\"progress-bar\"><div class=\"progress-fill\" style=\"width:85%\"><\/div><\/div>\n <\/div>\n <div class=\"progress-item\">\n <div class=\"progress-item__head\"><span>\u0631\u0636\u0627 \u0627\u0644\u0639\u0645\u0644\u0627\u0621<\/span><span>96%<\/span><\/div>\n <div class=\"progress-bar\"><div class=\"progress-fill\" style=\"width:96%\"><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"numbers-bg\" aria-labelledby=\"numbers-heading\">\n <h2 id=\"numbers-heading\" class=\"sr-only\">\u0627\u0644\u0623\u062b\u0631 \u0628\u0644\u063a\u0629 \u0627\u0644\u0623\u0631\u0642\u0627\u0645<\/h2>\n <div class=\"numbers-grid\">\n <div class=\"number-item fade-up\">\n <div class=\"number-item__num\">+450<\/div>\n <div class=\"number-item__label\">\u0634\u0628\u0643\u0629 \u0645\u0633\u062a\u0634\u0627\u0631\u064a\u0646 \u0648\u0645\u062a\u062e\u0635\u0635\u064a\u0646<\/div>\n <\/div>\n <div class=\"number-item fade-up\" style=\"transition-delay:0.1s\">\n <div class=\"number-item__num\">+2,500<\/div>\n <div class=\"number-item__label\">\u0632\u064a\u0627\u0631\u0629 \u0634\u0647\u0631\u064a\u0629 \u0639\u0628\u0631 \u0627\u0644\u0645\u0646\u0635\u0627\u062a<\/div>\n <\/div>\n <div class=\"number-item fade-up\" style=\"transition-delay:0.2s\">\n <div class=\"number-item__num\">40%<\/div>\n <div class=\"number-item__label\">\u062a\u062e\u0641\u064a\u0636 \u062a\u0643\u0627\u0644\u064a\u0641 \u0627\u0644\u062a\u0634\u063a\u064a\u0644<\/div>\n <\/div>\n <div class=\"number-item fade-up\" style=\"transition-delay:0.3s\">\n <div class=\"number-item__num\">7\u00d724<\/div>\n <div class=\"number-item__label\">\u0645\u0631\u0627\u0642\u0628\u0629 \u0648\u062f\u0639\u0645 \u0645\u0633\u062a\u0645\u0631<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\" id=\"services\" aria-labelledby=\"services-heading\">\n <div class=\"container\">\n <div class=\"section-header fade-up\">\n <div class=\"section-label\">\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/div>\n <h2 id=\"services-heading\" class=\"section-title\">\u0645\u0646\u0638\u0648\u0645\u0629 \u062d\u0644\u0648\u0644 \u0645\u0624\u0633\u0633\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629<\/h2>\n <p class=\"section-desc\">\n \u0645\u0646 \u062a\u062e\u0637\u064a\u0637 \u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0645\u0624\u0633\u0633\u0629 \u0625\u0644\u0649 \u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0648\u0627\u0644\u0623\u0645\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a \u2014\n \u0646\u0642\u062f\u0651\u0645 \u062d\u0632\u0645\u0629 \u0634\u0627\u0645\u0644\u0629 \u0645\u0646 \u0627\u0644\u062d\u0644\u0648\u0644 \u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u0645\u0635\u0645\u0645\u0629 \u062e\u0635\u064a\u0635\u0627\u064b \u0644\u0628\u064a\u0626\u0629 \u0627\u0644\u0623\u0639\u0645\u0627\u0644 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629.\n <\/p>\n <\/div>\n <div class=\"services-grid\">\n \n <div class=\"service-card fade-up\">\n <div class=\"service-card__icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 17v4\"\/><path d=\"M7 8h4M7 11h3\"\/><\/svg>\n <\/div>\n <h3 class=\"service-card__title\">\u0623\u0646\u0638\u0645\u0629 ERP \u0627\u0644\u0645\u0624\u0633\u0633\u064a\u0629<\/h3>\n <p class=\"service-card__desc\">\n \u062a\u062e\u0637\u064a\u0637 \u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0645\u0624\u0633\u0633\u0629 \u0627\u0644\u0634\u0627\u0645\u0644 \u2014 \u0627\u0644\u0645\u062d\u0627\u0633\u0628\u0629\u060c \u0627\u0644\u0645\u062e\u0632\u0648\u0646\u060c \u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0628\u0634\u0631\u064a\u0629\u060c \u0648\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0639\u0642\u0648\u062f \u0648\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639.\n <\/p>\n <div class=\"service-card__tags\">\n <span class=\"tag\">\u0627\u0644\u0645\u0627\u0644\u064a\u0629 \u0648\u0627\u0644\u0645\u062d\u0627\u0633\u0628\u0629<\/span>\n <span class=\"tag\">\u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0628\u0634\u0631\u064a\u0629<\/span>\n <span class=\"tag\">\u0627\u0644\u0645\u0634\u062a\u0631\u064a\u0627\u062a<\/span>\n <\/div>\n <\/div>\n \n <div class=\"service-card fade-up\" style=\"transition-delay:0.1s\">\n <div class=\"service-card__icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\n <\/div>\n <h3 class=\"service-card__title\">\u0625\u062f\u0627\u0631\u0629 \u0639\u0644\u0627\u0642\u0627\u062a \u0627\u0644\u0639\u0645\u0644\u0627\u0621 CRM<\/h3>\n <p class=\"service-card__desc\">\n \u0625\u062f\u0627\u0631\u0629 360\u00b0 \u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0639\u0645\u0644\u0627\u0621\u060c \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a\u060c \u0623\u062a\u0645\u062a\u0629 \u0627\u0644\u062a\u0633\u0648\u064a\u0642\u060c \u0648\u062a\u062d\u0644\u064a\u0644\u0627\u062a \u062a\u0646\u0628\u0624\u064a\u0629 \u0645\u062a\u0642\u062f\u0645\u0629.\n <\/p>\n <div class=\"service-card__tags\">\n <span class=\"tag\">\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u0621<\/span>\n <span class=\"tag\">\u0623\u062a\u0645\u062a\u0629 \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a<\/span>\n <span class=\"tag\">\u0645\u0631\u0627\u0643\u0632 \u0627\u0644\u0627\u062a\u0635\u0627\u0644<\/span>\n <\/div>\n <\/div>\n \n <div class=\"service-card fade-up\" style=\"transition-delay:0.2s\">\n <div class=\"service-card__icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z\"\/><\/svg>\n <\/div>\n <h3 class=\"service-card__title\">\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0648\u0627\u0644\u0623\u062a\u0645\u062a\u0629<\/h3>\n <p class=\"service-card__desc\">\n \u0631\u0648\u0628\u0648\u062a\u0627\u062a \u0627\u0644\u0645\u062d\u0627\u062f\u062b\u0629 \u0639\u0628\u0631 WhatsApp Business API\u060c \u0645\u0639\u0627\u0644\u062c\u0629 \u0627\u0644\u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0628\u0627\u0644\u0640 AI\u060c \u0648\u0623\u062a\u0645\u062a\u0629 \u0633\u064a\u0631 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0645\u0624\u0633\u0633\u064a.\n <\/p>\n <div class=\"service-card__tags\">\n <span class=\"tag\">WhatsApp API<\/span>\n <span class=\"tag\">Document AI<\/span>\n <span class=\"tag\">Workflow Automation<\/span>\n <\/div>\n <\/div>\n \n <div class=\"service-card fade-up\" style=\"transition-delay:0.05s\">\n <div class=\"service-card__icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z\"\/><\/svg>\n <\/div>\n <h3 class=\"service-card__title\">\u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u0633\u062d\u0627\u0628\u064a\u0629 \u0627\u0644\u0645\u0624\u0633\u0633\u064a\u0629<\/h3>\n <p class=\"service-card__desc\">\n \u062d\u0644\u0648\u0644 AWS \u0648Azure \u0648GCP\u060c \u062a\u062e\u0632\u064a\u0646 \u0645\u062d\u0644\u064a \u0641\u064a \u0645\u0631\u0627\u0643\u0632 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629\u060c \u0648\u0627\u0633\u062a\u0631\u062f\u0627\u062f \u0627\u0644\u0643\u0648\u0627\u0631\u062b \u0645\u0639 \u0636\u0645\u0627\u0646 \u0627\u0644\u062a\u0648\u0627\u0641\u0631 99.95%.\n <\/p>\n <div class=\"service-card__tags\">\n <span class=\"tag\">AWS<\/span>\n <span class=\"tag\">Azure<\/span>\n <span class=\"tag\">Hybrid Cloud<\/span>\n <\/div>\n <\/div>\n \n <div class=\"service-card fade-up\" style=\"transition-delay:0.15s\">\n <div class=\"service-card__icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\n <\/div>\n <h3 class=\"service-card__title\">\u0627\u0644\u0623\u0645\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a \u0648\u0627\u0644\u0627\u0645\u062a\u062b\u0627\u0644<\/h3>\n <p class=\"service-card__desc\">\n \u0627\u0644\u062a\u0648\u0627\u0641\u0642 \u0645\u0639 CITC \u0648NCA \u0648PDPL \u0648 ISO 27001\u060c \u062a\u0634\u0641\u064a\u0631 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a\u060c \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u062d\u0645\u0627\u064a\u0629\u060c \u0648\u0623\u0646\u0638\u0645\u0629 SIEM.\n <\/p>\n <div class=\"service-card__tags\">\n <span class=\"tag\">NCA<\/span>\n <span class=\"tag\">PDPL<\/span>\n <span class=\"tag\">ISO 27001<\/span>\n <\/div>\n <\/div>\n \n <div class=\"service-card fade-up\" style=\"transition-delay:0.25s\">\n <div class=\"service-card__icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/><path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"\/><\/svg>\n <\/div>\n <h3 class=\"service-card__title\">\u0627\u0644\u062a\u062c\u0627\u0631\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0648\u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629<\/h3>\n <p class=\"service-card__desc\">\n \u0645\u062a\u0627\u062c\u0631 B2B \u0648B2C \u0645\u062a\u0639\u062f\u062f\u0629 \u0627\u0644\u0642\u0646\u0648\u0627\u062a\u060c \u062a\u0643\u0627\u0645\u0644 \u0645\u0639 \u0645\u062f\u0649 \u0648\u0623\u0628\u0644 \u0628\u0627\u064a \u0648STC Pay\u060c \u0648\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0645\u0624\u0633\u0633\u064a\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629.\n <\/p>\n <div class=\"service-card__tags\">\n <span class=\"tag\">Omnichannel<\/span>\n <span class=\"tag\">\u0645\u062f\u0649 \u00b7 \u0623\u0628\u0644 \u0628\u0627\u064a<\/span>\n <span class=\"tag\">UI\/UX<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section sectors-bg\" id=\"sectors\" aria-labelledby=\"sectors-heading\">\n <div class=\"container\">\n <div class=\"section-header fade-up\">\n <div class=\"section-label\">\u0627\u0644\u0642\u0637\u0627\u0639\u0627\u062a<\/div>\n <h2 id=\"sectors-heading\" class=\"section-title\">\u062e\u0628\u0631\u0629 \u0645\u0648\u062b\u0651\u0642\u0629 \u0641\u064a \u0642\u0637\u0627\u0639\u0627\u062a \u0645\u062a\u0639\u062f\u062f\u0629<\/h2>\n <p class=\"section-desc\">\n \u0646\u0645\u062a\u0644\u0643 \u062d\u0636\u0648\u0631\u0627\u064b \u0641\u0639\u0644\u064a\u0627\u064b \u0648\u062a\u062c\u0627\u0631\u0628 \u0646\u0627\u062c\u062d\u0629 \u0641\u064a \u0633\u062a\u0629 \u0642\u0637\u0627\u0639\u0627\u062a \u0631\u0626\u064a\u0633\u064a\u0629 \u062a\u0645\u062b\u0651\u0644\n \u0631\u0643\u0627\u0626\u0632 \u0631\u0624\u064a\u0629 \u0627\u0644\u0645\u0645\u0644\u0643\u0629 2030.\n <\/p>\n <\/div>\n <div class=\"sectors-grid\">\n <div class=\"sector-card fade-up\">\n <span class=\"sector-card__icon\" aria-hidden=\"true\">\ud83c\udfe5<\/span>\n <div class=\"sector-card__name\">\u0627\u0644\u0631\u0639\u0627\u064a\u0629 \u0627\u0644\u0635\u062d\u064a\u0629<\/div>\n <div class=\"sector-card__sub\">EMR \u00b7 HIS \u00b7 \u0627\u0644\u062a\u0637\u0628 \u0639\u0646 \u0628\u064f\u0639\u062f<\/div>\n <\/div>\n <div class=\"sector-card fade-up\" style=\"transition-delay:0.1s\">\n <span class=\"sector-card__icon\" aria-hidden=\"true\">\ud83d\udecd\ufe0f<\/span>\n <div class=\"sector-card__name\">\u0627\u0644\u062a\u062c\u0632\u0626\u0629 \u0648\u0627\u0644\u062a\u062c\u0627\u0631\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/div>\n <div class=\"sector-card__sub\">Omnichannel \u00b7 \u0625\u062f\u0627\u0631\u0629 \u0645\u062e\u0632\u0648\u0646<\/div>\n <\/div>\n <div class=\"sector-card fade-up\" style=\"transition-delay:0.15s\">\n <span class=\"sector-card__icon\" aria-hidden=\"true\">\ud83c\udfdb\ufe0f<\/span>\n <div class=\"sector-card__name\">\u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u062d\u0643\u0648\u0645\u064a\u0629<\/div>\n <div class=\"sector-card__sub\">\u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a \u00b7 \u0627\u0644\u0627\u0645\u062a\u062b\u0627\u0644<\/div>\n <\/div>\n <div class=\"sector-card fade-up\" style=\"transition-delay:0.2s\">\n <span class=\"sector-card__icon\" aria-hidden=\"true\">\ud83c\udfe2<\/span>\n <div class=\"sector-card__name\">\u0627\u0644\u0639\u0642\u0627\u0631\u0627\u062a \u0648\u0627\u0644\u0640 PropTech<\/div>\n <div class=\"sector-card__sub\">\u0645\u0646\u0635\u0627\u062a \u0628\u064a\u0639 \u00b7 \u0625\u062f\u0627\u0631\u0629 \u0623\u0635\u0648\u0644<\/div>\n <\/div>\n <div class=\"sector-card fade-up\" style=\"transition-delay:0.25s\">\n <span class=\"sector-card__icon\" aria-hidden=\"true\">\ud83c\udf93<\/span>\n <div class=\"sector-card__name\">\u0627\u0644\u062a\u0639\u0644\u064a\u0645 \u0648\u0627\u0644\u062a\u062f\u0631\u064a\u0628<\/div>\n <div class=\"sector-card__sub\">LMS \u00b7 \u0634\u0647\u0627\u062f\u0627\u062a \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629<\/div>\n <\/div>\n <div class=\"sector-card fade-up\" style=\"transition-delay:0.3s\">\n <span class=\"sector-card__icon\" aria-hidden=\"true\">\ud83d\udcb0<\/span>\n <div class=\"sector-card__name\">\u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0645\u0627\u0644\u064a\u0629<\/div>\n <div class=\"sector-card__sub\">\u0641\u0646\u062a\u0643 \u00b7 \u0628\u0648\u0627\u0628\u0627\u062a \u062f\u0641\u0639 \u0633\u0639\u0648\u062f\u064a\u0629<\/div>\n <\/div>\n <div class=\"sector-card fade-up\" style=\"transition-delay:0.35s\">\n <span class=\"sector-card__icon\" aria-hidden=\"true\">\ud83c\udfe8<\/span>\n <div class=\"sector-card__name\">\u0627\u0644\u0636\u064a\u0627\u0641\u0629 \u0648\u0627\u0644\u0633\u064a\u0627\u062d\u0629<\/div>\n <div class=\"sector-card__sub\">\u062d\u062c\u0648\u0632\u0627\u062a \u00b7 \u0625\u062f\u0627\u0631\u0629 \u0641\u0646\u062f\u0642\u064a\u0629<\/div>\n <\/div>\n <div class=\"sector-card fade-up\" style=\"transition-delay:0.4s\">\n <span class=\"sector-card__icon\" aria-hidden=\"true\">\ud83c\udfed<\/span>\n <div class=\"sector-card__name\">\u0627\u0644\u0642\u0637\u0627\u0639 \u0627\u0644\u062e\u0627\u0635 \u0648\u0627\u0644\u062a\u0635\u0646\u064a\u0639<\/div>\n <div class=\"sector-card__sub\">ERP \u00b7 \u0633\u0644\u0633\u0644\u0629 \u062a\u0648\u0631\u064a\u062f<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\" id=\"methodology\" aria-labelledby=\"methodology-heading\">\n <div class=\"container\">\n <div class=\"methodology-grid\">\n <div>\n <div class=\"section-label\" style=\"justify-content:flex-start\">\u0627\u0644\u0645\u0646\u0647\u062c\u064a\u0629<\/div>\n <h2 id=\"methodology-heading\" class=\"section-title\" style=\"text-align:right; margin-inline:0\">\n \u0645\u0646\u0647\u062c\u064a\u0629 \u0647\u0646\u062f\u0633\u064a\u0629 \u0641\u064a \u0627\u0644\u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0645\u0624\u0633\u0633\u064a\n <\/h2>\n <p class=\"section-desc\" style=\"margin-inline:0; margin-bottom:var(--space-10)\">\n \u0644\u0627 \u0646\u0642\u062f\u0651\u0645 \u0628\u0631\u0645\u062c\u064a\u0627\u062a \u062c\u0627\u0647\u0632\u0629 \u2014 \u0646\u0628\u0646\u064a \u0634\u0631\u0627\u0643\u0627\u062a \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0639\u0628\u0631 \u0645\u0646\u0647\u062c\u064a\u0629 \u0647\u0646\u062f\u0633\u064a\u0629 \u0645\u062b\u0628\u062a\u0629 \u0641\u064a \u0623\u0631\u0628\u0639 \u0645\u0631\u0627\u062d\u0644.\n <\/p>\n <div class=\"methodology-steps\">\n <div class=\"step fade-up\">\n <div class=\"step__num\">\u0661<\/div>\n <div>\n <div class=\"step__title\">\u0627\u0644\u062a\u0634\u062e\u064a\u0635 \u0648\u0627\u0644\u0627\u0633\u062a\u0634\u0627\u0631\u0627\u062a<\/div>\n <div class=\"step__desc\">\u062a\u062d\u0644\u064a\u0644 \u0634\u0627\u0645\u0644 \u0644\u0644\u0639\u0645\u0644\u064a\u0627\u062a \u0627\u0644\u062d\u0627\u0644\u064a\u0629\u060c \u062f\u0631\u0627\u0633\u0629 \u0627\u0644\u062c\u062f\u0648\u0649\u060c \u0648\u0631\u0633\u0645 \u062e\u0627\u0631\u0637\u0629 \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a \u0627\u0644\u0645\u062a\u0648\u0627\u0641\u0642\u0629 \u0645\u0639 \u0627\u0644\u0623\u0647\u062f\u0627\u0641 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629.<\/div>\n <\/div>\n <\/div>\n <div class=\"step fade-up\" style=\"transition-delay:0.1s\">\n <div class=\"step__num\">\u0662<\/div>\n <div>\n <div class=\"step__title\">\u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u0644\u0647\u0646\u062f\u0633\u0629 \u0627\u0644\u0645\u0639\u0645\u0627\u0631\u064a\u0629<\/div>\n <div class=\"step__desc\">\u0628\u0646\u0627\u0621 \u0645\u0639\u0645\u0627\u0631\u064a\u0629 \u062a\u0642\u0646\u064a\u0629 \u0645\u0624\u0633\u0633\u064a\u0629 \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u062a\u0648\u0633\u0639\u060c \u062a\u0635\u0645\u064a\u0645 \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u060c \u0648\u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0648\u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0623\u0646\u0633\u0628.<\/div>\n <\/div>\n <\/div>\n <div class=\"step fade-up\" style=\"transition-delay:0.2s\">\n <div class=\"step__num\">\u0663<\/div>\n <div>\n <div class=\"step__title\">\u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0648\u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631<\/div>\n <div class=\"step__desc\">\u062a\u0637\u0648\u064a\u0631 \u062a\u062f\u0631\u064a\u062c\u064a \u0628\u0645\u0646\u0647\u062c\u064a\u0629 Agile\u060c \u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u0634\u0627\u0645\u0644\u0629 (\u0648\u0638\u064a\u0641\u064a\u0629\u060c \u0623\u0645\u0646\u064a\u0629\u060c \u0623\u062f\u0627\u0621)\u060c \u0648\u0645\u0631\u0627\u062c\u0639\u0629 \u0643\u0648\u062f \u0648\u0641\u0642 \u0645\u0639\u0627\u064a\u064a\u0631 \u0627\u0644\u062c\u0648\u062f\u0629 \u0627\u0644\u062f\u0648\u0644\u064a\u0629.<\/div>\n <\/div>\n <\/div>\n <div class=\"step fade-up\" style=\"transition-delay:0.3s\">\n <div class=\"step__num\">\u0664<\/div>\n <div>\n <div class=\"step__title\">\u0627\u0644\u0646\u0634\u0631 \u0648\u0627\u0644\u062f\u0639\u0645 \u0627\u0644\u0645\u0633\u062a\u0645\u0631<\/div>\n <div class=\"step__desc\">\u0625\u0637\u0644\u0627\u0642 \u0645\u0646\u0638\u0651\u0645 \u0645\u0639 \u062e\u0637\u0637 \u0637\u0648\u0627\u0631\u0626\u060c \u062a\u062f\u0631\u064a\u0628 \u0627\u0644\u0641\u0631\u0642\u060c \u0648\u0645\u0631\u0627\u0642\u0628\u0629 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629 7\u00d724 \u0645\u0639 \u0627\u062a\u0641\u0627\u0642\u064a\u0627\u062a SLA \u0645\u0641\u0635\u0651\u0644\u0629.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"methodology-visual\" aria-hidden=\"true\">\n <div class=\"methodology-visual__title\">\u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0648\u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0645\u0639\u062a\u0645\u062f\u0629<\/div>\n <div class=\"tech-grid\">\n <div class=\"tech-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z\"\/><\/svg>\n AWS\n <\/div>\n <div class=\"tech-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 17v4\"\/><\/svg>\n Azure\n <\/div>\n <div class=\"tech-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/svg>\n GCP\n <\/div>\n <div class=\"tech-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z\"\/><\/svg>\n AI & ML\n <\/div>\n <div class=\"tech-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\n NCA\/PDPL\n <\/div>\n <div class=\"tech-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/><\/svg>\n SLA 99.9%\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section trust-bg\" id=\"trust\" aria-labelledby=\"trust-heading\">\n <div class=\"container\">\n <div class=\"section-header fade-up\">\n <div class=\"section-label\">\u0634\u0631\u0627\u0643\u0627\u062a\u0646\u0627<\/div>\n <h2 id=\"trust-heading\" class=\"section-title\">\u0634\u0631\u0627\u0643\u0627\u062a \u062a\u0642\u0646\u064a\u0629 \u0639\u0627\u0644\u0645\u064a\u0629<\/h2>\n <p class=\"section-desc\">\n \u0634\u0631\u0627\u0643\u0627\u062a \u0645\u0628\u0627\u0634\u0631\u0629 \u0645\u0639 \u0643\u0628\u0627\u0631 \u0645\u0632\u0648\u0651\u062f\u064a \u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u064a\u0646\u060c \u0644\u0636\u0645\u0627\u0646 \u0628\u0646\u064a\u0629 \u062a\u062d\u062a\u064a\u0629 \u0645\u0646 \u0627\u0644\u0637\u0631\u0627\u0632 \u0627\u0644\u0639\u0627\u0644\u0645\u064a.\n <\/p>\n <\/div>\n <div class=\"partners-strip\">\n <div class=\"partner-badge fade-up\">\n <div class=\"partner-dot\" aria-hidden=\"true\"><\/div>\n <div>\n <div class=\"partner-badge__name\">Amazon Web Services<\/div>\n <div class=\"partner-badge__type\">\u0634\u0631\u064a\u0643 \u0645\u0639\u062a\u0645\u062f \u2014 \u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u0633\u062d\u0627\u0628\u064a\u0629<\/div>\n <\/div>\n <\/div>\n <div class=\"partner-badge fade-up\" style=\"transition-delay:0.1s\">\n <div class=\"partner-dot\" aria-hidden=\"true\"><\/div>\n <div>\n <div class=\"partner-badge__name\">Microsoft Azure<\/div>\n <div class=\"partner-badge__type\">\u062d\u0644\u0648\u0644 \u0627\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0648\u0627\u0644\u062a\u0643\u0627\u0645\u0644<\/div>\n <\/div>\n <\/div>\n <div class=\"partner-badge fade-up\" style=\"transition-delay:0.2s\">\n <div class=\"partner-dot\" aria-hidden=\"true\"><\/div>\n <div>\n <div class=\"partner-badge__name\">Google Cloud Platform<\/div>\n <div class=\"partner-badge__type\">\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0648\u0627\u0644\u062a\u062d\u0644\u064a\u0644\u0627\u062a<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"compliance-grid\" style=\"margin-top:var(--space-16)\">\n <div class=\"compliance-item fade-up\">\n <span class=\"compliance-item__icon\" aria-hidden=\"true\">\ud83d\udd12<\/span>\n <div class=\"compliance-item__name\">\u0647\u064a\u0626\u0629 \u0627\u0644\u0627\u062a\u0635\u0627\u0644\u0627\u062a CITC<\/div>\n <div class=\"compliance-item__desc\">7 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0645\u0639\u062a\u0645\u062f\u0629 \u0631\u0633\u0645\u064a\u0627\u064b \u0645\u0646 \u0647\u064a\u0626\u0629 \u0627\u0644\u0627\u062a\u0635\u0627\u0644\u0627\u062a \u0648\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a<\/div>\n <\/div>\n <div class=\"compliance-item fade-up\" style=\"transition-delay:0.1s\">\n <span class=\"compliance-item__icon\" aria-hidden=\"true\">\ud83d\udee1\ufe0f<\/span>\n <div class=\"compliance-item__name\">\u0627\u0644\u0623\u0645\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a NCA<\/div>\n <div class=\"compliance-item__desc\">\u062a\u0648\u0627\u0641\u0642 \u0643\u0627\u0645\u0644 \u0645\u0639 \u0636\u0648\u0627\u0628\u0637 \u0627\u0644\u0647\u064a\u0626\u0629 \u0627\u0644\u0648\u0637\u0646\u064a\u0629 \u0644\u0644\u0623\u0645\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a<\/div>\n <\/div>\n <div class=\"compliance-item fade-up\" style=\"transition-delay:0.2s\">\n <span class=\"compliance-item__icon\" aria-hidden=\"true\">\ud83d\udccb<\/span>\n <div class=\"compliance-item__name\">\u062d\u0645\u0627\u064a\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a PDPL<\/div>\n <div class=\"compliance-item__desc\">\u0627\u0644\u0627\u0639\u062a\u0645\u0627\u062f \u0627\u0644\u0631\u0633\u0645\u064a \u0639\u0644\u0649 \u0646\u0638\u0627\u0645 \u062d\u0645\u0627\u064a\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0634\u062e\u0635\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"cta-section\" aria-labelledby=\"cta-heading\">\n <div class=\"container\">\n <div class=\"cta-inner fade-up\">\n <div class=\"section-label\" style=\"justify-content:center; color:oklch(from #fff l c h \/ 0.6)\">\u0627\u0628\u062f\u0623 \u0631\u062d\u0644\u062a\u0643<\/div>\n <h2 id=\"cta-heading\" class=\"section-title\">\n \u062d\u0648\u0651\u0644 \u0627\u062d\u062a\u064a\u0627\u062c\u0643 \u0625\u0644\u0649 \u0645\u0646\u062a\u062c \u0631\u0642\u0645\u064a<br>\u064a\u0639\u0645\u0644 \u0628\u0633\u0631\u0639\u0629\u060c \u062c\u0648\u062f\u0629\u060c \u0648\u062a\u0643\u0627\u0645\u0644\n <\/h2>\n <p class=\"section-desc\">\n \u0641\u0631\u064a\u0642 \u0645\u0624\u0633\u0633 \u0628\u062e\u0628\u0631\u0629 \u062a\u0631\u0627\u0643\u0645\u064a\u0629 \u062a\u0632\u064a\u062f \u0639\u0646 20 \u0639\u0627\u0645\u0627\u064b \u0641\u064a \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u0643\u0628\u0631\u0649 \u2014\n \u0645\u0633\u062a\u0639\u062f \u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643 \u0648\u062a\u0642\u062f\u064a\u0645 \u062d\u0644 \u0647\u0646\u062f\u0633\u064a \u0645\u062a\u0643\u0627\u0645\u0644.\n <\/p>\n <div class=\"cta-actions\">\n <a href=\"#contact\" class=\"btn btn-gold\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n \u0627\u062d\u062c\u0632 \u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0645\u062c\u0627\u0646\u064a\u0629\n <\/a>\n <a href=\"mailto:info@brutocode.sa\" class=\"btn btn-ghost\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0628\u0627\u0634\u0631\u0629<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\" id=\"contact\" aria-labelledby=\"contact-heading\">\n <div class=\"container container--narrow\">\n <div class=\"section-header fade-up\">\n <div class=\"section-label\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/div>\n <h2 id=\"contact-heading\" class=\"section-title\">\u062f\u0639\u0646\u0627 \u0646\u0628\u0646\u064a \u0645\u0633\u062a\u0642\u0628\u0644\u0643 \u0627\u0644\u0631\u0642\u0645\u064a<\/h2>\n <p class=\"section-desc\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639 \u0641\u0631\u064a\u0642\u0646\u0627 \u0627\u0644\u064a\u0648\u0645 \u0644\u0645\u0646\u0627\u0642\u0634\u0629 \u0645\u0634\u0631\u0648\u0639\u0643 \u0648\u0628\u062f\u0621 \u0631\u062d\u0644\u0629 \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a.<\/p>\n <\/div>\n\n <div style=\"display:grid; grid-template-columns:1fr 1fr; gap:var(--space-10); align-items:start;\" class=\"fade-up\">\n \n <div>\n <div style=\"background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-8); box-shadow:var(--shadow-sm);\">\n <h3 style=\"font-size:var(--text-lg); font-weight:700; margin-bottom:var(--space-6);\">\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u062a\u0648\u0627\u0635\u0644<\/h3>\n <div style=\"display:flex; flex-direction:column; gap:var(--space-5);\">\n <div style=\"display:flex; align-items:center; gap:var(--space-4);\">\n <div style=\"width:40px;height:40px; background:var(--color-gold-highlight); border-radius:var(--radius-lg); display:flex;align-items:center;justify-content:center; flex-shrink:0; color:var(--color-gold);\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13 19.79 19.79 0 0 1 1.61 4.39 2 2 0 0 1 3.59 2.18h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.09 6.09l.9-.9a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>\n <\/div>\n <div>\n <div style=\"font-size:var(--text-xs); color:var(--color-text-muted); margin-bottom:2px;\">\u0627\u0644\u0647\u0627\u062a\u0641<\/div>\n <a href=\"tel:+966570545777\" style=\"font-weight:700; color:var(--color-text); text-decoration:none; font-size:var(--text-base); direction:ltr; display:inline-block;\">+966 57 054 5777<\/a>\n <\/div>\n <\/div>\n <div style=\"display:flex; align-items:center; gap:var(--space-4);\">\n <div style=\"width:40px;height:40px; background:var(--color-gold-highlight); border-radius:var(--radius-lg); display:flex;align-items:center;justify-content:center; flex-shrink:0; color:var(--color-gold);\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>\n <\/div>\n <div>\n <div style=\"font-size:var(--text-xs); color:var(--color-text-muted); margin-bottom:2px;\">\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/div>\n <a href=\"mailto:info@brutocode.sa\" style=\"font-weight:700; color:var(--color-text); text-decoration:none; font-size:var(--text-base);\">info@brutocode.sa<\/a>\n <\/div>\n <\/div>\n <div style=\"display:flex; align-items:center; gap:var(--space-4);\">\n <div style=\"width:40px;height:40px; background:var(--color-gold-highlight); border-radius:var(--radius-lg); display:flex;align-items:center;justify-content:center; flex-shrink:0; color:var(--color-gold);\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/svg>\n <\/div>\n <div>\n <div style=\"font-size:var(--text-xs); color:var(--color-text-muted); margin-bottom:2px;\">\u0627\u0644\u0645\u0648\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/div>\n <a href=\"https:\/\/www.brutocode.sa\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"font-weight:700; color:var(--color-text); text-decoration:none; font-size:var(--text-base);\">www.brutocode.sa<\/a>\n <\/div>\n <\/div>\n <div style=\"display:flex; align-items:center; gap:var(--space-4);\">\n <div style=\"width:40px;height:40px; background:var(--color-gold-highlight); border-radius:var(--radius-lg); display:flex;align-items:center;justify-content:center; flex-shrink:0; color:var(--color-gold);\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\n <\/div>\n <div>\n <div style=\"font-size:var(--text-xs); color:var(--color-text-muted); margin-bottom:2px;\">\u0627\u0644\u0645\u0642\u0631 \u0627\u0644\u0631\u0626\u064a\u0633\u064a<\/div>\n <div style=\"font-weight:700; font-size:var(--text-base);\">\u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629<\/div>\n <\/div>\n <\/div>\n <div style=\"padding-top:var(--space-4); border-top:1px solid var(--color-divider);\">\n <div style=\"font-size:var(--text-xs); color:var(--color-text-muted); margin-bottom:var(--space-3);\">\u062a\u0627\u0628\u0639\u0648\u0646\u0627<\/div>\n <a href=\"https:\/\/twitter.com\/brutocode\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); font-weight:600; color:var(--color-primary); text-decoration:none;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z\"\/><\/svg>\n @brutocode\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div>\n <form style=\"background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-8); box-shadow:var(--shadow-sm);\" onsubmit=\"handleForm(event)\" novalidate>\n <h3 style=\"font-size:var(--text-lg); font-weight:700; margin-bottom:var(--space-6);\">\u0623\u0631\u0633\u0644 \u0627\u0633\u062a\u0641\u0633\u0627\u0631\u0627\u064b<\/h3>\n <div style=\"display:flex; flex-direction:column; gap:var(--space-4);\">\n <div>\n <label for=\"name\" style=\"display:block; font-size:var(--text-sm); font-weight:600; margin-bottom:var(--space-2);\">\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required placeholder=\"\u0645\u062d\u0645\u062f \u0627\u0644\u0639\u0645\u0631\u064a\"\n style=\"width:100%; padding:var(--space-3) var(--space-4); border:1.5px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg); color:var(--color-text); font-size:var(--text-sm); transition:border-color var(--transition);\"\n onfocus=\"this.style.borderColor='var(--color-primary)'\"\n onblur=\"this.style.borderColor='var(--color-border)'\">\n <\/div>\n <div>\n <label for=\"email\" style=\"display:block; font-size:var(--text-sm); font-weight:600; margin-bottom:var(--space-2);\">\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required placeholder=\"name@company.com\" dir=\"ltr\"\n style=\"width:100%; padding:var(--space-3) var(--space-4); border:1.5px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg); color:var(--color-text); font-size:var(--text-sm); transition:border-color var(--transition); text-align:right;\"\n onfocus=\"this.style.borderColor='var(--color-primary)'\"\n onblur=\"this.style.borderColor='var(--color-border)'\">\n <\/div>\n <div>\n <label for=\"service\" style=\"display:block; font-size:var(--text-sm); font-weight:600; margin-bottom:var(--space-2);\">\u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629<\/label>\n <select id=\"service\" name=\"service\"\n style=\"width:100%; padding:var(--space-3) var(--space-4); border:1.5px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg); color:var(--color-text); font-size:var(--text-sm); cursor:pointer; transition:border-color var(--transition);\"\n onfocus=\"this.style.borderColor='var(--color-primary)'\"\n onblur=\"this.style.borderColor='var(--color-border)'\">\n <option value=\"\">\u0627\u062e\u062a\u0631 \u0627\u0644\u062e\u062f\u0645\u0629<\/option>\n <option>\u0646\u0638\u0627\u0645 ERP \u0627\u0644\u0645\u0624\u0633\u0633\u064a<\/option>\n <option>\u0625\u062f\u0627\u0631\u0629 \u0639\u0644\u0627\u0642\u0627\u062a \u0627\u0644\u0639\u0645\u0644\u0627\u0621 CRM<\/option>\n <option>\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0648\u0627\u0644\u0623\u062a\u0645\u062a\u0629<\/option>\n <option>\u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u0633\u062d\u0627\u0628\u064a\u0629<\/option>\n <option>\u0627\u0644\u0623\u0645\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a<\/option>\n <option>\u0627\u0644\u062a\u062c\u0627\u0631\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/option>\n <option>\u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0634\u0627\u0645\u0644\u0629<\/option>\n <\/select>\n <\/div>\n <div>\n <label for=\"message\" style=\"display:block; font-size:var(--text-sm); font-weight:600; margin-bottom:var(--space-2);\">\u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/label>\n <textarea id=\"message\" name=\"message\" rows=\"4\" placeholder=\"\u0635\u0641 \u0644\u0646\u0627 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643 \u0648\u0645\u062a\u0637\u0644\u0628\u0627\u062a \u0645\u0634\u0631\u0648\u0639\u0643...\"\n style=\"width:100%; padding:var(--space-3) var(--space-4); border:1.5px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg); color:var(--color-text); font-size:var(--text-sm); resize:vertical; min-height:100px; font-family:inherit; transition:border-color var(--transition);\"\n onfocus=\"this.style.borderColor='var(--color-primary)'\"\n onblur=\"this.style.borderColor='var(--color-border)'\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\" style=\"width:100%; justify-content:center; padding:var(--space-4);\">\n \u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0627\u0633\u062a\u0641\u0633\u0627\u0631\n <\/button>\n <div id=\"formMsg\" style=\"display:none; text-align:center; font-size:var(--text-sm); color:var(--color-gold); font-weight:600; padding:var(--space-3); background:var(--color-gold-highlight); border-radius:var(--radius-lg);\">\n \u2705 \u062a\u0645 \u0625\u0631\u0633\u0627\u0644 \u0631\u0633\u0627\u0644\u062a\u0643 \u0628\u0646\u062c\u0627\u062d! \u0633\u064a\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0643 \u0641\u0631\u064a\u0642\u0646\u0627 \u0642\u0631\u064a\u0628\u0627\u064b.\n <\/div>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n<\/main>\n\n\n<footer class=\"footer\" role=\"contentinfo\">\n <div class=\"container\">\n <div class=\"footer__grid\">\n \n <div>\n <svg width=\"44\" height=\"44\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n <rect width=\"40\" height=\"40\" rx=\"10\" fill=\"rgba(255,255,255,0.1)\"\/>\n <path d=\"M8 10 L8 30 L14 30 L14 22 L18 22 L24 30 L31 30 L24 21 C27 20 29 17.5 29 14.5 C29 11.5 26.5 10 23 10 Z M14 15 L22 15 C24 15 25 15.8 25 17.5 C25 19 24 20 22 20 L14 20 Z\" fill=\"#C49A2B\"\/>\n <\/svg>\n <div class=\"footer__about-name\">BrutoCode<\/div>\n <p class=\"footer__about-desc\">\n \u0634\u0631\u064a\u0643\u0643 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a \u2014 \u0646\u0635\u0645\u0651\u0645 \u0623\u0646\u0638\u0645\u0629 \u0631\u0642\u0645\u064a\u0629 \u0647\u0646\u062f\u0633\u064a\u0629 \u0644\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629 \u0648\u0627\u0644\u0625\u0642\u0644\u064a\u0645\u064a\u0629.\n <\/p>\n <\/div>\n\n \n <div>\n <div class=\"footer__heading\">\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/div>\n <ul class=\"footer__links\" role=\"list\">\n <li><a href=\"#services\">\u0623\u0646\u0638\u0645\u0629 ERP<\/a><\/li>\n <li><a href=\"#services\">\u0625\u062f\u0627\u0631\u0629 CRM<\/a><\/li>\n <li><a href=\"#services\">\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a<\/a><\/li>\n <li><a href=\"#services\">\u0627\u0644\u0623\u0645\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a<\/a><\/li>\n <li><a href=\"#services\">\u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u0633\u062d\u0627\u0628\u064a\u0629<\/a><\/li>\n <\/ul>\n <\/div>\n\n \n <div>\n <div class=\"footer__heading\">\u0627\u0644\u0642\u0637\u0627\u0639\u0627\u062a<\/div>\n <ul class=\"footer__links\" role=\"list\">\n <li><a href=\"#sectors\">\u0627\u0644\u0631\u0639\u0627\u064a\u0629 \u0627\u0644\u0635\u062d\u064a\u0629<\/a><\/li>\n <li><a href=\"#sectors\">\u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u062d\u0643\u0648\u0645\u064a\u0629<\/a><\/li>\n <li><a href=\"#sectors\">\u0627\u0644\u062a\u062c\u0627\u0631\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/a><\/li>\n <li><a href=\"#sectors\">\u0627\u0644\u0639\u0642\u0627\u0631\u0627\u062a<\/a><\/li>\n <li><a href=\"#sectors\">\u0627\u0644\u062a\u0639\u0644\u064a\u0645 \u0648\u0627\u0644\u062a\u062f\u0631\u064a\u0628<\/a><\/li>\n <\/ul>\n <\/div>\n\n \n <div>\n <div class=\"footer__heading\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/div>\n <div class=\"footer__contact-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13 19.79 19.79 0 0 1 1.61 4.39 2 2 0 0 1 3.59 2.18h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.09 6.09l.9-.9a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>\n <a href=\"tel:+966570545777\" style=\"color:inherit; text-decoration:none; direction:ltr; display:inline-block;\" dir=\"ltr\">+966 57 054 5777<\/a>\n <\/div>\n <div class=\"footer__contact-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>\n <a href=\"mailto:info@brutocode.sa\" style=\"color:inherit; text-decoration:none;\">info@brutocode.sa<\/a>\n <\/div>\n <div class=\"footer__contact-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/svg>\n <a href=\"https:\/\/www.brutocode.sa\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color:inherit; text-decoration:none;\">www.brutocode.sa<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"footer__bottom\">\n <span>\u00a9 2026 BrutoCode. \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629.<\/span>\n <span style=\"color:var(--color-gold);\">\u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629 \u00b7 \u0634\u0631\u064a\u0643\u0643 \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a<\/span>\n <\/div>\n <\/div>\n<\/footer>\n\n\n<script>\n\/\/ Theme toggle\n(function(){\n const t = document.querySelector('[data-theme-toggle]');\n const r = document.documentElement;\n let d = matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light';\n r.setAttribute('data-theme', d);\n t && t.addEventListener('click', () => {\n d = d === 'dark' ? 'light' : 'dark';\n r.setAttribute('data-theme', d);\n t.setAttribute('aria-label', 'Switch to ' + (d === 'dark' ? 'light' : 'dark') + ' mode');\n t.innerHTML = d === 'dark'\n ? '<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"5\"\/><path d=\"M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42\"\/><\/svg>'\n : '<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"\/><\/svg>';\n });\n})();\n\n\/\/ Navbar scroll effect\nconst navbar = document.getElementById('navbar');\nwindow.addEventListener('scroll', () => {\n navbar.classList.toggle('scrolled', window.scrollY > 20);\n}, { passive: true });\n\n\/\/ Mobile menu\nconst menuToggle = document.getElementById('menuToggle');\nconst mobileMenu = document.getElementById('mobileMenu');\nlet menuOpen = false;\n\nfunction closeMobileMenu() {\n menuOpen = false;\n mobileMenu.classList.remove('open');\n menuToggle.setAttribute('aria-expanded', 'false');\n document.body.style.overflow = '';\n}\n\nmenuToggle.addEventListener('click', () => {\n menuOpen = !menuOpen;\n mobileMenu.classList.toggle('open', menuOpen);\n menuToggle.setAttribute('aria-expanded', menuOpen);\n document.body.style.overflow = menuOpen ? 'hidden' : '';\n});\n\n\/\/ Escape key closes mobile menu\ndocument.addEventListener('keydown', e => {\n if (e.key === 'Escape' && menuOpen) closeMobileMenu();\n});\n\n\/\/ Scroll animations (IntersectionObserver)\nconst observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\n\ndocument.querySelectorAll('.fade-up').forEach(el => observer.observe(el));\n\n\/\/ Form submission\nfunction handleForm(e) {\n e.preventDefault();\n const btn = e.target.querySelector('button[type=\"submit\"]');\n const msg = document.getElementById('formMsg');\n btn.disabled = true;\n btn.textContent = '\u062c\u0627\u0631\u064a \u0627\u0644\u0625\u0631\u0633\u0627\u0644...';\n setTimeout(() => {\n btn.style.display = 'none';\n msg.style.display = 'block';\n e.target.reset();\n }, 1200);\n}\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BrutoCode | \u0634\u0631\u064a\u0643\u0643 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a \u0627\u0646\u062a\u0642\u0644 \u0644\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0631\u0626\u064a\u0633\u064a BrutoCode \u062e\u062f\u0645\u0627\u062a\u0646\u0627 \u0627\u0644\u0642\u0637\u0627\u0639\u0627\u062a \u0627\u0644\u0645\u0646\u0647\u062c\u064a\u0629 \u0627\u0644\u0634\u0631\u0627\u0643\u0627\u062a \u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627 \u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643 \u062e\u062f\u0645\u0627\u062a\u0646\u0627 \u0627\u0644\u0642\u0637\u0627\u0639\u0627\u062a \u0627\u0644\u0645\u0646\u0647\u062c\u064a\u0629 \u0627\u0644\u0634\u0631\u0627\u0643\u0627\u062a \u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627 \u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643 \u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629 \u00b7 2026 \u0634\u0631\u064a\u0643\u0643 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a \u0646\u0635\u0645\u0651\u0645 \u0645\u0646\u0638\u0648\u0645\u0627\u062a \u0631\u0642\u0645\u064a\u0629 \u0647\u0646\u062f\u0633\u064a\u0629 \u062a\u062f\u0645\u062c \u0628\u064a\u0646 \u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631 \u0627\u0644\u062a\u0642\u0646\u064a \u0648\u0627\u0644\u0641\u0647\u0645 \u0627\u0644\u0639\u0645\u064a\u0642 \u0644\u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0627\u062a \u0627\u0644\u0623\u0639\u0645\u0627\u0644\u060c \u0644\u0646\u0642\u0644 \u0645\u0624\u0633\u0633\u062a\u0643 \u0646\u062d\u0648 \u0627\u0644\u0633\u064a\u0627\u062f\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0627\u0644\u0643\u0627\u0645\u0644\u0629. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/brutocode.followra.app\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brutocode.followra.app\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/brutocode.followra.app\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/brutocode.followra.app\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brutocode.followra.app\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":7,"href":"https:\/\/brutocode.followra.app\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/brutocode.followra.app\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/brutocode.followra.app\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nBrutoCode | \u0634\u0631\u064a\u0643\u0643 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a<\/title>\n<meta name=\"description\" content=\"BrutoCode \u2014 \u0634\u0631\u064a\u0643\u0643 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a \u0641\u064a \u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629. \u062d\u0644\u0648\u0644 \u0645\u0624\u0633\u0633\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0641\u064a ERP \u0648CRM \u0648\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0648\u0627\u0644\u0623\u0645\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a.\">\n\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Cairo:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ===========================\n DESIGN TOKENS\n=========================== *\/\n:root, [data-theme=\"light\"] {\n --font-display: 'Tajawal', 'Cairo', sans-serif;\n --font-body: 'Cairo', 'Tajawal', sans-serif;\n\n --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);\n --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);\n --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);\n --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);\n --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);\n --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);\n --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);\n\n --space-1: 0.25rem;\n --space-2: 0.5rem;\n --space-3: 0.75rem;\n --space-4: 1rem;\n --space-5: 1.25rem;\n --space-6: 1.5rem;\n --space-8: 2rem;\n --space-10: 2.5rem;\n --space-12: 3rem;\n --space-16: 4rem;\n --space-20: 5rem;\n --space-24: 6rem;\n\n \/* BrutoCode Brand Colors \u2014 Deep Navy + Gold *\/\n --color-bg: #f8f7f4;\n --color-surface: #faf9f7;\n --color-surface-2: #ffffff;\n --color-surface-offset: #f1efe9;\n --color-divider: #e0ddd6;\n --color-border: #d8d4cc;\n\n --color-text: #1a1714;\n --color-text-muted: #6b6863;\n --color-text-faint: #b0ada8;\n --color-text-inverse: #f8f7f4;\n\n \/* Primary: Deep Navy *\/\n --color-primary: #0d2340;\n --color-primary-hover: #091a30;\n --color-primary-active: #051020;\n --color-primary-highlight: #cdd5e0;\n\n \/* Accent: Gold *\/\n --color-gold: #c49a2b;\n --color-gold-hover: #a8801f;\n --color-gold-active: #8a6615;\n --color-gold-highlight: #f5ecd2;\n\n --radius-sm: 0.375rem;\n --radius-md: 0.5rem;\n --radius-lg: 0.75rem;\n --radius-xl: 1rem;\n --radius-2xl: 1.5rem;\n --radius-full: 9999px;\n\n --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);\n\n --shadow-sm: 0 1px 3px oklch(0.15 0.02 240 \/ 0.08);\n --shadow-md: 0 4px 16px oklch(0.15 0.02 240 \/ 0.10);\n --shadow-lg: 0 12px 40px oklch(0.15 0.02 240 \/ 0.14);\n\n --content-narrow: 640px;\n --content-default: 960px;\n --content-wide: 1200px;\n}\n\n[data-theme=\"dark\"] {\n --color-bg: #0e1117;\n --color-surface: #131720;\n --color-surface-2: #1a2030;\n --color-surface-offset: #111520;\n --color-divider: #1e2535;\n --color-border: #28304a;\n --color-text: #e8e6e2;\n --color-text-muted: #8a8680;\n --color-text-faint: #50504a;\n --color-text-inverse: #0e1117;\n --color-primary: #4a80c4;\n --color-primary-hover: #6599d4;\n --color-primary-active: #80b2e0;\n --color-primary-highlight: #1a2a3d;\n --color-gold: #d4aa44;\n --color-gold-hover: #e0be60;\n --color-gold-active: #ecd080;\n --color-gold-highlight: #2a2010;\n --shadow-sm: 0 1px 3px oklch(0 0 0 \/ 0.3);\n --shadow-md: 0 4px 16px oklch(0 0 0 \/ 0.4);\n --shadow-lg: 0 12px 40px oklch(0 0 0 \/ 0.5);\n}\n\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme]) {\n --color-bg: #0e1117; --color-surface: #131720; --color-surface-2: #1a2030;\n --color-surface-offset: #111520; --color-divider: #1e2535; --color-border: #28304a;\n --color-text: #e8e6e2; --color-text-muted: #8a8680; --color-text-faint: #50504a;\n --color-text-inverse: #0e1117; --color-primary: #4a80c4; --color-primary-hover: #6599d4;\n --color-primary-active: #80b2e0; --color-primary-highlight: #1a2a3d;\n --color-gold: #d4aa44; --color-gold-hover: #e0be60; --color-gold-active: #ecd080;\n --color-gold-highlight: #2a2010;\n }\n}\n\n\/* ===========================\n BASE\n=========================== *\/\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\nhtml {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n scroll-behavior: smooth;\n scroll-padding-top: var(--space-20);\n}\n\nbody {\n min-height: 100dvh;\n line-height: 1.7;\n font-family: var(--font-body);\n font-size: var(--text-base);\n color: var(--color-text);\n background-color: var(--color-bg);\n direction: rtl;\n}\n\nimg, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }\nul[role=\"list\"], ol[role=\"list\"] { list-style: none; }\ninput, button, textarea, select { font: inherit; color: inherit; }\nh1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.25; font-family: var(--font-display); }\np, li { text-wrap: pretty; max-width: 68ch; }\n\n::selection { background: oklch(from var(--color-gold) l c h \/ 0.2); color: var(--color-text); }\n\n:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; border-radius: var(--radius-sm); }\n\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }\n}\n\nbutton { cursor: pointer; background: none; border: none; }\n\na, button, [role=\"button\"] {\n transition: color var(--transition), background var(--transition),\n border-color var(--transition), box-shadow var(--transition),\n transform var(--transition), opacity var(--transition);\n}\n\n.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }\n\n\/* ===========================\n LAYOUT\n=========================== *\/\n.container {\n max-width: var(--content-wide);\n margin-inline: auto;\n padding-inline: clamp(var(--space-4), 4vw, var(--space-12));\n}\n\n.container--narrow { max-width: var(--content-default); }\n\n\/* ===========================\n NAVIGATION\n=========================== *\/\n.nav {\n position: fixed;\n top: 0; inset-inline: 0;\n z-index: 100;\n padding-block: var(--space-4);\n background: color-mix(in oklch, var(--color-bg) 92%, transparent);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border-bottom: 1px solid var(--color-divider);\n transition: box-shadow var(--transition);\n}\n\n.nav.scrolled { box-shadow: var(--shadow-md); }\n\n.nav__inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-8);\n}\n\n.nav__logo {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n text-decoration: none;\n color: var(--color-text);\n}\n\n.nav__logo-mark {\n width: 40px; height: 40px;\n flex-shrink: 0;\n}\n\n.nav__brand {\n font-family: var(--font-display);\n font-size: var(--text-lg);\n font-weight: 800;\n letter-spacing: -0.02em;\n color: var(--color-primary);\n}\n\n[data-theme=\"dark\"] .nav__brand { color: var(--color-text); }\n\n.nav__links {\n display: flex;\n align-items: center;\n gap: var(--space-8);\n list-style: none;\n}\n\n.nav__links a {\n font-size: var(--text-sm);\n font-weight: 500;\n color: var(--color-text-muted);\n text-decoration: none;\n}\n\n.nav__links a:hover { color: var(--color-text); }\n\n.nav__actions {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n\n.nav__toggle {\n display: none;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--color-text);\n padding: var(--space-2);\n border-radius: var(--radius-md);\n}\n\n.nav__toggle:hover { background: var(--color-surface-offset); }\n\n.theme-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px; height: 36px;\n border-radius: var(--radius-full);\n color: var(--color-text-muted);\n border: 1px solid var(--color-border);\n background: var(--color-surface);\n}\n\n.theme-btn:hover { color: var(--color-text); border-color: var(--color-primary); }\n\n.btn {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-3) var(--space-6);\n border-radius: var(--radius-full);\n font-size: var(--text-sm);\n font-weight: 600;\n text-decoration: none;\n cursor: pointer;\n white-space: nowrap;\n border: 1.5px solid transparent;\n}\n\n.btn-primary {\n background: var(--color-primary);\n color: var(--color-text-inverse);\n}\n\n[data-theme=\"dark\"] .btn-primary { color: #fff; }\n\n.btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }\n\n.btn-outline {\n background: transparent;\n color: var(--color-primary);\n border-color: var(--color-primary);\n}\n\n[data-theme=\"dark\"] .btn-outline { color: var(--color-text); border-color: var(--color-border); }\n\n.btn-outline:hover { background: var(--color-primary); color: var(--color-text-inverse); }\n\n[data-theme=\"dark\"] .btn-outline:hover { background: var(--color-surface-2); border-color: var(--color-text-muted); }\n\n.btn-gold {\n background: var(--color-gold);\n color: #fff;\n}\n\n.btn-gold:hover { background: var(--color-gold-hover); transform: translateY(-2px); box-shadow: 0 8px 24px oklch(from var(--color-gold) l c h \/ 0.35); }\n\n\/* ===========================\n HERO\n=========================== *\/\n.hero {\n position: relative;\n min-height: 100dvh;\n display: flex;\n align-items: center;\n overflow: hidden;\n padding-top: var(--space-20);\n}\n\n.hero__bg {\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse 80% 60% at 70% 40%, oklch(0.25 0.08 240 \/ 0.08) 0%, transparent 60%),\n radial-gradient(ellipse 60% 50% at 20% 80%, oklch(0.70 0.12 60 \/ 0.06) 0%, transparent 50%),\n var(--color-bg);\n z-index: 0;\n}\n\n.hero__grid-pattern {\n position: absolute;\n inset: 0;\n z-index: 0;\n background-image:\n linear-gradient(oklch(from var(--color-primary) l c h \/ 0.04) 1px, transparent 1px),\n linear-gradient(90deg, oklch(from var(--color-primary) l c h \/ 0.04) 1px, transparent 1px);\n background-size: 60px 60px;\n mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);\n -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);\n}\n\n.hero__inner {\n position: relative;\n z-index: 1;\n display: grid;\n grid-template-columns: 1fr 1fr;\n align-items: center;\n gap: var(--space-16);\n padding-block: clamp(var(--space-16), 10vh, var(--space-24));\n}\n\n.hero__badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n background: var(--color-gold-highlight);\n color: var(--color-gold);\n border: 1px solid oklch(from var(--color-gold) l c h \/ 0.25);\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-full);\n font-size: var(--text-xs);\n font-weight: 600;\n margin-bottom: var(--space-6);\n letter-spacing: 0.04em;\n}\n\n[data-theme=\"dark\"] .hero__badge { background: var(--color-gold-highlight); color: var(--color-gold); }\n\n.hero__badge-dot {\n width: 6px; height: 6px;\n background: var(--color-gold);\n border-radius: 50%;\n animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.5; transform: scale(0.85); }\n}\n\n.hero__title {\n font-size: var(--text-3xl);\n font-weight: 900;\n color: var(--color-primary);\n line-height: 1.15;\n margin-bottom: var(--space-6);\n letter-spacing: -0.025em;\n}\n\n[data-theme=\"dark\"] .hero__title { color: var(--color-text); }\n\n.hero__title em {\n font-style: normal;\n color: var(--color-gold);\n}\n\n.hero__sub {\n font-size: var(--text-lg);\n color: var(--color-text-muted);\n max-width: 52ch;\n margin-bottom: var(--space-10);\n line-height: 1.7;\n}\n\n.hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n align-items: center;\n}\n\n.hero__stats {\n display: flex;\n gap: var(--space-8);\n margin-top: var(--space-12);\n padding-top: var(--space-8);\n border-top: 1px solid var(--color-divider);\n}\n\n.hero__stat-num {\n font-family: var(--font-display);\n font-size: var(--text-xl);\n font-weight: 800;\n color: var(--color-primary);\n line-height: 1;\n margin-bottom: var(--space-1);\n}\n\n[data-theme=\"dark\"] .hero__stat-num { color: var(--color-gold); }\n\n.hero__stat-label {\n font-size: var(--text-xs);\n color: var(--color-text-muted);\n font-weight: 500;\n}\n\n.hero__visual {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.hero__card-stack {\n position: relative;\n width: 100%;\n max-width: 420px;\n margin-inline: auto;\n}\n\n.hero__card {\n background: var(--color-surface-2);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-2xl);\n padding: var(--space-6);\n box-shadow: var(--shadow-lg);\n position: relative;\n z-index: 2;\n}\n\n.hero__card-behind {\n position: absolute;\n inset: -12px -8px -auto -8px;\n bottom: -12px;\n background: color-mix(in oklch, var(--color-primary) 8%, var(--color-surface));\n border: 1px solid var(--color-border);\n border-radius: var(--radius-2xl);\n z-index: 1;\n}\n\n.hero__card-behind-2 {\n position: absolute;\n inset: -24px -18px -auto -18px;\n bottom: -24px;\n background: color-mix(in oklch, var(--color-primary) 4%, var(--color-surface));\n border: 1px solid var(--color-divider);\n border-radius: var(--radius-2xl);\n z-index: 0;\n}\n\n.hero__card-header {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin-bottom: var(--space-6);\n}\n\n.hero__card-icon {\n width: 44px; height: 44px;\n background: var(--color-primary);\n border-radius: var(--radius-lg);\n display: flex; align-items: center; justify-content: center;\n color: #fff;\n flex-shrink: 0;\n}\n\n[data-theme=\"dark\"] .hero__card-icon { background: var(--color-gold); }\n\n.hero__card-title { font-size: var(--text-base); font-weight: 700; }\n.hero__card-sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }\n\n.metric-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-3);\n margin-bottom: var(--space-4);\n}\n\n.metric-box {\n background: var(--color-surface-offset);\n border-radius: var(--radius-lg);\n padding: var(--space-4);\n text-align: center;\n}\n\n.metric-box__num {\n font-family: var(--font-display);\n font-size: var(--text-xl);\n font-weight: 800;\n color: var(--color-primary);\n line-height: 1;\n margin-bottom: var(--space-1);\n}\n\n[data-theme=\"dark\"] .metric-box__num { color: var(--color-gold); }\n\n.metric-box__label { font-size: var(--text-xs); color: var(--color-text-muted); }\n\n.progress-row { display: flex; flex-direction: column; gap: var(--space-3); }\n\n.progress-item {}\n\n.progress-item__head {\n display: flex; justify-content: space-between;\n font-size: var(--text-xs); font-weight: 600;\n margin-bottom: var(--space-2);\n color: var(--color-text-muted);\n}\n\n.progress-bar {\n height: 6px;\n background: var(--color-divider);\n border-radius: var(--radius-full);\n overflow: hidden;\n}\n\n.progress-fill {\n height: 100%;\n border-radius: var(--radius-full);\n background: linear-gradient(90deg in oklch, var(--color-primary), var(--color-gold));\n}\n\n\/* ===========================\n SECTION SPACING\n=========================== *\/\n.section {\n padding-block: clamp(var(--space-16), 8vw, var(--space-24));\n}\n\n.section-header {\n text-align: center;\n margin-bottom: clamp(var(--space-10), 4vw, var(--space-16));\n}\n\n.section-label {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-xs);\n font-weight: 700;\n color: var(--color-gold);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n margin-bottom: var(--space-4);\n}\n\n.section-label::before, .section-label::after {\n content: '';\n width: 20px; height: 1px;\n background: var(--color-gold);\n opacity: 0.5;\n}\n\n.section-title {\n font-size: var(--text-2xl);\n font-weight: 800;\n color: var(--color-primary);\n margin-bottom: var(--space-4);\n letter-spacing: -0.02em;\n}\n\n[data-theme=\"dark\"] .section-title { color: var(--color-text); }\n\n.section-desc {\n font-size: var(--text-base);\n color: var(--color-text-muted);\n max-width: 60ch;\n margin-inline: auto;\n line-height: 1.75;\n}\n\n\/* ===========================\n NUMBERS \/ IMPACT\n=========================== *\/\n.numbers-bg { background: var(--color-primary); }\n\n[data-theme=\"dark\"] .numbers-bg { background: var(--color-surface); border-block: 1px solid var(--color-border); }\n\n.numbers-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 1px;\n background: oklch(from #fff l c h \/ 0.1);\n}\n\n[data-theme=\"dark\"] .numbers-grid { background: var(--color-border); }\n\n.number-item {\n padding: var(--space-12) var(--space-8);\n text-align: center;\n background: var(--color-primary);\n}\n\n[data-theme=\"dark\"] .number-item { background: var(--color-surface); }\n\n.number-item__num {\n font-family: var(--font-display);\n font-size: var(--text-2xl);\n font-weight: 900;\n color: var(--color-gold);\n line-height: 1;\n margin-bottom: var(--space-2);\n}\n\n.number-item__label {\n font-size: var(--text-sm);\n color: oklch(from #fff l c h \/ 0.7);\n font-weight: 500;\n}\n\n[data-theme=\"dark\"] .number-item__label { color: var(--color-text-muted); }\n\n\/* ===========================\n SERVICES\n=========================== *\/\n.services-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-6);\n}\n\n.service-card {\n background: var(--color-surface-2);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-xl);\n padding: var(--space-8);\n position: relative;\n overflow: hidden;\n transition: box-shadow var(--transition), transform var(--transition);\n}\n\n.service-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }\n\n.service-card::before {\n content: '';\n position: absolute;\n top: 0; right: 0; left: 0;\n height: 3px;\n background: linear-gradient(90deg in oklch, var(--color-primary), var(--color-gold));\n opacity: 0;\n transition: opacity var(--transition);\n}\n\n.service-card:hover::before { opacity: 1; }\n\n.service-card__icon {\n width: 52px; height: 52px;\n background: color-mix(in oklch, var(--color-primary) 10%, var(--color-bg));\n border-radius: var(--radius-lg);\n display: flex; align-items: center; justify-content: center;\n margin-bottom: var(--space-5);\n color: var(--color-primary);\n}\n\n[data-theme=\"dark\"] .service-card__icon {\n background: var(--color-surface-offset);\n color: var(--color-gold);\n}\n\n.service-card__icon svg { width: 26px; height: 26px; }\n\n.service-card__title {\n font-size: var(--text-lg);\n font-weight: 700;\n margin-bottom: var(--space-3);\n color: var(--color-text);\n}\n\n.service-card__desc {\n font-size: var(--text-sm);\n color: var(--color-text-muted);\n line-height: 1.7;\n}\n\n.service-card__tags {\n display: flex; flex-wrap: wrap; gap: var(--space-2);\n margin-top: var(--space-5);\n}\n\n.tag {\n font-size: var(--text-xs);\n background: var(--color-surface-offset);\n color: var(--color-text-muted);\n padding: var(--space-1) var(--space-3);\n border-radius: var(--radius-full);\n font-weight: 500;\n}\n\n\/* ===========================\n SECTORS\n=========================== *\/\n.sectors-bg { background: var(--color-surface-offset); }\n\n.sectors-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n}\n\n.sector-card {\n background: var(--color-surface-2);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-xl);\n padding: var(--space-6) var(--space-5);\n text-align: center;\n transition: box-shadow var(--transition), transform var(--transition);\n}\n\n.sector-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }\n\n.sector-card__icon {\n font-size: 2.2rem;\n margin-bottom: var(--space-3);\n display: block;\n}\n\n.sector-card__name {\n font-size: var(--text-sm);\n font-weight: 700;\n color: var(--color-text);\n margin-bottom: var(--space-1);\n}\n\n.sector-card__sub {\n font-size: var(--text-xs);\n color: var(--color-text-muted);\n}\n\n\/* ===========================\n METHODOLOGY\n=========================== *\/\n.methodology-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-16);\n align-items: center;\n}\n\n.methodology-steps { display: flex; flex-direction: column; gap: var(--space-6); }\n\n.step {\n display: grid;\n grid-template-columns: 48px 1fr;\n gap: var(--space-5);\n align-items: start;\n}\n\n.step__num {\n width: 48px; height: 48px;\n background: var(--color-primary);\n color: #fff;\n border-radius: var(--radius-lg);\n display: flex; align-items: center; justify-content: center;\n font-weight: 800;\n font-size: var(--text-sm);\n flex-shrink: 0;\n font-family: var(--font-display);\n}\n\n[data-theme=\"dark\"] .step__num { background: var(--color-gold); color: #000; }\n\n.step__title { font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-1); }\n.step__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }\n\n.methodology-visual {\n background: var(--color-surface-2);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-2xl);\n padding: var(--space-8);\n box-shadow: var(--shadow-lg);\n}\n\n.methodology-visual__title {\n font-size: var(--text-base);\n font-weight: 700;\n margin-bottom: var(--space-6);\n color: var(--color-text-muted);\n text-align: center;\n}\n\n.tech-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-3);\n}\n\n.tech-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-4);\n background: var(--color-surface-offset);\n border-radius: var(--radius-lg);\n text-align: center;\n border: 1px solid var(--color-divider);\n font-size: var(--text-xs);\n font-weight: 600;\n color: var(--color-text-muted);\n}\n\n.tech-item svg { width: 28px; height: 28px; color: var(--color-primary); }\n\n[data-theme=\"dark\"] .tech-item svg { color: var(--color-gold); }\n\n\/* ===========================\n TRUST \/ PARTNERS\n=========================== *\/\n.trust-bg { background: var(--color-surface-offset); }\n\n.partners-strip {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-12);\n flex-wrap: wrap;\n margin-top: var(--space-10);\n}\n\n.partner-badge {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-6);\n background: var(--color-surface-2);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-xl);\n box-shadow: var(--shadow-sm);\n}\n\n.partner-badge__name {\n font-size: var(--text-sm);\n font-weight: 700;\n color: var(--color-text-muted);\n}\n\n.partner-badge__type {\n font-size: var(--text-xs);\n color: var(--color-text-faint);\n}\n\n.partner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-gold); }\n\n.compliance-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-4);\n margin-top: var(--space-10);\n}\n\n.compliance-item {\n background: var(--color-surface-2);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-xl);\n padding: var(--space-6);\n text-align: center;\n}\n\n.compliance-item__icon { font-size: 2rem; margin-bottom: var(--space-3); display: block; }\n.compliance-item__name { font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-1); }\n.compliance-item__desc { font-size: var(--text-xs); color: var(--color-text-muted); }\n\n\/* ===========================\n CTA\n=========================== *\/\n.cta-section {\n background: var(--color-primary);\n position: relative;\n overflow: hidden;\n}\n\n[data-theme=\"dark\"] .cta-section { background: var(--color-surface); border-block: 1px solid var(--color-border); }\n\n.cta-section::before {\n content: '';\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse 80% 80% at 80% 50%, oklch(from var(--color-gold) l c h \/ 0.1) 0%, transparent 60%);\n}\n\n.cta-inner {\n position: relative;\n z-index: 1;\n text-align: center;\n padding-block: clamp(var(--space-16), 8vw, var(--space-24));\n}\n\n.cta-inner .section-title {\n color: #fff;\n font-size: var(--text-2xl);\n}\n\n[data-theme=\"dark\"] .cta-inner .section-title { color: var(--color-text); }\n\n.cta-inner .section-desc {\n color: oklch(from #fff l c h \/ 0.75);\n margin-bottom: var(--space-10);\n}\n\n[data-theme=\"dark\"] .cta-inner .section-desc { color: var(--color-text-muted); }\n\n.cta-actions {\n display: flex;\n gap: var(--space-4);\n justify-content: center;\n flex-wrap: wrap;\n}\n\n.cta-actions .btn-ghost {\n background: oklch(from #fff l c h \/ 0.1);\n color: #fff;\n border: 1.5px solid oklch(from #fff l c h \/ 0.3);\n}\n\n.cta-actions .btn-ghost:hover {\n background: oklch(from #fff l c h \/ 0.2);\n}\n\n\/* ===========================\n FOOTER\n=========================== *\/\n.footer {\n background: var(--color-primary);\n color: oklch(from #fff l c h \/ 0.7);\n padding-block: var(--space-16);\n}\n\n[data-theme=\"dark\"] .footer { background: var(--color-surface); border-top: 1px solid var(--color-border); color: var(--color-text-muted); }\n\n.footer__grid {\n display: grid;\n grid-template-columns: 1.5fr 1fr 1fr 1fr;\n gap: var(--space-12);\n padding-bottom: var(--space-12);\n border-bottom: 1px solid oklch(from #fff l c h \/ 0.1);\n}\n\n[data-theme=\"dark\"] .footer__grid { border-color: var(--color-divider); }\n\n.footer__about-name {\n font-family: var(--font-display);\n font-size: var(--text-xl);\n font-weight: 800;\n color: #fff;\n margin-top: var(--space-4);\n margin-bottom: var(--space-3);\n}\n\n[data-theme=\"dark\"] .footer__about-name { color: var(--color-text); }\n\n.footer__about-desc {\n font-size: var(--text-sm);\n line-height: 1.7;\n max-width: 36ch;\n}\n\n.footer__heading {\n font-size: var(--text-sm);\n font-weight: 700;\n color: #fff;\n margin-bottom: var(--space-5);\n}\n\n[data-theme=\"dark\"] .footer__heading { color: var(--color-text); }\n\n.footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }\n\n.footer__links a {\n font-size: var(--text-sm);\n color: oklch(from #fff l c h \/ 0.65);\n text-decoration: none;\n transition: color var(--transition);\n}\n\n[data-theme=\"dark\"] .footer__links a { color: var(--color-text-muted); }\n\n.footer__links a:hover { color: var(--color-gold); }\n\n.footer__contact-item {\n display: flex; align-items: center; gap: var(--space-3);\n font-size: var(--text-sm);\n margin-bottom: var(--space-3);\n}\n\n.footer__contact-item svg { width: 16px; height: 16px; color: var(--color-gold); flex-shrink: 0; }\n\n.footer__bottom {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: var(--space-8);\n font-size: var(--text-xs);\n gap: var(--space-4);\n flex-wrap: wrap;\n}\n\n\/* ===========================\n MOBILE NAV\n=========================== *\/\n.mobile-menu {\n display: none;\n position: fixed;\n inset: 0;\n z-index: 99;\n background: var(--color-bg);\n flex-direction: column;\n padding: var(--space-20) var(--space-8) var(--space-8);\n}\n\n.mobile-menu.open { display: flex; }\n\n.mobile-menu__links {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n flex: 1;\n}\n\n.mobile-menu__links a {\n font-size: var(--text-xl);\n font-weight: 700;\n color: var(--color-text);\n text-decoration: none;\n}\n\n.mobile-menu__links a:hover { color: var(--color-gold); }\n\n\/* ===========================\n ANIMATIONS\n=========================== *\/\n.fade-up {\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.6s ease, transform 0.6s ease;\n}\n\n.fade-up.visible { opacity: 1; transform: translateY(0); }\n\n\/* ===========================\n RESPONSIVE\n=========================== *\/\n@media (max-width: 1024px) {\n .services-grid { grid-template-columns: repeat(2, 1fr); }\n .sectors-grid { grid-template-columns: repeat(2, 1fr); }\n .numbers-grid { grid-template-columns: repeat(2, 1fr); }\n .footer__grid { grid-template-columns: 1fr 1fr; }\n}\n\n@media (max-width: 768px) {\n .nav__links { display: none; }\n .nav__toggle { display: flex; }\n .hero__inner { grid-template-columns: 1fr; }\n .hero__visual { display: none; }\n .hero__stats { gap: var(--space-6); flex-wrap: wrap; }\n .methodology-grid { grid-template-columns: 1fr; }\n .methodology-visual { display: none; }\n .services-grid { grid-template-columns: 1fr; }\n .sectors-grid { grid-template-columns: repeat(2, 1fr); }\n .compliance-grid { grid-template-columns: 1fr; }\n .footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }\n .footer__bottom { flex-direction: column; text-align: center; }\n .cta-actions { flex-direction: column; align-items: center; }\n .numbers-grid { grid-template-columns: repeat(2, 1fr); }\n}\n\n@media (max-width: 480px) {\n .sectors-grid { grid-template-columns: 1fr 1fr; }\n .hero__stats { flex-direction: column; gap: var(--space-4); }\n .nav__actions .btn { display: none; }\n}\n<\/style>\n<\/head>\n\n<body>\n\n\n<a href=\"#main\" class=\"sr-only\">\u0627\u0646\u062a\u0642\u0644 \u0644\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0631\u0626\u064a\u0633\u064a<\/a>\n\n\n<header>\n <nav class=\"nav\" id=\"navbar\" role=\"navigation\" aria-label=\"\u0627\u0644\u062a\u0646\u0642\u0644 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\">\n <div class=\"container\">\n <div class=\"nav__inner\">\n \n <a href=\"#\" class=\"nav__logo\" aria-label=\"BrutoCode \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\">\n <svg class=\"nav__logo-mark\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n <rect width=\"40\" height=\"40\" rx=\"10\" fill=\"#0d2340\"\/>\n <path d=\"M8 10 L8 30 L14 30 L14 22 L18 22 L24 30 L31 30 L24 21 C27 20 29 17.5 29 14.5 C29 11.5 26.5 10 23 10 Z M14 15 L22 15 C24 15 25 15.8 25 17.5 C25 19 24 20 22 20 L14 20 Z\" fill=\"#C49A2B\"\/>\n <path d=\"M8 10 L8 14 L32 14\" stroke=\"#C49A2B\" stroke-width=\"1.2\" stroke-linecap=\"round\" opacity=\"0.35\"\/>\n <\/svg>\n <span class=\"nav__brand\">BrutoCode<\/span>\n <\/a>\n\n \n <ul class=\"nav__links\" role=\"list\">\n <li><a href=\"#services\">\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/a><\/li>\n <li><a href=\"#sectors\">\u0627\u0644\u0642\u0637\u0627\u0639\u0627\u062a<\/a><\/li>\n <li><a href=\"#methodology\">\u0627\u0644\u0645\u0646\u0647\u062c\u064a\u0629<\/a><\/li>\n <li><a href=\"#trust\">\u0627\u0644\u0634\u0631\u0627\u0643\u0627\u062a<\/a><\/li>\n <li><a href=\"#contact\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/a><\/li>\n <\/ul>\n\n \n <div class=\"nav__actions\">\n <button class=\"theme-btn\" data-theme-toggle aria-label=\"\u062a\u0628\u062f\u064a\u0644 \u0627\u0644\u0648\u0636\u0639 \u0627\u0644\u0645\u0638\u0644\u0645\" title=\"\u062a\u0628\u062f\u064a\u0644 \u0627\u0644\u0645\u0638\u0647\u0631\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"5\"\/><path d=\"M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42\"\/><\/svg>\n <\/button>\n <a href=\"#contact\" class=\"btn btn-primary\">\u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643<\/a>\n <button class=\"nav__toggle\" id=\"menuToggle\" aria-label=\"\u0641\u062a\u062d \u0627\u0644\u0642\u0627\u0626\u0645\u0629\" aria-expanded=\"false\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"\/><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"\/><line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n<\/header>\n\n\n<div class=\"mobile-menu\" id=\"mobileMenu\" role=\"dialog\" aria-modal=\"true\" aria-label=\"\u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\">\n <ul class=\"mobile-menu__links\" role=\"list\">\n <li><a href=\"#services\" onclick=\"closeMobileMenu()\">\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/a><\/li>\n <li><a href=\"#sectors\" onclick=\"closeMobileMenu()\">\u0627\u0644\u0642\u0637\u0627\u0639\u0627\u062a<\/a><\/li>\n <li><a href=\"#methodology\" onclick=\"closeMobileMenu()\">\u0627\u0644\u0645\u0646\u0647\u062c\u064a\u0629<\/a><\/li>\n <li><a href=\"#trust\" onclick=\"closeMobileMenu()\">\u0627\u0644\u0634\u0631\u0627\u0643\u0627\u062a<\/a><\/li>\n <li><a href=\"#contact\" onclick=\"closeMobileMenu()\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/a><\/li>\n <\/ul>\n <a href=\"#contact\" class=\"btn btn-primary\" onclick=\"closeMobileMenu()\" style=\"align-self:flex-start; margin-top:auto;\">\u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643<\/a>\n<\/div>\n\n\n<main id=\"main\">\n\n \n <section class=\"hero\" aria-label=\"\u0642\u0633\u0645 \u0627\u0644\u062a\u0631\u062d\u064a\u0628\">\n <div class=\"hero__bg\"><\/div>\n <div class=\"hero__grid-pattern\" aria-hidden=\"true\"><\/div>\n <div class=\"container\">\n <div class=\"hero__inner\">\n \n <div class=\"hero__text\">\n <div class=\"hero__badge\" role=\"note\">\n <span class=\"hero__badge-dot\" aria-hidden=\"true\"><\/span>\n \u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629 \u00b7 2026\n <\/div>\n <h1 class=\"hero__title\">\n \u0634\u0631\u064a\u0643\u0643 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a<br>\n \u0641\u064a <em>\u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a<\/em>\n <\/h1>\n <p class=\"hero__sub\">\n \u0646\u0635\u0645\u0651\u0645 \u0645\u0646\u0638\u0648\u0645\u0627\u062a \u0631\u0642\u0645\u064a\u0629 \u0647\u0646\u062f\u0633\u064a\u0629 \u062a\u062f\u0645\u062c \u0628\u064a\u0646 \u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631 \u0627\u0644\u062a\u0642\u0646\u064a \u0648\u0627\u0644\u0641\u0647\u0645 \u0627\u0644\u0639\u0645\u064a\u0642 \u0644\u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0627\u062a \u0627\u0644\u0623\u0639\u0645\u0627\u0644\u060c\n \u0644\u0646\u0642\u0644 \u0645\u0624\u0633\u0633\u062a\u0643 \u0646\u062d\u0648 \u0627\u0644\u0633\u064a\u0627\u062f\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0627\u0644\u0643\u0627\u0645\u0644\u0629.\n <\/p>\n <div class=\"hero__actions\">\n <a href=\"#contact\" class=\"btn btn-gold\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n \u0627\u0628\u062f\u0623 \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0622\u0646\n <\/a>\n <a href=\"#services\" class=\"btn btn-outline\">\u0627\u0643\u062a\u0634\u0641 \u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/a>\n <\/div>\n\n <div class=\"hero__stats\" aria-label=\"\u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a BrutoCode\">\n <div class=\"hero__stat\">\n <div class=\"hero__stat-num\">+250<\/div>\n <div class=\"hero__stat-label\">\u0645\u0634\u0631\u0648\u0639 \u0645\u064f\u0646\u062c\u0632<\/div>\n <\/div>\n <div class=\"hero__stat\">\n <div class=\"hero__stat-num\">+20<\/div>\n <div class=\"hero__stat-label\">\u0633\u0646\u0629 \u062e\u0628\u0631\u0629 \u062a\u0631\u0627\u0643\u0645\u064a\u0629<\/div>\n <\/div>\n <div class=\"hero__stat\">\n <div class=\"hero__stat-num\">99%<\/div>\n <div class=\"hero__stat-label\">\u0645\u0639\u062f\u0644 \u062a\u0648\u0627\u0641\u0631 \u0627\u0644\u0623\u0646\u0638\u0645\u0629<\/div>\n <\/div>\n <div class=\"hero__stat\">\n <div class=\"hero__stat-num\">7<\/div>\n <div class=\"hero__stat-label\">\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0645\u0639\u062a\u0645\u062f\u0629 \u0631\u0633\u0645\u064a\u0627\u064b<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"hero__visual\" aria-hidden=\"true\">\n <div class=\"hero__card-stack\">\n <div class=\"hero__card-behind-2\"><\/div>\n <div class=\"hero__card-behind\"><\/div>\n <div class=\"hero__card\">\n <div class=\"hero__card-header\">\n <div class=\"hero__card-icon\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 17v4\"\/><\/svg>\n <\/div>\n <div>\n <div class=\"hero__card-title\">\u0644\u0648\u062d\u0629 \u062a\u062d\u0643\u0645 \u0627\u0644\u0645\u0624\u0633\u0633\u0629<\/div>\n <div class=\"hero__card-sub\">BrutoCode Enterprise Dashboard<\/div>\n <\/div>\n <\/div>\n <div class=\"metric-row\">\n <div class=\"metric-box\">\n <div class=\"metric-box__num\">50K+<\/div>\n <div class=\"metric-box__label\">\u0645\u0633\u062a\u062e\u062f\u0645 \u0646\u0634\u0637 \u064a\u0648\u0645\u064a\u0627\u064b<\/div>\n <\/div>\n <div class=\"metric-box\">\n <div class=\"metric-box__num\">3.5K+<\/div>\n <div class=\"metric-box__label\">\u062c\u0644\u0633\u0629 \u062a\u062f\u0631\u064a\u0628\u064a\u0629<\/div>\n <\/div>\n <\/div>\n <div class=\"progress-row\">\n <div class=\"progress-item\">\n <div class=\"progress-item__head\"><span>\u0623\u0645\u0646 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a<\/span><span>98%<\/span><\/div>\n <div class=\"progress-bar\"><div class=\"progress-fill\" style=\"width:98%\"><\/div><\/div>\n <\/div>\n <div class=\"progress-item\">\n <div class=\"progress-item__head\"><span>\u0627\u0644\u0623\u062a\u0645\u062a\u0629 \u0627\u0644\u0630\u0643\u064a\u0629<\/span><span>85%<\/span><\/div>\n <div class=\"progress-bar\"><div class=\"progress-fill\" style=\"width:85%\"><\/div><\/div>\n <\/div>\n <div class=\"progress-item\">\n <div class=\"progress-item__head\"><span>\u0631\u0636\u0627 \u0627\u0644\u0639\u0645\u0644\u0627\u0621<\/span><span>96%<\/span><\/div>\n <div class=\"progress-bar\"><div class=\"progress-fill\" style=\"width:96%\"><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"numbers-bg\" aria-labelledby=\"numbers-heading\">\n <h2 id=\"numbers-heading\" class=\"sr-only\">\u0627\u0644\u0623\u062b\u0631 \u0628\u0644\u063a\u0629 \u0627\u0644\u0623\u0631\u0642\u0627\u0645<\/h2>\n <div class=\"numbers-grid\">\n <div class=\"number-item fade-up\">\n <div class=\"number-item__num\">+450<\/div>\n <div class=\"number-item__label\">\u0634\u0628\u0643\u0629 \u0645\u0633\u062a\u0634\u0627\u0631\u064a\u0646 \u0648\u0645\u062a\u062e\u0635\u0635\u064a\u0646<\/div>\n <\/div>\n <div class=\"number-item fade-up\" style=\"transition-delay:0.1s\">\n <div class=\"number-item__num\">+2,500<\/div>\n <div class=\"number-item__label\">\u0632\u064a\u0627\u0631\u0629 \u0634\u0647\u0631\u064a\u0629 \u0639\u0628\u0631 \u0627\u0644\u0645\u0646\u0635\u0627\u062a<\/div>\n <\/div>\n <div class=\"number-item fade-up\" style=\"transition-delay:0.2s\">\n <div class=\"number-item__num\">40%<\/div>\n <div class=\"number-item__label\">\u062a\u062e\u0641\u064a\u0636 \u062a\u0643\u0627\u0644\u064a\u0641 \u0627\u0644\u062a\u0634\u063a\u064a\u0644<\/div>\n <\/div>\n <div class=\"number-item fade-up\" style=\"transition-delay:0.3s\">\n <div class=\"number-item__num\">7\u00d724<\/div>\n <div class=\"number-item__label\">\u0645\u0631\u0627\u0642\u0628\u0629 \u0648\u062f\u0639\u0645 \u0645\u0633\u062a\u0645\u0631<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\" id=\"services\" aria-labelledby=\"services-heading\">\n <div class=\"container\">\n <div class=\"section-header fade-up\">\n <div class=\"section-label\">\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/div>\n <h2 id=\"services-heading\" class=\"section-title\">\u0645\u0646\u0638\u0648\u0645\u0629 \u062d\u0644\u0648\u0644 \u0645\u0624\u0633\u0633\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629<\/h2>\n <p class=\"section-desc\">\n \u0645\u0646 \u062a\u062e\u0637\u064a\u0637 \u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0645\u0624\u0633\u0633\u0629 \u0625\u0644\u0649 \u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0648\u0627\u0644\u0623\u0645\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a \u2014\n \u0646\u0642\u062f\u0651\u0645 \u062d\u0632\u0645\u0629 \u0634\u0627\u0645\u0644\u0629 \u0645\u0646 \u0627\u0644\u062d\u0644\u0648\u0644 \u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u0645\u0635\u0645\u0645\u0629 \u062e\u0635\u064a\u0635\u0627\u064b \u0644\u0628\u064a\u0626\u0629 \u0627\u0644\u0623\u0639\u0645\u0627\u0644 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629.\n <\/p>\n <\/div>\n <div class=\"services-grid\">\n \n <div class=\"service-card fade-up\">\n <div class=\"service-card__icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 17v4\"\/><path d=\"M7 8h4M7 11h3\"\/><\/svg>\n <\/div>\n <h3 class=\"service-card__title\">\u0623\u0646\u0638\u0645\u0629 ERP \u0627\u0644\u0645\u0624\u0633\u0633\u064a\u0629<\/h3>\n <p class=\"service-card__desc\">\n \u062a\u062e\u0637\u064a\u0637 \u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0645\u0624\u0633\u0633\u0629 \u0627\u0644\u0634\u0627\u0645\u0644 \u2014 \u0627\u0644\u0645\u062d\u0627\u0633\u0628\u0629\u060c \u0627\u0644\u0645\u062e\u0632\u0648\u0646\u060c \u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0628\u0634\u0631\u064a\u0629\u060c \u0648\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0639\u0642\u0648\u062f \u0648\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639.\n <\/p>\n <div class=\"service-card__tags\">\n <span class=\"tag\">\u0627\u0644\u0645\u0627\u0644\u064a\u0629 \u0648\u0627\u0644\u0645\u062d\u0627\u0633\u0628\u0629<\/span>\n <span class=\"tag\">\u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0628\u0634\u0631\u064a\u0629<\/span>\n <span class=\"tag\">\u0627\u0644\u0645\u0634\u062a\u0631\u064a\u0627\u062a<\/span>\n <\/div>\n <\/div>\n \n <div class=\"service-card fade-up\" style=\"transition-delay:0.1s\">\n <div class=\"service-card__icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\n <\/div>\n <h3 class=\"service-card__title\">\u0625\u062f\u0627\u0631\u0629 \u0639\u0644\u0627\u0642\u0627\u062a \u0627\u0644\u0639\u0645\u0644\u0627\u0621 CRM<\/h3>\n <p class=\"service-card__desc\">\n \u0625\u062f\u0627\u0631\u0629 360\u00b0 \u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0639\u0645\u0644\u0627\u0621\u060c \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a\u060c \u0623\u062a\u0645\u062a\u0629 \u0627\u0644\u062a\u0633\u0648\u064a\u0642\u060c \u0648\u062a\u062d\u0644\u064a\u0644\u0627\u062a \u062a\u0646\u0628\u0624\u064a\u0629 \u0645\u062a\u0642\u062f\u0645\u0629.\n <\/p>\n <div class=\"service-card__tags\">\n <span class=\"tag\">\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u0621<\/span>\n <span class=\"tag\">\u0623\u062a\u0645\u062a\u0629 \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a<\/span>\n <span class=\"tag\">\u0645\u0631\u0627\u0643\u0632 \u0627\u0644\u0627\u062a\u0635\u0627\u0644<\/span>\n <\/div>\n <\/div>\n \n <div class=\"service-card fade-up\" style=\"transition-delay:0.2s\">\n <div class=\"service-card__icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z\"\/><\/svg>\n <\/div>\n <h3 class=\"service-card__title\">\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0648\u0627\u0644\u0623\u062a\u0645\u062a\u0629<\/h3>\n <p class=\"service-card__desc\">\n \u0631\u0648\u0628\u0648\u062a\u0627\u062a \u0627\u0644\u0645\u062d\u0627\u062f\u062b\u0629 \u0639\u0628\u0631 WhatsApp Business API\u060c \u0645\u0639\u0627\u0644\u062c\u0629 \u0627\u0644\u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0628\u0627\u0644\u0640 AI\u060c \u0648\u0623\u062a\u0645\u062a\u0629 \u0633\u064a\u0631 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0645\u0624\u0633\u0633\u064a.\n <\/p>\n <div class=\"service-card__tags\">\n <span class=\"tag\">WhatsApp API<\/span>\n <span class=\"tag\">Document AI<\/span>\n <span class=\"tag\">Workflow Automation<\/span>\n <\/div>\n <\/div>\n \n <div class=\"service-card fade-up\" style=\"transition-delay:0.05s\">\n <div class=\"service-card__icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z\"\/><\/svg>\n <\/div>\n <h3 class=\"service-card__title\">\u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u0633\u062d\u0627\u0628\u064a\u0629 \u0627\u0644\u0645\u0624\u0633\u0633\u064a\u0629<\/h3>\n <p class=\"service-card__desc\">\n \u062d\u0644\u0648\u0644 AWS \u0648Azure \u0648GCP\u060c \u062a\u062e\u0632\u064a\u0646 \u0645\u062d\u0644\u064a \u0641\u064a \u0645\u0631\u0627\u0643\u0632 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629\u060c \u0648\u0627\u0633\u062a\u0631\u062f\u0627\u062f \u0627\u0644\u0643\u0648\u0627\u0631\u062b \u0645\u0639 \u0636\u0645\u0627\u0646 \u0627\u0644\u062a\u0648\u0627\u0641\u0631 99.95%.\n <\/p>\n <div class=\"service-card__tags\">\n <span class=\"tag\">AWS<\/span>\n <span class=\"tag\">Azure<\/span>\n <span class=\"tag\">Hybrid Cloud<\/span>\n <\/div>\n <\/div>\n \n <div class=\"service-card fade-up\" style=\"transition-delay:0.15s\">\n <div class=\"service-card__icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\n <\/div>\n <h3 class=\"service-card__title\">\u0627\u0644\u0623\u0645\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a \u0648\u0627\u0644\u0627\u0645\u062a\u062b\u0627\u0644<\/h3>\n <p class=\"service-card__desc\">\n \u0627\u0644\u062a\u0648\u0627\u0641\u0642 \u0645\u0639 CITC \u0648NCA \u0648PDPL \u0648 ISO 27001\u060c \u062a\u0634\u0641\u064a\u0631 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a\u060c \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u062d\u0645\u0627\u064a\u0629\u060c \u0648\u0623\u0646\u0638\u0645\u0629 SIEM.\n <\/p>\n <div class=\"service-card__tags\">\n <span class=\"tag\">NCA<\/span>\n <span class=\"tag\">PDPL<\/span>\n <span class=\"tag\">ISO 27001<\/span>\n <\/div>\n <\/div>\n \n <div class=\"service-card fade-up\" style=\"transition-delay:0.25s\">\n <div class=\"service-card__icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/><path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"\/><\/svg>\n <\/div>\n <h3 class=\"service-card__title\">\u0627\u0644\u062a\u062c\u0627\u0631\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0648\u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629<\/h3>\n <p class=\"service-card__desc\">\n \u0645\u062a\u0627\u062c\u0631 B2B \u0648B2C \u0645\u062a\u0639\u062f\u062f\u0629 \u0627\u0644\u0642\u0646\u0648\u0627\u062a\u060c \u062a\u0643\u0627\u0645\u0644 \u0645\u0639 \u0645\u062f\u0649 \u0648\u0623\u0628\u0644 \u0628\u0627\u064a \u0648STC Pay\u060c \u0648\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0645\u0624\u0633\u0633\u064a\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629.\n <\/p>\n <div class=\"service-card__tags\">\n <span class=\"tag\">Omnichannel<\/span>\n <span class=\"tag\">\u0645\u062f\u0649 \u00b7 \u0623\u0628\u0644 \u0628\u0627\u064a<\/span>\n <span class=\"tag\">UI\/UX<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section sectors-bg\" id=\"sectors\" aria-labelledby=\"sectors-heading\">\n <div class=\"container\">\n <div class=\"section-header fade-up\">\n <div class=\"section-label\">\u0627\u0644\u0642\u0637\u0627\u0639\u0627\u062a<\/div>\n <h2 id=\"sectors-heading\" class=\"section-title\">\u062e\u0628\u0631\u0629 \u0645\u0648\u062b\u0651\u0642\u0629 \u0641\u064a \u0642\u0637\u0627\u0639\u0627\u062a \u0645\u062a\u0639\u062f\u062f\u0629<\/h2>\n <p class=\"section-desc\">\n \u0646\u0645\u062a\u0644\u0643 \u062d\u0636\u0648\u0631\u0627\u064b \u0641\u0639\u0644\u064a\u0627\u064b \u0648\u062a\u062c\u0627\u0631\u0628 \u0646\u0627\u062c\u062d\u0629 \u0641\u064a \u0633\u062a\u0629 \u0642\u0637\u0627\u0639\u0627\u062a \u0631\u0626\u064a\u0633\u064a\u0629 \u062a\u0645\u062b\u0651\u0644\n \u0631\u0643\u0627\u0626\u0632 \u0631\u0624\u064a\u0629 \u0627\u0644\u0645\u0645\u0644\u0643\u0629 2030.\n <\/p>\n <\/div>\n <div class=\"sectors-grid\">\n <div class=\"sector-card fade-up\">\n <span class=\"sector-card__icon\" aria-hidden=\"true\">\ud83c\udfe5<\/span>\n <div class=\"sector-card__name\">\u0627\u0644\u0631\u0639\u0627\u064a\u0629 \u0627\u0644\u0635\u062d\u064a\u0629<\/div>\n <div class=\"sector-card__sub\">EMR \u00b7 HIS \u00b7 \u0627\u0644\u062a\u0637\u0628 \u0639\u0646 \u0628\u064f\u0639\u062f<\/div>\n <\/div>\n <div class=\"sector-card fade-up\" style=\"transition-delay:0.1s\">\n <span class=\"sector-card__icon\" aria-hidden=\"true\">\ud83d\udecd\ufe0f<\/span>\n <div class=\"sector-card__name\">\u0627\u0644\u062a\u062c\u0632\u0626\u0629 \u0648\u0627\u0644\u062a\u062c\u0627\u0631\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/div>\n <div class=\"sector-card__sub\">Omnichannel \u00b7 \u0625\u062f\u0627\u0631\u0629 \u0645\u062e\u0632\u0648\u0646<\/div>\n <\/div>\n <div class=\"sector-card fade-up\" style=\"transition-delay:0.15s\">\n <span class=\"sector-card__icon\" aria-hidden=\"true\">\ud83c\udfdb\ufe0f<\/span>\n <div class=\"sector-card__name\">\u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u062d\u0643\u0648\u0645\u064a\u0629<\/div>\n <div class=\"sector-card__sub\">\u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a \u00b7 \u0627\u0644\u0627\u0645\u062a\u062b\u0627\u0644<\/div>\n <\/div>\n <div class=\"sector-card fade-up\" style=\"transition-delay:0.2s\">\n <span class=\"sector-card__icon\" aria-hidden=\"true\">\ud83c\udfe2<\/span>\n <div class=\"sector-card__name\">\u0627\u0644\u0639\u0642\u0627\u0631\u0627\u062a \u0648\u0627\u0644\u0640 PropTech<\/div>\n <div class=\"sector-card__sub\">\u0645\u0646\u0635\u0627\u062a \u0628\u064a\u0639 \u00b7 \u0625\u062f\u0627\u0631\u0629 \u0623\u0635\u0648\u0644<\/div>\n <\/div>\n <div class=\"sector-card fade-up\" style=\"transition-delay:0.25s\">\n <span class=\"sector-card__icon\" aria-hidden=\"true\">\ud83c\udf93<\/span>\n <div class=\"sector-card__name\">\u0627\u0644\u062a\u0639\u0644\u064a\u0645 \u0648\u0627\u0644\u062a\u062f\u0631\u064a\u0628<\/div>\n <div class=\"sector-card__sub\">LMS \u00b7 \u0634\u0647\u0627\u062f\u0627\u062a \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629<\/div>\n <\/div>\n <div class=\"sector-card fade-up\" style=\"transition-delay:0.3s\">\n <span class=\"sector-card__icon\" aria-hidden=\"true\">\ud83d\udcb0<\/span>\n <div class=\"sector-card__name\">\u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0645\u0627\u0644\u064a\u0629<\/div>\n <div class=\"sector-card__sub\">\u0641\u0646\u062a\u0643 \u00b7 \u0628\u0648\u0627\u0628\u0627\u062a \u062f\u0641\u0639 \u0633\u0639\u0648\u062f\u064a\u0629<\/div>\n <\/div>\n <div class=\"sector-card fade-up\" style=\"transition-delay:0.35s\">\n <span class=\"sector-card__icon\" aria-hidden=\"true\">\ud83c\udfe8<\/span>\n <div class=\"sector-card__name\">\u0627\u0644\u0636\u064a\u0627\u0641\u0629 \u0648\u0627\u0644\u0633\u064a\u0627\u062d\u0629<\/div>\n <div class=\"sector-card__sub\">\u062d\u062c\u0648\u0632\u0627\u062a \u00b7 \u0625\u062f\u0627\u0631\u0629 \u0641\u0646\u062f\u0642\u064a\u0629<\/div>\n <\/div>\n <div class=\"sector-card fade-up\" style=\"transition-delay:0.4s\">\n <span class=\"sector-card__icon\" aria-hidden=\"true\">\ud83c\udfed<\/span>\n <div class=\"sector-card__name\">\u0627\u0644\u0642\u0637\u0627\u0639 \u0627\u0644\u062e\u0627\u0635 \u0648\u0627\u0644\u062a\u0635\u0646\u064a\u0639<\/div>\n <div class=\"sector-card__sub\">ERP \u00b7 \u0633\u0644\u0633\u0644\u0629 \u062a\u0648\u0631\u064a\u062f<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\" id=\"methodology\" aria-labelledby=\"methodology-heading\">\n <div class=\"container\">\n <div class=\"methodology-grid\">\n <div>\n <div class=\"section-label\" style=\"justify-content:flex-start\">\u0627\u0644\u0645\u0646\u0647\u062c\u064a\u0629<\/div>\n <h2 id=\"methodology-heading\" class=\"section-title\" style=\"text-align:right; margin-inline:0\">\n \u0645\u0646\u0647\u062c\u064a\u0629 \u0647\u0646\u062f\u0633\u064a\u0629 \u0641\u064a \u0627\u0644\u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0645\u0624\u0633\u0633\u064a\n <\/h2>\n <p class=\"section-desc\" style=\"margin-inline:0; margin-bottom:var(--space-10)\">\n \u0644\u0627 \u0646\u0642\u062f\u0651\u0645 \u0628\u0631\u0645\u062c\u064a\u0627\u062a \u062c\u0627\u0647\u0632\u0629 \u2014 \u0646\u0628\u0646\u064a \u0634\u0631\u0627\u0643\u0627\u062a \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0639\u0628\u0631 \u0645\u0646\u0647\u062c\u064a\u0629 \u0647\u0646\u062f\u0633\u064a\u0629 \u0645\u062b\u0628\u062a\u0629 \u0641\u064a \u0623\u0631\u0628\u0639 \u0645\u0631\u0627\u062d\u0644.\n <\/p>\n <div class=\"methodology-steps\">\n <div class=\"step fade-up\">\n <div class=\"step__num\">\u0661<\/div>\n <div>\n <div class=\"step__title\">\u0627\u0644\u062a\u0634\u062e\u064a\u0635 \u0648\u0627\u0644\u0627\u0633\u062a\u0634\u0627\u0631\u0627\u062a<\/div>\n <div class=\"step__desc\">\u062a\u062d\u0644\u064a\u0644 \u0634\u0627\u0645\u0644 \u0644\u0644\u0639\u0645\u0644\u064a\u0627\u062a \u0627\u0644\u062d\u0627\u0644\u064a\u0629\u060c \u062f\u0631\u0627\u0633\u0629 \u0627\u0644\u062c\u062f\u0648\u0649\u060c \u0648\u0631\u0633\u0645 \u062e\u0627\u0631\u0637\u0629 \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a \u0627\u0644\u0645\u062a\u0648\u0627\u0641\u0642\u0629 \u0645\u0639 \u0627\u0644\u0623\u0647\u062f\u0627\u0641 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629.<\/div>\n <\/div>\n <\/div>\n <div class=\"step fade-up\" style=\"transition-delay:0.1s\">\n <div class=\"step__num\">\u0662<\/div>\n <div>\n <div class=\"step__title\">\u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u0644\u0647\u0646\u062f\u0633\u0629 \u0627\u0644\u0645\u0639\u0645\u0627\u0631\u064a\u0629<\/div>\n <div class=\"step__desc\">\u0628\u0646\u0627\u0621 \u0645\u0639\u0645\u0627\u0631\u064a\u0629 \u062a\u0642\u0646\u064a\u0629 \u0645\u0624\u0633\u0633\u064a\u0629 \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u062a\u0648\u0633\u0639\u060c \u062a\u0635\u0645\u064a\u0645 \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u060c \u0648\u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0648\u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0623\u0646\u0633\u0628.<\/div>\n <\/div>\n <\/div>\n <div class=\"step fade-up\" style=\"transition-delay:0.2s\">\n <div class=\"step__num\">\u0663<\/div>\n <div>\n <div class=\"step__title\">\u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0648\u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631<\/div>\n <div class=\"step__desc\">\u062a\u0637\u0648\u064a\u0631 \u062a\u062f\u0631\u064a\u062c\u064a \u0628\u0645\u0646\u0647\u062c\u064a\u0629 Agile\u060c \u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u0634\u0627\u0645\u0644\u0629 (\u0648\u0638\u064a\u0641\u064a\u0629\u060c \u0623\u0645\u0646\u064a\u0629\u060c \u0623\u062f\u0627\u0621)\u060c \u0648\u0645\u0631\u0627\u062c\u0639\u0629 \u0643\u0648\u062f \u0648\u0641\u0642 \u0645\u0639\u0627\u064a\u064a\u0631 \u0627\u0644\u062c\u0648\u062f\u0629 \u0627\u0644\u062f\u0648\u0644\u064a\u0629.<\/div>\n <\/div>\n <\/div>\n <div class=\"step fade-up\" style=\"transition-delay:0.3s\">\n <div class=\"step__num\">\u0664<\/div>\n <div>\n <div class=\"step__title\">\u0627\u0644\u0646\u0634\u0631 \u0648\u0627\u0644\u062f\u0639\u0645 \u0627\u0644\u0645\u0633\u062a\u0645\u0631<\/div>\n <div class=\"step__desc\">\u0625\u0637\u0644\u0627\u0642 \u0645\u0646\u0638\u0651\u0645 \u0645\u0639 \u062e\u0637\u0637 \u0637\u0648\u0627\u0631\u0626\u060c \u062a\u062f\u0631\u064a\u0628 \u0627\u0644\u0641\u0631\u0642\u060c \u0648\u0645\u0631\u0627\u0642\u0628\u0629 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629 7\u00d724 \u0645\u0639 \u0627\u062a\u0641\u0627\u0642\u064a\u0627\u062a SLA \u0645\u0641\u0635\u0651\u0644\u0629.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"methodology-visual\" aria-hidden=\"true\">\n <div class=\"methodology-visual__title\">\u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0648\u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0645\u0639\u062a\u0645\u062f\u0629<\/div>\n <div class=\"tech-grid\">\n <div class=\"tech-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z\"\/><\/svg>\n AWS\n <\/div>\n <div class=\"tech-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 17v4\"\/><\/svg>\n Azure\n <\/div>\n <div class=\"tech-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/svg>\n GCP\n <\/div>\n <div class=\"tech-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z\"\/><\/svg>\n AI & ML\n <\/div>\n <div class=\"tech-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\n NCA\/PDPL\n <\/div>\n <div class=\"tech-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/><\/svg>\n SLA 99.9%\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section trust-bg\" id=\"trust\" aria-labelledby=\"trust-heading\">\n <div class=\"container\">\n <div class=\"section-header fade-up\">\n <div class=\"section-label\">\u0634\u0631\u0627\u0643\u0627\u062a\u0646\u0627<\/div>\n <h2 id=\"trust-heading\" class=\"section-title\">\u0634\u0631\u0627\u0643\u0627\u062a \u062a\u0642\u0646\u064a\u0629 \u0639\u0627\u0644\u0645\u064a\u0629<\/h2>\n <p class=\"section-desc\">\n \u0634\u0631\u0627\u0643\u0627\u062a \u0645\u0628\u0627\u0634\u0631\u0629 \u0645\u0639 \u0643\u0628\u0627\u0631 \u0645\u0632\u0648\u0651\u062f\u064a \u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u064a\u0646\u060c \u0644\u0636\u0645\u0627\u0646 \u0628\u0646\u064a\u0629 \u062a\u062d\u062a\u064a\u0629 \u0645\u0646 \u0627\u0644\u0637\u0631\u0627\u0632 \u0627\u0644\u0639\u0627\u0644\u0645\u064a.\n <\/p>\n <\/div>\n <div class=\"partners-strip\">\n <div class=\"partner-badge fade-up\">\n <div class=\"partner-dot\" aria-hidden=\"true\"><\/div>\n <div>\n <div class=\"partner-badge__name\">Amazon Web Services<\/div>\n <div class=\"partner-badge__type\">\u0634\u0631\u064a\u0643 \u0645\u0639\u062a\u0645\u062f \u2014 \u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u0633\u062d\u0627\u0628\u064a\u0629<\/div>\n <\/div>\n <\/div>\n <div class=\"partner-badge fade-up\" style=\"transition-delay:0.1s\">\n <div class=\"partner-dot\" aria-hidden=\"true\"><\/div>\n <div>\n <div class=\"partner-badge__name\">Microsoft Azure<\/div>\n <div class=\"partner-badge__type\">\u062d\u0644\u0648\u0644 \u0627\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0648\u0627\u0644\u062a\u0643\u0627\u0645\u0644<\/div>\n <\/div>\n <\/div>\n <div class=\"partner-badge fade-up\" style=\"transition-delay:0.2s\">\n <div class=\"partner-dot\" aria-hidden=\"true\"><\/div>\n <div>\n <div class=\"partner-badge__name\">Google Cloud Platform<\/div>\n <div class=\"partner-badge__type\">\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0648\u0627\u0644\u062a\u062d\u0644\u064a\u0644\u0627\u062a<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"compliance-grid\" style=\"margin-top:var(--space-16)\">\n <div class=\"compliance-item fade-up\">\n <span class=\"compliance-item__icon\" aria-hidden=\"true\">\ud83d\udd12<\/span>\n <div class=\"compliance-item__name\">\u0647\u064a\u0626\u0629 \u0627\u0644\u0627\u062a\u0635\u0627\u0644\u0627\u062a CITC<\/div>\n <div class=\"compliance-item__desc\">7 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0645\u0639\u062a\u0645\u062f\u0629 \u0631\u0633\u0645\u064a\u0627\u064b \u0645\u0646 \u0647\u064a\u0626\u0629 \u0627\u0644\u0627\u062a\u0635\u0627\u0644\u0627\u062a \u0648\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a<\/div>\n <\/div>\n <div class=\"compliance-item fade-up\" style=\"transition-delay:0.1s\">\n <span class=\"compliance-item__icon\" aria-hidden=\"true\">\ud83d\udee1\ufe0f<\/span>\n <div class=\"compliance-item__name\">\u0627\u0644\u0623\u0645\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a NCA<\/div>\n <div class=\"compliance-item__desc\">\u062a\u0648\u0627\u0641\u0642 \u0643\u0627\u0645\u0644 \u0645\u0639 \u0636\u0648\u0627\u0628\u0637 \u0627\u0644\u0647\u064a\u0626\u0629 \u0627\u0644\u0648\u0637\u0646\u064a\u0629 \u0644\u0644\u0623\u0645\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a<\/div>\n <\/div>\n <div class=\"compliance-item fade-up\" style=\"transition-delay:0.2s\">\n <span class=\"compliance-item__icon\" aria-hidden=\"true\">\ud83d\udccb<\/span>\n <div class=\"compliance-item__name\">\u062d\u0645\u0627\u064a\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a PDPL<\/div>\n <div class=\"compliance-item__desc\">\u0627\u0644\u0627\u0639\u062a\u0645\u0627\u062f \u0627\u0644\u0631\u0633\u0645\u064a \u0639\u0644\u0649 \u0646\u0638\u0627\u0645 \u062d\u0645\u0627\u064a\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0634\u062e\u0635\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"cta-section\" aria-labelledby=\"cta-heading\">\n <div class=\"container\">\n <div class=\"cta-inner fade-up\">\n <div class=\"section-label\" style=\"justify-content:center; color:oklch(from #fff l c h \/ 0.6)\">\u0627\u0628\u062f\u0623 \u0631\u062d\u0644\u062a\u0643<\/div>\n <h2 id=\"cta-heading\" class=\"section-title\">\n \u062d\u0648\u0651\u0644 \u0627\u062d\u062a\u064a\u0627\u062c\u0643 \u0625\u0644\u0649 \u0645\u0646\u062a\u062c \u0631\u0642\u0645\u064a<br>\u064a\u0639\u0645\u0644 \u0628\u0633\u0631\u0639\u0629\u060c \u062c\u0648\u062f\u0629\u060c \u0648\u062a\u0643\u0627\u0645\u0644\n <\/h2>\n <p class=\"section-desc\">\n \u0641\u0631\u064a\u0642 \u0645\u0624\u0633\u0633 \u0628\u062e\u0628\u0631\u0629 \u062a\u0631\u0627\u0643\u0645\u064a\u0629 \u062a\u0632\u064a\u062f \u0639\u0646 20 \u0639\u0627\u0645\u0627\u064b \u0641\u064a \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u0643\u0628\u0631\u0649 \u2014\n \u0645\u0633\u062a\u0639\u062f \u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643 \u0648\u062a\u0642\u062f\u064a\u0645 \u062d\u0644 \u0647\u0646\u062f\u0633\u064a \u0645\u062a\u0643\u0627\u0645\u0644.\n <\/p>\n <div class=\"cta-actions\">\n <a href=\"#contact\" class=\"btn btn-gold\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n \u0627\u062d\u062c\u0632 \u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0645\u062c\u0627\u0646\u064a\u0629\n <\/a>\n <a href=\"mailto:info@brutocode.sa\" class=\"btn btn-ghost\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0628\u0627\u0634\u0631\u0629<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\" id=\"contact\" aria-labelledby=\"contact-heading\">\n <div class=\"container container--narrow\">\n <div class=\"section-header fade-up\">\n <div class=\"section-label\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/div>\n <h2 id=\"contact-heading\" class=\"section-title\">\u062f\u0639\u0646\u0627 \u0646\u0628\u0646\u064a \u0645\u0633\u062a\u0642\u0628\u0644\u0643 \u0627\u0644\u0631\u0642\u0645\u064a<\/h2>\n <p class=\"section-desc\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639 \u0641\u0631\u064a\u0642\u0646\u0627 \u0627\u0644\u064a\u0648\u0645 \u0644\u0645\u0646\u0627\u0642\u0634\u0629 \u0645\u0634\u0631\u0648\u0639\u0643 \u0648\u0628\u062f\u0621 \u0631\u062d\u0644\u0629 \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a.<\/p>\n <\/div>\n\n <div style=\"display:grid; grid-template-columns:1fr 1fr; gap:var(--space-10); align-items:start;\" class=\"fade-up\">\n \n <div>\n <div style=\"background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-8); box-shadow:var(--shadow-sm);\">\n <h3 style=\"font-size:var(--text-lg); font-weight:700; margin-bottom:var(--space-6);\">\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u062a\u0648\u0627\u0635\u0644<\/h3>\n <div style=\"display:flex; flex-direction:column; gap:var(--space-5);\">\n <div style=\"display:flex; align-items:center; gap:var(--space-4);\">\n <div style=\"width:40px;height:40px; background:var(--color-gold-highlight); border-radius:var(--radius-lg); display:flex;align-items:center;justify-content:center; flex-shrink:0; color:var(--color-gold);\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13 19.79 19.79 0 0 1 1.61 4.39 2 2 0 0 1 3.59 2.18h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.09 6.09l.9-.9a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>\n <\/div>\n <div>\n <div style=\"font-size:var(--text-xs); color:var(--color-text-muted); margin-bottom:2px;\">\u0627\u0644\u0647\u0627\u062a\u0641<\/div>\n <a href=\"tel:+966570545777\" style=\"font-weight:700; color:var(--color-text); text-decoration:none; font-size:var(--text-base); direction:ltr; display:inline-block;\">+966 57 054 5777<\/a>\n <\/div>\n <\/div>\n <div style=\"display:flex; align-items:center; gap:var(--space-4);\">\n <div style=\"width:40px;height:40px; background:var(--color-gold-highlight); border-radius:var(--radius-lg); display:flex;align-items:center;justify-content:center; flex-shrink:0; color:var(--color-gold);\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>\n <\/div>\n <div>\n <div style=\"font-size:var(--text-xs); color:var(--color-text-muted); margin-bottom:2px;\">\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/div>\n <a href=\"mailto:info@brutocode.sa\" style=\"font-weight:700; color:var(--color-text); text-decoration:none; font-size:var(--text-base);\">info@brutocode.sa<\/a>\n <\/div>\n <\/div>\n <div style=\"display:flex; align-items:center; gap:var(--space-4);\">\n <div style=\"width:40px;height:40px; background:var(--color-gold-highlight); border-radius:var(--radius-lg); display:flex;align-items:center;justify-content:center; flex-shrink:0; color:var(--color-gold);\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/svg>\n <\/div>\n <div>\n <div style=\"font-size:var(--text-xs); color:var(--color-text-muted); margin-bottom:2px;\">\u0627\u0644\u0645\u0648\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/div>\n <a href=\"https:\/\/www.brutocode.sa\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"font-weight:700; color:var(--color-text); text-decoration:none; font-size:var(--text-base);\">www.brutocode.sa<\/a>\n <\/div>\n <\/div>\n <div style=\"display:flex; align-items:center; gap:var(--space-4);\">\n <div style=\"width:40px;height:40px; background:var(--color-gold-highlight); border-radius:var(--radius-lg); display:flex;align-items:center;justify-content:center; flex-shrink:0; color:var(--color-gold);\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\n <\/div>\n <div>\n <div style=\"font-size:var(--text-xs); color:var(--color-text-muted); margin-bottom:2px;\">\u0627\u0644\u0645\u0642\u0631 \u0627\u0644\u0631\u0626\u064a\u0633\u064a<\/div>\n <div style=\"font-weight:700; font-size:var(--text-base);\">\u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629<\/div>\n <\/div>\n <\/div>\n <div style=\"padding-top:var(--space-4); border-top:1px solid var(--color-divider);\">\n <div style=\"font-size:var(--text-xs); color:var(--color-text-muted); margin-bottom:var(--space-3);\">\u062a\u0627\u0628\u0639\u0648\u0646\u0627<\/div>\n <a href=\"https:\/\/twitter.com\/brutocode\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); font-weight:600; color:var(--color-primary); text-decoration:none;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z\"\/><\/svg>\n @brutocode\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div>\n <form style=\"background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-8); box-shadow:var(--shadow-sm);\" onsubmit=\"handleForm(event)\" novalidate>\n <h3 style=\"font-size:var(--text-lg); font-weight:700; margin-bottom:var(--space-6);\">\u0623\u0631\u0633\u0644 \u0627\u0633\u062a\u0641\u0633\u0627\u0631\u0627\u064b<\/h3>\n <div style=\"display:flex; flex-direction:column; gap:var(--space-4);\">\n <div>\n <label for=\"name\" style=\"display:block; font-size:var(--text-sm); font-weight:600; margin-bottom:var(--space-2);\">\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required placeholder=\"\u0645\u062d\u0645\u062f \u0627\u0644\u0639\u0645\u0631\u064a\"\n style=\"width:100%; padding:var(--space-3) var(--space-4); border:1.5px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg); color:var(--color-text); font-size:var(--text-sm); transition:border-color var(--transition);\"\n onfocus=\"this.style.borderColor='var(--color-primary)'\"\n onblur=\"this.style.borderColor='var(--color-border)'\">\n <\/div>\n <div>\n <label for=\"email\" style=\"display:block; font-size:var(--text-sm); font-weight:600; margin-bottom:var(--space-2);\">\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required placeholder=\"name@company.com\" dir=\"ltr\"\n style=\"width:100%; padding:var(--space-3) var(--space-4); border:1.5px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg); color:var(--color-text); font-size:var(--text-sm); transition:border-color var(--transition); text-align:right;\"\n onfocus=\"this.style.borderColor='var(--color-primary)'\"\n onblur=\"this.style.borderColor='var(--color-border)'\">\n <\/div>\n <div>\n <label for=\"service\" style=\"display:block; font-size:var(--text-sm); font-weight:600; margin-bottom:var(--space-2);\">\u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629<\/label>\n <select id=\"service\" name=\"service\"\n style=\"width:100%; padding:var(--space-3) var(--space-4); border:1.5px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg); color:var(--color-text); font-size:var(--text-sm); cursor:pointer; transition:border-color var(--transition);\"\n onfocus=\"this.style.borderColor='var(--color-primary)'\"\n onblur=\"this.style.borderColor='var(--color-border)'\">\n <option value=\"\">\u0627\u062e\u062a\u0631 \u0627\u0644\u062e\u062f\u0645\u0629<\/option>\n <option>\u0646\u0638\u0627\u0645 ERP \u0627\u0644\u0645\u0624\u0633\u0633\u064a<\/option>\n <option>\u0625\u062f\u0627\u0631\u0629 \u0639\u0644\u0627\u0642\u0627\u062a \u0627\u0644\u0639\u0645\u0644\u0627\u0621 CRM<\/option>\n <option>\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0648\u0627\u0644\u0623\u062a\u0645\u062a\u0629<\/option>\n <option>\u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u0633\u062d\u0627\u0628\u064a\u0629<\/option>\n <option>\u0627\u0644\u0623\u0645\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a<\/option>\n <option>\u0627\u0644\u062a\u062c\u0627\u0631\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/option>\n <option>\u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0634\u0627\u0645\u0644\u0629<\/option>\n <\/select>\n <\/div>\n <div>\n <label for=\"message\" style=\"display:block; font-size:var(--text-sm); font-weight:600; margin-bottom:var(--space-2);\">\u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/label>\n <textarea id=\"message\" name=\"message\" rows=\"4\" placeholder=\"\u0635\u0641 \u0644\u0646\u0627 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643 \u0648\u0645\u062a\u0637\u0644\u0628\u0627\u062a \u0645\u0634\u0631\u0648\u0639\u0643...\"\n style=\"width:100%; padding:var(--space-3) var(--space-4); border:1.5px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg); color:var(--color-text); font-size:var(--text-sm); resize:vertical; min-height:100px; font-family:inherit; transition:border-color var(--transition);\"\n onfocus=\"this.style.borderColor='var(--color-primary)'\"\n onblur=\"this.style.borderColor='var(--color-border)'\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\" style=\"width:100%; justify-content:center; padding:var(--space-4);\">\n \u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0627\u0633\u062a\u0641\u0633\u0627\u0631\n <\/button>\n <div id=\"formMsg\" style=\"display:none; text-align:center; font-size:var(--text-sm); color:var(--color-gold); font-weight:600; padding:var(--space-3); background:var(--color-gold-highlight); border-radius:var(--radius-lg);\">\n \u2705 \u062a\u0645 \u0625\u0631\u0633\u0627\u0644 \u0631\u0633\u0627\u0644\u062a\u0643 \u0628\u0646\u062c\u0627\u062d! \u0633\u064a\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0643 \u0641\u0631\u064a\u0642\u0646\u0627 \u0642\u0631\u064a\u0628\u0627\u064b.\n <\/div>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n<\/main>\n\n\n<footer class=\"footer\" role=\"contentinfo\">\n <div class=\"container\">\n <div class=\"footer__grid\">\n \n <div>\n <svg width=\"44\" height=\"44\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n <rect width=\"40\" height=\"40\" rx=\"10\" fill=\"rgba(255,255,255,0.1)\"\/>\n <path d=\"M8 10 L8 30 L14 30 L14 22 L18 22 L24 30 L31 30 L24 21 C27 20 29 17.5 29 14.5 C29 11.5 26.5 10 23 10 Z M14 15 L22 15 C24 15 25 15.8 25 17.5 C25 19 24 20 22 20 L14 20 Z\" fill=\"#C49A2B\"\/>\n <\/svg>\n <div class=\"footer__about-name\">BrutoCode<\/div>\n <p class=\"footer__about-desc\">\n \u0634\u0631\u064a\u0643\u0643 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a \u2014 \u0646\u0635\u0645\u0651\u0645 \u0623\u0646\u0638\u0645\u0629 \u0631\u0642\u0645\u064a\u0629 \u0647\u0646\u062f\u0633\u064a\u0629 \u0644\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629 \u0648\u0627\u0644\u0625\u0642\u0644\u064a\u0645\u064a\u0629.\n <\/p>\n <\/div>\n\n \n <div>\n <div class=\"footer__heading\">\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/div>\n <ul class=\"footer__links\" role=\"list\">\n <li><a href=\"#services\">\u0623\u0646\u0638\u0645\u0629 ERP<\/a><\/li>\n <li><a href=\"#services\">\u0625\u062f\u0627\u0631\u0629 CRM<\/a><\/li>\n <li><a href=\"#services\">\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a<\/a><\/li>\n <li><a href=\"#services\">\u0627\u0644\u0623\u0645\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a<\/a><\/li>\n <li><a href=\"#services\">\u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u0633\u062d\u0627\u0628\u064a\u0629<\/a><\/li>\n <\/ul>\n <\/div>\n\n \n <div>\n <div class=\"footer__heading\">\u0627\u0644\u0642\u0637\u0627\u0639\u0627\u062a<\/div>\n <ul class=\"footer__links\" role=\"list\">\n <li><a href=\"#sectors\">\u0627\u0644\u0631\u0639\u0627\u064a\u0629 \u0627\u0644\u0635\u062d\u064a\u0629<\/a><\/li>\n <li><a href=\"#sectors\">\u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u062d\u0643\u0648\u0645\u064a\u0629<\/a><\/li>\n <li><a href=\"#sectors\">\u0627\u0644\u062a\u062c\u0627\u0631\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/a><\/li>\n <li><a href=\"#sectors\">\u0627\u0644\u0639\u0642\u0627\u0631\u0627\u062a<\/a><\/li>\n <li><a href=\"#sectors\">\u0627\u0644\u062a\u0639\u0644\u064a\u0645 \u0648\u0627\u0644\u062a\u062f\u0631\u064a\u0628<\/a><\/li>\n <\/ul>\n <\/div>\n\n \n <div>\n <div class=\"footer__heading\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/div>\n <div class=\"footer__contact-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13 19.79 19.79 0 0 1 1.61 4.39 2 2 0 0 1 3.59 2.18h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.09 6.09l.9-.9a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>\n <a href=\"tel:+966570545777\" style=\"color:inherit; text-decoration:none; direction:ltr; display:inline-block;\" dir=\"ltr\">+966 57 054 5777<\/a>\n <\/div>\n <div class=\"footer__contact-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>\n <a href=\"mailto:info@brutocode.sa\" style=\"color:inherit; text-decoration:none;\">info@brutocode.sa<\/a>\n <\/div>\n <div class=\"footer__contact-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/svg>\n <a href=\"https:\/\/www.brutocode.sa\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color:inherit; text-decoration:none;\">www.brutocode.sa<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"footer__bottom\">\n <span>\u00a9 2026 BrutoCode. \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629.<\/span>\n <span style=\"color:var(--color-gold);\">\u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629 \u00b7 \u0634\u0631\u064a\u0643\u0643 \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a<\/span>\n <\/div>\n <\/div>\n<\/footer>\n\n\n<script>\n\/\/ Theme toggle\n(function(){\n const t = document.querySelector('[data-theme-toggle]');\n const r = document.documentElement;\n let d = matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light';\n r.setAttribute('data-theme', d);\n t && t.addEventListener('click', () => {\n d = d === 'dark' ? 'light' : 'dark';\n r.setAttribute('data-theme', d);\n t.setAttribute('aria-label', 'Switch to ' + (d === 'dark' ? 'light' : 'dark') + ' mode');\n t.innerHTML = d === 'dark'\n ? '<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"5\"\/><path d=\"M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42\"\/><\/svg>'\n : '<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"\/><\/svg>';\n });\n})();\n\n\/\/ Navbar scroll effect\nconst navbar = document.getElementById('navbar');\nwindow.addEventListener('scroll', () => {\n navbar.classList.toggle('scrolled', window.scrollY > 20);\n}, { passive: true });\n\n\/\/ Mobile menu\nconst menuToggle = document.getElementById('menuToggle');\nconst mobileMenu = document.getElementById('mobileMenu');\nlet menuOpen = false;\n\nfunction closeMobileMenu() {\n menuOpen = false;\n mobileMenu.classList.remove('open');\n menuToggle.setAttribute('aria-expanded', 'false');\n document.body.style.overflow = '';\n}\n\nmenuToggle.addEventListener('click', () => {\n menuOpen = !menuOpen;\n mobileMenu.classList.toggle('open', menuOpen);\n menuToggle.setAttribute('aria-expanded', menuOpen);\n document.body.style.overflow = menuOpen ? 'hidden' : '';\n});\n\n\/\/ Escape key closes mobile menu\ndocument.addEventListener('keydown', e => {\n if (e.key === 'Escape' && menuOpen) closeMobileMenu();\n});\n\n\/\/ Scroll animations (IntersectionObserver)\nconst observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\n\ndocument.querySelectorAll('.fade-up').forEach(el => observer.observe(el));\n\n\/\/ Form submission\nfunction handleForm(e) {\n e.preventDefault();\n const btn = e.target.querySelector('button[type=\"submit\"]');\n const msg = document.getElementById('formMsg');\n btn.disabled = true;\n btn.textContent = '\u062c\u0627\u0631\u064a \u0627\u0644\u0625\u0631\u0633\u0627\u0644...';\n setTimeout(() => {\n btn.style.display = 'none';\n msg.style.display = 'block';\n e.target.reset();\n }, 1200);\n}\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BrutoCode | \u0634\u0631\u064a\u0643\u0643 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a \u0627\u0646\u062a\u0642\u0644 \u0644\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0631\u0626\u064a\u0633\u064a BrutoCode \u062e\u062f\u0645\u0627\u062a\u0646\u0627 \u0627\u0644\u0642\u0637\u0627\u0639\u0627\u062a \u0627\u0644\u0645\u0646\u0647\u062c\u064a\u0629 \u0627\u0644\u0634\u0631\u0627\u0643\u0627\u062a \u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627 \u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643 \u062e\u062f\u0645\u0627\u062a\u0646\u0627 \u0627\u0644\u0642\u0637\u0627\u0639\u0627\u062a \u0627\u0644\u0645\u0646\u0647\u062c\u064a\u0629 \u0627\u0644\u0634\u0631\u0627\u0643\u0627\u062a \u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627 \u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643 \u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629 \u00b7 2026 \u0634\u0631\u064a\u0643\u0643 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a \u0646\u0635\u0645\u0651\u0645 \u0645\u0646\u0638\u0648\u0645\u0627\u062a \u0631\u0642\u0645\u064a\u0629 \u0647\u0646\u062f\u0633\u064a\u0629 \u062a\u062f\u0645\u062c \u0628\u064a\u0646 \u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631 \u0627\u0644\u062a\u0642\u0646\u064a \u0648\u0627\u0644\u0641\u0647\u0645 \u0627\u0644\u0639\u0645\u064a\u0642 \u0644\u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0627\u062a \u0627\u0644\u0623\u0639\u0645\u0627\u0644\u060c \u0644\u0646\u0642\u0644 \u0645\u0624\u0633\u0633\u062a\u0643 \u0646\u062d\u0648 \u0627\u0644\u0633\u064a\u0627\u062f\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0627\u0644\u0643\u0627\u0645\u0644\u0629. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/brutocode.followra.app\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brutocode.followra.app\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/brutocode.followra.app\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/brutocode.followra.app\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brutocode.followra.app\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":7,"href":"https:\/\/brutocode.followra.app\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/brutocode.followra.app\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/brutocode.followra.app\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}