{"id":52,"date":"2026-04-30T12:07:56","date_gmt":"2026-04-30T08:37:56","guid":{"rendered":"http:\/\/tabajoule.ir\/?page_id=52"},"modified":"2026-06-30T16:53:16","modified_gmt":"2026-06-30T13:23:16","slug":"%d9%be%d8%b1%d9%88%da%98%d9%87-%d9%87%d8%a7","status":"publish","type":"page","link":"https:\/\/tabajoule.ir\/?page_id=52","title":{"rendered":"\u067e\u0631\u0648\u0698\u0647 \u0647\u0627"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"52\" class=\"elementor elementor-52\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e9cd86 e-con-full wd-section-stretch-content e-flex e-con e-parent\" data-id=\"1e9cd86\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-94a711d elementor-widget elementor-widget-html\" data-id=\"94a711d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<!-- saved from url=(0055)file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html -->\n<html lang=\"fa\" dir=\"rtl\"><head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n  \n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u0631\u0627 \u0634\u062f\u0647 \u062a\u0627\u0628\u0627\u0698\u0648\u0644 | \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/title>\n  <meta name=\"description\" content=\"\u0646\u0645\u0648\u0646\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u062a\u0627\u0628\u0627\u0698\u0648\u0644 \u062f\u0631 \u062d\u0648\u0632\u0647 \u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc\u060c \u06a9\u0634\u0627\u0648\u0631\u0632\u06cc \u0648 \u0635\u0646\u0639\u062a. \u0645\u0634\u0627\u0647\u062f\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u0631\u0627 \u0634\u062f\u0647 \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u0627\u06cc\u0631\u0627\u0646\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\/\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\/\" crossorigin=\"\">\n  <link href=\".\/\u067e\u0631\u0648\u0698\u0647_\u0647\u0627\u06cc \u0627\u062c\u0631\u0627 \u0634\u062f\u0647 \u062a\u0627\u0628\u0627\u0698\u0648\u0644 _ \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc_files\/css2\" rel=\"stylesheet\">\n  <script src=\".\/\u067e\u0631\u0648\u0698\u0647_\u0647\u0627\u06cc \u0627\u062c\u0631\u0627 \u0634\u062f\u0647 \u062a\u0627\u0628\u0627\u0698\u0648\u0644 _ \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc_files\/saved_resource\"><\/script>\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: {\n            sans: ['Vazirmatn', 'system-ui', 'sans-serif'],\n          },\n          colors: {\n            brand: {\n              blue: '#1565D8',\n              'blue-dark': '#0D47A1',\n              'blue-light': '#4285F4',\n              'blue-50': '#EBF2FF',\n              'blue-100': '#C8DCFF',\n              yellow: '#F5C400',\n              'yellow-dark': '#D4A900',\n              'yellow-light': '#FFD740',\n              'yellow-50': '#FFFBEB',\n              dark: '#0D1B2A',\n              'dark-800': '#1A2E42',\n              'dark-700': '#243B55',\n              gray: '#6B7280',\n              'gray-light': '#F8FAFC',\n              green: '#059669',\n              'green-dark': '#047857',\n              'green-light': '#10B981',\n              'green-50': '#ECFDF5',\n              orange: '#EA580C',\n              'orange-dark': '#C2410C',\n              'orange-light': '#F97316',\n              'orange-50': '#FFF7ED',\n            },\n          },\n          animation: {\n            'fade-in': 'fadeIn 0.5s ease-out',\n            'slide-up': 'slideUp 0.6s ease-out',\n            'pulse-slow': 'pulse 3s ease-in-out infinite',\n          },\n        },\n      },\n    }\n  <\/script>\n  <style>\n    * {\n      direction: rtl;\n      font-family: 'Vazirmatn', system-ui, sans-serif;\n    }\n\n    html {\n      scroll-behavior: smooth;\n    }\n\n    ::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    ::-webkit-scrollbar-track {\n      background: #F8FAFC;\n    }\n\n    ::-webkit-scrollbar-thumb {\n      background: #059669;\n      border-radius: 9999px;\n    }\n\n    .line-clamp-2 {\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n\n    .line-clamp-3 {\n      display: -webkit-box;\n      -webkit-line-clamp: 3;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n\n    .bg-gradient-brand {\n      background: linear-gradient(135deg, #0D1B2A 0%, #1A2E42 50%, #059669 100%);\n    }\n\n    .bg-gradient-hero {\n      background: linear-gradient(160deg, #0D1B2A 0%, #1A2E42 40%, #243B55 100%);\n    }\n\n    .bg-gradient-green {\n      background: linear-gradient(135deg, #047857 0%, #059669 50%, #10B981 100%);\n    }\n\n    .glass {\n      backdrop-filter: blur(12px);\n      -webkit-backdrop-filter: blur(12px);\n      background: rgba(255, 255, 255, 0.08);\n      border: 1px solid rgba(255, 255, 255, 0.15);\n    }\n\n    .glass-dark {\n      backdrop-filter: blur(12px);\n      -webkit-backdrop-filter: blur(12px);\n      background: rgba(13, 27, 42, 0.85);\n    }\n\n    .hover-lift {\n      transition: all 0.3s ease;\n    }\n\n    .hover-lift:hover {\n      transform: translateY(-4px);\n      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n    }\n\n    .glow-green {\n      box-shadow: 0 0 40px rgba(5, 150, 105, 0.15);\n    }\n\n    .glow-orange {\n      box-shadow: 0 0 40px rgba(234, 88, 12, 0.2);\n    }\n\n    \/* Iran Map Styling *\/\n    .map-province {\n      fill: #1A2E42;\n      stroke: rgba(5, 150, 105, 0.3);\n      stroke-width: 1;\n      transition: all 0.3s ease;\n      cursor: pointer;\n    }\n\n    .map-province:hover {\n      fill: #059669;\n      stroke: #10B981;\n    }\n\n    .map-province.active {\n      fill: #059669;\n      stroke: #F5C400;\n      stroke-width: 2;\n    }\n\n    .map-marker {\n      animation: pulse-map 2s infinite;\n    }\n\n    @keyframes pulse-map {\n      0%, 100% { opacity: 1; transform: scale(1); }\n      50% { opacity: 0.7; transform: scale(1.1); }\n    }\n\n    \/* Timeline *\/\n    .timeline-line {\n      background: linear-gradient(to bottom, #059669, #10B981);\n    }\n\n    \/* Before\/After Slider *\/\n    .ba-slider {\n      position: relative;\n      overflow: hidden;\n    }\n\n    .ba-slider .ba-after {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 50%;\n      overflow: hidden;\n    }\n\n    .ba-slider .ba-handle {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 50%;\n      width: 4px;\n      background: #F5C400;\n      cursor: ew-resize;\n      z-index: 10;\n    }\n\n    .ba-slider .ba-handle::before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 40px;\n      height: 40px;\n      background: #F5C400;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    \/* Modal *\/\n    .modal-backdrop {\n      background: rgba(13, 27, 42, 0.9);\n      backdrop-filter: blur(8px);\n    }\n\n    \/* Filter Pills *\/\n    .filter-pill {\n      transition: all 0.2s ease;\n    }\n\n    .filter-pill.active {\n      background: #059669;\n      color: white;\n      border-color: #059669;\n    }\n\n    \/* Stats Counter Animation *\/\n    .stat-number {\n      font-variant-numeric: tabular-nums;\n    }\n\n    @keyframes fadeIn {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n\n    @keyframes slideUp {\n      from { opacity: 0; transform: translateY(20px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n\n    \/* Navbar scroll effect *\/\n    .navbar-scrolled {\n      background: white;\n      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n    }\n\n    .navbar-transparent {\n      background: transparent;\n    }\n\n    \/* Masonry Grid for Projects *\/\n    .projects-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n      gap: 1.5rem;\n    }\n\n    @media (max-width: 768px) {\n      .projects-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n  <\/style>\n\n  <!-- Schema.org markup -->\n  <script type=\"application\/ld+json\">\n  {\n    \"@context\": \"https:\/\/schema.org\",\n    \"@type\": \"ItemList\",\n    \"name\": \"\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u0631\u0627 \u0634\u062f\u0647 \u062a\u0627\u0628\u0627\u0698\u0648\u0644\",\n    \"description\": \"\u0646\u0645\u0648\u0646\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u062f\u0631 \u0627\u06cc\u0631\u0627\u0646\",\n    \"itemListElement\": [\n      {\n        \"@type\": \"ListItem\",\n        \"position\": 1,\n        \"item\": {\n          \"@type\": \"Project\",\n          \"name\": \"\u0628\u0627\u063a \u067e\u0633\u062a\u0647 \u06f5\u06f0 \u0647\u06a9\u062a\u0627\u0631\u06cc - \u06a9\u0631\u0645\u0627\u0646\",\n          \"description\": \"\u0633\u06cc\u0633\u062a\u0645 \u0622\u0628\u06cc\u0627\u0631\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u06f3\u06f0 \u06a9\u06cc\u0644\u0648\u0648\u0627\u062a\"\n        }\n      }\n    ]\n  }\n  <\/script>\n<style>*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 \/ 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 \/ 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }\/* ! tailwindcss v3.4.17 | MIT License | https:\/\/tailwindcss.com *\/*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Vazirmatn, system-ui, sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0px}.bottom-4{bottom:1rem}.bottom-6{bottom:1.5rem}.bottom-8{bottom:2rem}.left-0{left:0px}.left-1\\\/2{left:50%}.left-3{left:0.75rem}.left-4{left:1rem}.left-6{left:1.5rem}.right-0{right:0px}.right-1\\\/2{right:50%}.right-4{right:1rem}.right-6{right:1.5rem}.top-0{top:0px}.top-1\\\/2{top:50%}.top-16{top:4rem}.top-24{top:6rem}.top-4{top:1rem}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.col-span-2{grid-column:span 2 \/ span 2}.mx-auto{margin-left:auto;margin-right:auto}.my-8{margin-top:2rem;margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mr-4{margin-right:1rem}.mr-auto{margin-right:auto}.mt-1{margin-top:0.25rem}.mt-12{margin-top:3rem}.mt-2{margin-top:0.5rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-1{height:0.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:0.5rem}.h-64{height:16rem}.h-80{height:20rem}.h-9{height:2.25rem}.h-auto{height:auto}.h-full{height:100%}.min-h-\\[85vh\\]{min-height:85vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:0.5rem}.w-3\\\/4{width:75%}.w-9{width:2.25rem}.w-auto{width:auto}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-7xl{max-width:80rem}.max-w-xl{max-width:36rem}.flex-shrink-0{flex-shrink:0}.-translate-x-1\\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-1\\\/2{--tw-translate-x:50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-\\[-90deg\\]{--tw-rotate:-90deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes bounce{0%, 100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}.animate-bounce{animation:bounce 1s infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.cursor-pointer{cursor:pointer}.appearance-none{-webkit-appearance:none;appearance:none}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\\.5{gap:0.125rem}.gap-1{gap:0.25rem}.gap-1\\.5{gap:0.375rem}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-1 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.25rem * var(--tw-space-y-reverse))}.space-y-2\\.5 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.625rem * var(--tw-space-y-reverse))}.space-y-3 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-brand-green{--tw-border-opacity:1;border-color:rgb(5 150 105 \/ var(--tw-border-opacity, 1))}.border-brand-green\\\/30{border-color:rgb(5 150 105 \/ 0.3)}.border-brand-green\\\/40{border-color:rgb(5 150 105 \/ 0.4)}.border-brand-yellow\\\/30{border-color:rgb(245 196 0 \/ 0.3)}.border-brand-yellow\\\/40{border-color:rgb(245 196 0 \/ 0.4)}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246 \/ var(--tw-border-opacity, 1))}.border-white\\\/10{border-color:rgb(255 255 255 \/ 0.1)}.border-white\\\/15{border-color:rgb(255 255 255 \/ 0.15)}.border-white\\\/20{border-color:rgb(255 255 255 \/ 0.2)}.border-white\\\/30{border-color:rgb(255 255 255 \/ 0.3)}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255 \/ var(--tw-bg-opacity, 1))}.bg-brand-blue{--tw-bg-opacity:1;background-color:rgb(21 101 216 \/ var(--tw-bg-opacity, 1))}.bg-brand-blue\\\/90{background-color:rgb(21 101 216 \/ 0.9)}.bg-brand-dark{--tw-bg-opacity:1;background-color:rgb(13 27 42 \/ var(--tw-bg-opacity, 1))}.bg-brand-dark-800{--tw-bg-opacity:1;background-color:rgb(26 46 66 \/ var(--tw-bg-opacity, 1))}.bg-brand-dark\\\/90{background-color:rgb(13 27 42 \/ 0.9)}.bg-brand-gray-light{--tw-bg-opacity:1;background-color:rgb(248 250 252 \/ var(--tw-bg-opacity, 1))}.bg-brand-green{--tw-bg-opacity:1;background-color:rgb(5 150 105 \/ var(--tw-bg-opacity, 1))}.bg-brand-green-50{--tw-bg-opacity:1;background-color:rgb(236 253 245 \/ var(--tw-bg-opacity, 1))}.bg-brand-green\\\/20{background-color:rgb(5 150 105 \/ 0.2)}.bg-brand-green\\\/90{background-color:rgb(5 150 105 \/ 0.9)}.bg-brand-orange{--tw-bg-opacity:1;background-color:rgb(234 88 12 \/ var(--tw-bg-opacity, 1))}.bg-brand-orange-50{--tw-bg-opacity:1;background-color:rgb(255 247 237 \/ var(--tw-bg-opacity, 1))}.bg-brand-orange\\\/90{background-color:rgb(234 88 12 \/ 0.9)}.bg-brand-yellow{--tw-bg-opacity:1;background-color:rgb(245 196 0 \/ var(--tw-bg-opacity, 1))}.bg-brand-yellow-50{--tw-bg-opacity:1;background-color:rgb(255 251 235 \/ var(--tw-bg-opacity, 1))}.bg-brand-yellow\\\/20{background-color:rgb(245 196 0 \/ 0.2)}.bg-cyan-50{--tw-bg-opacity:1;background-color:rgb(236 254 255 \/ var(--tw-bg-opacity, 1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 \/ var(--tw-bg-opacity, 1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 \/ var(--tw-bg-opacity, 1))}.bg-orange-50{--tw-bg-opacity:1;background-color:rgb(255 247 237 \/ var(--tw-bg-opacity, 1))}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255 \/ var(--tw-bg-opacity, 1))}.bg-purple-600\\\/90{background-color:rgb(147 51 234 \/ 0.9)}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242 \/ var(--tw-bg-opacity, 1))}.bg-rose-50{--tw-bg-opacity:1;background-color:rgb(255 241 242 \/ var(--tw-bg-opacity, 1))}.bg-rose-600\\\/90{background-color:rgb(225 29 72 \/ 0.9)}.bg-teal-50{--tw-bg-opacity:1;background-color:rgb(240 253 250 \/ var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 \/ var(--tw-bg-opacity, 1))}.bg-white\\\/10{background-color:rgb(255 255 255 \/ 0.1)}.bg-white\\\/20{background-color:rgb(255 255 255 \/ 0.2)}.bg-yellow-50{--tw-bg-opacity:1;background-color:rgb(254 252 232 \/ var(--tw-bg-opacity, 1))}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top, var(--tw-gradient-stops))}.from-brand-dark{--tw-gradient-from:#0D1B2A var(--tw-gradient-from-position);--tw-gradient-to:rgb(13 27 42 \/ 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-brand-dark\\\/60{--tw-gradient-from:rgb(13 27 42 \/ 0.6) var(--tw-gradient-from-position);--tw-gradient-to:rgb(13 27 42 \/ 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-brand-dark\\\/30{--tw-gradient-to:rgb(13 27 42 \/ 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(13 27 42 \/ 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-brand-dark\\\/40{--tw-gradient-to:rgb(13 27 42 \/ 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(13 27 42 \/ 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-transparent{--tw-gradient-to:rgb(0 0 0 \/ 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-brand-dark\\\/80{--tw-gradient-to:rgb(13 27 42 \/ 0.8) var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.object-cover{object-fit:cover}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-1\\.5{padding-top:0.375rem;padding-bottom:0.375rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-2\\.5{padding-top:0.625rem;padding-bottom:0.625rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-8{padding-bottom:2rem}.pr-10{padding-right:2.5rem}.pt-16{padding-top:4rem}.pt-2{padding-top:0.5rem}.pt-24{padding-top:6rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-wide{letter-spacing:0.025em}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235 \/ var(--tw-text-opacity, 1))}.text-brand-dark{--tw-text-opacity:1;color:rgb(13 27 42 \/ var(--tw-text-opacity, 1))}.text-brand-gray{--tw-text-opacity:1;color:rgb(107 114 128 \/ var(--tw-text-opacity, 1))}.text-brand-green{--tw-text-opacity:1;color:rgb(5 150 105 \/ var(--tw-text-opacity, 1))}.text-brand-green-light{--tw-text-opacity:1;color:rgb(16 185 129 \/ var(--tw-text-opacity, 1))}.text-brand-orange{--tw-text-opacity:1;color:rgb(234 88 12 \/ var(--tw-text-opacity, 1))}.text-brand-yellow{--tw-text-opacity:1;color:rgb(245 196 0 \/ var(--tw-text-opacity, 1))}.text-brand-yellow-dark{--tw-text-opacity:1;color:rgb(212 169 0 \/ var(--tw-text-opacity, 1))}.text-cyan-600{--tw-text-opacity:1;color:rgb(8 145 178 \/ var(--tw-text-opacity, 1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219 \/ var(--tw-text-opacity, 1))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234 \/ var(--tw-text-opacity, 1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68 \/ var(--tw-text-opacity, 1))}.text-rose-600{--tw-text-opacity:1;color:rgb(225 29 72 \/ var(--tw-text-opacity, 1))}.text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136 \/ var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 \/ var(--tw-text-opacity, 1))}.text-white\\\/40{color:rgb(255 255 255 \/ 0.4)}.text-white\\\/50{color:rgb(255 255 255 \/ 0.5)}.text-white\\\/60{color:rgb(255 255 255 \/ 0.6)}.text-white\\\/70{color:rgb(255 255 255 \/ 0.7)}.text-white\\\/75{color:rgb(255 255 255 \/ 0.75)}.text-white\\\/80{color:rgb(255 255 255 \/ 0.8)}.text-white\\\/90{color:rgb(255 255 255 \/ 0.9)}.text-yellow-600{--tw-text-opacity:1;color:rgb(202 138 4 \/ var(--tw-text-opacity, 1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-10{opacity:0.1}.opacity-30{opacity:0.3}.opacity-5{opacity:0.05}.opacity-50{opacity:0.5}.opacity-60{opacity:0.6}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 \/ 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 \/ 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 \/ 0.1), 0 8px 10px -6px rgb(0 0 0 \/ 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.duration-300{transition-duration:300ms}.duration-700{transition-duration:700ms}.hover\\:-translate-y-0\\.5:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:bg-brand-green:hover{--tw-bg-opacity:1;background-color:rgb(5 150 105 \/ var(--tw-bg-opacity, 1))}.hover\\:bg-brand-green-50:hover{--tw-bg-opacity:1;background-color:rgb(236 253 245 \/ var(--tw-bg-opacity, 1))}.hover\\:bg-brand-green-dark:hover{--tw-bg-opacity:1;background-color:rgb(4 120 87 \/ var(--tw-bg-opacity, 1))}.hover\\:bg-brand-yellow-dark:hover{--tw-bg-opacity:1;background-color:rgb(212 169 0 \/ var(--tw-bg-opacity, 1))}.hover\\:bg-green-600:hover{--tw-bg-opacity:1;background-color:rgb(22 163 74 \/ var(--tw-bg-opacity, 1))}.hover\\:bg-white\\\/10:hover{background-color:rgb(255 255 255 \/ 0.1)}.hover\\:bg-white\\\/15:hover{background-color:rgb(255 255 255 \/ 0.15)}.hover\\:bg-white\\\/20:hover{background-color:rgb(255 255 255 \/ 0.2)}.hover\\:bg-white\\\/30:hover{background-color:rgb(255 255 255 \/ 0.3)}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 \/ var(--tw-bg-opacity, 1))}.hover\\:text-brand-green:hover{--tw-text-opacity:1;color:rgb(5 150 105 \/ var(--tw-text-opacity, 1))}.hover\\:text-brand-yellow:hover{--tw-text-opacity:1;color:rgb(245 196 0 \/ var(--tw-text-opacity, 1))}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 \/ var(--tw-text-opacity, 1))}.hover\\:text-white\\\/70:hover{color:rgb(255 255 255 \/ 0.7)}.hover\\:shadow-brand-yellow\\\/30:hover{--tw-shadow-color:rgb(245 196 0 \/ 0.3);--tw-shadow:var(--tw-shadow-colored)}.focus\\:border-brand-green:focus{--tw-border-opacity:1;border-color:rgb(5 150 105 \/ var(--tw-border-opacity, 1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.group:hover .group-hover\\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:bg-brand-green{--tw-bg-opacity:1;background-color:rgb(5 150 105 \/ var(--tw-bg-opacity, 1))}.group:hover .group-hover\\:text-brand-green{--tw-text-opacity:1;color:rgb(5 150 105 \/ var(--tw-text-opacity, 1))}@media (min-width: 640px){.sm\\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.sm\\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width: 768px){.md\\:top-20{top:5rem}.md\\:col-span-1{grid-column:span 1 \/ span 1}.md\\:block{display:block}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:h-12{height:3rem}.md\\:h-20{height:5rem}.md\\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.md\\:flex-row{flex-direction:row}.md\\:gap-6{gap:1.5rem}.md\\:py-24{padding-top:6rem;padding-bottom:6rem}.md\\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\\:text-5xl{font-size:3rem;line-height:1}.md\\:text-6xl{font-size:3.75rem;line-height:1}.md\\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width: 1024px){.lg\\:col-span-1{grid-column:span 1 \/ span 1}.lg\\:col-span-2{grid-column:span 2 \/ span 2}.lg\\:block{display:block}.lg\\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.lg\\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.lg\\:text-7xl{font-size:4.5rem;line-height:1}}<\/style><\/head>\n<body class=\"bg-white text-brand-dark antialiased\">\n\n  <!-- Navbar -->\n  \n\n  <!-- Mobile Menu -->\n  <div id=\"mobile-menu\" class=\"fixed inset-0 z-40 bg-brand-dark\/90 hidden\">\n    <div class=\"max-w-7xl mx-auto px-4 pt-24\">\n      <div class=\"bg-white rounded-2xl shadow-xl p-4 space-y-1\">\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"block px-4 py-3 text-brand-dark font-semibold hover:bg-brand-green-50 hover:text-brand-green rounded-xl transition-all\">\u0645\u0631\u06a9\u0632 \u062f\u0627\u0646\u0634<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"block px-4 py-3 text-brand-green font-semibold bg-brand-green-50 rounded-xl\">\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"block px-4 py-3 text-brand-dark font-semibold hover:bg-brand-green-50 hover:text-brand-green rounded-xl transition-all\">\u0645\u062d\u0635\u0648\u0644\u0627\u062a<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"block px-4 py-3 text-brand-dark font-semibold hover:bg-brand-green-50 hover:text-brand-green rounded-xl transition-all\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"block px-4 py-3 text-brand-dark font-semibold hover:bg-brand-green-50 hover:text-brand-green rounded-xl transition-all\">\u062a\u0645\u0627\u0633<\/a>\n        <div class=\"pt-2\">\n          <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#cta\" class=\"block w-full text-center bg-brand-yellow text-brand-dark font-semibold px-6 py-3 rounded-xl\">\u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Hero Section -->\n  <section class=\"relative min-h-[85vh] flex items-center justify-center overflow-hidden\">\n    <!-- Background -->\n    <div class=\"absolute inset-0 bg-gradient-hero\"><\/div>\n    <div class=\"absolute inset-0 opacity-30\" style=\"background-image: url(&#39;https:\/\/images.pexels.com\/photos\/9875423\/pexels-photo-9875423.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1920&#39;); background-size: cover; background-position: center;\"><\/div>\n    <div class=\"absolute inset-0 bg-gradient-to-b from-brand-dark\/60 via-brand-dark\/40 to-brand-dark\/80\"><\/div>\n\n    <!-- Decorative Elements -->\n    <div class=\"absolute inset-0 opacity-5\" style=\"background-image: radial-gradient(circle at 80% 20%, rgba(5, 150, 105, 0.5) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(245, 196, 0, 0.3) 0%, transparent 50%);\"><\/div>\n\n    <!-- Breadcrumb -->\n    <div class=\"absolute top-24 right-0 left-0 px-4\">\n      <div class=\"max-w-7xl mx-auto\">\n        <nav class=\"flex items-center gap-2 text-white\/60 text-sm\">\n          <a href=\"file:\/\/\/D:\/\" class=\"hover:text-white transition-colors\">\u062e\u0627\u0646\u0647<\/a>\n          <span>\/<\/span>\n          <span class=\"text-white\">\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u0631\u0627 \u0634\u062f\u0647<\/span>\n        <\/nav>\n      <\/div>\n    <\/div>\n\n    <!-- Content -->\n    <div class=\"relative z-10 max-w-7xl mx-auto px-4 text-center\">\n      <!-- Badge -->\n      <div class=\"inline-flex items-center gap-2 bg-brand-green\/20 border border-brand-green\/40 text-brand-green-light px-4 py-2 rounded-full text-sm font-semibold mb-6\">\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path><polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline><\/svg>\n        \u0628\u06cc\u0634 \u0627\u0632 \u06f1\u06f5\u06f0 \u067e\u0631\u0648\u0698\u0647 \u0645\u0648\u0641\u0642\n      <\/div>\n\n      <!-- Title -->\n      <h1 class=\"text-4xl md:text-6xl lg:text-7xl font-black text-white mb-6 leading-tight\">\n        \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u0631\u0627 \u0634\u062f\u0647\n        <span class=\"text-brand-yellow\">\u062a\u0627\u0628\u0627\u0698\u0648\u0644<\/span>\n      <\/h1>\n\n      <p class=\"text-white\/75 text-lg md:text-xl max-w-3xl mx-auto mb-10 leading-relaxed\">\n        \u0646\u0645\u0648\u0646\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u062f\u0631 \u062d\u0648\u0632\u0647 \u06a9\u0634\u0627\u0648\u0631\u0632\u06cc\u060c \u0635\u0646\u0639\u062a\u060c \u0648\u06cc\u0644\u0627 \u0648 \u0628\u0631\u0642 \u0627\u0636\u0637\u0631\u0627\u0631\u06cc\n      <\/p>\n\n      <!-- Stats Grid -->\n      <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 max-w-4xl mx-auto mb-12\">\n        <div class=\"bg-white\/10 backdrop-blur-sm border border-white\/15 rounded-2xl p-5 text-center hover-lift\">\n          <div class=\"text-3xl md:text-4xl font-black text-brand-yellow stat-number\" data-count=\"158\">\u06f1\u06f5\u06f8<\/div>\n          <div class=\"text-white\/60 text-sm mt-1\">\u067e\u0631\u0648\u0698\u0647 \u0645\u0648\u0641\u0642<\/div>\n        <\/div>\n        <div class=\"bg-white\/10 backdrop-blur-sm border border-white\/15 rounded-2xl p-5 text-center hover-lift\">\n          <div class=\"text-3xl md:text-4xl font-black text-brand-green-light stat-number\" data-count=\"4200\">\u06f4.\u06f2<\/div>\n          <div class=\"text-white\/60 text-sm mt-1\">\u06a9\u06cc\u0644\u0648\u0648\u0627\u062a \u0646\u0635\u0628 \u0634\u062f\u0647<\/div>\n        <\/div>\n        <div class=\"bg-white\/10 backdrop-blur-sm border border-white\/15 rounded-2xl p-5 text-center hover-lift\">\n          <div class=\"text-3xl md:text-4xl font-black text-white stat-number\" data-count=\"28\">\u06f2\u06f8<\/div>\n          <div class=\"text-white\/60 text-sm mt-1\">\u0627\u0633\u062a\u0627\u0646 \u062a\u062d\u062a \u067e\u0648\u0634\u0634<\/div>\n        <\/div>\n        <div class=\"bg-white\/10 backdrop-blur-sm border border-white\/15 rounded-2xl p-5 text-center hover-lift\">\n          <div class=\"text-3xl md:text-4xl font-black text-brand-yellow stat-number\" data-count=\"98\">\u06f9\u06f8\u066a<\/div>\n          <div class=\"text-white\/60 text-sm mt-1\">\u0631\u0636\u0627\u06cc\u062a \u0645\u0634\u062a\u0631\u06cc\u0627\u0646<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- CTA Buttons -->\n      <div class=\"flex flex-wrap justify-center gap-4\">\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#cta\" class=\"bg-brand-yellow text-brand-dark font-semibold px-8 py-4 rounded-xl hover:bg-brand-yellow-dark transition-all duration-200 shadow-lg hover:shadow-brand-yellow\/30 hover:-translate-y-0.5 flex items-center gap-2 text-lg\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"><\/path><\/svg>\n          \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646\n        <\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#projects\" class=\"bg-white\/10 border border-white\/30 text-white font-semibold px-8 py-4 rounded-xl hover:bg-white\/20 transition-all duration-200 hover:-translate-y-0.5 flex items-center gap-2 text-lg\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"><\/rect><path d=\"M3 9h18\"><\/path><path d=\"M9 21V9\"><\/path><\/svg>\n          \u0645\u0634\u0627\u0647\u062f\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- Scroll indicator -->\n    <div class=\"absolute bottom-8 left-1\/2 -translate-x-1\/2 flex flex-col items-center gap-2 text-white\/40\">\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" class=\"rotate-[-90deg] animate-bounce\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n    <\/div>\n  <\/section>\n\n  <!-- Smart Filters -->\n  \n\n  <!-- Projects Grid -->\n  <section id=\"projects\" class=\"py-16 md:py-24 bg-brand-gray-light\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6\">\n      <div class=\"projects-grid\">\n\n        <!-- Project Card 1 - Featured -->\n        <div class=\"bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden hover-lift group cursor-pointer\" onclick=\"openProjectModal(1)\">\n          <div class=\"relative overflow-hidden h-64\">\n            <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/2132126\/pexels-photo-2132126.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=800\" alt=\"\u067e\u0631\u0648\u0698\u0647 \u0628\u0627\u063a \u067e\u0633\u062a\u0647 \u06a9\u0631\u0645\u0627\u0646\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\">\n            <div class=\"absolute inset-0 bg-gradient-to-t from-brand-dark via-brand-dark\/30 to-transparent\"><\/div>\n\n            <!-- Featured Badge -->\n            <div class=\"absolute top-4 right-4 bg-brand-yellow text-brand-dark text-xs font-bold px-3 py-1.5 rounded-full flex items-center gap-1.5\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n              \u067e\u0631\u0648\u0698\u0647 \u0628\u0631\u062a\u0631\n            <\/div>\n\n            <!-- System Type Badge -->\n            <div class=\"absolute top-4 left-4 bg-brand-green\/90 text-white text-xs font-semibold px-3 py-1.5 rounded-full\">\n              \u0622\u0641\u200c\u06af\u0631\u06cc\u062f\n            <\/div>\n\n            <!-- Location -->\n            <div class=\"absolute bottom-4 right-4 flex items-center gap-2 text-white\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\n              <span class=\"text-sm font-semibold\">\u06a9\u0631\u0645\u0627\u0646\u060c \u0634\u0647\u0631\u0628\u0627\u0628\u06a9<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"p-6\">\n            <!-- Title & Application -->\n            <div class=\"flex items-start justify-between mb-3\">\n              <div>\n                <h3 class=\"text-lg font-bold text-brand-dark group-hover:text-brand-green transition-colors\">\u0628\u0627\u063a \u067e\u0633\u062a\u0647 \u06f5\u06f0 \u0647\u06a9\u062a\u0627\u0631\u06cc<\/h3>\n                <p class=\"text-sm text-brand-gray\">\u0622\u0628\u06cc\u0627\u0631\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u067e\u0645\u067e \u0639\u0645\u06cc\u0642<\/p>\n              <\/div>\n              <div class=\"flex-shrink-0 flex gap-0.5\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n              <\/div>\n            <\/div>\n\n            <!-- Specs -->\n            <div class=\"grid grid-cols-3 gap-3 mb-4\">\n              <div class=\"bg-brand-green-50 rounded-xl p-3 text-center\">\n                <div class=\"text-brand-green font-bold text-lg\">\u06f3\u06f0<\/div>\n                <div class=\"text-xs text-brand-gray\">\u06a9\u06cc\u0644\u0648\u0648\u0627\u062a<\/div>\n              <\/div>\n              <div class=\"bg-brand-orange-50 rounded-xl p-3 text-center\">\n                <div class=\"text-brand-orange font-bold text-lg\">\u06f5\u06f0<\/div>\n                <div class=\"text-xs text-brand-gray\">\u0647\u06a9\u062a\u0627\u0631<\/div>\n              <\/div>\n              <div class=\"bg-blue-50 rounded-xl p-3 text-center\">\n                <div class=\"text-blue-600 font-bold text-lg\">\u06f1\u06f2\u06f0<\/div>\n                <div class=\"text-xs text-brand-gray\">\u0645\u062a\u0631 \u0686\u0627\u0647<\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Description -->\n            <p class=\"text-sm text-brand-gray line-clamp-2 mb-4\">\n              \u0637\u0631\u0627\u062d\u06cc \u0648 \u0646\u0635\u0628 \u0633\u06cc\u0633\u062a\u0645 \u0622\u0628\u06cc\u0627\u0631\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u06a9\u0627\u0645\u0644 \u0628\u0631\u0627\u06cc \u0628\u0627\u063a \u067e\u0633\u062a\u0647 \u0628\u0627 \u0686\u0627\u0647 \u0639\u0645\u06cc\u0642 \u06f1\u06f2\u06f0 \u0645\u062a\u0631\u06cc. \u0635\u0631\u0641\u0647\u200c\u062c\u0648\u06cc\u06cc \u06f4\u06f8\u06f0 \u0645\u06cc\u0644\u06cc\u0648\u0646 \u062a\u0648\u0645\u0627\u0646\u06cc \u062f\u0631 \u06f5 \u0633\u0627\u0644.\n            <\/p>\n\n            <!-- Results -->\n            <div class=\"flex items-center gap-4 text-xs mb-4\">\n              <div class=\"flex items-center gap-1.5 text-brand-green\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n                <span class=\"font-semibold\">\u0635\u0631\u0641\u0647\u200c\u062c\u0648\u06cc\u06cc \u06f4\u06f8\u06f0M<\/span>\n              <\/div>\n              <div class=\"flex items-center gap-1.5 text-brand-orange\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"><\/path><\/svg>\n                <span class=\"font-semibold\">\u0628\u0631\u0642\u062a \u06f1\u06f0\u06f0\u066a<\/span>\n              <\/div>\n            <\/div>\n\n            <!-- View Details Button -->\n            <button class=\"w-full flex items-center justify-center gap-2 py-3 bg-brand-dark text-white font-semibold rounded-xl hover:bg-brand-green transition-all duration-200 group-hover:bg-brand-green\">\n              <span>\u0645\u0634\u0627\u0647\u062f\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647<\/span>\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n            <\/button>\n          <\/div>\n        <\/div>\n\n        <!-- Project Card 2 -->\n        <div class=\"bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden hover-lift group cursor-pointer\" onclick=\"openProjectModal(2)\">\n          <div class=\"relative overflow-hidden h-64\">\n            <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/1212407\/pexels-photo-1212407.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=800\" alt=\"\u06af\u0644\u062e\u0627\u0646\u0647 \u0635\u0646\u0639\u062a\u06cc \u0627\u0635\u0641\u0647\u0627\u0646\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\">\n            <div class=\"absolute inset-0 bg-gradient-to-t from-brand-dark via-brand-dark\/30 to-transparent\"><\/div>\n\n            <div class=\"absolute top-4 left-4 bg-brand-blue\/90 text-white text-xs font-semibold px-3 py-1.5 rounded-full\">\n              \u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc\n            <\/div>\n\n            <div class=\"absolute bottom-4 right-4 flex items-center gap-2 text-white\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\n              <span class=\"text-sm font-semibold\">\u0627\u0635\u0641\u0647\u0627\u0646\u060c \u0644\u0646\u062c\u0627\u0646<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"p-6\">\n            <div class=\"flex items-start justify-between mb-3\">\n              <div>\n                <h3 class=\"text-lg font-bold text-brand-dark group-hover:text-brand-green transition-colors\">\u06af\u0644\u062e\u0627\u0646\u0647 \u0635\u0646\u0639\u062a\u06cc \u0647\u06cc\u062f\u0631\u0648\u067e\u0648\u0646\u06cc\u06a9<\/h3>\n                <p class=\"text-sm text-brand-gray\">\u062a\u0627\u0645\u06cc\u0646 \u0628\u0631\u0642 \u06af\u0644\u062e\u0627\u0646\u0647 \u06f8\u06f0\u06f0\u06f0 \u0645\u062a\u0631\u06cc<\/p>\n              <\/div>\n              <div class=\"flex-shrink-0 flex gap-0.5\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n              <\/div>\n            <\/div>\n\n            <div class=\"grid grid-cols-3 gap-3 mb-4\">\n              <div class=\"bg-brand-green-50 rounded-xl p-3 text-center\">\n                <div class=\"text-brand-green font-bold text-lg\">\u06f8\u06f0<\/div>\n                <div class=\"text-xs text-brand-gray\">\u06a9\u06cc\u0644\u0648\u0648\u0627\u062a<\/div>\n              <\/div>\n              <div class=\"bg-brand-orange-50 rounded-xl p-3 text-center\">\n                <div class=\"text-brand-orange font-bold text-lg\">\u06f8\u06f0\u06f0\u06f0<\/div>\n                <div class=\"text-xs text-brand-gray\">\u0645\u062a\u0631\u0645\u0631\u0628\u0639<\/div>\n              <\/div>\n              <div class=\"bg-purple-50 rounded-xl p-3 text-center\">\n                <div class=\"text-purple-600 font-bold text-lg\">\u06f2\u06f0\u06f0<\/div>\n                <div class=\"text-xs text-brand-gray\">\u06a9\u06cc\u0644\u0648\u0648\u0627\u062a\u200c\u0633\u0627\u0639\u062a<\/div>\n              <\/div>\n            <\/div>\n\n            <p class=\"text-sm text-brand-gray line-clamp-2 mb-4\">\n              \u0633\u06cc\u0633\u062a\u0645 \u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc \u0628\u0627 \u0630\u062e\u06cc\u0631\u0647\u200c\u0633\u0627\u0632\u06cc \u0628\u0627\u062a\u0631\u06cc \u0628\u0631\u0627\u06cc \u06af\u0644\u062e\u0627\u0646\u0647 \u0635\u0646\u0639\u062a\u06cc. \u062a\u0627\u0645\u06cc\u0646 \u06f9\u06f5\u066a \u0628\u0631\u0642 \u0627\u0632 \u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u0648 \u0627\u0641\u0632\u0627\u06cc\u0634 \u06f3\u06f5\u066a \u0628\u0627\u0632\u062f\u0647\u06cc.\n            <\/p>\n\n            <div class=\"flex items-center gap-4 text-xs mb-4\">\n              <div class=\"flex items-center gap-1.5 text-brand-green\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n                <span class=\"font-semibold\">\u0628\u0627\u0632\u062f\u0647\u06cc +\u06f3\u06f5\u066a<\/span>\n              <\/div>\n              <div class=\"flex items-center gap-1.5 text-brand-orange\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"><\/path><\/svg>\n                <span class=\"font-semibold\">\u0628\u0631\u0642 \u06f9\u06f5\u066a \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/span>\n              <\/div>\n            <\/div>\n\n            <button class=\"w-full flex items-center justify-center gap-2 py-3 bg-brand-dark text-white font-semibold rounded-xl hover:bg-brand-green transition-all duration-200\">\n              <span>\u0645\u0634\u0627\u0647\u062f\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647<\/span>\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n            <\/button>\n          <\/div>\n        <\/div>\n\n        <!-- Project Card 3 -->\n        <div class=\"bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden hover-lift group cursor-pointer\" onclick=\"openProjectModal(3)\">\n          <div class=\"relative overflow-hidden h-64\">\n            <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/1108572\/pexels-photo-1108572.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=800\" alt=\"\u06a9\u0627\u0631\u062e\u0627\u0646\u0647 \u0635\u0646\u0639\u062a\u06cc \u062a\u0647\u0631\u0627\u0646\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\">\n            <div class=\"absolute inset-0 bg-gradient-to-t from-brand-dark via-brand-dark\/30 to-transparent\"><\/div>\n\n            <div class=\"absolute top-4 left-4 bg-brand-orange\/90 text-white text-xs font-semibold px-3 py-1.5 rounded-full\">\n              \u0622\u0646\u200c\u06af\u0631\u06cc\u062f\n            <\/div>\n\n            <div class=\"absolute bottom-4 right-4 flex items-center gap-2 text-white\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\n              <span class=\"text-sm font-semibold\">\u062a\u0647\u0631\u0627\u0646\u060c \u0634\u0647\u0631\u06cc\u0627\u0631<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"p-6\">\n            <div class=\"flex items-start justify-between mb-3\">\n              <div>\n                <h3 class=\"text-lg font-bold text-brand-dark group-hover:text-brand-green transition-colors\">\u06a9\u0627\u0631\u062e\u0627\u0646\u0647 \u062a\u0648\u0644\u06cc\u062f\u06cc \u0635\u0646\u0639\u062a\u06cc<\/h3>\n                <p class=\"text-sm text-brand-gray\">\u06a9\u0627\u0647\u0634 \u0647\u0632\u06cc\u0646\u0647 \u0628\u0631\u0642 \u0635\u0646\u0639\u062a\u06cc<\/p>\n              <\/div>\n              <div class=\"flex-shrink-0 flex gap-0.5\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n              <\/div>\n            <\/div>\n\n            <div class=\"grid grid-cols-3 gap-3 mb-4\">\n              <div class=\"bg-brand-green-50 rounded-xl p-3 text-center\">\n                <div class=\"text-brand-green font-bold text-lg\">\u06f1\u06f5\u06f0<\/div>\n                <div class=\"text-xs text-brand-gray\">\u06a9\u06cc\u0644\u0648\u0648\u0627\u062a<\/div>\n              <\/div>\n              <div class=\"bg-brand-orange-50 rounded-xl p-3 text-center\">\n                <div class=\"text-brand-orange font-bold text-lg\">\u06f6\u06f0\u066a<\/div>\n                <div class=\"text-xs text-brand-gray\">\u06a9\u0627\u0647\u0634 \u0642\u0628\u0636<\/div>\n              <\/div>\n              <div class=\"bg-cyan-50 rounded-xl p-3 text-center\">\n                <div class=\"text-cyan-600 font-bold text-lg\">\u06f2.\u06f5<\/div>\n                <div class=\"text-xs text-brand-gray\">\u0633\u0627\u0644 \u0628\u0627\u0632\u06af\u0634\u062a<\/div>\n              <\/div>\n            <\/div>\n\n            <p class=\"text-sm text-brand-gray line-clamp-2 mb-4\">\n              \u06a9\u0627\u0647\u0634 \u06f6\u06f0 \u062f\u0631\u0635\u062f\u06cc \u0642\u0628\u0636 \u0628\u0631\u0642 \u0635\u0646\u0639\u062a\u06cc \u0628\u0627 \u0633\u06cc\u0633\u062a\u0645 \u0622\u0646\u200c\u06af\u0631\u06cc\u062f. \u0628\u0627\u0632\u06af\u0634\u062a \u0633\u0631\u0645\u0627\u06cc\u0647 \u062f\u0631 \u06f2.\u06f5 \u0633\u0627\u0644 \u0648 \u062a\u0648\u0644\u06cc\u062f \u06f2\u06f4\u06f0 \u0645\u06af\u0627\u0648\u0627\u062a\u200c\u0633\u0627\u0639\u062a \u062f\u0631 \u0633\u0627\u0644.\n            <\/p>\n\n            <div class=\"flex items-center gap-4 text-xs mb-4\">\n              <div class=\"flex items-center gap-1.5 text-brand-green\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n                <span class=\"font-semibold\">\u06a9\u0627\u0647\u0634 \u06f6\u06f0\u066a \u0642\u0628\u0636<\/span>\n              <\/div>\n              <div class=\"flex items-center gap-1.5 text-brand-orange\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"><\/path><\/svg>\n                <span class=\"font-semibold\">\u0635\u0631\u0641\u0647\u200c\u062c\u0648\u06cc\u06cc \u0633\u0627\u0644\u0627\u0646\u0647<\/span>\n              <\/div>\n            <\/div>\n\n            <button class=\"w-full flex items-center justify-center gap-2 py-3 bg-brand-dark text-white font-semibold rounded-xl hover:bg-brand-green transition-all duration-200\">\n              <span>\u0645\u0634\u0627\u0647\u062f\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647<\/span>\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n            <\/button>\n          <\/div>\n        <\/div>\n\n        <!-- Project Card 4 -->\n        <div class=\"bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden hover-lift group cursor-pointer\" onclick=\"openProjectModal(4)\">\n          <div class=\"relative overflow-hidden h-64\">\n            <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/356036\/pexels-photo-356036.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=800\" alt=\"\u0646\u062e\u0644\u0633\u062a\u0627\u0646 \u062e\u0648\u0632\u0633\u062a\u0627\u0646\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\">\n            <div class=\"absolute inset-0 bg-gradient-to-t from-brand-dark via-brand-dark\/30 to-transparent\"><\/div>\n\n            <div class=\"absolute top-4 left-4 bg-brand-green\/90 text-white text-xs font-semibold px-3 py-1.5 rounded-full\">\n              \u0622\u0641\u200c\u06af\u0631\u06cc\u062f\n            <\/div>\n\n            <div class=\"absolute bottom-4 right-4 flex items-center gap-2 text-white\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\n              <span class=\"text-sm font-semibold\">\u062e\u0648\u0632\u0633\u062a\u0627\u0646\u060c \u0627\u0628\u0648\u0645\u0648\u0633\u06cc<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"p-6\">\n            <div class=\"flex items-start justify-between mb-3\">\n              <div>\n                <h3 class=\"text-lg font-bold text-brand-dark group-hover:text-brand-green transition-colors\">\u0646\u062e\u0644\u0633\u062a\u0627\u0646 \u06f3\u06f0 \u0647\u06a9\u062a\u0627\u0631\u06cc<\/h3>\n                <p class=\"text-sm text-brand-gray\">\u0622\u0628\u06cc\u0627\u0631\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u062e\u0631\u0645\u0627<\/p>\n              <\/div>\n              <div class=\"flex-shrink-0 flex gap-0.5\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n              <\/div>\n            <\/div>\n\n            <div class=\"grid grid-cols-3 gap-3 mb-4\">\n              <div class=\"bg-brand-green-50 rounded-xl p-3 text-center\">\n                <div class=\"text-brand-green font-bold text-lg\">\u06f2\u06f5<\/div>\n                <div class=\"text-xs text-brand-gray\">\u06a9\u06cc\u0644\u0648\u0648\u0627\u062a<\/div>\n              <\/div>\n              <div class=\"bg-brand-orange-50 rounded-xl p-3 text-center\">\n                <div class=\"text-brand-orange font-bold text-lg\">\u06f3\u06f0<\/div>\n                <div class=\"text-xs text-brand-gray\">\u0647\u06a9\u062a\u0627\u0631<\/div>\n              <\/div>\n              <div class=\"bg-yellow-50 rounded-xl p-3 text-center\">\n                <div class=\"text-yellow-600 font-bold text-lg\">\u06f3\u06f2\u06f0\u06f0<\/div>\n                <div class=\"text-xs text-brand-gray\">\u062f\u0631\u062e\u062a \u062e\u0631\u0645\u0627<\/div>\n              <\/div>\n            <\/div>\n\n            <p class=\"text-sm text-brand-gray line-clamp-2 mb-4\">\n              \u0633\u06cc\u0633\u062a\u0645 \u0622\u0628\u06cc\u0627\u0631\u06cc \u06a9\u0627\u0645\u0644 \u0628\u0631\u0627\u06cc \u0646\u062e\u0644\u0633\u062a\u0627\u0646 \u0628\u062f\u0648\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0634\u0628\u06a9\u0647 \u0628\u0631\u0642. \u0622\u0628\u062f\u0647\u06cc \u06f2\u06f4 \u0633\u0627\u0639\u062a\u0647 \u0648 \u0627\u0641\u0632\u0627\u06cc\u0634 \u06f4\u06f0\u066a \u0645\u062d\u0635\u0648\u0644.\n            <\/p>\n\n            <div class=\"flex items-center gap-4 text-xs mb-4\">\n              <div class=\"flex items-center gap-1.5 text-brand-green\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n                <span class=\"font-semibold\">\u0645\u062d\u0635\u0648\u0644 +\u06f4\u06f0\u066a<\/span>\n              <\/div>\n              <div class=\"flex items-center gap-1.5 text-brand-orange\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"><\/path><\/svg>\n                <span class=\"font-semibold\">\u0622\u0628\u062f\u0647\u06cc \u06f2\u06f4 \u0633\u0627\u0639\u062a\u0647<\/span>\n              <\/div>\n            <\/div>\n\n            <button class=\"w-full flex items-center justify-center gap-2 py-3 bg-brand-dark text-white font-semibold rounded-xl hover:bg-brand-green transition-all duration-200\">\n              <span>\u0645\u0634\u0627\u0647\u062f\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647<\/span>\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n            <\/button>\n          <\/div>\n        <\/div>\n\n        <!-- Project Card 5 -->\n        <div class=\"bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden hover-lift group cursor-pointer\" onclick=\"openProjectModal(5)\">\n          <div class=\"relative overflow-hidden h-64\">\n            <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/323780\/pexels-photo-323780.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=800\" alt=\"\u0648\u06cc\u0644\u0627\u06cc \u0634\u0645\u0627\u0644\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\">\n            <div class=\"absolute inset-0 bg-gradient-to-t from-brand-dark via-brand-dark\/30 to-transparent\"><\/div>\n\n            <div class=\"absolute top-4 left-4 bg-purple-600\/90 text-white text-xs font-semibold px-3 py-1.5 rounded-full\">\n              \u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc\n            <\/div>\n\n            <div class=\"absolute bottom-4 right-4 flex items-center gap-2 text-white\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\n              <span class=\"text-sm font-semibold\">\u0645\u0627\u0632\u0646\u062f\u0631\u0627\u0646\u060c \u0646\u0648\u0634\u0647\u0631<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"p-6\">\n            <div class=\"flex items-start justify-between mb-3\">\n              <div>\n                <h3 class=\"text-lg font-bold text-brand-dark group-hover:text-brand-green transition-colors\">\u0648\u06cc\u0644\u0627\u06cc \u0645\u0633\u06a9\u0648\u0646\u06cc \u06f6\u06f0\u06f0 \u0645\u062a\u0631\u06cc<\/h3>\n                <p class=\"text-sm text-brand-gray\">\u0628\u0631\u0642 \u0627\u0636\u0637\u0631\u0627\u0631\u06cc \u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc<\/p>\n              <\/div>\n              <div class=\"flex-shrink-0 flex gap-0.5\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n              <\/div>\n            <\/div>\n\n            <div class=\"grid grid-cols-3 gap-3 mb-4\">\n              <div class=\"bg-brand-green-50 rounded-xl p-3 text-center\">\n                <div class=\"text-brand-green font-bold text-lg\">\u06f1\u06f0<\/div>\n                <div class=\"text-xs text-brand-gray\">\u06a9\u06cc\u0644\u0648\u0648\u0627\u062a<\/div>\n              <\/div>\n              <div class=\"bg-brand-orange-50 rounded-xl p-3 text-center\">\n                <div class=\"text-brand-orange font-bold text-lg\">\u06f2\u06f0<\/div>\n                <div class=\"text-xs text-brand-gray\">\u06a9\u06cc\u0644\u0648\u0648\u0627\u062a\u200c\u0633\u0627\u0639\u062a \u0628\u0627\u062a\u0631\u06cc<\/div>\n              <\/div>\n              <div class=\"bg-purple-50 rounded-xl p-3 text-center\">\n                <div class=\"text-purple-600 font-bold text-lg\">\u06f8<\/div>\n                <div class=\"text-xs text-brand-gray\">\u0633\u0627\u0639\u062a \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc<\/div>\n              <\/div>\n            <\/div>\n\n            <p class=\"text-sm text-brand-gray line-clamp-2 mb-4\">\n              \u0633\u06cc\u0633\u062a\u0645 \u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc \u06a9\u0627\u0645\u0644 \u0628\u0627 \u0628\u0627\u062a\u0631\u06cc \u0644\u06cc\u062a\u06cc\u0648\u0645 \u0628\u0631\u0627\u06cc \u0648\u06cc\u0644\u0627. \u062a\u0623\u0645\u06cc\u0646 \u0628\u0631\u0642 \u0628\u062f\u0648\u0646 \u0642\u0637\u0639\u06cc \u062f\u0631 \u0645\u0646\u0627\u0637\u0642 \u0628\u0627 \u0646\u0648\u0633\u0627\u0646 \u0628\u0631\u0642 \u0645\u06a9\u0631\u0631.\n            <\/p>\n\n            <div class=\"flex items-center gap-4 text-xs mb-4\">\n              <div class=\"flex items-center gap-1.5 text-brand-green\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n                <span class=\"font-semibold\">\u0628\u062f\u0648\u0646 \u0642\u0637\u0639\u06cc<\/span>\n              <\/div>\n              <div class=\"flex items-center gap-1.5 text-brand-orange\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect width=\"18\" height=\"10\" x=\"3\" y=\"11\" rx=\"2\"><\/rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path><\/svg>\n                <span class=\"font-semibold\">\u0628\u0627\u062a\u0631\u06cc \u0644\u06cc\u062a\u06cc\u0648\u0645<\/span>\n              <\/div>\n            <\/div>\n\n            <button class=\"w-full flex items-center justify-center gap-2 py-3 bg-brand-dark text-white font-semibold rounded-xl hover:bg-brand-green transition-all duration-200\">\n              <span>\u0645\u0634\u0627\u0647\u062f\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647<\/span>\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n            <\/button>\n          <\/div>\n        <\/div>\n\n        <!-- Project Card 6 -->\n        <div class=\"bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden hover-lift group cursor-pointer\" onclick=\"openProjectModal(6)\">\n          <div class=\"relative overflow-hidden h-64\">\n            <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/280221\/pexels-photo-280221.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=800\" alt=\"\u0645\u062c\u062a\u0645\u0639 \u062a\u062c\u0627\u0631\u06cc\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\">\n            <div class=\"absolute inset-0 bg-gradient-to-t from-brand-dark via-brand-dark\/30 to-transparent\"><\/div>\n\n            <div class=\"absolute top-4 left-4 bg-rose-600\/90 text-white text-xs font-semibold px-3 py-1.5 rounded-full\">\n              \u0622\u0646\u200c\u06af\u0631\u06cc\u062f\n            <\/div>\n\n            <div class=\"absolute bottom-4 right-4 flex items-center gap-2 text-white\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\n              <span class=\"text-sm font-semibold\">\u062a\u0647\u0631\u0627\u0646\u060c \u063a\u0631\u0628<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"p-6\">\n            <div class=\"flex items-start justify-between mb-3\">\n              <div>\n                <h3 class=\"text-lg font-bold text-brand-dark group-hover:text-brand-green transition-colors\">\u0645\u062c\u062a\u0645\u0639 \u062a\u062c\u0627\u0631\u06cc \u06f5 \u0637\u0628\u0642\u0647<\/h3>\n                <p class=\"text-sm text-brand-gray\">\u06a9\u0627\u0647\u0634 \u0647\u0632\u06cc\u0646\u0647 \u0631\u0648\u0634\u0646\u0627\u06cc\u06cc \u0648 \u062a\u0647\u0648\u06cc\u0647<\/p>\n              <\/div>\n              <div class=\"flex-shrink-0 flex gap-0.5\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-gray-300\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n              <\/div>\n            <\/div>\n\n            <div class=\"grid grid-cols-3 gap-3 mb-4\">\n              <div class=\"bg-brand-green-50 rounded-xl p-3 text-center\">\n                <div class=\"text-brand-green font-bold text-lg\">\u06f4\u06f5<\/div>\n                <div class=\"text-xs text-brand-gray\">\u06a9\u06cc\u0644\u0648\u0648\u0627\u062a<\/div>\n              <\/div>\n              <div class=\"bg-brand-orange-50 rounded-xl p-3 text-center\">\n                <div class=\"text-brand-orange font-bold text-lg\">\u06f3\u06f6\u06f0\u06f0<\/div>\n                <div class=\"text-xs text-brand-gray\">\u0645\u062a\u0631\u0645\u0631\u0628\u0639<\/div>\n              <\/div>\n              <div class=\"bg-rose-50 rounded-xl p-3 text-center\">\n                <div class=\"text-rose-600 font-bold text-lg\">\u06f5\u06f5\u066a<\/div>\n                <div class=\"text-xs text-brand-gray\">\u06a9\u0627\u0647\u0634 \u0642\u0628\u0636<\/div>\n              <\/div>\n            <\/div>\n\n            <p class=\"text-sm text-brand-gray line-clamp-2 mb-4\">\n              \u0646\u0635\u0628 \u067e\u0646\u0644 \u0631\u0648\u06cc \u0633\u0642\u0641 \u0645\u062c\u062a\u0645\u0639 \u062a\u062c\u0627\u0631\u06cc \u0628\u0627 \u0633\u06cc\u0633\u062a\u0645 \u0645\u0627\u0646\u06cc\u062a\u0648\u0631\u06cc\u0646\u06af \u0647\u0648\u0634\u0645\u0646\u062f \u06a9\u0627\u0647\u0634 \u06f5\u06f5 \u062f\u0631\u0635\u062f\u06cc \u0647\u0632\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u062c\u0627\u0631\u06cc.\n            <\/p>\n\n            <div class=\"flex items-center gap-4 text-xs mb-4\">\n              <div class=\"flex items-center gap-1.5 text-brand-green\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n                <span class=\"font-semibold\">\u06a9\u0627\u0647\u0634 \u06f5\u06f5\u066a \u0647\u0632\u06cc\u0646\u0647<\/span>\n              <\/div>\n              <div class=\"flex items-center gap-1.5 text-brand-orange\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect width=\"20\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\"><\/rect><path d=\"M12 12h.01\"><\/path><path d=\"M17 12h.01\"><\/path><path d=\"M7 12h.01\"><\/path><\/svg>\n                <span class=\"font-semibold\">\u0645\u0627\u0646\u06cc\u062a\u0648\u0631\u06cc\u0646\u06af \u0647\u0648\u0634\u0645\u0646\u062f<\/span>\n              <\/div>\n            <\/div>\n\n            <button class=\"w-full flex items-center justify-center gap-2 py-3 bg-brand-dark text-white font-semibold rounded-xl hover:bg-brand-green transition-all duration-200\">\n              <span>\u0645\u0634\u0627\u0647\u062f\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647<\/span>\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n            <\/button>\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n      <!-- Load More -->\n      <div class=\"text-center mt-12\">\n        <button class=\"border-2 border-brand-green text-brand-green font-semibold px-8 py-3 rounded-xl hover:bg-brand-green hover:text-white transition-all duration-200 inline-flex items-center gap-2\">\n          \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 5v14\"><\/path><path d=\"m19 12-7 7-7-7\"><\/path><\/svg>\n        <\/button>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Interactive Map Section -->\n  <section class=\"py-16 md:py-24 bg-brand-dark\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6\">\n      <div class=\"text-center mb-12\">\n        <p class=\"text-brand-green-light font-semibold text-sm mb-2 tracking-wide uppercase\">\u067e\u0648\u0634\u0634 \u062c\u063a\u0631\u0627\u0641\u06cc\u0627\u06cc\u06cc<\/p>\n        <h2 class=\"text-3xl md:text-4xl font-bold text-white mb-4\">\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u062f\u0631 \u0646\u0642\u0634\u0647 \u0627\u06cc\u0631\u0627\u0646<\/h2>\n        <p class=\"text-white\/60 text-lg max-w-xl mx-auto\">\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0645\u0648\u0641\u0642 \u0645\u0627 \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u0627\u06cc\u0631\u0627\u0646 - \u0631\u0648\u06cc \u0647\u0631 \u0627\u0633\u062a\u0627\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f<\/p>\n      <\/div>\n\n      <div class=\"grid lg:grid-cols-3 gap-8 items-center\">\n        <!-- Map -->\n        <div class=\"lg:col-span-2\">\n          <div class=\"bg-brand-dark-800 rounded-3xl p-8 border border-white\/10\">\n            <svg viewBox=\"0 0 800 600\" class=\"w-full h-auto\" id=\"iran-map\">\n              <!-- Simplified Iran Map -->\n              <path class=\"map-province\" id=\"province-kerman\" d=\"M580,320 Q620,280 650,320 Q680,360 650,400 Q610,440 580,400 Q550,360 580,320 Z\" data-name=\"\u06a9\u0631\u0645\u0627\u0646\" data-projects=\"28\" onclick=\"selectProvince(&#39;kerman&#39;)\"><\/path>\n              <path class=\"map-province\" id=\"province-isfahan\" d=\"M420,240 Q480,200 520,240 Q560,280 520,320 Q460,360 420,320 Q380,280 420,240 Z\" data-name=\"\u0627\u0635\u0641\u0647\u0627\u0646\" data-projects=\"35\" onclick=\"selectProvince(&#39;isfahan&#39;)\"><\/path>\n              <path class=\"map-province\" id=\"province-tehran\" d=\"M380,120 Q420,100 450,130 Q480,160 450,190 Q410,220 380,190 Q350,160 380,120 Z\" data-name=\"\u062a\u0647\u0631\u0627\u0646\" data-projects=\"42\" onclick=\"selectProvince(&#39;tehran&#39;)\"><\/path>\n              <path class=\"map-province\" id=\"province-yazd\" d=\"M520,280 Q560,260 580,290 Q600,320 580,350 Q540,380 520,350 Q500,320 520,280 Z\" data-name=\"\u06cc\u0632\u062f\" data-projects=\"18\" onclick=\"selectProvince(&#39;yazd&#39;)\"><\/path>\n              <path class=\"map-province\" id=\"province-khuzestan\" d=\"M280,400 Q340,380 360,420 Q380,460 340,480 Q280,500 260,460 Q240,420 280,400 Z\" data-name=\"\u062e\u0648\u0632\u0633\u062a\u0627\u0646\" data-projects=\"22\" onclick=\"selectProvince(&#39;khuzestan&#39;)\"><\/path>\n              <path class=\"map-province\" id=\"province-fars\" d=\"M360,380 Q420,360 450,400 Q480,440 450,480 Q400,520 360,480 Q320,440 360,380 Z\" data-name=\"\u0641\u0627\u0631\u0633\" data-projects=\"25\" onclick=\"selectProvince(&#39;fars&#39;)\"><\/path>\n              <path class=\"map-province\" id=\"province-khorasan\" d=\"M680,180 Q750,160 780,200 Q810,240 780,280 Q720,320 680,280 Q640,240 680,180 Z\" data-name=\"\u062e\u0631\u0627\u0633\u0627\u0646\" data-projects=\"20\" onclick=\"selectProvince(&#39;khorasan&#39;)\"><\/path>\n              <path class=\"map-province\" id=\"province-mazandaran\" d=\"M400,60 Q480,50 520,80 Q560,110 520,130 Q460,150 400,130 Q360,110 400,60 Z\" data-name=\"\u0645\u0627\u0632\u0646\u062f\u0631\u0627\u0646\" data-projects=\"15\" onclick=\"selectProvince(&#39;mazandaran&#39;)\"><\/path>\n              <path class=\"map-province\" id=\"province-hormozgan\" d=\"M480,480 Q550,460 580,500 Q610,540 580,570 Q520,600 480,570 Q450,540 480,480 Z\" data-name=\"\u0647\u0631\u0645\u0632\u06af\u0627\u0646\" data-projects=\"12\" onclick=\"selectProvince(&#39;hormozgan&#39;)\"><\/path>\n              <path class=\"map-province\" id=\"province-sistan\" d=\"M680,380 Q740,360 770,400 Q800,440 770,480 Q710,520 680,480 Q650,440 680,380 Z\" data-name=\"\u0633\u06cc\u0633\u062a\u0627\u0646\" data-projects=\"8\" onclick=\"selectProvince(&#39;sistan&#39;)\"><\/path>\n\n              <!-- Project Markers -->\n              <g class=\"map-marker\">\n                <circle cx=\"610\" cy=\"350\" r=\"8\" fill=\"#F5C400\"><\/circle>\n                <circle cx=\"610\" cy=\"350\" r=\"12\" fill=\"none\" stroke=\"#F5C400\" stroke-width=\"2\" opacity=\"0.5\"><\/circle>\n              <\/g>\n              <g class=\"map-marker\">\n                <circle cx=\"470\" cy=\"270\" r=\"8\" fill=\"#F5C400\"><\/circle>\n                <circle cx=\"470\" cy=\"270\" r=\"12\" fill=\"none\" stroke=\"#F5C400\" stroke-width=\"2\" opacity=\"0.5\"><\/circle>\n              <\/g>\n              <g class=\"map-marker\">\n                <circle cx=\"420\" cy=\"150\" r=\"8\" fill=\"#F5C400\"><\/circle>\n                <circle cx=\"420\" cy=\"150\" r=\"12\" fill=\"none\" stroke=\"#F5C400\" stroke-width=\"2\" opacity=\"0.5\"><\/circle>\n              <\/g>\n              <g class=\"map-marker\">\n                <circle cx=\"300\" cy=\"440\" r=\"6\" fill=\"#10B981\"><\/circle>\n                <circle cx=\"300\" cy=\"440\" r=\"10\" fill=\"none\" stroke=\"#10B981\" stroke-width=\"2\" opacity=\"0.5\"><\/circle>\n              <\/g>\n              <g class=\"map-marker\">\n                <circle cx=\"550\" cy=\"300\" r=\"6\" fill=\"#10B981\"><\/circle>\n                <circle cx=\"550\" cy=\"300\" r=\"10\" fill=\"none\" stroke=\"#10B981\" stroke-width=\"2\" opacity=\"0.5\"><\/circle>\n              <\/g>\n            <\/svg>\n          <\/div>\n        <\/div>\n\n        <!-- Province Info Panel -->\n        <div class=\"lg:col-span-1\">\n          <div id=\"province-info\" class=\"bg-brand-dark-800 rounded-3xl p-8 border border-white\/10\">\n            <div class=\"text-center text-white\/50\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" class=\"mx-auto mb-4 opacity-50\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\n              <p class=\"text-sm\">\u0631\u0648\u06cc \u06cc\u06a9 \u0627\u0633\u062a\u0627\u0646 \u062f\u0631 \u0646\u0642\u0634\u0647 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f<\/p>\n              <p class=\"text-xs mt-2 opacity-60\">\u062a\u0627 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u0631\u0627 \u0634\u062f\u0647 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f<\/p>\n            <\/div>\n          <\/div>\n\n          <!-- Quick Stats -->\n          <div class=\"mt-6 grid grid-cols-2 gap-4\">\n            <div class=\"bg-brand-green\/20 border border-brand-green\/30 rounded-2xl p-4 text-center\">\n              <div class=\"text-2xl font-bold text-brand-green-light\">\u06f2\u06f8<\/div>\n              <div class=\"text-white\/60 text-xs\">\u0627\u0633\u062a\u0627\u0646 \u0641\u0639\u0627\u0644<\/div>\n            <\/div>\n            <div class=\"bg-brand-yellow\/20 border border-brand-yellow\/30 rounded-2xl p-4 text-center\">\n              <div class=\"text-2xl font-bold text-brand-yellow\">\u06f1\u06f5\u06f8<\/div>\n              <div class=\"text-white\/60 text-xs\">\u067e\u0631\u0648\u0698\u0647 \u0645\u0648\u0641\u0642<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Customer Testimonials -->\n  <section class=\"py-16 md:py-24 bg-brand-gray-light\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6\">\n      <div class=\"text-center mb-12\">\n        <p class=\"text-brand-green font-semibold text-sm mb-2 tracking-wide uppercase\">\u0646\u0638\u0631\u0627\u062a \u0645\u0634\u062a\u0631\u06cc\u0627\u0646<\/p>\n        <h2 class=\"text-3xl md:text-4xl font-bold text-brand-dark mb-4\">\u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0645\u0627 \u0686\u0647 \u0645\u06cc\u200c\u06af\u0648\u06cc\u0646\u062f<\/h2>\n        <p class=\"text-brand-gray text-lg max-w-xl mx-auto\">\u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u0648\u0627\u0642\u0639\u06cc \u0635\u0627\u062d\u0628\u0627\u0646 \u067e\u0631\u0648\u0698\u0647 \u0628\u0627 \u062a\u0627\u0628\u0627\u0698\u0648\u0644<\/p>\n      <\/div>\n\n      <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n        <!-- Testimonial 1 -->\n        <div class=\"bg-white rounded-3xl shadow-sm border border-gray-100 p-8 hover-lift\">\n          <div class=\"flex items-center gap-1 mb-4\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n          <\/div>\n\n          <blockquote class=\"text-brand-gray leading-relaxed mb-6\">\n            \u00ab\u0628\u0627 \u0646\u0635\u0628 \u0633\u06cc\u0633\u062a\u0645 \u062a\u0627\u0628\u0627\u0698\u0648\u0644\u060c \u062f\u06cc\u06af\u0631 \u0646\u06af\u0631\u0627\u0646 \u0642\u0637\u0639\u06cc \u0628\u0631\u0642 \u0648 \u0647\u0632\u06cc\u0646\u0647 \u06af\u0627\u0632\u0648\u0626\u06cc\u0644 \u0646\u06cc\u0633\u062a\u0645. \u067e\u0645\u067e \u06f2\u06f4 \u0633\u0627\u0639\u062a\u0647 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0628\u0627\u063a \u0647\u0645\u06cc\u0634\u0647 \u0622\u0628\u06cc\u0627\u0631\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f.\u00bb\n          <\/blockquote>\n\n          <div class=\"flex items-center gap-4\">\n            <div class=\"w-12 h-12 rounded-full bg-brand-green flex items-center justify-center text-white font-bold\">\u0627.\u062d<\/div>\n            <div>\n              <div class=\"font-bold text-brand-dark\">\u0622\u0642\u0627\u06cc \u062d\u0633\u06cc\u0646\u06cc<\/div>\n              <div class=\"text-sm text-brand-gray\">\u0628\u0627\u063a\u062f\u0627\u0631 \u067e\u0633\u062a\u0647 - \u06a9\u0631\u0645\u0627\u0646<\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-brand-gray\">\n            <span class=\"bg-brand-green-50 text-brand-green px-3 py-1 rounded-full\">\u0622\u0628\u06cc\u0627\u0631\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/span>\n            <span>\u06f3\u06f0 \u06a9\u06cc\u0644\u0648\u0648\u0627\u062a<\/span>\n          <\/div>\n        <\/div>\n\n        <!-- Testimonial 2 -->\n        <div class=\"bg-white rounded-3xl shadow-sm border border-gray-100 p-8 hover-lift\">\n          <div class=\"flex items-center gap-1 mb-4\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n          <\/div>\n\n          <blockquote class=\"text-brand-gray leading-relaxed mb-6\">\n            \u00ab\u0628\u0627\u0632\u062f\u0647\u06cc \u06af\u0644\u062e\u0627\u0646\u0647 \u0645\u0627 \u06f3\u06f5 \u062f\u0631\u0635\u062f \u0627\u0641\u0632\u0627\u06cc\u0634 \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f. \u0633\u06cc\u0633\u062a\u0645 \u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc \u062a\u0627\u0628\u0627\u0698\u0648\u0644 \u0648\u0627\u0642\u0639\u0627\u064b \u06a9\u0627\u0631\u0622\u0645\u062f \u0627\u0633\u062a \u0648 \u062a\u06cc\u0645 \u0641\u0646\u06cc\u200c\u0634\u0627\u0646 \u0639\u0627\u0644\u06cc.\u00bb\n          <\/blockquote>\n\n          <div class=\"flex items-center gap-4\">\n            <div class=\"w-12 h-12 rounded-full bg-brand-blue flex items-center justify-center text-white font-bold\">\u0634.\u0633.\u0627<\/div>\n            <div>\n              <div class=\"font-bold text-brand-dark\">\u0634\u0631\u06a9\u062a \u06a9\u0634\u0627\u0648\u0631\u0632\u06cc \u0633\u0628\u0632 \u0627\u0635\u0641\u0647\u0627\u0646<\/div>\n              <div class=\"text-sm text-brand-gray\">\u0645\u062f\u06cc\u0631 \u06af\u0644\u062e\u0627\u0646\u0647 \u0635\u0646\u0639\u062a\u06cc<\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-brand-gray\">\n            <span class=\"bg-blue-50 text-blue-600 px-3 py-1 rounded-full\">\u0633\u06cc\u0633\u062a\u0645 \u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc<\/span>\n            <span>\u06f8\u06f0 \u06a9\u06cc\u0644\u0648\u0648\u0627\u062a<\/span>\n          <\/div>\n        <\/div>\n\n        <!-- Testimonial 3 -->\n        <div class=\"bg-white rounded-3xl shadow-sm border border-gray-100 p-8 hover-lift\">\n          <div class=\"flex items-center gap-1 mb-4\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-yellow\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n          <\/div>\n\n          <blockquote class=\"text-brand-gray leading-relaxed mb-6\">\n            \u00ab\u0628\u0647\u062a\u0631\u06cc\u0646 \u0633\u0631\u0645\u0627\u06cc\u0647\u200c\u06af\u0630\u0627\u0631\u06cc \u0635\u0646\u0639\u062a\u06cc \u0645\u0627 \u062f\u0631 \u06f1\u06f0 \u0633\u0627\u0644 \u06af\u0630\u0634\u062a\u0647 \u0628\u0648\u062f. \u0642\u0628\u0636 \u0628\u0631\u0642 \u06f6\u06f0 \u062f\u0631\u0635\u062f \u06a9\u0627\u0647\u0634 \u06cc\u0627\u0641\u062a\u0647 \u0648 \u0633\u06cc\u0633\u062a\u0645 \u062f\u0631 \u06f2.\u06f5 \u0633\u0627\u0644 \u0628\u0627\u0632\u06af\u0634\u062a \u0633\u0631\u0645\u0627\u06cc\u0647 \u062f\u0627\u0634\u062a.\u00bb\n          <\/blockquote>\n\n          <div class=\"flex items-center gap-4\">\n            <div class=\"w-12 h-12 rounded-full bg-brand-orange flex items-center justify-center text-white font-bold\">\u0645.\u0639<\/div>\n            <div>\n              <div class=\"font-bold text-brand-dark\">\u0645\u062f\u06cc\u0631\u0639\u0627\u0645\u0644 \u0635\u0646\u0627\u06cc\u0639 \u067e\u06cc\u0634\u0631\u0648<\/div>\n              <div class=\"text-sm text-brand-gray\">\u06a9\u0627\u0631\u062e\u0627\u0646\u0647 \u062a\u0648\u0644\u06cc\u062f\u06cc - \u062a\u0647\u0631\u0627\u0646<\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-brand-gray\">\n            <span class=\"bg-orange-50 text-brand-orange px-3 py-1 rounded-full\">\u0622\u0646\u200c\u06af\u0631\u06cc\u062f \u0635\u0646\u0639\u062a\u06cc<\/span>\n            <span>\u06f1\u06f5\u06f0 \u06a9\u06cc\u0644\u0648\u0648\u0627\u062a<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Engineering Process Timeline -->\n  <section class=\"py-16 md:py-24 bg-white\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6\">\n      <div class=\"text-center mb-12\">\n        <p class=\"text-brand-green font-semibold text-sm mb-2 tracking-wide uppercase\">\u0641\u0631\u0622\u06cc\u0646\u062f \u0645\u0647\u0646\u062f\u0633\u06cc<\/p>\n        <h2 class=\"text-3xl md:text-4xl font-bold text-brand-dark mb-4\">\u0645\u0631\u0627\u062d\u0644 \u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647<\/h2>\n        <p class=\"text-brand-gray text-lg max-w-xl mx-auto\">\u0627\u0632 \u0628\u0627\u0632\u062f\u06cc\u062f \u0627\u0648\u0644\u06cc\u0647 \u062a\u0627 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u067e\u0633 \u0627\u0632 \u0641\u0631\u0648\u0634<\/p>\n      <\/div>\n\n      <div class=\"relative\">\n        <!-- Timeline Line (Desktop) -->\n        <div class=\"hidden lg:block absolute top-24 right-1\/2 translate-x-1\/2 w-3\/4 h-1 timeline-line rounded-full\"><\/div>\n\n        <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-8\">\n          <!-- Step 1 -->\n          <div class=\"relative text-center\">\n            <div class=\"w-16 h-16 rounded-full bg-brand-green text-white flex items-center justify-center mx-auto mb-4 relative z-10 shadow-lg\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path><polyline points=\"14 2 14 8 20 8\"><\/polyline><line x1=\"16\" x2=\"8\" y1=\"13\" y2=\"13\"><\/line><line x1=\"16\" x2=\"8\" y1=\"17\" y2=\"17\"><\/line><polyline points=\"10 9 9 9 8 9\"><\/polyline><\/svg>\n            <\/div>\n            <div class=\"bg-brand-green-50 rounded-2xl p-6 hover-lift\">\n              <h3 class=\"font-bold text-brand-dark mb-2\">\u06f1. \u0628\u0627\u0632\u062f\u06cc\u062f \u0648 \u0627\u0631\u0632\u06cc\u0627\u0628\u06cc<\/h3>\n              <p class=\"text-sm text-brand-gray\">\u0628\u0627\u0632\u062f\u06cc\u062f \u0631\u0627\u06cc\u06af\u0627\u0646 \u0633\u0627\u06cc\u062a\u060c \u0627\u0631\u0632\u06cc\u0627\u0628\u06cc \u0646\u06cc\u0627\u0632\u0647\u0627 \u0648 \u0627\u0645\u06a9\u0627\u0646\u200c\u0633\u0646\u062c\u06cc \u0641\u0646\u06cc<\/p>\n              <div class=\"mt-3 text-xs text-brand-green font-semibold\">\u06f1-\u06f2 \u0631\u0648\u0632 \u06a9\u0627\u0631\u06cc<\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Step 2 -->\n          <div class=\"relative text-center\">\n            <div class=\"w-16 h-16 rounded-full bg-brand-green text-white flex items-center justify-center mx-auto mb-4 relative z-10 shadow-lg\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 20h9\"><\/path><path d=\"M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z\"><\/path><\/svg>\n            <\/div>\n            <div class=\"bg-gray-50 rounded-2xl p-6 hover-lift\">\n              <h3 class=\"font-bold text-brand-dark mb-2\">\u06f2. \u0637\u0631\u0627\u062d\u06cc \u0648 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f<\/h3>\n              <p class=\"text-sm text-brand-gray\">\u0637\u0631\u0627\u062d\u06cc \u0633\u06cc\u0633\u062a\u0645\u060c \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u0641\u0646\u06cc \u0648 \u0627\u0631\u0627\u0626\u0647 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0642\u06cc\u0645\u062a<\/p>\n              <div class=\"mt-3 text-xs text-brand-gray font-semibold\">\u06f2-\u06f5 \u0631\u0648\u0632 \u06a9\u0627\u0631\u06cc<\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Step 3 -->\n          <div class=\"relative text-center\">\n            <div class=\"w-16 h-16 rounded-full bg-brand-yellow text-brand-dark flex items-center justify-center mx-auto mb-4 relative z-10 shadow-lg\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z\"><\/path><path d=\"M17 18h1\"><\/path><path d=\"M12 18h1\"><\/path><path d=\"M7 18h1\"><\/path><\/svg>\n            <\/div>\n            <div class=\"bg-brand-yellow-50 rounded-2xl p-6 hover-lift\">\n              <h3 class=\"font-bold text-brand-dark mb-2\">\u06f3. \u0646\u0635\u0628 \u0648 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc<\/h3>\n              <p class=\"text-sm text-brand-gray\">\u0646\u0635\u0628 \u062a\u062c\u0647\u06cc\u0632\u0627\u062a\u060c \u0633\u06cc\u0645\u200c\u06a9\u0634\u06cc \u0648 \u062a\u0633\u062a \u0633\u06cc\u0633\u062a\u0645 \u0628\u0647 \u0635\u0648\u0631\u062a \u06a9\u0627\u0645\u0644<\/p>\n              <div class=\"mt-3 text-xs text-brand-yellow-dark font-semibold\">\u06f3-\u06f1\u06f0 \u0631\u0648\u0632 \u06a9\u0627\u0631\u06cc<\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Step 4 -->\n          <div class=\"relative text-center\">\n            <div class=\"w-16 h-16 rounded-full bg-brand-green text-white flex items-center justify-center mx-auto mb-4 relative z-10 shadow-lg\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z\"><\/path><path d=\"m9 12 2 2 4-4\"><\/path><\/svg>\n            <\/div>\n            <div class=\"bg-brand-green-50 rounded-2xl p-6 hover-lift\">\n              <h3 class=\"font-bold text-brand-dark mb-2\">\u06f4. \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0648 \u06af\u0627\u0631\u0627\u0646\u062a\u06cc<\/h3>\n              <p class=\"text-sm text-brand-gray\">\u0622\u0645\u0648\u0632\u0634\u060c \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc\u060c \u06af\u0627\u0631\u0627\u0646\u062a\u06cc \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u06f2\u06f4\/\u06f7<\/p>\n              <div class=\"mt-3 text-xs text-brand-green font-semibold\">\u0645\u0627\u062f\u0627\u0645\u200c\u0627\u0644\u0639\u0645\u0631<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Trust Section -->\n  <section class=\"py-16 md:py-24 bg-brand-gray-light\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6\">\n      <div class=\"text-center mb-12\">\n        <p class=\"text-brand-green font-semibold text-sm mb-2 tracking-wide uppercase\">\u0686\u0631\u0627 \u062a\u0627\u0628\u0627\u0698\u0648\u0644\u061f<\/p>\n        <h2 class=\"text-3xl md:text-4xl font-bold text-brand-dark mb-4\">\u062a\u0636\u0645\u06cc\u0646 \u06a9\u06cc\u0641\u06cc\u062a \u0648 \u0627\u0639\u062a\u0645\u0627\u062f<\/h2>\n      <\/div>\n\n      <div class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-6\">\n        <!-- Trust Point 1 -->\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 p-8 hover-lift text-center\">\n          <div class=\"w-16 h-16 rounded-2xl bg-brand-green-50 flex items-center justify-center mx-auto mb-4\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" class=\"text-brand-green\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"><\/path><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"><\/path><\/svg>\n          <\/div>\n          <h3 class=\"font-bold text-brand-dark mb-2\">\u062a\u06cc\u0645 \u0645\u0647\u0646\u062f\u0633\u06cc \u0645\u062a\u062e\u0635\u0635<\/h3>\n          <p class=\"text-sm text-brand-gray\">\u0628\u06cc\u0634 \u0627\u0632 \u06f2\u06f0 \u0645\u0647\u0646\u062f\u0633 \u0645\u062a\u062e\u0635\u0635 \u0628\u0627 \u062a\u062c\u0631\u0628\u0647 \u0628\u06cc\u0634 \u0627\u0632 \u06f1\u06f2 \u0633\u0627\u0644 \u062f\u0631 \u0635\u0646\u0639\u062a \u0627\u0646\u0631\u0698\u06cc<\/p>\n        <\/div>\n\n        <!-- Trust Point 2 -->\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 p-8 hover-lift text-center\">\n          <div class=\"w-16 h-16 rounded-2xl bg-brand-yellow-50 flex items-center justify-center mx-auto mb-4\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" class=\"text-brand-yellow-dark\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10\"><\/path><path d=\"m9 12 2 2 4-4\"><\/path><\/svg>\n          <\/div>\n          <h3 class=\"font-bold text-brand-dark mb-2\">\u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u0628\u0627 \u06a9\u06cc\u0641\u06cc\u062a<\/h3>\n          <p class=\"text-sm text-brand-gray\">\u0641\u0642\u0637 \u0627\u0632 \u0628\u0631\u0646\u062f\u0647\u0627\u06cc \u0645\u0639\u062a\u0628\u0631 \u062c\u0647\u0627\u0646\u06cc \u0628\u0627 \u06af\u0627\u0631\u0627\u0646\u062a\u06cc \u0627\u0635\u0627\u0644\u062a \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f<\/p>\n        <\/div>\n\n        <!-- Trust Point 3 -->\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 p-8 hover-lift text-center\">\n          <div class=\"w-16 h-16 rounded-2xl bg-blue-50 flex items-center justify-center mx-auto mb-4\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" class=\"text-blue-600\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"><\/rect><path d=\"M3 9h18\"><\/path><path d=\"m9 21-3-3h16a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H6l3-3\"><\/path><\/svg>\n          <\/div>\n          <h3 class=\"font-bold text-brand-dark mb-2\">\u06af\u0627\u0631\u0627\u0646\u062a\u06cc \u06f5 \u062a\u0627 \u06f1\u06f0 \u0633\u0627\u0644\u0647<\/h3>\n          <p class=\"text-sm text-brand-gray\">\u06af\u0627\u0631\u0627\u0646\u062a\u06cc \u067e\u0646\u0644\u200c\u0647\u0627 \u06f2\u06f5 \u0633\u0627\u0644\u060c \u0627\u06cc\u0646\u0648\u0631\u062a\u0631 \u06f5 \u062a\u0627 \u06f1\u06f0 \u0633\u0627\u0644 \u0648 \u062e\u062f\u0645\u0627\u062a \u06f1\u06f0 \u0633\u0627\u0644<\/p>\n        <\/div>\n\n        <!-- Trust Point 4 -->\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 p-8 hover-lift text-center\">\n          <div class=\"w-16 h-16 rounded-2xl bg-purple-50 flex items-center justify-center mx-auto mb-4\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" class=\"text-purple-600\"><path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"><\/path><\/svg>\n          <\/div>\n          <h3 class=\"font-bold text-brand-dark mb-2\">\u0645\u0627\u0646\u06cc\u062a\u0648\u0631\u06cc\u0646\u06af \u0647\u0648\u0634\u0645\u0646\u062f<\/h3>\n          <p class=\"text-sm text-brand-gray\">\u0633\u06cc\u0633\u062a\u0645 \u0645\u0627\u0646\u06cc\u062a\u0648\u0631\u06cc\u0646\u06af \u0622\u0646\u0644\u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0646\u0638\u0627\u0631\u062a \u0628\u0631 \u0639\u0645\u0644\u06a9\u0631\u062f \u0633\u06cc\u0633\u062a\u0645<\/p>\n        <\/div>\n\n        <!-- Trust Point 5 -->\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 p-8 hover-lift text-center\">\n          <div class=\"w-16 h-16 rounded-2xl bg-brand-orange-50 flex items-center justify-center mx-auto mb-4\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" class=\"text-brand-orange\"><path d=\"M18 20V10\"><\/path><path d=\"M12 20V4\"><\/path><path d=\"M6 20v-6\"><\/path><\/svg>\n          <\/div>\n          <h3 class=\"font-bold text-brand-dark mb-2\">\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u067e\u0633 \u0627\u0632 \u0641\u0631\u0648\u0634<\/h3>\n          <p class=\"text-sm text-brand-gray\">\u062a\u06cc\u0645 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u06f2\u06f4\/\u06f7 \u0648 \u0633\u0631\u0648\u06cc\u0633\u200c\u0647\u0627\u06cc \u062f\u0648\u0631\u0647\u200c\u0627\u06cc \u0646\u06af\u0647\u062f\u0627\u0631\u06cc<\/p>\n        <\/div>\n\n        <!-- Trust Point 6 -->\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 p-8 hover-lift text-center\">\n          <div class=\"w-16 h-16 rounded-2xl bg-teal-50 flex items-center justify-center mx-auto mb-4\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" class=\"text-teal-600\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\n          <\/div>\n          <h3 class=\"font-bold text-brand-dark mb-2\">\u062a\u062d\u0648\u06cc\u0644 \u0628\u0647 \u0645\u0648\u0642\u0639<\/h3>\n          <p class=\"text-sm text-brand-gray\">\u062a\u0639\u0647\u062f \u0628\u0647 \u062a\u062d\u0648\u06cc\u0644 \u062f\u0631 \u0632\u0645\u0627\u0646 \u062a\u0639\u06cc\u06cc\u0646 \u0634\u062f\u0647 \u0628\u0627 \u06a9\u06cc\u0641\u06cc\u062a \u062a\u0636\u0645\u06cc\u0646 \u0634\u062f\u0647<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Final CTA -->\n  <section id=\"cta\" class=\"py-16 md:py-24 bg-gradient-green relative overflow-hidden\">\n    <!-- Background Pattern -->\n    <div class=\"absolute inset-0 opacity-10\" style=\"background-image: radial-gradient(circle at 80% 20%, rgba(245, 196, 0, 0.5) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);\"><\/div>\n\n    <div class=\"max-w-5xl mx-auto px-4 sm:px-6 relative z-10\">\n      <div class=\"text-center\">\n        <div class=\"inline-flex items-center gap-2 bg-brand-yellow\/20 border border-brand-yellow\/40 text-brand-yellow px-4 py-2 rounded-full text-sm font-semibold mb-6\">\n          <span class=\"w-2 h-2 bg-brand-yellow rounded-full animate-pulse\"><\/span>\n          \u0622\u0645\u0627\u062f\u0647 \u0634\u0631\u0648\u0639 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0647\u0633\u062a\u06cc\u062f\u061f\n        <\/div>\n\n        <h2 class=\"text-3xl md:text-5xl font-black text-white mb-6\">\n          \u0646\u06cc\u0627\u0632 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u0645\u0634\u0627\u0628\u0647 \u062f\u0627\u0631\u06cc\u062f\u061f\n          <br>\n          <span class=\"text-brand-yellow\">\u0628\u0627 \u0645\u0627 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u062f<\/span>\n        <\/h2>\n\n        <p class=\"text-white\/70 text-lg mb-10 max-w-2xl mx-auto\">\n          \u06a9\u0627\u0631\u0634\u0646\u0627\u0633\u0627\u0646 \u0645\u0627 \u0622\u0645\u0627\u062f\u0647\u200c\u0627\u0646\u062f \u062a\u0627 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0627\u0647\u06a9\u0627\u0631 \u0627\u0646\u0631\u0698\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0637\u0631\u0627\u062d\u06cc \u06a9\u0646\u0646\u062f. \u0645\u0634\u0627\u0648\u0631\u0647 \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646 \u0627\u0633\u062a.\n        <\/p>\n\n        <div class=\"flex flex-wrap justify-center gap-4 mb-10\">\n          <a href=\"tel:02100000000\" class=\"bg-brand-yellow text-brand-dark font-semibold px-8 py-4 rounded-xl hover:bg-brand-yellow-dark transition-all duration-200 shadow-lg hover:shadow-brand-yellow\/30 hover:-translate-y-0.5 flex items-center gap-2 text-lg\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"><\/path><\/svg>\n            \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646\n          <\/a>\n          <a href=\"https:\/\/wa.me\/989000000000\" class=\"bg-white\/10 border border-white\/30 text-white font-semibold px-8 py-4 rounded-xl hover:bg-white\/20 transition-all duration-200 hover:-translate-y-0.5 flex items-center gap-2 text-lg\" target=\"_blank\" rel=\"noopener\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\"><\/path><\/svg>\n            \u0648\u0627\u062a\u0633\u0627\u067e\n          <\/a>\n          <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"bg-white\/10 border border-white\/30 text-white font-semibold px-8 py-4 rounded-xl hover:bg-white\/20 transition-all duration-200 hover:-translate-y-0.5 flex items-center gap-2 text-lg\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 2v4\"><\/path><path d=\"M16 2v4\"><\/path><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\"><\/rect><path d=\"M3 10h18\"><\/path><\/svg>\n            \u0631\u0632\u0631\u0648 \u0628\u0627\u0632\u062f\u06cc\u062f\n          <\/a>\n        <\/div>\n\n        <!-- Trust Indicators -->\n        <div class=\"flex flex-wrap justify-center gap-6 text-white\/60 text-sm\">\n          <div class=\"flex items-center gap-2\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10\"><\/path><polyline points=\"9 12 11 14 15 10\"><\/polyline><\/svg>\n            \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646\n          <\/div>\n          <div class=\"flex items-center gap-2\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n            \u0628\u0627\u0632\u062f\u06cc\u062f \u0631\u0627\u06cc\u06af\u0627\u0646 \u0633\u0627\u06cc\u062a\n          <\/div>\n          <div class=\"flex items-center gap-2\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\n            \u067e\u0627\u0633\u062e\u200c\u06af\u0648\u06cc\u06cc \u0633\u0631\u06cc\u0639\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Footer -->\n  <footer class=\"bg-brand-dark text-white\">\n    \n  <\/footer>\n\n  <!-- Project Detail Modal -->\n  <div id=\"project-modal\" class=\"fixed inset-0 z-50 hidden\">\n    <div class=\"modal-backdrop absolute inset-0\" onclick=\"closeProjectModal()\"><\/div>\n    <div class=\"relative z-10 w-full h-full overflow-y-auto\">\n      <div class=\"max-w-5xl mx-auto my-8 px-4\">\n        <div class=\"bg-white rounded-3xl shadow-2xl overflow-hidden\">\n          <!-- Modal Header -->\n          <div class=\"relative h-80 overflow-hidden\">\n            <img decoding=\"async\" id=\"modal-image\" src=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html\" alt=\"\" class=\"w-full h-full object-cover\">\n            <div class=\"absolute inset-0 bg-gradient-to-t from-brand-dark via-transparent to-transparent\"><\/div>\n            <button onclick=\"closeProjectModal()\" class=\"absolute top-4 left-4 w-10 h-10 rounded-full bg-white\/20 hover:bg-white\/30 flex items-center justify-center text-white transition-all\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M18 6 6 18\"><\/path><path d=\"m6 6 12 12\"><\/path><\/svg>\n            <\/button>\n            <div class=\"absolute bottom-6 right-6 left-6\">\n              <h2 id=\"modal-title\" class=\"text-2xl md:text-3xl font-bold text-white mb-2\"><\/h2>\n              <div class=\"flex items-center gap-4 text-white\/80\">\n                <span id=\"modal-location\" class=\"flex items-center gap-2\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\n                <\/span>\n                <span id=\"modal-system-type\" class=\"bg-brand-green\/90 px-3 py-1 rounded-full text-sm\"><\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Modal Content -->\n          <div class=\"p-8\">\n            <!-- Quick Stats -->\n            <div class=\"grid grid-cols-4 gap-4 mb-8\">\n              <div class=\"text-center p-4 bg-brand-green-50 rounded-xl\">\n                <div id=\"modal-capacity\" class=\"text-xl font-bold text-brand-green\"><\/div>\n                <div class=\"text-xs text-brand-gray\">\u0638\u0631\u0641\u06cc\u062a (\u06a9\u06cc\u0644\u0648\u0648\u0627\u062a)<\/div>\n              <\/div>\n              <div class=\"text-center p-4 bg-brand-yellow-50 rounded-xl\">\n                <div id=\"modal-area\" class=\"text-xl font-bold text-brand-yellow-dark\"><\/div>\n                <div class=\"text-xs text-brand-gray\">\u0645\u0633\u0627\u062d\u062a<\/div>\n              <\/div>\n              <div class=\"text-center p-4 bg-blue-50 rounded-xl\">\n                <div id=\"modal-date\" class=\"text-xl font-bold text-blue-600\"><\/div>\n                <div class=\"text-xs text-brand-gray\">\u062a\u0627\u0631\u06cc\u062e \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc<\/div>\n              <\/div>\n              <div class=\"text-center p-4 bg-purple-50 rounded-xl\">\n                <div id=\"modal-status\" class=\"text-xl font-bold text-purple-600\">\u0641\u0639\u0627\u0644<\/div>\n                <div class=\"text-xs text-brand-gray\">\u0648\u0636\u0639\u06cc\u062a<\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Challenge & Solution -->\n            <div class=\"grid md:grid-cols-2 gap-6 mb-8\">\n              <div class=\"bg-red-50 rounded-xl p-6\">\n                <h3 class=\"font-bold text-brand-dark mb-3 flex items-center gap-2\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" class=\"text-red-500\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"12\" x2=\"12\" y1=\"8\" y2=\"12\"><\/line><line x1=\"12\" x2=\"12.01\" y1=\"16\" y2=\"16\"><\/line><\/svg>\n                  \u0686\u0627\u0644\u0634 \u0645\u0634\u062a\u0631\u06cc\n                <\/h3>\n                <p id=\"modal-challenge\" class=\"text-sm text-brand-gray\"><\/p>\n              <\/div>\n              <div class=\"bg-brand-green-50 rounded-xl p-6\">\n                <h3 class=\"font-bold text-brand-dark mb-3 flex items-center gap-2\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" class=\"text-brand-green\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n                  \u0631\u0627\u0647\u06a9\u0627\u0631 \u062a\u0627\u0628\u0627\u0698\u0648\u0644\n                <\/h3>\n                <p id=\"modal-solution\" class=\"text-sm text-brand-gray\"><\/p>\n              <\/div>\n            <\/div>\n\n            <!-- Equipment -->\n            <div class=\"mb-8\">\n              <h3 class=\"font-bold text-brand-dark mb-4\">\u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u0646\u0635\u0628 \u0634\u062f\u0647<\/h3>\n              <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\" id=\"modal-equipment\">\n                <!-- Equipment cards will be injected here -->\n              <\/div>\n            <\/div>\n\n            <!-- Results -->\n            <div class=\"bg-gradient-brand rounded-2xl p-6 text-white mb-8\">\n              <h3 class=\"font-bold mb-4\">\u0646\u062a\u0627\u06cc\u062c \u067e\u0631\u0648\u0698\u0647<\/h3>\n              <div class=\"grid grid-cols-3 gap-4\" id=\"modal-results\">\n                <!-- Results will be injected here -->\n              <\/div>\n            <\/div>\n\n            <!-- Testimonial -->\n            <div class=\"bg-gray-50 rounded-xl p-6 mb-8\" id=\"modal-testimonial-section\">\n              <blockquote class=\"text-brand-gray italic leading-relaxed mb-4\" id=\"modal-testimonial\"><\/blockquote>\n              <footer class=\"font-semibold text-brand-dark\" id=\"modal-customer\"><\/footer>\n            <\/div>\n\n            <!-- CTA -->\n            <div class=\"text-center\">\n              <p class=\"text-brand-gray mb-4\">\u0646\u06cc\u0627\u0632 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u0645\u0634\u0627\u0628\u0647 \u062f\u0627\u0631\u06cc\u062f\u061f<\/p>\n              <div class=\"flex justify-center gap-4\">\n                <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#cta\" onclick=\"closeProjectModal()\" class=\"bg-brand-green text-white font-semibold px-6 py-3 rounded-xl hover:bg-brand-green-dark transition-all flex items-center gap-2\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"><\/path><\/svg>\n                  \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u0634\u0627\u0648\u0631\u0647\n                <\/a>\n                <a href=\"https:\/\/wa.me\/989000000000\" class=\"bg-green-500 text-white font-semibold px-6 py-3 rounded-xl hover:bg-green-600 transition-all flex items-center gap-2\" target=\"_blank\" rel=\"noopener\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\"><\/path><\/svg>\n                  \u0648\u0627\u062a\u0633\u0627\u067e\n                <\/a>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <script>\n    \/\/ Project Data\n    const projectsData = {\n      1: {\n        title: '\u0628\u0627\u063a \u067e\u0633\u062a\u0647 \u06f5\u06f0 \u0647\u06a9\u062a\u0627\u0631\u06cc - \u06a9\u0631\u0645\u0627\u0646',\n        location: '\u06a9\u0631\u0645\u0627\u0646\u060c \u0634\u0647\u0631\u0628\u0627\u0628\u06a9',\n        image: 'https:\/\/images.pexels.com\/photos\/2132126\/pexels-photo-2132126.jpeg?auto=compress&cs=tinysrgb&w=1200',\n        systemType: '\u0622\u0641\u200c\u06af\u0631\u06cc\u062f',\n        capacity: '\u06f3\u06f0',\n        area: '\u06f5\u06f0 \u0647\u06a9\u062a\u0627\u0631',\n        date: '\u0622\u0628\u0627\u0646 \u06f1\u06f4\u06f0\u06f2',\n        challenge: '\u0646\u0628\u0648\u062f \u0634\u0628\u06a9\u0647 \u0628\u0631\u0642 \u062f\u0631 \u0645\u0646\u0637\u0642\u0647 \u062f\u0648\u0631\u0627\u0641\u062a\u0627\u062f\u0647 \u0648 \u0647\u0632\u06cc\u0646\u0647 \u0628\u0627\u0644\u0627\u06cc \u06af\u0627\u0632\u0648\u0626\u06cc\u0644 \u0628\u0631\u0627\u06cc \u0631\u0648\u0634\u0646 \u06a9\u0631\u062f\u0646 \u0645\u0648\u0644\u062f \u062f\u06cc\u0632\u0644\u06cc. \u0686\u0627\u0647 \u0639\u0645\u06cc\u0642 \u06f1\u06f2\u06f0 \u0645\u062a\u0631\u06cc \u0628\u0627 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0622\u0628\u062f\u0647\u06cc \u0628\u0627\u0644\u0627.',\n        solution: '\u0637\u0631\u0627\u062d\u06cc \u0648 \u0646\u0635\u0628 \u0633\u06cc\u0633\u062a\u0645 \u0622\u0628\u06cc\u0627\u0631\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u06a9\u0627\u0645\u0644 \u0628\u0627 \u067e\u0645\u067e \u063a\u0648\u0637\u0647\u200c\u0648\u0631\u060c \u067e\u0646\u0644\u200c\u0647\u0627\u06cc \u0645\u0648\u0646\u0648\u06a9\u0631\u06cc\u0633\u062a\u0627\u0644\u06cc\u0646 \u0648 \u0633\u0627\u062e\u062a\u0627\u0631 \u0633\u0646\u06af\u06cc\u0646. \u0633\u06cc\u0633\u062a\u0645 \u06f1\u06f0\u06f0\u066a \u0627\u0632 \u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.',\n        equipment: [\n          { name: '\u067e\u0646\u0644 \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc', value: '\u062c\u06cc\u0646\u06a9\u0648 \u06f5\u06f5\u06f0W', icon: '\u2600' },\n          { name: '\u0627\u06cc\u0646\u0648\u0631\u062a\u0631', value: 'SOLIS \u0622\u0641\u200c\u06af\u0631\u06cc\u062f', icon: '\u26a1' },\n          { name: '\u067e\u0645\u067e \u063a\u0648\u0637\u0647\u200c\u0648\u0631', value: 'grundfos \u06f1\u06f5HP', icon: '\ud83c\udf0a' },\n          { name: '\u0633\u0627\u062e\u062a\u0627\u0631', value: '\u06af\u0627\u0644\u0648\u0627\u0646\u06cc\u0632\u0647 \u0633\u0646\u06af\u06cc\u0646', icon: '\ud83d\udcd0' }\n        ],\n        results: [\n          { label: '\u0635\u0631\u0641\u0647\u200c\u062c\u0648\u06cc\u06cc', value: '\u06f4\u06f8\u06f0M \u062a\u0648\u0645\u0627\u0646' },\n          { label: '\u0628\u0631\u0642\u062a', value: '\u06f1\u06f0\u06f0\u066a' },\n          { label: '\u0628\u0627\u0632\u06af\u0634\u062a \u0633\u0631\u0645\u0627\u06cc\u0647', value: '\u06f3.\u06f5 \u0633\u0627\u0644' }\n        ],\n        testimonial: '\u00ab\u0628\u0627 \u0646\u0635\u0628 \u0633\u06cc\u0633\u062a\u0645 \u062a\u0627\u0628\u0627\u0698\u0648\u0644\u060c \u062f\u06cc\u06af\u0631 \u0646\u06af\u0631\u0627\u0646 \u0642\u0637\u0639\u06cc \u0628\u0631\u0642 \u0648 \u0647\u0632\u06cc\u0646\u0647 \u06af\u0627\u0632\u0648\u0626\u06cc\u0644 \u0646\u06cc\u0633\u062a\u0645. \u067e\u0645\u067e \u06f2\u06f4 \u0633\u0627\u0639\u062a\u0647 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.\u00bb',\n        customer: '\u2014 \u0622\u0642\u0627\u06cc \u062d\u0633\u06cc\u0646\u06cc\u060c \u0628\u0627\u063a\u062f\u0627\u0631 \u067e\u0633\u062a\u0647'\n      },\n      2: {\n        title: '\u06af\u0644\u062e\u0627\u0646\u0647 \u0635\u0646\u0639\u062a\u06cc \u0647\u06cc\u062f\u0631\u0648\u067e\u0648\u0646\u06cc\u06a9 - \u0627\u0635\u0641\u0647\u0627\u0646',\n        location: '\u0627\u0635\u0641\u0647\u0627\u0646\u060c \u0644\u0646\u062c\u0627\u0646',\n        image: 'https:\/\/images.pexels.com\/photos\/1212407\/pexels-photo-1212407.jpeg?auto=compress&cs=tinysrgb&w=1200',\n        systemType: '\u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc',\n        capacity: '\u06f8\u06f0',\n        area: '\u06f8\u06f0\u06f0\u06f0 \u0645\u062a\u0631\u0645\u0631\u0628\u0639',\n        date: '\u0627\u0631\u062f\u06cc\u0628\u0647\u0634\u062a \u06f1\u06f4\u06f0\u06f2',\n        challenge: '\u0642\u0637\u0639\u06cc \u0645\u06a9\u0631\u0631 \u0628\u0631\u0642 \u0648 \u0635\u062f\u0645\u0647 \u0628\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u06af\u0644\u062e\u0627\u0646\u0647. \u0647\u0632\u06cc\u0646\u0647 \u0628\u0627\u0644\u0627\u06cc \u0628\u0631\u0642 \u0635\u0646\u0639\u062a\u06cc \u0648 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0628\u0631\u0642 \u067e\u0627\u06cc\u062f\u0627\u0631 \u0628\u0631\u0627\u06cc \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u0622\u0628\u06cc\u0627\u0631\u06cc \u0648 \u062a\u0647\u0648\u06cc\u0647.',\n        solution: '\u0633\u06cc\u0633\u062a\u0645 \u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc \u0628\u0627 \u0628\u0627\u062a\u0631\u06cc \u0644\u06cc\u062a\u06cc\u0648\u0645 \u0630\u062e\u06cc\u0631\u0647\u200c\u0633\u0627\u0632\u06cc. \u0627\u0645\u06a9\u0627\u0646 \u06a9\u0627\u0631 \u0628\u062f\u0648\u0646 \u0634\u0628\u06a9\u0647 \u0648 \u0641\u0631\u0648\u0634 \u0628\u0631\u0642 \u0627\u0636\u0627\u0641\u06cc \u062f\u0631 \u0633\u0627\u0639\u0627\u062a \u0627\u0648\u062c \u0645\u0635\u0631\u0641.',\n        equipment: [\n          { name: '\u067e\u0646\u0644 \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc', value: 'JA Solar \u06f5\u06f4\u06f0W', icon: '\u2600' },\n          { name: '\u0627\u06cc\u0646\u0648\u0631\u062a\u0631 \u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc', value: 'MUST \u06f8\u06f0kW', icon: '\u26a1' },\n          { name: '\u0628\u0627\u062a\u0631\u06cc', value: '\u0644\u06cc\u062a\u06cc\u0648\u0645 \u06f2\u06f0\u06f0kWh', icon: '\ud83d\udd0b' },\n          { name: '\u0645\u0627\u0646\u06cc\u062a\u0648\u0631\u06cc\u0646\u06af', value: 'Solarman Pro', icon: '\ud83d\udcca' }\n        ],\n        results: [\n          { label: '\u062a\u0627\u0645\u06cc\u0646 \u0628\u0631\u0642', value: '\u06f9\u06f5\u066a \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc' },\n          { label: '\u0628\u0627\u0632\u062f\u0647\u06cc \u06af\u0644\u062e\u0627\u0646\u0647', value: '+\u06f3\u06f5\u066a' },\n          { label: '\u0628\u0627\u0632\u06af\u0634\u062a \u0633\u0631\u0645\u0627\u06cc\u0647', value: '\u06f4 \u0633\u0627\u0644' }\n        ],\n        testimonial: '\u00ab\u0628\u0627\u0632\u062f\u0647\u06cc \u06af\u0644\u062e\u0627\u0646\u0647 \u0645\u0627 \u06f3\u06f5 \u062f\u0631\u0635\u062f \u0627\u0641\u0632\u0627\u06cc\u0634 \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f. \u0628\u0647\u062a\u0631\u06cc\u0646 \u0633\u0631\u0645\u0627\u06cc\u0647\u200c\u06af\u0630\u0627\u0631\u06cc \u0628\u0648\u062f.\u00bb',\n        customer: '\u2014 \u0634\u0631\u06a9\u062a \u06a9\u0634\u0627\u0648\u0631\u0632\u06cc \u0633\u0628\u0632 \u0627\u0635\u0641\u0647\u0627\u0646'\n      },\n      3: {\n        title: '\u06a9\u0627\u0631\u062e\u0627\u0646\u0647 \u062a\u0648\u0644\u06cc\u062f\u06cc \u0635\u0646\u0639\u062a\u06cc - \u062a\u0647\u0631\u0627\u0646',\n        location: '\u062a\u0647\u0631\u0627\u0646\u060c \u0634\u0647\u0631\u06cc\u0627\u0631',\n        image: 'https:\/\/images.pexels.com\/photos\/1108572\/pexels-photo-1108572.jpeg?auto=compress&cs=tinysrgb&w=1200',\n        systemType: '\u0622\u0646\u200c\u06af\u0631\u06cc\u062f',\n        capacity: '\u06f1\u06f5\u06f0',\n        area: '\u06f3\u06f6\u06f0\u06f0 \u0645\u062a\u0631\u0645\u0631\u0628\u0639 \u0633\u0642\u0641',\n        date: '\u0645\u0647\u0631 \u06f1\u06f4\u06f0\u06f2',\n        challenge: '\u0647\u0632\u06cc\u0646\u0647 \u0628\u0627\u0644\u0627\u06cc \u0628\u0631\u0642 \u0635\u0646\u0639\u062a\u06cc \u0648 \u0627\u0636\u0627\u0641\u0647\u200c\u0628\u0627\u0631 \u0634\u0628\u06a9\u0647 \u062f\u0631 \u0633\u0627\u0639\u0627\u062a \u0627\u0648\u062c \u0645\u0635\u0631\u0641. \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06a9\u0627\u0647\u0634 \u0647\u0632\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u062c\u0627\u0631\u06cc \u06a9\u0627\u0631\u062e\u0627\u0646\u0647.',\n        solution: '\u0646\u0635\u0628 \u0633\u06cc\u0633\u062a\u0645 \u0622\u0646\u200c\u06af\u0631\u06cc\u062f \u0631\u0648\u06cc \u0633\u0642\u0641 \u06a9\u0627\u0631\u062e\u0627\u0646\u0647 \u0628\u0627 \u0645\u0627\u0646\u06cc\u062a\u0648\u0631\u06cc\u0646\u06af \u0647\u0648\u0634\u0645\u0646\u062f. \u0641\u0631\u0648\u0634 \u0628\u0631\u0642 \u0627\u0636\u0627\u0641\u06cc \u0648 \u06a9\u0627\u0647\u0634 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647 \u0642\u0628\u0636 \u0645\u0627\u0647\u0627\u0646\u0647.',\n        equipment: [\n          { name: '\u067e\u0646\u0644 \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc', value: 'Trina \u06f5\u06f4\u06f0W', icon: '\u2600' },\n          { name: '\u0627\u06cc\u0646\u0648\u0631\u062a\u0631', value: 'Sungrow \u06f1\u06f0\u06f0kW', icon: '\u26a1' },\n          { name: '\u0633\u06cc\u0633\u062a\u0645 \u0645\u0627\u0646\u06cc\u062a\u0648\u0631\u06cc\u0646\u06af', value: 'iSolarCloud', icon: '\ud83d\udcca' },\n          { name: '\u0645\u062d\u0627\u0641\u0638\u200c\u0647\u0627', value: 'Schneider', icon: '\ud83d\udee1' }\n        ],\n        results: [\n          { label: '\u06a9\u0627\u0647\u0634 \u0642\u0628\u0636', value: '\u06f6\u06f0\u066a' },\n          { label: '\u062a\u0648\u0644\u06cc\u062f \u0633\u0627\u0644\u0627\u0646\u0647', value: '\u06f2\u06f4\u06f0MWh' },\n          { label: '\u0628\u0627\u0632\u06af\u0634\u062a \u0633\u0631\u0645\u0627\u06cc\u0647', value: '\u06f2.\u06f5 \u0633\u0627\u0644' }\n        ],\n        testimonial: '\u00ab\u0628\u0647\u062a\u0631\u06cc\u0646 \u0633\u0631\u0645\u0627\u06cc\u0647\u200c\u06af\u0630\u0627\u0631\u06cc \u0635\u0646\u0639\u062a\u06cc \u0645\u0627 \u062f\u0631 \u06f1\u06f0 \u0633\u0627\u0644 \u06af\u0630\u0634\u062a\u0647 \u0628\u0648\u062f.\u00bb',\n        customer: '\u2014 \u0645\u062f\u06cc\u0631\u0639\u0627\u0645\u0644 \u0635\u0646\u0627\u06cc\u0639 \u067e\u06cc\u0634\u0631\u0648 \u0634\u0647\u0631\u06cc\u0627\u0631'\n      }\n    };\n\n    \/\/ Province Data\n    const provinceData = {\n      'kerman': { name: '\u06a9\u0631\u0645\u0627\u0646', projects: 28, capacity: '\u06f8\u06f5\u06f0 \u06a9\u06cc\u0644\u0648\u0648\u0627\u062a', types: ['\u0622\u0628\u06cc\u0627\u0631\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc', '\u0622\u0641\u200c\u06af\u0631\u06cc\u062f'] },\n      'isfahan': { name: '\u0627\u0635\u0641\u0647\u0627\u0646', projects: 35, capacity: '\u06f1.\u06f2 \u0645\u06af\u0627\u0648\u0627\u062a', types: ['\u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc', '\u06af\u0644\u062e\u0627\u0646\u0647'] },\n      'tehran': { name: '\u062a\u0647\u0631\u0627\u0646', projects: 42, capacity: '\u06f1.\u06f5 \u0645\u06af\u0627\u0648\u0627\u062a', types: ['\u0635\u0646\u0639\u062a\u06cc', '\u0622\u0646\u200c\u06af\u0631\u06cc\u062f'] },\n      'yazd': { name: '\u06cc\u0632\u062f', projects: 18, capacity: '\u06f4\u06f2\u06f0 \u06a9\u06cc\u0644\u0648\u0648\u0627\u062a', types: ['\u0622\u0628\u06cc\u0627\u0631\u06cc', '\u0648\u06cc\u0644\u0627'] },\n      'khuzestan': { name: '\u062e\u0648\u0632\u0633\u062a\u0627\u0646', projects: 22, capacity: '\u06f5\u06f8\u06f0 \u06a9\u06cc\u0644\u0648\u0648\u0627\u062a', types: ['\u0646\u062e\u0644\u0633\u062a\u0627\u0646', '\u0622\u0641\u200c\u06af\u0631\u06cc\u062f'] },\n      'fars': { name: '\u0641\u0627\u0631\u0633', projects: 25, capacity: '\u06f7\u06f2\u06f0 \u06a9\u06cc\u0644\u0648\u0648\u0627\u062a', types: ['\u06a9\u0634\u0627\u0648\u0631\u0632\u06cc', '\u06af\u0644\u062e\u0627\u0646\u0647'] },\n      'khorasan': { name: '\u062e\u0631\u0627\u0633\u0627\u0646 \u0631\u0636\u0648\u06cc', projects: 20, capacity: '\u06f5\u06f4\u06f0 \u06a9\u06cc\u0644\u0648\u0648\u0627\u062a', types: ['\u0622\u0628\u06cc\u0627\u0631\u06cc', '\u0635\u0646\u0639\u062a\u06cc'] },\n      'mazandaran': { name: '\u0645\u0627\u0632\u0646\u062f\u0631\u0627\u0646', projects: 15, capacity: '\u06f3\u06f2\u06f0 \u06a9\u06cc\u0644\u0648\u0648\u0627\u062a', types: ['\u0648\u06cc\u0644\u0627', '\u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc'] },\n      'hormozgan': { name: '\u0647\u0631\u0645\u0632\u06af\u0627\u0646', projects: 12, capacity: '\u06f2\u06f8\u06f0 \u06a9\u06cc\u0644\u0648\u0648\u0627\u062a', types: ['\u0635\u0646\u0639\u062a\u06cc', '\u0628\u0646\u062f\u0631\u06cc'] },\n      'sistan': { name: '\u0633\u06cc\u0633\u062a\u0627\u0646 \u0648 \u0628\u0644\u0648\u0686\u0633\u062a\u0627\u0646', projects: 8, capacity: '\u06f1\u06f8\u06f0 \u06a9\u06cc\u0644\u0648\u0648\u0627\u062a', types: ['\u0622\u0628\u06cc\u0627\u0631\u06cc', '\u0622\u0641\u200c\u06af\u0631\u06cc\u062f'] }\n    };\n\n    \/\/ Navbar scroll effect\n    window.addEventListener('scroll', function() {\n      const navbar = document.getElementById('navbar');\n      const isProjects = window.scrollY > document.getElementById('projects').offsetTop - 100;\n\n      if (window.scrollY > 20) {\n        navbar.classList.remove('navbar-transparent');\n        navbar.classList.add('navbar-scrolled');\n        navbar.querySelectorAll('.nav-link').forEach(link => {\n          link.classList.remove('text-white', 'hover:bg-white\/10');\n          link.classList.add('text-brand-dark', 'hover:bg-gray-100');\n        });\n      } else {\n        navbar.classList.remove('navbar-scrolled');\n        navbar.classList.add('navbar-transparent');\n        navbar.querySelectorAll('.nav-link').forEach(link => {\n          link.classList.add('text-white', 'hover:bg-white\/10');\n          link.classList.remove('text-brand-dark', 'hover:bg-gray-100');\n        });\n      }\n    });\n\n    \/\/ Mobile menu\n    function toggleMobileMenu() {\n      document.getElementById('mobile-menu').classList.toggle('hidden');\n    }\n\n    \/\/ Province selection\n    function selectProvince(provinceId) {\n      \/\/ Remove active class from all provinces\n      document.querySelectorAll('.map-province').forEach(p => p.classList.remove('active'));\n\n      \/\/ Add active class to selected province\n      const province = document.getElementById('province-' + provinceId);\n      if (province) province.classList.add('active');\n\n      \/\/ Update info panel\n      const data = provinceData[provinceId];\n      if (data) {\n        document.getElementById('province-info').innerHTML = `\n          <div class=\"text-center mb-6\">\n            <div class=\"text-3xl font-black text-brand-green-light mb-1\">${data.projects}<\/div>\n            <div class=\"text-white\/60 text-sm\">\u067e\u0631\u0648\u0698\u0647 \u0645\u0648\u0641\u0642<\/div>\n          <\/div>\n          <div class=\"space-y-4\">\n            <div class=\"flex justify-between items-center text-sm\">\n              <span class=\"text-white\/60\">\u0646\u0627\u0645 \u0627\u0633\u062a\u0627\u0646<\/span>\n              <span class=\"text-white font-semibold\">${data.name}<\/span>\n            <\/div>\n            <div class=\"flex justify-between items-center text-sm\">\n              <span class=\"text-white\/60\">\u0638\u0631\u0641\u06cc\u062a \u0646\u0635\u0628 \u0634\u062f\u0647<\/span>\n              <span class=\"text-brand-yellow font-semibold\">${data.capacity}<\/span>\n            <\/div>\n            <div class=\"text-sm\">\n              <div class=\"text-white\/60 mb-2\">\u0627\u0646\u0648\u0627\u0639 \u067e\u0631\u0648\u0698\u0647<\/div>\n              <div class=\"flex flex-wrap gap-2\">\n                ${data.types.map(t => `<span class=\"bg-white\/10 text-white px-2 py-1 rounded text-xs\">${t}<\/span>`).join('')}\n              <\/div>\n            <\/div>\n          <\/div>\n          <a href=\"#projects\" class=\"mt-6 block w-full text-center bg-brand-green text-white font-semibold py-3 rounded-xl hover:bg-brand-green-dark transition-all\">\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\n          <\/a>\n        `;\n      }\n    }\n\n    \/\/ Project Modal\n    function openProjectModal(projectId) {\n      const project = projectsData[projectId];\n      if (!project) return;\n\n      document.getElementById('modal-image').src = project.image;\n      document.getElementById('modal-title').textContent = project.title;\n      document.getElementById('modal-location').innerHTML = `\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\n        ${project.location}\n      `;\n      document.getElementById('modal-system-type').textContent = project.systemType;\n      document.getElementById('modal-capacity').textContent = project.capacity;\n      document.getElementById('modal-area').textContent = project.area;\n      document.getElementById('modal-date').textContent = project.date;\n      document.getElementById('modal-challenge').textContent = project.challenge;\n      document.getElementById('modal-solution').textContent = project.solution;\n      document.getElementById('modal-testimonial').textContent = project.testimonial;\n      document.getElementById('modal-customer').textContent = project.customer;\n\n      \/\/ Equipment\n      document.getElementById('modal-equipment').innerHTML = project.equipment.map(eq => `\n        <div class=\"bg-gray-50 rounded-xl p-4 text-center\">\n          <div class=\"text-2xl mb-2\">${eq.icon}<\/div>\n          <div class=\"font-semibold text-brand-dark text-sm\">${eq.name}<\/div>\n          <div class=\"text-xs text-brand-gray\">${eq.value}<\/div>\n        <\/div>\n      `).join('');\n\n      \/\/ Results\n      document.getElementById('modal-results').innerHTML = project.results.map(r => `\n        <div class=\"text-center\">\n          <div class=\"text-2xl font-bold\">${r.value}<\/div>\n          <div class=\"text-white\/60 text-sm\">${r.label}<\/div>\n        <\/div>\n      `).join('');\n\n      document.getElementById('project-modal').classList.remove('hidden');\n      document.body.style.overflow = 'hidden';\n    }\n\n    function closeProjectModal() {\n      document.getElementById('project-modal').classList.add('hidden');\n      document.body.style.overflow = '';\n    }\n\n    \/\/ Filter pills\n    document.querySelectorAll('.filter-pill').forEach(pill => {\n      pill.addEventListener('click', function() {\n        document.querySelectorAll('.filter-pill').forEach(p => p.classList.remove('active'));\n        this.classList.add('active');\n      });\n    });\n\n    \/\/ Reset filters\n    function resetFilters() {\n      document.querySelectorAll('select').forEach(s => s.selectedIndex = 0);\n      document.querySelectorAll('.filter-pill').forEach(p => p.classList.remove('active'));\n    }\n\n    \/\/ Close modal on escape\n    document.addEventListener('keydown', function(e) {\n      if (e.key === 'Escape') closeProjectModal();\n    });\n  <\/script>\n\n\n<\/body><\/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>\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u0631\u0627 \u0634\u062f\u0647 \u062a\u0627\u0628\u0627\u0698\u0648\u0644 | \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u0645\u0631\u06a9\u0632 \u062f\u0627\u0646\u0634 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627 \u062a\u0645\u0627\u0633 \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646 \u062e\u0627\u0646\u0647 \/<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-52","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tabajoule.ir\/index.php?rest_route=\/wp\/v2\/pages\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tabajoule.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tabajoule.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tabajoule.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tabajoule.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=52"}],"version-history":[{"count":14,"href":"https:\/\/tabajoule.ir\/index.php?rest_route=\/wp\/v2\/pages\/52\/revisions"}],"predecessor-version":[{"id":283,"href":"https:\/\/tabajoule.ir\/index.php?rest_route=\/wp\/v2\/pages\/52\/revisions\/283"}],"wp:attachment":[{"href":"https:\/\/tabajoule.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}