{"id":50,"date":"2026-04-30T12:06:19","date_gmt":"2026-04-30T08:36:19","guid":{"rendered":"http:\/\/tabajoule.ir\/?page_id=50"},"modified":"2026-06-30T16:57:25","modified_gmt":"2026-06-30T13:27:25","slug":"%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%a7%d9%86%d8%b1%da%98%db%8c-%d8%ae%d9%88%d8%b1%d8%b4%db%8c%d8%af%db%8c","status":"publish","type":"page","link":"https:\/\/tabajoule.ir\/?page_id=50","title":{"rendered":"\u0622\u0645\u0648\u0632\u0634 \u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"50\" class=\"elementor elementor-50\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b7d00df e-con-full wd-section-stretch-content e-flex e-con e-parent\" data-id=\"b7d00df\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-525d041 elementor-widget elementor-widget-html\" data-id=\"525d041\" 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>\u0645\u0631\u06a9\u0632 \u062f\u0627\u0646\u0634 \u062a\u0627\u0628\u0627\u0698\u0648\u0644 | \u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc\u060c \u06a9\u0634\u0627\u0648\u0631\u0632\u06cc \u0648 \u0628\u0631\u0642<\/title>\n  <meta name=\"description\" content=\"\u0645\u0631\u06a9\u0632 \u062f\u0627\u0646\u0634 \u062a\u0627\u0628\u0627\u0698\u0648\u0644 - \u0622\u0645\u0648\u0632\u0634\u060c \u0631\u0627\u0647\u0646\u0645\u0627\u0647\u0627\u060c \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062e\u0635\u0635\u06cc \u0648 \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u0639\u0645\u0644\u06cc \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 \u0628\u0631\u0642\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\/\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\/\" crossorigin=\"\">\n  <link href=\".\/\u0645\u0631\u06a9\u0632 \u062f\u0627\u0646\u0634 \u062a\u0627\u0628\u0627\u0698\u0648\u0644 _ \u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc\u060c \u06a9\u0634\u0627\u0648\u0631\u0632\u06cc \u0648 \u0628\u0631\u0642_files\/css2\" rel=\"stylesheet\">\n  <script src=\".\/\u0645\u0631\u06a9\u0632 \u062f\u0627\u0646\u0634 \u062a\u0627\u0628\u0627\u0698\u0648\u0644 _ \u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc\u060c \u06a9\u0634\u0627\u0648\u0631\u0632\u06cc \u0648 \u0628\u0631\u0642_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            },\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            'bounce-slow': 'bounce 2s 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: #1565D8;\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, #0D47A1 0%, #1565D8 50%, #1976D2 100%);\n    }\n\n    .bg-gradient-hero {\n      background: linear-gradient(160deg, #0D1B2A 0%, #1A2E42 40%, #243B55 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    .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-blue {\n      box-shadow: 0 0 40px rgba(21, 101, 216, 0.15);\n    }\n\n    .progress-bar {\n      height: 3px;\n      background: linear-gradient(90deg, #1565D8, #F5C400);\n      border-radius: 9999px;\n    }\n\n    .masonry-grid {\n      columns: 1;\n      column-gap: 1.5rem;\n    }\n\n    @media (min-width: 640px) {\n      .masonry-grid {\n        columns: 2;\n      }\n    }\n\n    @media (min-width: 1024px) {\n      .masonry-grid {\n        columns: 3;\n      }\n    }\n\n    .masonry-item {\n      break-inside: avoid;\n      margin-bottom: 1.5rem;\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    .scrollbar-hide {\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n\n    .scrollbar-hide::-webkit-scrollbar {\n      display: none;\n    }\n  <\/style>\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}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.bottom-0{bottom:0px}.bottom-1{bottom:0.25rem}.bottom-3{bottom:0.75rem}.bottom-4{bottom:1rem}.bottom-8{bottom:2rem}.left-0{left:0px}.left-1\\\/2{left:50%}.left-2{left:0.5rem}.left-3{left:0.75rem}.left-4{left:1rem}.right-0{right:0px}.right-1{right:0.25rem}.right-3{right:0.75rem}.right-4{right:1rem}.top-0{top:0px}.top-1\\\/2{top:50%}.top-24{top:6rem}.top-3{top:0.75rem}.top-4{top:1rem}.z-10{z-index:10}.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}.mb-1{margin-bottom:0.25rem}.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-0\\.5{margin-right:0.125rem}.mr-1{margin-right:0.25rem}.mr-2{margin-right:0.5rem}.mt-0\\.5{margin-top:0.125rem}.mt-1{margin-top:0.25rem}.mt-10{margin-top:2.5rem}.mt-14{margin-top:3.5rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-video{aspect-ratio:16 \/ 9}.h-1{height:0.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:0.5rem}.h-20{height:5rem}.h-36{height:9rem}.h-48{height:12rem}.h-52{height:13rem}.h-64{height:16rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-full{height:100%}.min-h-\\[90vh\\]{min-height:90vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:0.5rem}.w-20{width:5rem}.w-28{width:7rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-auto{width:auto}.w-full{width:100%}.min-w-0{min-width:0px}.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-lg{max-width:32rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.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))}.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}.animate-slide-up{animation:slideUp 0.6s ease-out}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, 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-10{gap:2.5rem}.gap-12{gap:3rem}.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 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * 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))}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:0.25rem}.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-r-2{border-right-width:2px}.border-t{border-top-width:1px}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254 \/ var(--tw-border-opacity, 1))}.border-brand-blue{--tw-border-opacity:1;border-color:rgb(21 101 216 \/ var(--tw-border-opacity, 1))}.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-cyan-200{--tw-border-opacity:1;border-color:rgb(165 243 252 \/ var(--tw-border-opacity, 1))}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246 \/ var(--tw-border-opacity, 1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 \/ var(--tw-border-opacity, 1))}.border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208 \/ var(--tw-border-opacity, 1))}.border-indigo-200{--tw-border-opacity:1;border-color:rgb(199 210 254 \/ var(--tw-border-opacity, 1))}.border-lime-200{--tw-border-opacity:1;border-color:rgb(217 249 157 \/ var(--tw-border-opacity, 1))}.border-orange-200{--tw-border-opacity:1;border-color:rgb(254 215 170 \/ var(--tw-border-opacity, 1))}.border-purple-200{--tw-border-opacity:1;border-color:rgb(233 213 255 \/ var(--tw-border-opacity, 1))}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202 \/ var(--tw-border-opacity, 1))}.border-rose-200{--tw-border-opacity:1;border-color:rgb(254 205 211 \/ var(--tw-border-opacity, 1))}.border-teal-200{--tw-border-opacity:1;border-color:rgb(153 246 228 \/ var(--tw-border-opacity, 1))}.border-transparent{border-color:transparent}.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\\\/25{border-color:rgb(255 255 255 \/ 0.25)}.border-white\\\/30{border-color:rgb(255 255 255 \/ 0.3)}.border-yellow-200{--tw-border-opacity:1;border-color:rgb(254 240 138 \/ var(--tw-border-opacity, 1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 \/ var(--tw-bg-opacity, 1))}.bg-black\\\/30{background-color:rgb(0 0 0 \/ 0.3)}.bg-black\\\/80{background-color:rgb(0 0 0 \/ 0.8)}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254 \/ var(--tw-bg-opacity, 1))}.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-100{--tw-bg-opacity:1;background-color:rgb(200 220 255 \/ var(--tw-bg-opacity, 1))}.bg-brand-blue-50{--tw-bg-opacity:1;background-color:rgb(235 242 255 \/ var(--tw-bg-opacity, 1))}.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\\\/85{background-color:rgb(13 27 42 \/ 0.85)}.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-yellow{--tw-bg-opacity:1;background-color:rgb(245 196 0 \/ var(--tw-bg-opacity, 1))}.bg-brand-yellow\\\/20{background-color:rgb(245 196 0 \/ 0.2)}.bg-brand-yellow\\\/90{background-color:rgb(245 196 0 \/ 0.9)}.bg-cyan-100{--tw-bg-opacity:1;background-color:rgb(207 250 254 \/ var(--tw-bg-opacity, 1))}.bg-cyan-50{--tw-bg-opacity:1;background-color:rgb(236 254 255 \/ var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 \/ 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-100{--tw-bg-opacity:1;background-color:rgb(220 252 231 \/ var(--tw-bg-opacity, 1))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244 \/ var(--tw-bg-opacity, 1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 \/ var(--tw-bg-opacity, 1))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(224 231 255 \/ var(--tw-bg-opacity, 1))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(238 242 255 \/ var(--tw-bg-opacity, 1))}.bg-lime-100{--tw-bg-opacity:1;background-color:rgb(236 252 203 \/ var(--tw-bg-opacity, 1))}.bg-lime-50{--tw-bg-opacity:1;background-color:rgb(247 254 231 \/ var(--tw-bg-opacity, 1))}.bg-orange-100{--tw-bg-opacity:1;background-color:rgb(255 237 213 \/ 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-100{--tw-bg-opacity:1;background-color:rgb(243 232 255 \/ var(--tw-bg-opacity, 1))}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255 \/ var(--tw-bg-opacity, 1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226 \/ var(--tw-bg-opacity, 1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242 \/ var(--tw-bg-opacity, 1))}.bg-rose-100{--tw-bg-opacity:1;background-color:rgb(255 228 230 \/ var(--tw-bg-opacity, 1))}.bg-rose-50{--tw-bg-opacity:1;background-color:rgb(255 241 242 \/ var(--tw-bg-opacity, 1))}.bg-teal-100{--tw-bg-opacity:1;background-color:rgb(204 251 241 \/ var(--tw-bg-opacity, 1))}.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\\\/15{background-color:rgb(255 255 255 \/ 0.15)}.bg-white\\\/25{background-color:rgb(255 255 255 \/ 0.25)}.bg-white\\\/95{background-color:rgb(255 255 255 \/ 0.95)}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195 \/ var(--tw-bg-opacity, 1))}.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-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top, var(--tw-gradient-stops))}.from-black\\\/50{--tw-gradient-from:rgb(0 0 0 \/ 0.5) var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0 \/ 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-black\\\/60{--tw-gradient-from:rgb(0 0 0 \/ 0.6) var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0 \/ 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-black\\\/70{--tw-gradient-from:rgb(0 0 0 \/ 0.7) var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0 \/ 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-black\\\/90{--tw-gradient-from:rgb(0 0 0 \/ 0.9) var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0 \/ 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-blue-400{--tw-gradient-from:#60a5fa var(--tw-gradient-from-position);--tw-gradient-to:rgb(96 165 250 \/ 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)}.from-purple-400{--tw-gradient-from:#c084fc var(--tw-gradient-from-position);--tw-gradient-to:rgb(192 132 252 \/ 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-red-400{--tw-gradient-from:#f87171 var(--tw-gradient-from-position);--tw-gradient-to:rgb(248 113 113 \/ 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-yellow-400{--tw-gradient-from:#facc15 var(--tw-gradient-from-position);--tw-gradient-to:rgb(250 204 21 \/ 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), 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-cyan-500{--tw-gradient-to:#06b6d4 var(--tw-gradient-to-position)}.to-orange-500{--tw-gradient-to:#f97316 var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to:#ec4899 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-violet-500{--tw-gradient-to:#8b5cf6 var(--tw-gradient-to-position)}.object-cover{object-fit:cover}.p-10{padding:2.5rem}.p-2{padding:0.5rem}.p-2\\.5{padding:0.625rem}.p-3{padding:0.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1\\.5{padding-left:0.375rem;padding-right:0.375rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-2\\.5{padding-left:0.625rem;padding-right:0.625rem}.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}.py-0\\.5{padding-top:0.125rem;padding-bottom:0.125rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-1\\.5{padding-top:0.375rem;padding-bottom:0.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.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-3\\.5{padding-top:0.875rem;padding-bottom:0.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-8{padding-bottom:2rem}.pl-14{padding-left:3.5rem}.pl-32{padding-left:8rem}.pr-5{padding-right:1.25rem}.pt-16{padding-top:4rem}.pt-2{padding-top:0.5rem}.pt-24{padding-top:6rem}.pt-3{padding-top:0.75rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace}.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-5xl{font-size:3rem;line-height:1}.text-base{font-size:1rem;line-height:1.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-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.not-italic{font-style:normal}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.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-blue{--tw-text-opacity:1;color:rgb(21 101 216 \/ 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-yellow{--tw-text-opacity:1;color:rgb(245 196 0 \/ var(--tw-text-opacity, 1))}.text-brand-yellow\\\/70{color:rgb(245 196 0 \/ 0.7)}.text-cyan-600{--tw-text-opacity:1;color:rgb(8 145 178 \/ var(--tw-text-opacity, 1))}.text-cyan-700{--tw-text-opacity:1;color:rgb(14 116 144 \/ var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 \/ var(--tw-text-opacity, 1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 \/ var(--tw-text-opacity, 1))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94 \/ var(--tw-text-opacity, 1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74 \/ var(--tw-text-opacity, 1))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61 \/ var(--tw-text-opacity, 1))}.text-indigo-700{--tw-text-opacity:1;color:rgb(67 56 202 \/ var(--tw-text-opacity, 1))}.text-orange-700{--tw-text-opacity:1;color:rgb(194 65 12 \/ var(--tw-text-opacity, 1))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234 \/ var(--tw-text-opacity, 1))}.text-purple-700{--tw-text-opacity:1;color:rgb(126 34 206 \/ var(--tw-text-opacity, 1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68 \/ var(--tw-text-opacity, 1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38 \/ var(--tw-text-opacity, 1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28 \/ 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))}.text-yellow-700{--tw-text-opacity:1;color:rgb(161 98 7 \/ var(--tw-text-opacity, 1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-gray-400::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175 \/ var(--tw-placeholder-opacity, 1))}.placeholder-white\\\/40::placeholder{color:rgb(255 255 255 \/ 0.4)}.placeholder-white\\\/50::placeholder{color:rgb(255 255 255 \/ 0.5)}.opacity-0{opacity:0}.opacity-10{opacity:0.1}.opacity-20{opacity:0.2}.opacity-5{opacity:0.05}.opacity-80{opacity:0.8}.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-opacity{transition-property:opacity;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-500{transition-duration:500ms}.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\\:-translate-y-1:hover{--tw-translate-y:-0.25rem;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\\:border-blue-400:hover{--tw-border-opacity:1;border-color:rgb(96 165 250 \/ var(--tw-border-opacity, 1))}.hover\\:border-brand-blue:hover{--tw-border-opacity:1;border-color:rgb(21 101 216 \/ var(--tw-border-opacity, 1))}.hover\\:border-cyan-400:hover{--tw-border-opacity:1;border-color:rgb(34 211 238 \/ var(--tw-border-opacity, 1))}.hover\\:border-green-400:hover{--tw-border-opacity:1;border-color:rgb(74 222 128 \/ var(--tw-border-opacity, 1))}.hover\\:border-indigo-400:hover{--tw-border-opacity:1;border-color:rgb(129 140 248 \/ var(--tw-border-opacity, 1))}.hover\\:border-lime-400:hover{--tw-border-opacity:1;border-color:rgb(163 230 53 \/ var(--tw-border-opacity, 1))}.hover\\:border-orange-400:hover{--tw-border-opacity:1;border-color:rgb(251 146 60 \/ var(--tw-border-opacity, 1))}.hover\\:border-purple-400:hover{--tw-border-opacity:1;border-color:rgb(192 132 252 \/ var(--tw-border-opacity, 1))}.hover\\:border-red-400:hover{--tw-border-opacity:1;border-color:rgb(248 113 113 \/ var(--tw-border-opacity, 1))}.hover\\:border-rose-400:hover{--tw-border-opacity:1;border-color:rgb(251 113 133 \/ var(--tw-border-opacity, 1))}.hover\\:border-teal-400:hover{--tw-border-opacity:1;border-color:rgb(45 212 191 \/ var(--tw-border-opacity, 1))}.hover\\:border-yellow-400:hover{--tw-border-opacity:1;border-color:rgb(250 204 21 \/ var(--tw-border-opacity, 1))}.hover\\:bg-brand-blue:hover{--tw-bg-opacity:1;background-color:rgb(21 101 216 \/ var(--tw-bg-opacity, 1))}.hover\\:bg-brand-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(235 242 255 \/ var(--tw-bg-opacity, 1))}.hover\\:bg-brand-blue-dark:hover{--tw-bg-opacity:1;background-color:rgb(13 71 161 \/ var(--tw-bg-opacity, 1))}.hover\\:bg-brand-yellow:hover{--tw-bg-opacity:1;background-color:rgb(245 196 0 \/ 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\\\/25:hover{background-color:rgb(255 255 255 \/ 0.25)}.hover\\:bg-white\\\/5:hover{background-color:rgb(255 255 255 \/ 0.05)}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 \/ var(--tw-bg-opacity, 1))}.hover\\:text-brand-blue:hover{--tw-text-opacity:1;color:rgb(21 101 216 \/ var(--tw-text-opacity, 1))}.hover\\:text-brand-blue-dark:hover{--tw-text-opacity:1;color:rgb(13 71 161 \/ 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-lg:hover{--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)}.hover\\:shadow-sm:hover{--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)}.hover\\:shadow-brand-blue\\\/30:hover{--tw-shadow-color:rgb(21 101 216 \/ 0.3);--tw-shadow:var(--tw-shadow-colored)}.hover\\:shadow-brand-yellow\\\/30:hover{--tw-shadow-color:rgb(245 196 0 \/ 0.3);--tw-shadow:var(--tw-shadow-colored)}.focus\\:border-brand-yellow:focus{--tw-border-opacity:1;border-color:rgb(245 196 0 \/ var(--tw-border-opacity, 1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\\:ring-4:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\\:ring-brand-yellow\\\/20:focus{--tw-ring-color:rgb(245 196 0 \/ 0.2)}.focus\\:ring-brand-yellow\\\/30:focus{--tw-ring-color:rgb(245 196 0 \/ 0.3)}.focus\\:ring-brand-yellow\\\/40:focus{--tw-ring-color:rgb(245 196 0 \/ 0.4)}.group:hover .group-hover\\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;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\\: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-black\\\/50{background-color:rgb(0 0 0 \/ 0.5)}.group:hover .group-hover\\:text-brand-blue{--tw-text-opacity:1;color:rgb(21 101 216 \/ var(--tw-text-opacity, 1))}.group:hover .group-hover\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 \/ var(--tw-text-opacity, 1))}.group:hover .group-hover\\:opacity-100{opacity:1}.group:hover .group-hover\\:opacity-60{opacity:0.6}@media (min-width: 640px){.sm\\:block{display:block}.sm\\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.sm\\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.sm\\:flex-row{flex-direction:row}.sm\\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width: 768px){.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\\:h-80{height:20rem}.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\\:p-14{padding:3.5rem}.md\\:p-16{padding:4rem}.md\\:p-8{padding:2rem}.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-6xl{font-size:3.75rem;line-height:1}.md\\:text-sm{font-size:0.875rem;line-height:1.25rem}.md\\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width: 1024px){.lg\\:col-span-2{grid-column:span 2 \/ span 2}.lg\\:col-span-3{grid-column:span 3 \/ span 3}.lg\\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.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\\:grid-cols-5{grid-template-columns:repeat(5, 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-blue-50 hover:text-brand-blue 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-dark font-semibold hover:bg-brand-blue-50 hover:text-brand-blue rounded-xl transition-all\">\u0645\u0642\u0627\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-blue-50 hover:text-brand-blue rounded-xl transition-all\">\u0631\u0627\u0647\u0646\u0645\u0627\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-blue-50 hover:text-brand-blue rounded-xl transition-all\">\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-blue-50 hover:text-brand-blue rounded-xl transition-all\">\u0645\u062d\u0635\u0648\u0644\u0627\u062a<\/a>\n        <div class=\"pt-2\">\n          <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#consultation\" 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-[90vh] 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-20\" style=\"background-image: url(&#39;https:\/\/images.pexels.com\/photos\/9875423\/pexels-photo-9875423.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1600&#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 grid -->\n    <div class=\"absolute inset-0 opacity-5\" style=\"background-image: linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 1px); background-size: 60px 60px;\"><\/div>\n\n    <!-- Breadcrumb -->\n    <div class=\"absolute top-24 right-0 left-0 px-4\">\n      <div class=\"max-w-5xl mx-auto\">\n        <nav class=\"flex items-center gap-2 text-white\/60 text-sm\">\n          <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"hover:text-white transition-colors\">\u062e\u0627\u0646\u0647<\/a>\n          <span>\/<\/span>\n          <span class=\"text-white\">\u0645\u0631\u06a9\u0632 \u062f\u0627\u0646\u0634<\/span>\n        <\/nav>\n      <\/div>\n    <\/div>\n\n    <!-- Content -->\n    <div class=\"relative z-10 max-w-5xl mx-auto px-4 text-center animate-slide-up\">\n      <!-- Badge -->\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        \u067e\u0644\u062a\u0641\u0631\u0645 \u062f\u0627\u0646\u0634 \u0645\u0647\u0646\u062f\u0633\u06cc \u0627\u0646\u0631\u0698\u06cc\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        \u0645\u0631\u06a9\u0632 \u062f\u0627\u0646\u0634 <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        \u0622\u0645\u0648\u0632\u0634\u060c \u0631\u0627\u0647\u0646\u0645\u0627\u0647\u0627\u060c \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062e\u0635\u0635\u06cc \u0648 \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u0639\u0645\u0644\u06cc \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 \u0628\u0631\u0642\n      <\/p>\n\n      <!-- Search Box -->\n      <div class=\"max-w-2xl mx-auto mb-6\">\n        <div class=\"relative flex items-center\">\n          <input type=\"text\" placeholder=\"\u062c\u0633\u062a\u062c\u0648 \u062f\u0631 \u06f7\u06f4\u06f3 \u0645\u0642\u0627\u0644\u0647 \u062a\u062e\u0635\u0635\u06cc...\" class=\"w-full bg-white\/95 backdrop-blur-sm text-brand-dark placeholder-gray-400 text-base pr-5 pl-32 py-4 rounded-2xl focus:outline-none focus:ring-4 focus:ring-brand-yellow\/40 shadow-2xl font-medium\">\n          <button class=\"absolute left-2 bg-brand-blue text-white font-semibold px-5 py-2.5 rounded-xl hover:bg-brand-blue-dark transition-all duration-200 shadow-lg hover:shadow-brand-blue\/30 text-sm 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><path d=\"m21 21-4.3-4.3\"><\/path><\/svg>\n            \u062c\u0633\u062a\u062c\u0648\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <!-- Popular Searches -->\n      <div class=\"flex flex-wrap items-center justify-center gap-2 mb-10\">\n        <span class=\"text-white\/50 text-sm\">\u067e\u0631\u062c\u0633\u062a\u062c\u0648:<\/span>\n        <button class=\"text-sm bg-white\/10 hover:bg-white\/20 text-white\/80 hover:text-white border border-white\/15 px-3 py-1.5 rounded-full transition-all duration-200\">\u067e\u0645\u067e \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/button>\n        <button class=\"text-sm bg-white\/10 hover:bg-white\/20 text-white\/80 hover:text-white border border-white\/15 px-3 py-1.5 rounded-full transition-all duration-200\">\u0628\u0627\u062a\u0631\u06cc \u0644\u06cc\u062a\u06cc\u0648\u0645<\/button>\n        <button class=\"text-sm bg-white\/10 hover:bg-white\/20 text-white\/80 hover:text-white border border-white\/15 px-3 py-1.5 rounded-full transition-all duration-200\">\u0627\u06cc\u0646\u0648\u0631\u062a\u0631 \u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc<\/button>\n        <button class=\"text-sm bg-white\/10 hover:bg-white\/20 text-white\/80 hover:text-white border border-white\/15 px-3 py-1.5 rounded-full transition-all duration-200\">\u0622\u0641\u200c\u06af\u0631\u06cc\u062f<\/button>\n        <button class=\"text-sm bg-white\/10 hover:bg-white\/20 text-white\/80 hover:text-white border border-white\/15 px-3 py-1.5 rounded-full transition-all duration-200\">\u0645\u062d\u0627\u0633\u0628\u0647 \u0638\u0631\u0641\u06cc\u062a<\/button>\n      <\/div>\n\n      <!-- Quick Buttons -->\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"flex items-center gap-2 px-5 py-2.5 rounded-xl border border-white\/20 text-white font-semibold text-sm transition-all duration-200 hover:-translate-y-0.5 bg-white\/15 hover:bg-white\/25\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 7v14\"><\/path><path d=\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\"><\/path><\/svg>\n          \u0622\u062e\u0631\u06cc\u0646 \u0645\u0642\u0627\u0644\u0627\u062a\n        <\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"flex items-center gap-2 px-5 py-2.5 rounded-xl border border-transparent text-brand-dark font-semibold text-sm transition-all duration-200 hover:-translate-y-0.5 bg-brand-yellow\/90 hover:bg-brand-yellow\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"><\/path><\/svg>\n          \u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc\n        <\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"flex items-center gap-2 px-5 py-2.5 rounded-xl border border-white\/20 text-white font-semibold text-sm transition-all duration-200 hover:-translate-y-0.5 bg-white\/15 hover:bg-white\/25\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z\"><\/path><path d=\"M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12\"><\/path><\/svg>\n          \u06a9\u0634\u0627\u0648\u0631\u0632\u06cc\n        <\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"flex items-center gap-2 px-5 py-2.5 rounded-xl border border-white\/20 text-white font-semibold text-sm transition-all duration-200 hover:-translate-y-0.5 bg-white\/15 hover:bg-white\/25\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"><\/path><\/svg>\n          \u0645\u0647\u0646\u062f\u0633\u06cc \u0628\u0631\u0642\n        <\/a>\n      <\/div>\n\n      <!-- Stats -->\n      <div class=\"mt-14 grid grid-cols-3 gap-6 max-w-lg mx-auto\">\n        <div class=\"text-center\">\n          <div class=\"text-2xl md:text-3xl font-black text-brand-yellow\">\u06f7\u06f4\u06f3<\/div>\n          <div class=\"text-white\/60 text-xs md:text-sm mt-1\">\u0645\u0642\u0627\u0644\u0647 \u062a\u062e\u0635\u0635\u06cc<\/div>\n        <\/div>\n        <div class=\"text-center\">\n          <div class=\"text-2xl md:text-3xl font-black text-brand-yellow\">\u06f4\u06f8K<\/div>\n          <div class=\"text-white\/60 text-xs md:text-sm mt-1\">\u062e\u0648\u0627\u0646\u0646\u062f\u0647 \u0645\u0627\u0647\u0627\u0646\u0647<\/div>\n        <\/div>\n        <div class=\"text-center\">\n          <div class=\"text-2xl md:text-3xl font-black text-brand-yellow\">\u06f1\u06f2<\/div>\n          <div class=\"text-white\/60 text-xs md:text-sm mt-1\">\u0633\u0627\u0644 \u062a\u062c\u0631\u0628\u0647<\/div>\n        <\/div>\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=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"rotate-[-90deg] animate-bounce\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n    <\/div>\n  <\/section>\n\n  <!-- Featured Articles -->\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      <!-- Header -->\n      <div class=\"flex items-center justify-between mb-10\">\n        <div>\n          <p class=\"text-brand-blue font-semibold text-sm mb-1 tracking-wide uppercase\">\u0645\u0642\u0627\u0644\u0627\u062a \u0648\u06cc\u0698\u0647<\/p>\n          <h2 class=\"text-3xl md:text-4xl font-bold text-brand-dark leading-tight\">\u0628\u0631\u062a\u0631\u06cc\u0646 \u0645\u0637\u0627\u0644\u0628 \u0627\u06cc\u0646 \u0647\u0641\u062a\u0647<\/h2>\n        <\/div>\n        <div class=\"flex items-center gap-2\">\n          <button onclick=\"scrollFeatured(-1)\" class=\"w-10 h-10 rounded-xl border-2 border-gray-200 hover:border-brand-blue hover:bg-brand-blue hover:text-white text-gray-400 flex items-center justify-center transition-all duration-200\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n          <\/button>\n          <button onclick=\"scrollFeatured(1)\" class=\"w-10 h-10 rounded-xl border-2 border-gray-200 hover:border-brand-blue hover:bg-brand-blue hover:text-white text-gray-400 flex items-center justify-center transition-all duration-200\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"><\/path><\/svg>\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <!-- Featured Grid -->\n      <div class=\"grid lg:grid-cols-5 gap-6\">\n        <!-- Main Featured -->\n        <div class=\"lg:col-span-3 bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover-lift group\">\n          <div class=\"relative overflow-hidden h-64 md:h-80\">\n            <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/2132126\/pexels-photo-2132126.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=800\" alt=\"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0627\u0646\u062a\u062e\u0627\u0628 \u067e\u0645\u067e \u0622\u0628\u06cc\u0627\u0631\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105\">\n            <div class=\"absolute inset-0 bg-gradient-to-t from-black\/70 via-transparent to-transparent\"><\/div>\n            <div class=\"absolute top-4 right-4\">\n              <span class=\"bg-green-100 text-green-700 text-xs font-semibold px-3 py-1 rounded-full\">\u06a9\u0634\u0627\u0648\u0631\u0632\u06cc \u0648 \u0622\u0628\u06cc\u0627\u0631\u06cc<\/span>\n            <\/div>\n            <div class=\"absolute bottom-4 right-4 left-4 text-white\">\n              <div class=\"flex items-center gap-3 text-sm text-white\/70 mb-2\">\n                <span class=\"flex items-center gap-1\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\n                  \u06f1\u06f2 \u062f\u0642\u06cc\u0642\u0647\n                <\/span>\n                <span class=\"flex items-center gap-1\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\n                  \u06f4\u066c\u06f8\u06f2\u06f1\n                <\/span>\n              <\/div>\n              <h3 class=\"text-xl font-bold leading-snug line-clamp-2\">\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0627\u0646\u062a\u062e\u0627\u0628 \u067e\u0645\u067e \u0622\u0628\u06cc\u0627\u0631\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u0628\u0631\u0627\u06cc \u0628\u0627\u063a\u0627\u062a \u067e\u0633\u062a\u0647<\/h3>\n            <\/div>\n          <\/div>\n          <div class=\"p-6\">\n            <p class=\"text-brand-gray leading-relaxed mb-4 line-clamp-2\">\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u062c\u0627\u0645\u0639\u060c \u062a\u0645\u0627\u0645\u06cc \u0641\u0627\u06a9\u062a\u0648\u0631\u0647\u0627\u06cc \u0645\u0647\u0645 \u062f\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 \u067e\u0645\u067e \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u0628\u0631\u0627\u06cc \u0628\u0627\u063a\u0627\u062a \u067e\u0633\u062a\u0647 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0627\u0632 \u0645\u062d\u0627\u0633\u0628\u0647 \u0638\u0631\u0641\u06cc\u062a \u062a\u0627 \u0646\u0635\u0628 \u0648 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc.<\/p>\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <div class=\"w-9 h-9 rounded-full bg-brand-blue-100 flex items-center justify-center text-brand-blue font-bold text-sm\">\u0645\u0647<\/div>\n                <div>\n                  <p class=\"text-sm font-semibold text-brand-dark\">\u0645\u0647\u0646\u062f\u0633 \u0627\u062d\u0645\u062f \u0631\u0636\u0627\u06cc\u06cc<\/p>\n                  <p class=\"text-xs text-brand-gray\">\u0645\u062a\u062e\u0635\u0635 \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/p>\n                <\/div>\n              <\/div>\n              <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"bg-brand-blue text-white font-semibold px-4 py-2 rounded-xl hover:bg-brand-blue-dark transition-all duration-200 flex items-center gap-2 text-sm\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 7v14\"><\/path><path d=\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\"><\/path><\/svg>\n                \u0645\u0637\u0627\u0644\u0639\u0647\n              <\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Side Cards -->\n        <div class=\"lg:col-span-2 flex flex-col gap-4\">\n          <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover-lift group\">\n            <div class=\"flex gap-4 p-4\">\n              <div class=\"flex-shrink-0 w-20 h-20 rounded-xl overflow-hidden\">\n                <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/9875423\/pexels-photo-9875423.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=800\" alt=\"\" class=\"w-full h-full object-cover transition-transform duration-300 group-hover:scale-110\">\n              <\/div>\n              <div class=\"flex-1 min-w-0\">\n                <span class=\"bg-purple-100 text-purple-700 text-xs font-semibold px-3 py-1 rounded-full mb-1 inline-block\">\u0628\u0627\u062a\u0631\u06cc \u0648 \u0630\u062e\u06cc\u0631\u0647\u200c\u0633\u0627\u0632\u06cc<\/span>\n                <h4 class=\"text-sm font-bold text-brand-dark leading-snug line-clamp-2 mb-2\">\u0645\u062d\u0627\u0633\u0628\u0647 \u062f\u0642\u06cc\u0642 \u0638\u0631\u0641\u06cc\u062a \u0628\u0627\u062a\u0631\u06cc \u0628\u0631\u0627\u06cc \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u0622\u0641\u200c\u06af\u0631\u06cc\u062f \u06a9\u0634\u0627\u0648\u0631\u0632\u06cc<\/h4>\n                <div class=\"flex items-center gap-3 text-xs text-brand-gray\">\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\n                    \u06f8 \u062f\u0642\u06cc\u0642\u0647\n                  <\/span>\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\n                    \u06f3\u066c\u06f2\u06f5\u06f0\n                  <\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/a>\n\n          <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover-lift group\">\n            <div class=\"flex gap-4 p-4\">\n              <div class=\"flex-shrink-0 w-20 h-20 rounded-xl overflow-hidden\">\n                <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/1108572\/pexels-photo-1108572.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=800\" alt=\"\" class=\"w-full h-full object-cover transition-transform duration-300 group-hover:scale-110\">\n              <\/div>\n              <div class=\"flex-1 min-w-0\">\n                <span class=\"bg-orange-100 text-orange-700 text-xs font-semibold px-3 py-1 rounded-full mb-1 inline-block\">\u0628\u0631\u0642 \u0635\u0646\u0627\u06cc\u0639<\/span>\n                <h4 class=\"text-sm font-bold text-brand-dark leading-snug line-clamp-2 mb-2\">\u0628\u0631\u0631\u0633\u06cc \u0641\u0646\u06cc \u0627\u06cc\u0646\u0648\u0631\u062a\u0631\u0647\u0627\u06cc \u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc \u0628\u0631\u0627\u06cc \u0635\u0646\u0627\u06cc\u0639 \u06a9\u0648\u0686\u06a9 \u0648 \u0645\u062a\u0648\u0633\u0637<\/h4>\n                <div class=\"flex items-center gap-3 text-xs text-brand-gray\">\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\n                    \u06f1\u06f5 \u062f\u0642\u06cc\u0642\u0647\n                  <\/span>\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\n                    \u06f5\u066c\u06f1\u06f0\u06f3\n                  <\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/a>\n\n          <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover-lift group\">\n            <div class=\"flex gap-4 p-4\">\n              <div class=\"flex-shrink-0 w-20 h-20 rounded-xl overflow-hidden\">\n                <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/356036\/pexels-photo-356036.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=800\" alt=\"\" class=\"w-full h-full object-cover transition-transform duration-300 group-hover:scale-110\">\n              <\/div>\n              <div class=\"flex-1 min-w-0\">\n                <span class=\"bg-yellow-100 text-yellow-700 text-xs font-semibold px-3 py-1 rounded-full mb-1 inline-block\">\u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/span>\n                <h4 class=\"text-sm font-bold text-brand-dark leading-snug line-clamp-2 mb-2\">\u0645\u0642\u0627\u06cc\u0633\u0647 MPPT \u0648 PWM: \u06a9\u062f\u0627\u0645 \u0634\u0627\u0631\u0698 \u06a9\u0646\u062a\u0631\u0644\u0631 \u0645\u0646\u0627\u0633\u0628\u200c\u062a\u0631 \u0627\u0633\u062a\u061f<\/h4>\n                <div class=\"flex items-center gap-3 text-xs text-brand-gray\">\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\n                    \u06f7 \u062f\u0642\u06cc\u0642\u0647\n                  <\/span>\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\n                    \u06f3\u066c\u06f8\u06f7\u06f5\n                  <\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Knowledge Categories -->\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-blue font-semibold text-sm mb-2 tracking-wide uppercase\">\u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627<\/p>\n        <h2 class=\"text-3xl md:text-4xl font-bold text-brand-dark leading-tight mb-4\">\u062d\u0648\u0632\u0647\u200c\u0647\u0627\u06cc \u062a\u062e\u0635\u0635\u06cc \u062f\u0627\u0646\u0634<\/h2>\n        <p class=\"text-brand-gray text-lg leading-relaxed max-w-xl mx-auto\">\u0647\u0631 \u0622\u0646\u0686\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 \u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc\u060c \u06a9\u0634\u0627\u0648\u0631\u0632\u06cc \u0648 \u0645\u0647\u0646\u062f\u0633\u06cc \u0628\u0631\u0642 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f \u062f\u0631 \u06cc\u06a9 \u0645\u06a9\u0627\u0646<\/p>\n      <\/div>\n\n      <div class=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4\">\n        <!-- Category Cards -->\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"group flex flex-col items-center text-center p-5 rounded-2xl border-2 bg-yellow-50 border-yellow-200 hover:border-yellow-400 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg\">\n          <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-3 transition-transform duration-300 group-hover:scale-110 bg-yellow-100\">\u2600<\/div>\n          <h3 class=\"text-sm font-bold text-brand-dark mb-1 leading-snug\">\u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/h3>\n          <p class=\"text-xs text-brand-gray\">\u06f1\u06f8\u06f4 \u0645\u0642\u0627\u0644\u0647<\/p>\n          <div class=\"mt-3 flex items-center gap-1 text-xs text-brand-blue font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\u0645\u0634\u0627\u0647\u062f\u0647 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/div>\n        <\/a>\n\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"group flex flex-col items-center text-center p-5 rounded-2xl border-2 bg-green-50 border-green-200 hover:border-green-400 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg\">\n          <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-3 transition-transform duration-300 group-hover:scale-110 bg-green-100\">\ud83d\ude9c<\/div>\n          <h3 class=\"text-sm font-bold text-brand-dark mb-1 leading-snug\">\u06a9\u0634\u0627\u0648\u0631\u0632\u06cc \u0648 \u0622\u0628\u06cc\u0627\u0631\u06cc<\/h3>\n          <p class=\"text-xs text-brand-gray\">\u06f9\u06f6 \u0645\u0642\u0627\u0644\u0647<\/p>\n          <div class=\"mt-3 flex items-center gap-1 text-xs text-brand-blue font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\u0645\u0634\u0627\u0647\u062f\u0647 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/div>\n        <\/a>\n\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"group flex flex-col items-center text-center p-5 rounded-2xl border-2 bg-lime-50 border-lime-200 hover:border-lime-400 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg\">\n          <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-3 transition-transform duration-300 group-hover:scale-110 bg-lime-100\">\ud83c\udf34<\/div>\n          <h3 class=\"text-sm font-bold text-brand-dark mb-1 leading-snug\">\u0628\u0627\u063a\u0627\u062a \u067e\u0633\u062a\u0647 \u0648 \u062e\u0631\u0645\u0627<\/h3>\n          <p class=\"text-xs text-brand-gray\">\u06f5\u06f3 \u0645\u0642\u0627\u0644\u0647<\/p>\n          <div class=\"mt-3 flex items-center gap-1 text-xs text-brand-blue font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\u0645\u0634\u0627\u0647\u062f\u0647 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/div>\n        <\/a>\n\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"group flex flex-col items-center text-center p-5 rounded-2xl border-2 bg-blue-50 border-blue-200 hover:border-blue-400 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg\">\n          <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-3 transition-transform duration-300 group-hover:scale-110 bg-blue-100\">\u26a1<\/div>\n          <h3 class=\"text-sm font-bold text-brand-dark mb-1 leading-snug\">\u0628\u0631\u0642 \u0648 \u062a\u062c\u0647\u06cc\u0632\u0627\u062a<\/h3>\n          <p class=\"text-xs text-brand-gray\">\u06f7\u06f8 \u0645\u0642\u0627\u0644\u0647<\/p>\n          <div class=\"mt-3 flex items-center gap-1 text-xs text-brand-blue font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\u0645\u0634\u0627\u0647\u062f\u0647 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/div>\n        <\/a>\n\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"group flex flex-col items-center text-center p-5 rounded-2xl border-2 bg-purple-50 border-purple-200 hover:border-purple-400 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg\">\n          <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-3 transition-transform duration-300 group-hover:scale-110 bg-purple-100\">\ud83d\udd0b<\/div>\n          <h3 class=\"text-sm font-bold text-brand-dark mb-1 leading-snug\">\u0628\u0627\u062a\u0631\u06cc \u0648 \u0630\u062e\u06cc\u0631\u0647\u200c\u0633\u0627\u0632\u06cc<\/h3>\n          <p class=\"text-xs text-brand-gray\">\u06f4\u06f5 \u0645\u0642\u0627\u0644\u0647<\/p>\n          <div class=\"mt-3 flex items-center gap-1 text-xs text-brand-blue font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\u0645\u0634\u0627\u0647\u062f\u0647 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/div>\n        <\/a>\n\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"group flex flex-col items-center text-center p-5 rounded-2xl border-2 bg-orange-50 border-orange-200 hover:border-orange-400 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg\">\n          <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-3 transition-transform duration-300 group-hover:scale-110 bg-orange-100\">\ud83c\udfed<\/div>\n          <h3 class=\"text-sm font-bold text-brand-dark mb-1 leading-snug\">\u0628\u0631\u0642 \u0635\u0646\u0627\u06cc\u0639<\/h3>\n          <p class=\"text-xs text-brand-gray\">\u06f6\u06f2 \u0645\u0642\u0627\u0644\u0647<\/p>\n          <div class=\"mt-3 flex items-center gap-1 text-xs text-brand-blue font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\u0645\u0634\u0627\u0647\u062f\u0647 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/div>\n        <\/a>\n\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"group flex flex-col items-center text-center p-5 rounded-2xl border-2 bg-cyan-50 border-cyan-200 hover:border-cyan-400 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg\">\n          <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-3 transition-transform duration-300 group-hover:scale-110 bg-cyan-100\">\ud83d\udcd0<\/div>\n          <h3 class=\"text-sm font-bold text-brand-dark mb-1 leading-snug\">\u0637\u0631\u0627\u062d\u06cc \u0648 \u0645\u062d\u0627\u0633\u0628\u0627\u062a<\/h3>\n          <p class=\"text-xs text-brand-gray\">\u06f3\u06f8 \u0645\u0642\u0627\u0644\u0647<\/p>\n          <div class=\"mt-3 flex items-center gap-1 text-xs text-brand-blue font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\u0645\u0634\u0627\u0647\u062f\u0647 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/div>\n        <\/a>\n\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"group flex flex-col items-center text-center p-5 rounded-2xl border-2 bg-indigo-50 border-indigo-200 hover:border-indigo-400 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg\">\n          <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-3 transition-transform duration-300 group-hover:scale-110 bg-indigo-100\">\ud83d\udcda<\/div>\n          <h3 class=\"text-sm font-bold text-brand-dark mb-1 leading-snug\">\u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627 \u0648 \u0622\u0645\u0648\u0632\u0634<\/h3>\n          <p class=\"text-xs text-brand-gray\">\u06f2\u06f9 \u0645\u0642\u0627\u0644\u0647<\/p>\n          <div class=\"mt-3 flex items-center gap-1 text-xs text-brand-blue font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\u0645\u0634\u0627\u0647\u062f\u0647 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/div>\n        <\/a>\n\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"group flex flex-col items-center text-center p-5 rounded-2xl border-2 bg-rose-50 border-rose-200 hover:border-rose-400 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg\">\n          <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-3 transition-transform duration-300 group-hover:scale-110 bg-rose-100\">\ud83d\udcf0<\/div>\n          <h3 class=\"text-sm font-bold text-brand-dark mb-1 leading-snug\">\u0627\u062e\u0628\u0627\u0631 \u0641\u0646\u0627\u0648\u0631\u06cc \u0627\u0646\u0631\u0698\u06cc<\/h3>\n          <p class=\"text-xs text-brand-gray\">\u06f1\u06f1\u06f7 \u0645\u0642\u0627\u0644\u0647<\/p>\n          <div class=\"mt-3 flex items-center gap-1 text-xs text-brand-blue font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\u0645\u0634\u0627\u0647\u062f\u0647 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/div>\n        <\/a>\n\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"group flex flex-col items-center text-center p-5 rounded-2xl border-2 bg-teal-50 border-teal-200 hover:border-teal-400 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg\">\n          <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-3 transition-transform duration-300 group-hover:scale-110 bg-teal-100\">\ud83d\udcc2<\/div>\n          <h3 class=\"text-sm font-bold text-brand-dark mb-1 leading-snug\">\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u0631\u0627 \u0634\u062f\u0647<\/h3>\n          <p class=\"text-xs text-brand-gray\">\u06f4\u06f1 \u0645\u0642\u0627\u0644\u0647<\/p>\n          <div class=\"mt-3 flex items-center gap-1 text-xs text-brand-blue font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\u0645\u0634\u0627\u0647\u062f\u0647 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/div>\n        <\/a>\n      <\/div>\n\n      <!-- View All -->\n      <div class=\"text-center mt-8\">\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"border-2 border-brand-blue text-brand-blue font-semibold px-6 py-3 rounded-xl hover:bg-brand-blue hover:text-white transition-all duration-200 inline-flex items-center gap-2\">\n          \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647 \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Advanced Search -->\n  <section class=\"py-12 bg-brand-dark\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6\">\n      <div class=\"bg-brand-dark-800 rounded-3xl p-6 md:p-8 border border-white\/10\">\n        <div class=\"flex items-center justify-between mb-6\">\n          <h2 class=\"text-xl font-bold text-white\">\u062c\u0633\u062a\u062c\u0648\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647<\/h2>\n          <button onclick=\"toggleFilters()\" class=\"flex items-center gap-2 text-sm text-white\/70 hover:text-white bg-white\/10 hover:bg-white\/15 px-4 py-2 rounded-xl transition-all\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.375 3.625a2.121 2.121 0 1 1 3 3L12 16l-4 1 1-4Z\"><\/path><\/svg>\n            \u0641\u06cc\u0644\u062a\u0631\u0647\u0627\n          <\/button>\n        <\/div>\n\n        <!-- Main Search -->\n        <div class=\"relative mb-4\">\n          <input type=\"text\" placeholder=\"\u06a9\u0644\u06cc\u062f\u0648\u0627\u0698\u0647\u060c \u0639\u0646\u0648\u0627\u0646 \u0645\u0642\u0627\u0644\u0647 \u06cc\u0627 \u0645\u0648\u0636\u0648\u0639 \u0631\u0627 \u062c\u0633\u062a\u062c\u0648 \u06a9\u0646\u06cc\u062f...\" class=\"w-full bg-white\/10 border border-white\/15 text-white placeholder-white\/40 rounded-xl px-5 pr-5 pl-14 py-4 focus:outline-none focus:border-brand-yellow focus:ring-2 focus:ring-brand-yellow\/20 transition-all text-base\">\n          <button class=\"absolute left-3 top-1\/2 -translate-y-1\/2 bg-brand-yellow hover:bg-brand-yellow-dark text-brand-dark p-2.5 rounded-lg transition-all\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><path d=\"m21 21-4.3-4.3\"><\/path><\/svg>\n          <\/button>\n        <\/div>\n\n        <!-- Filters (Hidden by default) -->\n        <div id=\"filters-section\" class=\"space-y-4 hidden\">\n          <!-- Category Filter -->\n          <div>\n            <p class=\"text-white\/50 text-xs font-semibold mb-2 tracking-wide\">\u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc<\/p>\n            <div class=\"flex flex-wrap gap-2\">\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-brand-blue text-white\">\u0647\u0645\u0647<\/button>\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-white\/10 text-white\/60 hover:bg-white\/15 hover:text-white transition-all\">\u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/button>\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-white\/10 text-white\/60 hover:bg-white\/15 hover:text-white transition-all\">\u06a9\u0634\u0627\u0648\u0631\u0632\u06cc<\/button>\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-white\/10 text-white\/60 hover:bg-white\/15 hover:text-white transition-all\">\u0628\u0627\u062a\u0631\u06cc<\/button>\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-white\/10 text-white\/60 hover:bg-white\/15 hover:text-white transition-all\">\u0628\u0631\u0642 \u0635\u0646\u0627\u06cc\u0639<\/button>\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-white\/10 text-white\/60 hover:bg-white\/15 hover:text-white transition-all\">\u0637\u0631\u0627\u062d\u06cc<\/button>\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-white\/10 text-white\/60 hover:bg-white\/15 hover:text-white transition-all\">\u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627<\/button>\n            <\/div>\n          <\/div>\n\n          <!-- Application Filter -->\n          <div>\n            <p class=\"text-white\/50 text-xs font-semibold mb-2 tracking-wide\">\u06a9\u0627\u0631\u0628\u0631\u062f<\/p>\n            <div class=\"flex flex-wrap gap-2\">\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-brand-yellow text-brand-dark\">\u0647\u0645\u0647<\/button>\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-white\/10 text-white\/60 hover:bg-white\/15 hover:text-white transition-all\">\u0645\u0633\u06a9\u0648\u0646\u06cc<\/button>\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-white\/10 text-white\/60 hover:bg-white\/15 hover:text-white transition-all\">\u06a9\u0634\u0627\u0648\u0631\u0632\u06cc<\/button>\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-white\/10 text-white\/60 hover:bg-white\/15 hover:text-white transition-all\">\u0635\u0646\u0639\u062a\u06cc<\/button>\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-white\/10 text-white\/60 hover:bg-white\/15 hover:text-white transition-all\">\u067e\u0645\u067e \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/button>\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-white\/10 text-white\/60 hover:bg-white\/15 hover:text-white transition-all\">\u0633\u06cc\u0633\u062a\u0645 \u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc<\/button>\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-white\/10 text-white\/60 hover:bg-white\/15 hover:text-white transition-all\">\u0622\u0646\u200c\u06af\u0631\u06cc\u062f<\/button>\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-white\/10 text-white\/60 hover:bg-white\/15 hover:text-white transition-all\">\u0622\u0641\u200c\u06af\u0631\u06cc\u062f<\/button>\n            <\/div>\n          <\/div>\n\n          <!-- Sort -->\n          <div>\n            <p class=\"text-white\/50 text-xs font-semibold mb-2 tracking-wide\">\u0645\u0631\u062a\u0628\u200c\u0633\u0627\u0632\u06cc<\/p>\n            <div class=\"flex flex-wrap gap-2\">\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-white\/25 text-white border border-white\/30\">\u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646<\/button>\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-white\/10 text-white\/60 hover:bg-white\/15 hover:text-white transition-all\">\u067e\u0631\u0628\u0627\u0632\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646<\/button>\n              <button class=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-white\/10 text-white\/60 hover:bg-white\/15 hover:text-white transition-all\">\u067e\u0631\u062e\u0648\u0627\u0646\u0646\u062f\u0647\u200c\u062a\u0631\u06cc\u0646<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Latest Articles Grid -->\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=\"flex items-center justify-between mb-10\">\n        <div>\n          <p class=\"text-brand-blue font-semibold text-sm mb-1 tracking-wide uppercase\">\u0622\u062e\u0631\u06cc\u0646 \u0645\u0637\u0627\u0644\u0628<\/p>\n          <h2 class=\"text-3xl md:text-4xl font-bold text-brand-dark leading-tight\">\u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u0645\u0642\u0627\u0644\u0627\u062a<\/h2>\n        <\/div>\n        <div class=\"flex items-center gap-2\">\n          <button class=\"hidden sm:block text-sm font-semibold px-4 py-2 rounded-xl text-brand-gray hover:text-brand-blue hover:bg-brand-blue-50 transition-all\">\u0647\u0645\u0647<\/button>\n          <button class=\"hidden sm:block text-sm font-semibold px-4 py-2 rounded-xl text-brand-gray hover:text-brand-blue hover:bg-brand-blue-50 transition-all\">\u0622\u0645\u0648\u0632\u0634\u06cc<\/button>\n          <button class=\"hidden sm:block text-sm font-semibold px-4 py-2 rounded-xl text-brand-gray hover:text-brand-blue hover:bg-brand-blue-50 transition-all\">\u067e\u0631\u0648\u0698\u0647<\/button>\n          <button class=\"hidden sm:block text-sm font-semibold px-4 py-2 rounded-xl text-brand-gray hover:text-brand-blue hover:bg-brand-blue-50 transition-all\">\u0645\u0642\u0627\u06cc\u0633\u0647<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"masonry-grid\">\n        <!-- Article 1 -->\n        <div class=\"masonry-item\">\n          <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover-lift group\">\n            <div class=\"relative overflow-hidden h-48\">\n              <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/1212407\/pexels-photo-1212407.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=600\" alt=\"\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105\">\n              <div class=\"absolute inset-0 bg-gradient-to-t from-black\/50 to-transparent\"><\/div>\n              <span class=\"absolute top-3 left-3 bg-green-100 text-green-700 text-xs font-semibold px-3 py-1 rounded-full\">\u06a9\u0634\u0627\u0648\u0631\u0632\u06cc \u0648 \u0622\u0628\u06cc\u0627\u0631\u06cc<\/span>\n            <\/div>\n            <div class=\"h-1 bg-gray-100\">\n              <div class=\"progress-bar\" style=\"width: 78%\"><\/div>\n            <\/div>\n            <div class=\"p-5\">\n              <h3 class=\"font-bold text-brand-dark leading-snug mb-2 group-hover:text-brand-blue transition-colors line-clamp-2\">\u0646\u0635\u0628 \u0633\u06cc\u0633\u062a\u0645 \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u06f1\u06f0 \u06a9\u06cc\u0644\u0648\u0648\u0627\u062a \u0628\u0631\u0627\u06cc \u06af\u0644\u062e\u0627\u0646\u0647 \u0647\u06cc\u062f\u0631\u0648\u067e\u0648\u0646\u06cc\u06a9<\/h3>\n              <p class=\"text-sm text-brand-gray leading-relaxed line-clamp-3 mb-4\">\u062a\u062c\u0631\u0628\u0647 \u0639\u0645\u0644\u06cc \u0646\u0635\u0628 \u0648 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u06cc\u0633\u062a\u0645 \u0641\u062a\u0648\u0648\u0644\u062a\u0627\u0626\u06cc\u06a9 \u0628\u0631\u0627\u06cc \u06af\u0644\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u0647\u06cc\u062f\u0631\u0648\u067e\u0648\u0646\u06cc\u06a9 \u0628\u0627 \u0645\u0635\u0631\u0641 \u0628\u0627\u0644\u0627 \u062f\u0631 \u0634\u0631\u0627\u06cc\u0637 \u0622\u0628\u200c\u0648\u0647\u0648\u0627\u06cc\u06cc \u06af\u0631\u0645.<\/p>\n              <div class=\"flex flex-wrap gap-1.5 mb-4\">\n                <span class=\"bg-yellow-100 text-yellow-700 text-xs font-semibold px-3 py-1 rounded-full\">\u0645\u062a\u0648\u0633\u0637<\/span>\n              <\/div>\n              <div class=\"flex items-center justify-between text-xs text-brand-gray border-t border-gray-100 pt-4\">\n                <div class=\"flex items-center gap-3\">\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\n                    \u06f1\u06f0 \u062f\u0642\u06cc\u0642\u0647\n                  <\/span>\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\n                    \u06f1\u066c\u06f2\u06f4\u06f0\n                  <\/span>\n                <\/div>\n              <\/div>\n              <div class=\"flex items-center justify-between mt-3\">\n                <div class=\"flex items-center gap-2\">\n                  <div class=\"w-7 h-7 rounded-full bg-brand-blue-100 flex items-center justify-center text-brand-blue text-xs font-bold\">\u0645\u0640\u0646<\/div>\n                  <span class=\"text-xs font-semibold text-brand-dark\">\u0645\u0647\u0646\u062f\u0633 \u0646\u06cc\u0644\u0648\u0641\u0631 \u0627\u06a9\u0628\u0631\u06cc<\/span>\n                <\/div>\n                <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"flex items-center gap-1 text-xs font-bold text-brand-blue hover:text-brand-blue-dark transition-colors\">\u0645\u0637\u0627\u0644\u0639\u0647 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/a>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Article 2 -->\n        <div class=\"masonry-item\">\n          <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover-lift group\">\n            <div class=\"relative overflow-hidden h-48\">\n              <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/356036\/pexels-photo-356036.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=600\" alt=\"\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105\">\n              <div class=\"absolute inset-0 bg-gradient-to-t from-black\/50 to-transparent\"><\/div>\n              <div class=\"absolute top-3 right-3 bg-brand-yellow text-brand-dark text-xs font-bold px-2.5 py-1 rounded-full flex items-center gap-1\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 7h-3v10\"><\/path><path d=\"M2 17h3V7\"><\/path><path d=\"M22 7v10\"><\/path><path d=\"M2 7v10\"><\/path><path d=\"m7 7 10 10\"><\/path><path d=\"m17 7-10 10\"><\/path><\/svg>\n                \u067e\u0631\u062e\u0648\u0627\u0646\u0646\u062f\u0647\n              <\/div>\n              <span class=\"absolute top-3 left-3 bg-yellow-100 text-yellow-700 text-xs font-semibold px-3 py-1 rounded-full\">\u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/span>\n            <\/div>\n            <div class=\"h-1 bg-gray-100\">\n              <div class=\"progress-bar\" style=\"width: 92%\"><\/div>\n            <\/div>\n            <div class=\"p-5\">\n              <h3 class=\"font-bold text-brand-dark leading-snug mb-2 group-hover:text-brand-blue transition-colors line-clamp-2\">\u0645\u0642\u0627\u06cc\u0633\u0647 MPPT \u0648 PWM: \u06a9\u062f\u0627\u0645 \u0634\u0627\u0631\u0698 \u06a9\u0646\u062a\u0631\u0644\u0631 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0645\u0646\u0627\u0633\u0628\u200c\u062a\u0631 \u0627\u0633\u062a\u061f<\/h3>\n              <p class=\"text-sm text-brand-gray leading-relaxed line-clamp-3 mb-4\">\u062a\u062d\u0644\u06cc\u0644 \u0641\u0646\u06cc \u0648 \u0627\u0642\u062a\u0635\u0627\u062f\u06cc \u062f\u0648 \u0646\u0648\u0639 \u0627\u0635\u0644\u06cc \u0634\u0627\u0631\u0698 \u06a9\u0646\u062a\u0631\u0644\u0631 \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u0648 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0634\u0631\u0627\u06cc\u0637 \u067e\u0631\u0648\u0698\u0647.<\/p>\n              <div class=\"flex flex-wrap gap-1.5 mb-4\">\n                <span class=\"bg-green-100 text-green-700 text-xs font-semibold px-3 py-1 rounded-full\">\u0645\u0628\u062a\u062f\u06cc<\/span>\n              <\/div>\n              <div class=\"flex items-center justify-between text-xs text-brand-gray border-t border-gray-100 pt-4\">\n                <div class=\"flex items-center gap-3\">\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\n                    \u06f7 \u062f\u0642\u06cc\u0642\u0647\n                  <\/span>\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\n                    \u06f3\u066c\u06f8\u06f7\u06f5\n                  <\/span>\n                <\/div>\n              <\/div>\n              <div class=\"flex items-center justify-between mt-3\">\n                <div class=\"flex items-center gap-2\">\n                  <div class=\"w-7 h-7 rounded-full bg-brand-blue-100 flex items-center justify-center text-brand-blue text-xs font-bold\">\u0645\u0640\u0631<\/div>\n                  <span class=\"text-xs font-semibold text-brand-dark\">\u0645\u0647\u0646\u062f\u0633 \u0631\u0636\u0627 \u06a9\u0631\u06cc\u0645\u06cc<\/span>\n                <\/div>\n                <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"flex items-center gap-1 text-xs font-bold text-brand-blue hover:text-brand-blue-dark transition-colors\">\u0645\u0637\u0627\u0644\u0639\u0647 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/a>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Article 3 -->\n        <div class=\"masonry-item\">\n          <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover-lift group\">\n            <div class=\"relative overflow-hidden h-48\">\n              <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/1108572\/pexels-photo-1108572.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=600\" alt=\"\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105\">\n              <div class=\"absolute inset-0 bg-gradient-to-t from-black\/50 to-transparent\"><\/div>\n              <span class=\"absolute top-3 left-3 bg-cyan-100 text-cyan-700 text-xs font-semibold px-3 py-1 rounded-full\">\u0637\u0631\u0627\u062d\u06cc \u0648 \u0645\u062d\u0627\u0633\u0628\u0627\u062a<\/span>\n            <\/div>\n            <div class=\"h-1 bg-gray-100\">\n              <div class=\"progress-bar\" style=\"width: 45%\"><\/div>\n            <\/div>\n            <div class=\"p-5\">\n              <h3 class=\"font-bold text-brand-dark leading-snug mb-2 group-hover:text-brand-blue transition-colors line-clamp-2\">\u0645\u062d\u0627\u0633\u0628\u0647 \u0628\u0627\u0631 \u0627\u0644\u06a9\u062a\u0631\u06cc\u06a9\u06cc \u0686\u0627\u0647 \u0622\u0628 \u0639\u0645\u06cc\u0642 \u06f1\u06f2\u06f0 \u0645\u062a\u0631\u06cc<\/h3>\n              <p class=\"text-sm text-brand-gray leading-relaxed line-clamp-3 mb-4\">\u0631\u0648\u0634 \u0645\u0631\u062d\u0644\u0647 \u0628\u0647 \u0645\u0631\u062d\u0644\u0647 \u0645\u062d\u0627\u0633\u0628\u0647 \u062a\u0648\u0627\u0646 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u067e\u0645\u067e \u0628\u0631\u0627\u06cc \u0686\u0627\u0647\u200c\u0647\u0627\u06cc \u0639\u0645\u06cc\u0642 \u0628\u0627 \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a\u0646 \u062a\u0644\u0641\u0627\u062a \u0644\u0648\u0644\u0647 \u0648 \u0627\u0641\u062a \u0641\u0634\u0627\u0631.<\/p>\n              <div class=\"flex flex-wrap gap-1.5 mb-4\">\n                <span class=\"bg-red-100 text-red-700 text-xs font-semibold px-3 py-1 rounded-full\">\u067e\u06cc\u0634\u0631\u0641\u062a\u0647<\/span>\n              <\/div>\n              <div class=\"flex items-center justify-between text-xs text-brand-gray border-t border-gray-100 pt-4\">\n                <div class=\"flex items-center gap-3\">\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\n                    \u06f1\u06f4 \u062f\u0642\u06cc\u0642\u0647\n                  <\/span>\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\n                    \u06f2\u066c\u06f1\u06f0\u06f0\n                  <\/span>\n                <\/div>\n              <\/div>\n              <div class=\"flex items-center justify-between mt-3\">\n                <div class=\"flex items-center gap-2\">\n                  <div class=\"w-7 h-7 rounded-full bg-brand-blue-100 flex items-center justify-center text-brand-blue text-xs font-bold\">\u0645\u0647<\/div>\n                  <span class=\"text-xs font-semibold text-brand-dark\">\u0645\u0647\u0646\u062f\u0633 \u0627\u062d\u0645\u062f \u0631\u0636\u0627\u06cc\u06cc<\/span>\n                <\/div>\n                <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"flex items-center gap-1 text-xs font-bold text-brand-blue hover:text-brand-blue-dark transition-colors\">\u0645\u0637\u0627\u0644\u0639\u0647 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/a>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Article 4 -->\n        <div class=\"masonry-item\">\n          <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover-lift group\">\n            <div class=\"relative overflow-hidden h-48\">\n              <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/9875423\/pexels-photo-9875423.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=600\" alt=\"\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105\">\n              <div class=\"absolute inset-0 bg-gradient-to-t from-black\/50 to-transparent\"><\/div>\n              <span class=\"absolute top-3 left-3 bg-yellow-100 text-yellow-700 text-xs font-semibold px-3 py-1 rounded-full\">\u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/span>\n            <\/div>\n            <div class=\"h-1 bg-gray-100\">\n              <div class=\"progress-bar\" style=\"width: 60%\"><\/div>\n            <\/div>\n            <div class=\"p-5\">\n              <h3 class=\"font-bold text-brand-dark leading-snug mb-2 group-hover:text-brand-blue transition-colors line-clamp-2\">\u0622\u0645\u0648\u0632\u0634 \u0646\u0635\u0628 \u067e\u0646\u0644\u200c\u0647\u0627\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u0631\u0648\u06cc \u0633\u0642\u0641 \u0634\u06cc\u0631\u0648\u0627\u0646\u06cc<\/h3>\n              <p class=\"text-sm text-brand-gray leading-relaxed line-clamp-3 mb-4\">\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u0646\u0635\u0628 \u0627\u06cc\u0645\u0646 \u067e\u0646\u0644\u200c\u0647\u0627\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u0631\u0648\u06cc \u0633\u0642\u0641\u200c\u0647\u0627\u06cc \u0634\u06cc\u0631\u0648\u0627\u0646\u06cc \u0628\u0627 \u0633\u0627\u0632\u0647\u200c\u0647\u0627\u06cc \u0622\u0644\u0648\u0645\u06cc\u0646\u06cc\u0648\u0645\u06cc.<\/p>\n              <div class=\"flex flex-wrap gap-1.5 mb-4\">\n                <span class=\"bg-yellow-100 text-yellow-700 text-xs font-semibold px-3 py-1 rounded-full\">\u0645\u062a\u0648\u0633\u0637<\/span>\n              <\/div>\n              <div class=\"flex items-center justify-between text-xs text-brand-gray border-t border-gray-100 pt-4\">\n                <div class=\"flex items-center gap-3\">\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\n                    \u06f9 \u062f\u0642\u06cc\u0642\u0647\n                  <\/span>\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\n                    \u06f4\u066c\u06f5\u06f6\u06f0\n                  <\/span>\n                <\/div>\n              <\/div>\n              <div class=\"flex items-center justify-between mt-3\">\n                <div class=\"flex items-center gap-2\">\n                  <div class=\"w-7 h-7 rounded-full bg-brand-blue-100 flex items-center justify-center text-brand-blue text-xs font-bold\">\u0645\u0640\u0633<\/div>\n                  <span class=\"text-xs font-semibold text-brand-dark\">\u0645\u0647\u0646\u062f\u0633 \u0633\u0627\u0631\u0627 \u0645\u062d\u0645\u062f\u06cc<\/span>\n                <\/div>\n                <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"flex items-center gap-1 text-xs font-bold text-brand-blue hover:text-brand-blue-dark transition-colors\">\u0645\u0637\u0627\u0644\u0639\u0647 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/a>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Article 5 -->\n        <div class=\"masonry-item\">\n          <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover-lift group\">\n            <div class=\"relative overflow-hidden h-48\">\n              <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/2132126\/pexels-photo-2132126.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=600\" alt=\"\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105\">\n              <div class=\"absolute inset-0 bg-gradient-to-t from-black\/50 to-transparent\"><\/div>\n              <span class=\"absolute top-3 left-3 bg-orange-100 text-orange-700 text-xs font-semibold px-3 py-1 rounded-full\">\u0628\u0631\u0642 \u0635\u0646\u0627\u06cc\u0639<\/span>\n            <\/div>\n            <div class=\"h-1 bg-gray-100\">\n              <div class=\"progress-bar\" style=\"width: 35%\"><\/div>\n            <\/div>\n            <div class=\"p-5\">\n              <h3 class=\"font-bold text-brand-dark leading-snug mb-2 group-hover:text-brand-blue transition-colors line-clamp-2\">\u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u0635\u0631\u0641 \u0628\u0631\u0642 \u062f\u0631 \u0633\u0631\u062f\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u0645\u06cc\u0648\u0647 \u0648 \u0633\u0628\u0632\u06cc\u062c\u0627\u062a<\/h3>\n              <p class=\"text-sm text-brand-gray leading-relaxed line-clamp-3 mb-4\">\u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc\u200c\u0647\u0627\u06cc \u06a9\u0627\u0647\u0634 \u0647\u0632\u06cc\u0646\u0647 \u0628\u0631\u0642 \u062f\u0631 \u0633\u0631\u062f\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u0635\u0646\u0639\u062a\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0628\u0627\u0631 \u0647\u0648\u0634\u0645\u0646\u062f.<\/p>\n              <div class=\"flex flex-wrap gap-1.5 mb-4\">\n                <span class=\"bg-red-100 text-red-700 text-xs font-semibold px-3 py-1 rounded-full\">\u067e\u06cc\u0634\u0631\u0641\u062a\u0647<\/span>\n              <\/div>\n              <div class=\"flex items-center justify-between text-xs text-brand-gray border-t border-gray-100 pt-4\">\n                <div class=\"flex items-center gap-3\">\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\n                    \u06f1\u06f1 \u062f\u0642\u06cc\u0642\u0647\n                  <\/span>\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\n                    \u06f1\u066c\u06f8\u06f9\u06f0\n                  <\/span>\n                <\/div>\n              <\/div>\n              <div class=\"flex items-center justify-between mt-3\">\n                <div class=\"flex items-center gap-2\">\n                  <div class=\"w-7 h-7 rounded-full bg-brand-blue-100 flex items-center justify-center text-brand-blue text-xs font-bold\">\u0645\u0640\u06a9<\/div>\n                  <span class=\"text-xs font-semibold text-brand-dark\">\u0645\u0647\u0646\u062f\u0633 \u06a9\u0627\u0645\u0631\u0627\u0646 \u0639\u0644\u0648\u06cc<\/span>\n                <\/div>\n                <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"flex items-center gap-1 text-xs font-bold text-brand-blue hover:text-brand-blue-dark transition-colors\">\u0645\u0637\u0627\u0644\u0639\u0647 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/a>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Article 6 -->\n        <div class=\"masonry-item\">\n          <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover-lift group\">\n            <div class=\"relative overflow-hidden h-48\">\n              <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/356036\/pexels-photo-356036.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=600\" alt=\"\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105\">\n              <div class=\"absolute inset-0 bg-gradient-to-t from-black\/50 to-transparent\"><\/div>\n              <span class=\"absolute top-3 left-3 bg-indigo-100 text-indigo-700 text-xs font-semibold px-3 py-1 rounded-full\">\u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627 \u0648 \u0622\u0645\u0648\u0632\u0634<\/span>\n            <\/div>\n            <div class=\"h-1 bg-gray-100\">\n              <div class=\"progress-bar\" style=\"width: 20%\"><\/div>\n            <\/div>\n            <div class=\"p-5\">\n              <h3 class=\"font-bold text-brand-dark leading-snug mb-2 group-hover:text-brand-blue transition-colors line-clamp-2\">\u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc IEC \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u0641\u062a\u0648\u0648\u0644\u062a\u0627\u0626\u06cc\u06a9<\/h3>\n              <p class=\"text-sm text-brand-gray leading-relaxed line-clamp-3 mb-4\">\u0645\u0631\u0648\u0631 \u062c\u0627\u0645\u0639 \u0627\u0644\u0632\u0627\u0645\u0627\u062a \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f IEC 62109 \u0648 IEC 62446 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0645\u0646\u06cc \u0648 \u0645\u0633\u062a\u0646\u062f\u0633\u0627\u0632\u06cc \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc.<\/p>\n              <div class=\"flex flex-wrap gap-1.5 mb-4\">\n                <span class=\"bg-red-100 text-red-700 text-xs font-semibold px-3 py-1 rounded-full\">\u067e\u06cc\u0634\u0631\u0641\u062a\u0647<\/span>\n              <\/div>\n              <div class=\"flex items-center justify-between text-xs text-brand-gray border-t border-gray-100 pt-4\">\n                <div class=\"flex items-center gap-3\">\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\n                    \u06f1\u06f6 \u062f\u0642\u06cc\u0642\u0647\n                  <\/span>\n                  <span class=\"flex items-center gap-1\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\n                    \u06f9\u06f8\u06f0\n                  <\/span>\n                <\/div>\n              <\/div>\n              <div class=\"flex items-center justify-between mt-3\">\n                <div class=\"flex items-center gap-2\">\n                  <div class=\"w-7 h-7 rounded-full bg-brand-blue-100 flex items-center justify-center text-brand-blue text-xs font-bold\">\u0645\u0640\u0646<\/div>\n                  <span class=\"text-xs font-semibold text-brand-dark\">\u0645\u0647\u0646\u062f\u0633 \u0646\u06cc\u0644\u0648\u0641\u0631 \u0627\u06a9\u0628\u0631\u06cc<\/span>\n                <\/div>\n                <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"flex items-center gap-1 text-xs font-bold text-brand-blue hover:text-brand-blue-dark transition-colors\">\u0645\u0637\u0627\u0644\u0639\u0647 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/a>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"text-center mt-8\">\n        <button class=\"border-2 border-brand-blue text-brand-blue font-semibold px-6 py-3 rounded-xl hover:bg-brand-blue hover:text-white transition-all duration-200 inline-flex items-center gap-2\">\n          \u0645\u0634\u0627\u0647\u062f\u0647 \u0628\u06cc\u0634\u062a\u0631\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n        <\/button>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Featured Guides -->\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-blue font-semibold text-sm mb-2 tracking-wide uppercase\">\u0631\u0627\u0647\u0646\u0645\u0627\u0647\u0627\u06cc \u062c\u0627\u0645\u0639<\/p>\n        <h2 class=\"text-3xl md:text-4xl font-bold text-brand-dark leading-tight mb-4\">\u0631\u0627\u0647\u0646\u0645\u0627\u0647\u0627\u06cc \u062a\u062e\u0635\u0635\u06cc \u0648\u06cc\u0698\u0647<\/h2>\n        <p class=\"text-brand-gray text-lg leading-relaxed max-w-xl mx-auto\">\u0631\u0627\u0647\u0646\u0645\u0627\u0647\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0648 \u0639\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u0627\u0646\u062a\u062e\u0627\u0628\u060c \u062e\u0631\u06cc\u062f \u0648 \u0646\u0635\u0628 \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u0627\u0646\u0631\u0698\u06cc<\/p>\n      <\/div>\n\n      <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6\">\n        <!-- Guide 1 -->\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover-lift group cursor-pointer\">\n          <div class=\"relative h-36 bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center overflow-hidden\">\n            <div class=\"absolute inset-0 opacity-20\" style=\"background-image: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.4) 0%, transparent 60%)\"><\/div>\n            <span class=\"text-5xl relative z-10 transition-transform duration-300 group-hover:scale-110\">\u2600<\/span>\n            <div class=\"absolute top-3 right-3 bg-white\/25 text-white text-xs font-bold px-2.5 py-1 rounded-full\">\u067e\u0631\u0637\u0631\u0641\u062f\u0627\u0631<\/div>\n          <\/div>\n          <div class=\"p-5\">\n            <h3 class=\"font-bold text-brand-dark mb-2 leading-snug group-hover:text-brand-blue transition-colors\">\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062c\u0627\u0645\u0639 \u062e\u0631\u06cc\u062f \u0633\u06cc\u0633\u062a\u0645 \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/h3>\n            <p class=\"text-sm text-brand-gray leading-relaxed mb-4 line-clamp-2\">\u0647\u0645\u0647 \u0686\u06cc\u0632 \u062f\u0631\u0628\u0627\u0631\u0647 \u0627\u0646\u062a\u062e\u0627\u0628\u060c \u062e\u0631\u06cc\u062f \u0648 \u0646\u0635\u0628 \u0633\u06cc\u0633\u062a\u0645 \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u0628\u0631\u0627\u06cc \u062e\u0627\u0646\u0647\u060c \u06a9\u0634\u0627\u0648\u0631\u0632\u06cc \u0648 \u0635\u0646\u0639\u062a<\/p>\n            <div class=\"flex items-center justify-between text-xs text-brand-gray border-t border-gray-100 pt-4\">\n              <div class=\"flex items-center gap-3\">\n                <span class=\"flex items-center gap-1\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"><\/path><polyline points=\"14 2 14 8 20 8\"><\/polyline><\/svg>\n                  \u06f4\u06f8 \u0635\u0641\u062d\u0647\n                <\/span>\n                <span class=\"flex items-center gap-1\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\n                  \u06f1\u06f2\u066c\u06f5\u06f0\u06f0\n                <\/span>\n              <\/div>\n            <\/div>\n            <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"mt-4 w-full flex items-center justify-center gap-2 py-2.5 border-2 border-brand-blue text-brand-blue font-semibold text-sm rounded-xl hover:bg-brand-blue hover:text-white transition-all duration-200\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\n              \u062f\u0627\u0646\u0644\u0648\u062f \u0631\u0627\u06cc\u06af\u0627\u0646\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <!-- Guide 2 -->\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover-lift group cursor-pointer\">\n          <div class=\"relative h-36 bg-gradient-to-br from-blue-400 to-cyan-500 flex items-center justify-center overflow-hidden\">\n            <div class=\"absolute inset-0 opacity-20\" style=\"background-image: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.4) 0%, transparent 60%)\"><\/div>\n            <span class=\"text-5xl relative z-10 transition-transform duration-300 group-hover:scale-110\">\ud83d\udebf<\/span>\n            <div class=\"absolute top-3 right-3 bg-white\/25 text-white text-xs font-bold px-2.5 py-1 rounded-full\">\u062c\u062f\u06cc\u062f<\/div>\n          <\/div>\n          <div class=\"p-5\">\n            <h3 class=\"font-bold text-brand-dark mb-2 leading-snug group-hover:text-brand-blue transition-colors\">\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u067e\u0645\u067e \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/h3>\n            <p class=\"text-sm text-brand-gray leading-relaxed mb-4 line-clamp-2\">\u0645\u062d\u0627\u0633\u0628\u0627\u062a \u062f\u0642\u06cc\u0642\u060c \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0631\u0646\u062f\u0647\u0627 \u0648 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0646\u0635\u0628 \u067e\u0645\u067e\u200c\u0647\u0627\u06cc \u0622\u0628\u06cc\u0627\u0631\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/p>\n            <div class=\"flex items-center justify-between text-xs text-brand-gray border-t border-gray-100 pt-4\">\n              <div class=\"flex items-center gap-3\">\n                <span class=\"flex items-center gap-1\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"><\/path><polyline points=\"14 2 14 8 20 8\"><\/polyline><\/svg>\n                  \u06f3\u06f2 \u0635\u0641\u062d\u0647\n                <\/span>\n                <span class=\"flex items-center gap-1\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\n                  \u06f8\u066c\u06f2\u06f0\u06f0\n                <\/span>\n              <\/div>\n            <\/div>\n            <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"mt-4 w-full flex items-center justify-center gap-2 py-2.5 border-2 border-brand-blue text-brand-blue font-semibold text-sm rounded-xl hover:bg-brand-blue hover:text-white transition-all duration-200\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\n              \u062f\u0627\u0646\u0644\u0648\u062f \u0631\u0627\u06cc\u06af\u0627\u0646\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <!-- Guide 3 -->\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover-lift group cursor-pointer\">\n          <div class=\"relative h-36 bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center overflow-hidden\">\n            <div class=\"absolute inset-0 opacity-20\" style=\"background-image: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.4) 0%, transparent 60%)\"><\/div>\n            <span class=\"text-5xl relative z-10 transition-transform duration-300 group-hover:scale-110\">\ud83d\udd0b<\/span>\n            <div class=\"absolute top-3 right-3 bg-white\/25 text-white text-xs font-bold px-2.5 py-1 rounded-full\">\u062a\u062e\u0635\u0635\u06cc<\/div>\n          <\/div>\n          <div class=\"p-5\">\n            <h3 class=\"font-bold text-brand-dark mb-2 leading-snug group-hover:text-brand-blue transition-colors\">\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0628\u0627\u062a\u0631\u06cc<\/h3>\n            <p class=\"text-sm text-brand-gray leading-relaxed mb-4 line-clamp-2\">\u0645\u0642\u0627\u06cc\u0633\u0647 \u0627\u0646\u0648\u0627\u0639 \u0628\u0627\u062a\u0631\u06cc\u200c\u0647\u0627\u06cc \u0644\u06cc\u062a\u06cc\u0648\u0645\u06cc\u060c AGM \u0648 GEL \u0628\u0631\u0627\u06cc \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/p>\n            <div class=\"flex items-center justify-between text-xs text-brand-gray border-t border-gray-100 pt-4\">\n              <div class=\"flex items-center gap-3\">\n                <span class=\"flex items-center gap-1\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"><\/path><polyline points=\"14 2 14 8 20 8\"><\/polyline><\/svg>\n                  \u06f2\u06f6 \u0635\u0641\u062d\u0647\n                <\/span>\n                <span class=\"flex items-center gap-1\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\n                  \u06f6\u066c\u06f8\u06f0\u06f0\n                <\/span>\n              <\/div>\n            <\/div>\n            <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"mt-4 w-full flex items-center justify-center gap-2 py-2.5 border-2 border-brand-blue text-brand-blue font-semibold text-sm rounded-xl hover:bg-brand-blue hover:text-white transition-all duration-200\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\n              \u062f\u0627\u0646\u0644\u0648\u062f \u0631\u0627\u06cc\u06af\u0627\u0646\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <!-- Guide 4 -->\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover-lift group cursor-pointer\">\n          <div class=\"relative h-36 bg-gradient-to-br from-red-400 to-pink-500 flex items-center justify-center overflow-hidden\">\n            <div class=\"absolute inset-0 opacity-20\" style=\"background-image: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.4) 0%, transparent 60%)\"><\/div>\n            <span class=\"text-5xl relative z-10 transition-transform duration-300 group-hover:scale-110\">\u26a1<\/span>\n            <div class=\"absolute top-3 right-3 bg-white\/25 text-white text-xs font-bold px-2.5 py-1 rounded-full\">\u0641\u0648\u0631\u06cc<\/div>\n          <\/div>\n          <div class=\"p-5\">\n            <h3 class=\"font-bold text-brand-dark mb-2 leading-snug group-hover:text-brand-blue transition-colors\">\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0642\u0637\u0639\u06cc \u0628\u0631\u0642<\/h3>\n            <p class=\"text-sm text-brand-gray leading-relaxed mb-4 line-clamp-2\">\u0631\u0627\u0647\u06a9\u0627\u0631\u0647\u0627\u06cc \u0639\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u062a\u0627\u0645\u06cc\u0646 \u0628\u0631\u0642 \u0645\u0637\u0645\u0626\u0646 \u062f\u0631 \u0645\u0646\u0627\u0637\u0642 \u0628\u0627 \u0642\u0637\u0639\u06cc \u0645\u06a9\u0631\u0631<\/p>\n            <div class=\"flex items-center justify-between text-xs text-brand-gray border-t border-gray-100 pt-4\">\n              <div class=\"flex items-center gap-3\">\n                <span class=\"flex items-center gap-1\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"><\/path><polyline points=\"14 2 14 8 20 8\"><\/polyline><\/svg>\n                  \u06f2\u06f0 \u0635\u0641\u062d\u0647\n                <\/span>\n                <span class=\"flex items-center gap-1\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\n                  \u06f1\u06f5\u066c\u06f3\u06f0\u06f0\n                <\/span>\n              <\/div>\n            <\/div>\n            <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"mt-4 w-full flex items-center justify-center gap-2 py-2.5 border-2 border-brand-blue text-brand-blue font-semibold text-sm rounded-xl hover:bg-brand-blue hover:text-white transition-all duration-200\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\n              \u062f\u0627\u0646\u0644\u0648\u062f \u0631\u0627\u06cc\u06af\u0627\u0646\n            <\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"text-center mt-8\">\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"bg-brand-blue text-white font-semibold px-6 py-3 rounded-xl hover:bg-brand-blue-dark transition-all duration-200 shadow-lg hover:shadow-brand-blue\/30 inline-flex items-center gap-2\">\n          \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647 \u0631\u0627\u0647\u0646\u0645\u0627\u0647\u0627\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Calculators 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=\"grid lg:grid-cols-2 gap-12 items-center\">\n        <!-- Left: Text -->\n        <div>\n          <p class=\"text-brand-blue font-semibold text-sm mb-2 tracking-wide uppercase\">\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0647\u0648\u0634\u0645\u0646\u062f<\/p>\n          <h2 class=\"text-3xl md:text-4xl font-bold text-brand-dark leading-tight mb-4\">\u0645\u062d\u0627\u0633\u0628\u0647\u200c\u06af\u0631\u0647\u0627\u06cc \u0645\u0647\u0646\u062f\u0633\u06cc<\/h2>\n          <p class=\"text-brand-gray text-lg leading-relaxed mb-6\">\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062d\u0627\u0633\u0628\u0647\u200c\u06af\u0631\u0647\u0627\u06cc \u062a\u062e\u0635\u0635\u06cc \u062a\u0627\u0628\u0627\u0698\u0648\u0644\u060c \u0637\u0631\u0627\u062d\u06cc \u0633\u06cc\u0633\u062a\u0645 \u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u062f\u0642\u062a \u0628\u0627\u0644\u0627 \u0648 \u0633\u0631\u0639\u062a \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f. \u0647\u0645\u0647 \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u0628\u0631 \u0627\u0633\u0627\u0633 \u0641\u0631\u0645\u0648\u0644\u200c\u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0645\u0647\u0646\u062f\u0633\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n          <div class=\"flex flex-wrap gap-3\">\n            <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"bg-brand-blue text-white font-semibold px-6 py-3 rounded-xl hover:bg-brand-blue-dark transition-all duration-200 shadow-lg hover:shadow-brand-blue\/30 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"16\" height=\"20\" x=\"4\" y=\"2\" rx=\"2\"><\/rect><line x1=\"8\" x2=\"16\" y1=\"6\" y2=\"6\"><\/line><line x1=\"16\" x2=\"16\" y1=\"14\" y2=\"18\"><\/line><path d=\"M16 10h.01\"><\/path><path d=\"M12 10h.01\"><\/path><path d=\"M8 10h.01\"><\/path><path d=\"M12 14h.01\"><\/path><path d=\"M8 14h.01\"><\/path><path d=\"M12 18h.01\"><\/path><path d=\"M8 18h.01\"><\/path><\/svg>\n              \u0634\u0631\u0648\u0639 \u0645\u062d\u0627\u0633\u0628\u0647\n            <\/a>\n            <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"border-2 border-brand-blue text-brand-blue font-semibold px-6 py-3 rounded-xl hover:bg-brand-blue hover:text-white transition-all duration-200 flex items-center gap-2\">\n              \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0645\u062d\u0627\u0633\u0628\u0647\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <!-- Right: Cards -->\n        <div class=\"grid grid-cols-2 sm:grid-cols-3 gap-4\">\n          <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"group flex flex-col p-4 rounded-2xl border-2 bg-blue-50 border-blue-200 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg cursor-pointer hover:border-blue-400\">\n            <div class=\"w-12 h-12 rounded-xl flex items-center justify-center text-2xl mb-3 transition-transform duration-300 group-hover:scale-110 bg-blue-100\">\ud83c\udf0a<\/div>\n            <h4 class=\"text-sm font-bold text-brand-dark mb-1 leading-snug\">\u0645\u062d\u0627\u0633\u0628\u0647\u200c\u06af\u0631 \u0686\u0627\u0647 \u0622\u0628<\/h4>\n            <p class=\"text-xs text-brand-gray leading-snug\">\u0639\u0645\u0642 \u0686\u0627\u0647\u060c \u062f\u0628\u06cc \u0648 \u062a\u0648\u0627\u0646 \u067e\u0645\u067e \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632<\/p>\n            <div class=\"mt-auto pt-3 flex items-center gap-1 text-xs text-brand-blue font-semibold opacity-0 group-hover:opacity-100 transition-opacity\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/div>\n          <\/a>\n\n          <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"group flex flex-col p-4 rounded-2xl border-2 bg-yellow-50 border-yellow-200 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg cursor-pointer hover:border-yellow-400\">\n            <div class=\"w-12 h-12 rounded-xl flex items-center justify-center text-2xl mb-3 transition-transform duration-300 group-hover:scale-110 bg-yellow-100\">\u2600<\/div>\n            <h4 class=\"text-sm font-bold text-brand-dark mb-1 leading-snug\">\u0645\u062d\u0627\u0633\u0628\u0647\u200c\u06af\u0631 \u0638\u0631\u0641\u06cc\u062a \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/h4>\n            <p class=\"text-xs text-brand-gray leading-snug\">\u062a\u0639\u062f\u0627\u062f \u067e\u0646\u0644 \u0648 \u0638\u0631\u0641\u06cc\u062a \u0633\u06cc\u0633\u062a\u0645<\/p>\n            <div class=\"mt-auto pt-3 flex items-center gap-1 text-xs text-brand-blue font-semibold opacity-0 group-hover:opacity-100 transition-opacity\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/div>\n          <\/a>\n\n          <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"group flex flex-col p-4 rounded-2xl border-2 bg-purple-50 border-purple-200 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg cursor-pointer hover:border-purple-400\">\n            <div class=\"w-12 h-12 rounded-xl flex items-center justify-center text-2xl mb-3 transition-transform duration-300 group-hover:scale-110 bg-purple-100\">\ud83d\udd0b<\/div>\n            <h4 class=\"text-sm font-bold text-brand-dark mb-1 leading-snug\">\u0645\u062d\u0627\u0633\u0628\u0647\u200c\u06af\u0631 \u0638\u0631\u0641\u06cc\u062a \u0628\u0627\u062a\u0631\u06cc<\/h4>\n            <p class=\"text-xs text-brand-gray leading-snug\">\u0638\u0631\u0641\u06cc\u062a \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0635\u0631\u0641<\/p>\n            <div class=\"mt-auto pt-3 flex items-center gap-1 text-xs text-brand-blue font-semibold opacity-0 group-hover:opacity-100 transition-opacity\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/div>\n          <\/a>\n\n          <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"group flex flex-col p-4 rounded-2xl border-2 bg-green-50 border-green-200 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg cursor-pointer hover:border-green-400\">\n            <div class=\"w-12 h-12 rounded-xl flex items-center justify-center text-2xl mb-3 transition-transform duration-300 group-hover:scale-110 bg-green-100\">\ud83d\udcb0<\/div>\n            <h4 class=\"text-sm font-bold text-brand-dark mb-1 leading-snug\">\u0645\u062d\u0627\u0633\u0628\u0647\u200c\u06af\u0631 \u0628\u0627\u0632\u06af\u0634\u062a \u0633\u0631\u0645\u0627\u06cc\u0647<\/h4>\n            <p class=\"text-xs text-brand-gray leading-snug\">\u0645\u062f\u062a \u0628\u0627\u0632\u06af\u0634\u062a \u0648 \u0635\u0631\u0641\u0647\u200c\u062c\u0648\u06cc\u06cc<\/p>\n            <div class=\"mt-auto pt-3 flex items-center gap-1 text-xs text-brand-blue font-semibold opacity-0 group-hover:opacity-100 transition-opacity\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/div>\n          <\/a>\n\n          <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"group flex flex-col p-4 rounded-2xl border-2 bg-orange-50 border-orange-200 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg cursor-pointer hover:border-orange-400\">\n            <div class=\"w-12 h-12 rounded-xl flex items-center justify-center text-2xl mb-3 transition-transform duration-300 group-hover:scale-110 bg-orange-100\">\u26a1<\/div>\n            <h4 class=\"text-sm font-bold text-brand-dark mb-1 leading-snug\">\u0645\u062d\u0627\u0633\u0628\u0647\u200c\u06af\u0631 \u0645\u0635\u0631\u0641 \u0627\u0646\u0631\u0698\u06cc<\/h4>\n            <p class=\"text-xs text-brand-gray leading-snug\">\u06a9\u0644 \u0645\u0635\u0631\u0641 \u062a\u062c\u0647\u06cc\u0632\u0627\u062a<\/p>\n            <div class=\"mt-auto pt-3 flex items-center gap-1 text-xs text-brand-blue font-semibold opacity-0 group-hover:opacity-100 transition-opacity\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/div>\n          <\/a>\n\n          <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"group flex flex-col p-4 rounded-2xl border-2 bg-red-50 border-red-200 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg cursor-pointer hover:border-red-400\">\n            <div class=\"w-12 h-12 rounded-xl flex items-center justify-center text-2xl mb-3 transition-transform duration-300 group-hover:scale-110 bg-red-100\">\ud83c\udf21<\/div>\n            <h4 class=\"text-sm font-bold text-brand-dark mb-1 leading-snug\">\u0645\u062d\u0627\u0633\u0628\u0647\u200c\u06af\u0631 \u062a\u0627\u062b\u06cc\u0631 \u062f\u0645\u0627<\/h4>\n            <p class=\"text-xs text-brand-gray leading-snug\">\u062a\u0627\u062b\u06cc\u0631 \u062f\u0645\u0627 \u0628\u0631 \u0628\u0627\u0632\u062f\u0647\u06cc<\/p>\n            <div class=\"mt-auto pt-3 flex items-center gap-1 text-xs text-brand-blue font-semibold opacity-0 group-hover:opacity-100 transition-opacity\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg><\/div>\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Download Center -->\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=\"flex items-center justify-between mb-10\">\n        <div>\n          <p class=\"text-brand-blue font-semibold text-sm mb-1 tracking-wide uppercase\">\u0645\u0631\u06a9\u0632 \u062f\u0627\u0646\u0644\u0648\u062f<\/p>\n          <h2 class=\"text-3xl md:text-4xl font-bold text-brand-dark leading-tight\">\u0627\u0633\u0646\u0627\u062f \u0648 \u06a9\u0627\u062a\u0627\u0644\u0648\u06af\u200c\u0647\u0627\u06cc \u0641\u0646\u06cc<\/h2>\n        <\/div>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"hidden md:flex items-center gap-2 text-brand-blue font-semibold hover:text-brand-blue-dark transition-colors\">\n          \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n        <\/a>\n      <\/div>\n\n      <div class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 p-5 flex items-center gap-4 hover-lift group\">\n          <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center text-2xl flex-shrink-0 transition-transform duration-300 group-hover:scale-110 bg-red-50 text-red-600\">\ud83d\udcc4<\/div>\n          <div class=\"flex-1 min-w-0\">\n            <h4 class=\"font-bold text-brand-dark text-sm leading-snug mb-1 line-clamp-2 group-hover:text-brand-blue transition-colors\">\u06a9\u0627\u062a\u0627\u0644\u0648\u06af \u067e\u0646\u0644\u200c\u0647\u0627\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u06f2\u06f0\u06f2\u06f4<\/h4>\n            <div class=\"flex items-center gap-3 text-xs text-brand-gray\">\n              <span class=\"bg-gray-100 px-2 py-0.5 rounded font-semibold\">PDF<\/span>\n              <span>\u06f4.\u06f2 \u0645\u06af\u0627\u0628\u0627\u06cc\u062a<\/span>\n              <span class=\"flex items-center gap-1\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\u06f3\u066c\u06f2\u06f0\u06f0<\/span>\n            <\/div>\n          <\/div>\n          <button class=\"flex-shrink-0 w-9 h-9 rounded-xl bg-brand-blue-50 hover:bg-brand-blue text-brand-blue hover:text-white flex items-center justify-center transition-all duration-200\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\n          <\/button>\n        <\/div>\n\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 p-5 flex items-center gap-4 hover-lift group\">\n          <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center text-2xl flex-shrink-0 transition-transform duration-300 group-hover:scale-110 bg-blue-50 text-blue-600\">\ud83d\udcca<\/div>\n          <div class=\"flex-1 min-w-0\">\n            <h4 class=\"font-bold text-brand-dark text-sm leading-snug mb-1 line-clamp-2 group-hover:text-brand-blue transition-colors\">\u062f\u06cc\u062a\u0627\u0634\u06cc\u062a \u0627\u06cc\u0646\u0648\u0631\u062a\u0631 \u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc \u06f5 \u06a9\u06cc\u0644\u0648\u0648\u0627\u062a<\/h4>\n            <div class=\"flex items-center gap-3 text-xs text-brand-gray\">\n              <span class=\"bg-gray-100 px-2 py-0.5 rounded font-semibold\">PDF<\/span>\n              <span>\u06f2.\u06f8 \u0645\u06af\u0627\u0628\u0627\u06cc\u062a<\/span>\n              <span class=\"flex items-center gap-1\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\u06f2\u066c\u06f1\u06f5\u06f0<\/span>\n            <\/div>\n          <\/div>\n          <button class=\"flex-shrink-0 w-9 h-9 rounded-xl bg-brand-blue-50 hover:bg-brand-blue text-brand-blue hover:text-white flex items-center justify-center transition-all duration-200\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\n          <\/button>\n        <\/div>\n\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 p-5 flex items-center gap-4 hover-lift group\">\n          <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center text-2xl flex-shrink-0 transition-transform duration-300 group-hover:scale-110 bg-green-50 text-green-600\">\ud83d\udccb<\/div>\n          <div class=\"flex-1 min-w-0\">\n            <h4 class=\"font-bold text-brand-dark text-sm leading-snug mb-1 line-clamp-2 group-hover:text-brand-blue transition-colors\">\u062f\u0641\u062a\u0631\u0686\u0647 \u0646\u0635\u0628 \u067e\u0645\u067e \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/h4>\n            <div class=\"flex items-center gap-3 text-xs text-brand-gray\">\n              <span class=\"bg-gray-100 px-2 py-0.5 rounded font-semibold\">PDF<\/span>\n              <span>\u06f6.\u06f5 \u0645\u06af\u0627\u0628\u0627\u06cc\u062a<\/span>\n              <span class=\"flex items-center gap-1\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\u06f4\u066c\u06f8\u06f0\u06f0<\/span>\n            <\/div>\n          <\/div>\n          <button class=\"flex-shrink-0 w-9 h-9 rounded-xl bg-brand-blue-50 hover:bg-brand-blue text-brand-blue hover:text-white flex items-center justify-center transition-all duration-200\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\n          <\/button>\n        <\/div>\n\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 p-5 flex items-center gap-4 hover-lift group\">\n          <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center text-2xl flex-shrink-0 transition-transform duration-300 group-hover:scale-110 bg-yellow-50 text-yellow-600\">\ud83d\udcd0<\/div>\n          <div class=\"flex-1 min-w-0\">\n            <h4 class=\"font-bold text-brand-dark text-sm leading-snug mb-1 line-clamp-2 group-hover:text-brand-blue transition-colors\">\u0641\u0631\u0645 \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u0637\u0631\u0627\u062d\u06cc \u0633\u06cc\u0633\u062a\u0645 \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/h4>\n            <div class=\"flex items-center gap-3 text-xs text-brand-gray\">\n              <span class=\"bg-gray-100 px-2 py-0.5 rounded font-semibold\">XLSX<\/span>\n              <span>\u06f1.\u06f1 \u0645\u06af\u0627\u0628\u0627\u06cc\u062a<\/span>\n              <span class=\"flex items-center gap-1\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\u06f1\u066c\u06f9\u06f0\u06f0<\/span>\n            <\/div>\n          <\/div>\n          <button class=\"flex-shrink-0 w-9 h-9 rounded-xl bg-brand-blue-50 hover:bg-brand-blue text-brand-blue hover:text-white flex items-center justify-center transition-all duration-200\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\n          <\/button>\n        <\/div>\n\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 p-5 flex items-center gap-4 hover-lift group\">\n          <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center text-2xl flex-shrink-0 transition-transform duration-300 group-hover:scale-110 bg-purple-50 text-purple-600\">\ud83d\udcda<\/div>\n          <div class=\"flex-1 min-w-0\">\n            <h4 class=\"font-bold text-brand-dark text-sm leading-snug mb-1 line-clamp-2 group-hover:text-brand-blue transition-colors\">\u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f IEC 62109 \u0641\u0627\u0631\u0633\u06cc<\/h4>\n            <div class=\"flex items-center gap-3 text-xs text-brand-gray\">\n              <span class=\"bg-gray-100 px-2 py-0.5 rounded font-semibold\">PDF<\/span>\n              <span>\u06f8.\u06f3 \u0645\u06af\u0627\u0628\u0627\u06cc\u062a<\/span>\n              <span class=\"flex items-center gap-1\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\u06f8\u06f9\u06f0<\/span>\n            <\/div>\n          <\/div>\n          <button class=\"flex-shrink-0 w-9 h-9 rounded-xl bg-brand-blue-50 hover:bg-brand-blue text-brand-blue hover:text-white flex items-center justify-center transition-all duration-200\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\n          <\/button>\n        <\/div>\n\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 p-5 flex items-center gap-4 hover-lift group\">\n          <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center text-2xl flex-shrink-0 transition-transform duration-300 group-hover:scale-110 bg-cyan-50 text-cyan-600\">\ud83d\uddfa<\/div>\n          <div class=\"flex-1 min-w-0\">\n            <h4 class=\"font-bold text-brand-dark text-sm leading-snug mb-1 line-clamp-2 group-hover:text-brand-blue transition-colors\">\u0646\u0642\u0634\u0647 \u0627\u062a\u0635\u0627\u0644 \u0633\u06cc\u0633\u062a\u0645 \u0622\u0641\u200c\u06af\u0631\u06cc\u062f<\/h4>\n            <div class=\"flex items-center gap-3 text-xs text-brand-gray\">\n              <span class=\"bg-gray-100 px-2 py-0.5 rounded font-semibold\">DWG<\/span>\n              <span>\u06f3.\u06f7 \u0645\u06af\u0627\u0628\u0627\u06cc\u062a<\/span>\n              <span class=\"flex items-center gap-1\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\u06f1\u066c\u06f6\u06f7\u06f0<\/span>\n            <\/div>\n          <\/div>\n          <button class=\"flex-shrink-0 w-9 h-9 rounded-xl bg-brand-blue-50 hover:bg-brand-blue text-brand-blue hover:text-white flex items-center justify-center transition-all duration-200\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"><\/line><\/svg>\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <!-- CTA Banner -->\n      <div class=\"mt-10 bg-gradient-brand rounded-3xl p-8 text-center text-white glow-blue\">\n        <h3 class=\"text-xl font-bold mb-2\">\u0646\u06cc\u0627\u0632 \u0628\u0647 \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0641\u0646\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0627\u0631\u06cc\u062f\u061f<\/h3>\n        <p class=\"text-white\/70 mb-5\">\u0628\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0641\u0646\u06cc \u06a9\u0627\u0645\u0644 \u0628\u0627 \u0628\u06cc\u0634 \u0627\u0632 \u06f2\u06f0\u06f0 \u0633\u0646\u062f \u0645\u0647\u0646\u062f\u0633\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f<\/p>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"bg-brand-yellow text-brand-dark font-semibold px-6 py-3 rounded-xl hover:bg-brand-yellow-dark transition-all duration-200 shadow-lg inline-flex items-center gap-2\">\n          \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u06a9\u0627\u0645\u0644\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Video Learning -->\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=\"flex items-center justify-between mb-10\">\n        <div>\n          <p class=\"text-brand-yellow font-semibold text-sm mb-1 tracking-wide uppercase\">\u0622\u0645\u0648\u0632\u0634 \u062a\u0635\u0648\u06cc\u0631\u06cc<\/p>\n          <h2 class=\"text-3xl md:text-4xl font-bold text-white\">\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0628\u0627 \u0648\u06cc\u062f\u06cc\u0648<\/h2>\n        <\/div>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"hidden md:flex items-center gap-2 text-white\/60 hover:text-white font-semibold transition-colors\">\n          \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0627\u0646\u0627\u0644\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n        <\/a>\n      <\/div>\n\n      <div class=\"grid lg:grid-cols-5 gap-6\">\n        <!-- Featured Video -->\n        <div class=\"lg:col-span-3 group cursor-pointer\">\n          <div class=\"relative rounded-2xl overflow-hidden aspect-video bg-black\">\n            <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/9875423\/pexels-photo-9875423.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400\" alt=\"\" class=\"w-full h-full object-cover opacity-80 transition-all duration-500 group-hover:opacity-60 group-hover:scale-105\">\n            <div class=\"absolute inset-0 flex items-center justify-center\">\n              <div class=\"w-16 h-16 bg-brand-yellow rounded-full flex items-center justify-center shadow-2xl transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-dark mr-1\"><polygon points=\"6 3 20 12 6 21 6 3\"><\/polygon><\/svg>\n              <\/div>\n            <\/div>\n            <div class=\"absolute bottom-0 right-0 left-0 p-5 bg-gradient-to-t from-black\/90 to-transparent\">\n              <span class=\"bg-brand-yellow\/20 text-brand-yellow border border-brand-yellow\/30 text-xs font-semibold px-3 py-1 rounded-full mb-2 inline-block\">\u0622\u0645\u0648\u0632\u0634 \u0646\u0635\u0628<\/span>\n              <h3 class=\"text-white font-bold text-lg leading-snug\">\u0622\u0645\u0648\u0632\u0634 \u0646\u0635\u0628 \u067e\u0646\u0644 \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc \u2014 \u0642\u0633\u0645\u062a \u0627\u0648\u0644<\/h3>\n              <div class=\"flex items-center gap-3 text-white\/60 text-sm mt-1\">\n                <span>\u06f2\u06f4:\u06f3\u06f5<\/span>\n                <span class=\"flex items-center gap-1\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\n                  \u06f1\u06f8\u066c\u06f5\u06f0\u06f0 \u0628\u0627\u0632\u062f\u06cc\u062f\n                <\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Side Video List -->\n        <div class=\"lg:col-span-2 space-y-3\">\n          <div class=\"group flex gap-4 p-3 rounded-2xl hover:bg-white\/5 transition-all duration-200 cursor-pointer\">\n            <div class=\"flex-shrink-0 relative w-28 h-20 rounded-xl overflow-hidden\">\n              <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/1108572\/pexels-photo-1108572.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400\" alt=\"\" class=\"w-full h-full object-cover transition-transform duration-300 group-hover:scale-110\">\n              <div class=\"absolute inset-0 flex items-center justify-center bg-black\/30 group-hover:bg-black\/50 transition-colors\">\n                <div class=\"w-8 h-8 bg-brand-yellow rounded-full flex items-center justify-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-dark mr-0.5\"><polygon points=\"6 3 20 12 6 21 6 3\"><\/polygon><\/svg>\n                <\/div>\n              <\/div>\n              <div class=\"absolute bottom-1 right-1 bg-black\/80 text-white text-xs px-1.5 py-0.5 rounded font-mono\">\u06f1\u06f8:\u06f1\u06f2<\/div>\n            <\/div>\n            <div class=\"flex-1 min-w-0\">\n              <span class=\"text-brand-yellow\/70 text-xs font-semibold\">\u0646\u0635\u0628 \u0648 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc<\/span>\n              <h4 class=\"text-white\/90 font-semibold text-sm leading-snug mb-1 line-clamp-2 group-hover:text-white transition-colors\">\u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u06cc\u0646\u0648\u0631\u062a\u0631 \u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc MUST<\/h4>\n              <div class=\"flex items-center gap-2 text-white\/40 text-xs\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\n                \u06f1\u06f2\u066c\u06f8\u06f0\u06f0 \u0628\u0627\u0632\u062f\u06cc\u062f\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"group flex gap-4 p-3 rounded-2xl hover:bg-white\/5 transition-all duration-200 cursor-pointer\">\n            <div class=\"flex-shrink-0 relative w-28 h-20 rounded-xl overflow-hidden\">\n              <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/2132126\/pexels-photo-2132126.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400\" alt=\"\" class=\"w-full h-full object-cover transition-transform duration-300 group-hover:scale-110\">\n              <div class=\"absolute inset-0 flex items-center justify-center bg-black\/30 group-hover:bg-black\/50 transition-colors\">\n                <div class=\"w-8 h-8 bg-brand-yellow rounded-full flex items-center justify-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-dark mr-0.5\"><polygon points=\"6 3 20 12 6 21 6 3\"><\/polygon><\/svg>\n                <\/div>\n              <\/div>\n              <div class=\"absolute bottom-1 right-1 bg-black\/80 text-white text-xs px-1.5 py-0.5 rounded font-mono\">\u06f3\u06f2:\u06f5\u06f0<\/div>\n            <\/div>\n            <div class=\"flex-1 min-w-0\">\n              <span class=\"text-brand-yellow\/70 text-xs font-semibold\">\u0646\u06af\u0647\u062f\u0627\u0631\u06cc<\/span>\n              <h4 class=\"text-white\/90 font-semibold text-sm leading-snug mb-1 line-clamp-2 group-hover:text-white transition-colors\">\u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0648 \u0633\u0631\u0648\u06cc\u0633 \u067e\u0645\u067e \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/h4>\n              <div class=\"flex items-center gap-2 text-white\/40 text-xs\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\n                \u06f8\u066c\u06f2\u06f0\u06f0 \u0628\u0627\u0632\u062f\u06cc\u062f\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"group flex gap-4 p-3 rounded-2xl hover:bg-white\/5 transition-all duration-200 cursor-pointer\">\n            <div class=\"flex-shrink-0 relative w-28 h-20 rounded-xl overflow-hidden\">\n              <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/356036\/pexels-photo-356036.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400\" alt=\"\" class=\"w-full h-full object-cover transition-transform duration-300 group-hover:scale-110\">\n              <div class=\"absolute inset-0 flex items-center justify-center bg-black\/30 group-hover:bg-black\/50 transition-colors\">\n                <div class=\"w-8 h-8 bg-brand-yellow rounded-full flex items-center justify-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-dark mr-0.5\"><polygon points=\"6 3 20 12 6 21 6 3\"><\/polygon><\/svg>\n                <\/div>\n              <\/div>\n              <div class=\"absolute bottom-1 right-1 bg-black\/80 text-white text-xs px-1.5 py-0.5 rounded font-mono\">\u06f4\u06f5:\u06f1\u06f8<\/div>\n            <\/div>\n            <div class=\"flex-1 min-w-0\">\n              <span class=\"text-brand-yellow\/70 text-xs font-semibold\">\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u0631\u0627 \u0634\u062f\u0647<\/span>\n              <h4 class=\"text-white\/90 font-semibold text-sm leading-snug mb-1 line-clamp-2 group-hover:text-white transition-colors\">\u067e\u0631\u0648\u0698\u0647 \u0628\u0627\u063a \u067e\u0633\u062a\u0647 \u2014 \u06af\u0632\u0627\u0631\u0634 \u0645\u06cc\u062f\u0627\u0646\u06cc<\/h4>\n              <div class=\"flex items-center gap-2 text-white\/40 text-xs\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\n                \u06f2\u06f2\u066c\u06f1\u06f0\u06f0 \u0628\u0627\u0632\u062f\u06cc\u062f\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"group flex gap-4 p-3 rounded-2xl hover:bg-white\/5 transition-all duration-200 cursor-pointer\">\n            <div class=\"flex-shrink-0 relative w-28 h-20 rounded-xl overflow-hidden\">\n              <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/1212407\/pexels-photo-1212407.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400\" alt=\"\" class=\"w-full h-full object-cover transition-transform duration-300 group-hover:scale-110\">\n              <div class=\"absolute inset-0 flex items-center justify-center bg-black\/30 group-hover:bg-black\/50 transition-colors\">\n                <div class=\"w-8 h-8 bg-brand-yellow rounded-full flex items-center justify-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"text-brand-dark mr-0.5\"><polygon points=\"6 3 20 12 6 21 6 3\"><\/polygon><\/svg>\n                <\/div>\n              <\/div>\n              <div class=\"absolute bottom-1 right-1 bg-black\/80 text-white text-xs px-1.5 py-0.5 rounded font-mono\">\u06f2\u06f8:\u06f4\u06f4<\/div>\n            <\/div>\n            <div class=\"flex-1 min-w-0\">\n              <span class=\"text-brand-yellow\/70 text-xs font-semibold\">\u0622\u0645\u0648\u0632\u0634\u06cc<\/span>\n              <h4 class=\"text-white\/90 font-semibold text-sm leading-snug mb-1 line-clamp-2 group-hover:text-white transition-colors\">\u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627\u062a\u0631\u06cc\u200c\u0647\u0627\u06cc \u0644\u06cc\u062a\u06cc\u0648\u0645 \u0648 AGM<\/h4>\n              <div class=\"flex items-center gap-2 text-white\/40 text-xs\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\n                \u06f9\u066c\u06f6\u06f0\u06f0 \u0628\u0627\u0632\u062f\u06cc\u062f\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Case Studies -->\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-blue font-semibold text-sm mb-2 tracking-wide uppercase\">\u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u0648\u0627\u0642\u0639\u06cc<\/p>\n        <h2 class=\"text-3xl md:text-4xl font-bold text-brand-dark leading-tight mb-4\">\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u0631\u0627 \u0634\u062f\u0647<\/h2>\n        <p class=\"text-brand-gray text-lg leading-relaxed max-w-xl mx-auto\">\u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0648\u0627\u0642\u0639\u06cc \u0627\u0632 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0627\u0698\u0648\u0644 \u0628\u0627 \u0646\u062a\u0627\u06cc\u062c \u0642\u0627\u0628\u0644 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u06af\u06cc\u0631\u06cc<\/p>\n      <\/div>\n\n      <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n        <!-- Case Study 1 -->\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover-lift\">\n          <div class=\"relative h-52 overflow-hidden\">\n            <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/2132126\/pexels-photo-2132126.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=600\" alt=\"\" class=\"w-full h-full object-cover transition-all duration-500\">\n            <div class=\"absolute inset-0 bg-gradient-to-t from-black\/60 to-transparent\"><\/div>\n            <div class=\"absolute bottom-3 right-3 flex items-center gap-1.5 text-white text-xs\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><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              \u06a9\u0631\u0645\u0627\u0646\u060c \u0634\u0647\u0631\u0628\u0627\u0628\u06a9\n            <\/div>\n          <\/div>\n          <div class=\"p-5\">\n            <div class=\"flex items-start justify-between mb-3\">\n              <h3 class=\"font-bold text-brand-dark leading-snug\">\u0628\u0627\u063a \u067e\u0633\u062a\u0647 \u06f5\u06f0 \u0647\u06a9\u062a\u0627\u0631\u06cc \u2014 \u06a9\u0631\u0645\u0627\u0646<\/h3>\n              <div class=\"flex gap-0.5 flex-shrink-0 mr-2\">\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            <div class=\"grid grid-cols-2 gap-3 mb-4\">\n              <div class=\"bg-brand-blue-50 rounded-xl p-3 text-center\">\n                <div class=\"flex items-center justify-center gap-1 text-brand-blue mb-1\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"><\/path><\/svg>\n                  <span class=\"text-xs font-bold\">\u06f3\u06f0 \u06a9\u06cc\u0644\u0648\u0648\u0627\u062a<\/span>\n                <\/div>\n                <p class=\"text-xs text-brand-gray\">\u0638\u0631\u0641\u06cc\u062a \u0646\u0635\u0628<\/p>\n              <\/div>\n              <div class=\"bg-green-50 rounded-xl p-3 text-center\">\n                <div class=\"text-green-600 text-xs font-bold mb-1\">\u2713 \u0645\u0648\u0641\u0642<\/div>\n                <p class=\"text-xs text-brand-gray\">\u0622\u0628\u06cc\u0627\u0631\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/p>\n              <\/div>\n            <\/div>\n            <div class=\"space-y-2 mb-4\">\n              <div class=\"flex gap-2\">\n                <span class=\"text-red-500 text-xs mt-0.5\">\u25cf<\/span>\n                <p class=\"text-xs text-brand-gray\">\u0646\u0628\u0648\u062f \u0634\u0628\u06a9\u0647 \u0628\u0631\u0642 \u062f\u0631 \u0645\u0646\u0637\u0642\u0647 \u0648 \u0647\u0632\u06cc\u0646\u0647 \u0628\u0627\u0644\u0627\u06cc \u06af\u0627\u0632\u0648\u0626\u06cc\u0644<\/p>\n              <\/div>\n              <div class=\"flex gap-2\">\n                <span class=\"text-green-500 text-xs mt-0.5\">\u25cf<\/span>\n                <p class=\"text-xs font-semibold text-brand-dark\">\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<\/p>\n              <\/div>\n            <\/div>\n            <blockquote class=\"bg-gray-50 rounded-xl p-3 border-r-2 border-brand-blue text-xs text-brand-gray italic leading-relaxed\">\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.\u00bb\n              <footer class=\"text-brand-dark font-semibold mt-1 not-italic\">\u2014 \u0622\u0642\u0627\u06cc \u062d\u0633\u06cc\u0646\u06cc<\/footer>\n            <\/blockquote>\n            <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"mt-4 w-full flex items-center justify-center gap-2 py-2.5 border-2 border-brand-blue text-brand-blue font-semibold text-sm rounded-xl hover:bg-brand-blue hover:text-white transition-all duration-200\">\n              \u0645\u0637\u0627\u0644\u0639\u0647 \u06a9\u0627\u0645\u0644 \u067e\u0631\u0648\u0698\u0647\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <!-- Case Study 2 -->\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover-lift\">\n          <div class=\"relative h-52 overflow-hidden\">\n            <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/1212407\/pexels-photo-1212407.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=600\" alt=\"\" class=\"w-full h-full object-cover transition-all duration-500\">\n            <div class=\"absolute inset-0 bg-gradient-to-t from-black\/60 to-transparent\"><\/div>\n            <div class=\"absolute bottom-3 right-3 flex items-center gap-1.5 text-white text-xs\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><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              \u0627\u0635\u0641\u0647\u0627\u0646\u060c \u0644\u0646\u062c\u0627\u0646\n            <\/div>\n          <\/div>\n          <div class=\"p-5\">\n            <div class=\"flex items-start justify-between mb-3\">\n              <h3 class=\"font-bold text-brand-dark leading-snug\">\u06af\u0644\u062e\u0627\u0646\u0647 \u0635\u0646\u0639\u062a\u06cc \u0647\u06cc\u062f\u0631\u0648\u067e\u0648\u0646\u06cc\u06a9 \u2014 \u0627\u0635\u0641\u0647\u0627\u0646<\/h3>\n              <div class=\"flex gap-0.5 flex-shrink-0 mr-2\">\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            <div class=\"grid grid-cols-2 gap-3 mb-4\">\n              <div class=\"bg-brand-blue-50 rounded-xl p-3 text-center\">\n                <div class=\"flex items-center justify-center gap-1 text-brand-blue mb-1\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"><\/path><\/svg>\n                  <span class=\"text-xs font-bold\">\u06f8\u06f0 \u06a9\u06cc\u0644\u0648\u0648\u0627\u062a<\/span>\n                <\/div>\n                <p class=\"text-xs text-brand-gray\">\u0638\u0631\u0641\u06cc\u062a \u0646\u0635\u0628<\/p>\n              <\/div>\n              <div class=\"bg-green-50 rounded-xl p-3 text-center\">\n                <div class=\"text-green-600 text-xs font-bold mb-1\">\u2713 \u0645\u0648\u0641\u0642<\/div>\n                <p class=\"text-xs text-brand-gray\">\u062a\u0627\u0645\u06cc\u0646 \u0628\u0631\u0642 \u06af\u0644\u062e\u0627\u0646\u0647<\/p>\n              <\/div>\n            <\/div>\n            <div class=\"space-y-2 mb-4\">\n              <div class=\"flex gap-2\">\n                <span class=\"text-red-500 text-xs mt-0.5\">\u25cf<\/span>\n                <p class=\"text-xs text-brand-gray\">\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<\/p>\n              <\/div>\n              <div class=\"flex gap-2\">\n                <span class=\"text-green-500 text-xs mt-0.5\">\u25cf<\/span>\n                <p class=\"text-xs font-semibold text-brand-dark\">\u062a\u0627\u0645\u06cc\u0646 \u06f9\u06f5\u066a \u0628\u0631\u0642 \u0627\u0632 \u0645\u0646\u0627\u0628\u0639 \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/p>\n              <\/div>\n            <\/div>\n            <blockquote class=\"bg-gray-50 rounded-xl p-3 border-r-2 border-brand-blue text-xs text-brand-gray italic leading-relaxed\">\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.\u00bb\n              <footer class=\"text-brand-dark font-semibold mt-1 not-italic\">\u2014 \u0634\u0631\u06a9\u062a \u06a9\u0634\u0627\u0648\u0631\u0632\u06cc \u0633\u0628\u0632 \u0627\u0635\u0641\u0647\u0627\u0646<\/footer>\n            <\/blockquote>\n            <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"mt-4 w-full flex items-center justify-center gap-2 py-2.5 border-2 border-brand-blue text-brand-blue font-semibold text-sm rounded-xl hover:bg-brand-blue hover:text-white transition-all duration-200\">\n              \u0645\u0637\u0627\u0644\u0639\u0647 \u06a9\u0627\u0645\u0644 \u067e\u0631\u0648\u0698\u0647\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <!-- Case Study 3 -->\n        <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover-lift\">\n          <div class=\"relative h-52 overflow-hidden\">\n            <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/1108572\/pexels-photo-1108572.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=600\" alt=\"\" class=\"w-full h-full object-cover transition-all duration-500\">\n            <div class=\"absolute inset-0 bg-gradient-to-t from-black\/60 to-transparent\"><\/div>\n            <div class=\"absolute bottom-3 right-3 flex items-center gap-1.5 text-white text-xs\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><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              \u062a\u0647\u0631\u0627\u0646\u060c \u0634\u0647\u0631\u06cc\u0627\u0631\n            <\/div>\n          <\/div>\n          <div class=\"p-5\">\n            <div class=\"flex items-start justify-between mb-3\">\n              <h3 class=\"font-bold text-brand-dark leading-snug\">\u06a9\u0627\u0631\u062e\u0627\u0646\u0647 \u062a\u0648\u0644\u06cc\u062f\u06cc \u0645\u062a\u0648\u0633\u0637 \u2014 \u062a\u0647\u0631\u0627\u0646<\/h3>\n              <div class=\"flex gap-0.5 flex-shrink-0 mr-2\">\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            <div class=\"grid grid-cols-2 gap-3 mb-4\">\n              <div class=\"bg-brand-blue-50 rounded-xl p-3 text-center\">\n                <div class=\"flex items-center justify-center gap-1 text-brand-blue mb-1\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"><\/path><\/svg>\n                  <span class=\"text-xs font-bold\">\u06f1\u06f5\u06f0 \u06a9\u06cc\u0644\u0648\u0648\u0627\u062a<\/span>\n                <\/div>\n                <p class=\"text-xs text-brand-gray\">\u0638\u0631\u0641\u06cc\u062a \u0646\u0635\u0628<\/p>\n              <\/div>\n              <div class=\"bg-green-50 rounded-xl p-3 text-center\">\n                <div class=\"text-green-600 text-xs font-bold mb-1\">\u2713 \u0645\u0648\u0641\u0642<\/div>\n                <p class=\"text-xs text-brand-gray\">\u0628\u0631\u0642 \u0635\u0646\u0639\u062a\u06cc \u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc<\/p>\n              <\/div>\n            <\/div>\n            <div class=\"space-y-2 mb-4\">\n              <div class=\"flex gap-2\">\n                <span class=\"text-red-500 text-xs mt-0.5\">\u25cf<\/span>\n                <p class=\"text-xs text-brand-gray\">\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<\/p>\n              <\/div>\n              <div class=\"flex gap-2\">\n                <span class=\"text-green-500 text-xs mt-0.5\">\u25cf<\/span>\n                <p class=\"text-xs font-semibold text-brand-dark\">\u06a9\u0627\u0647\u0634 \u06f6\u06f0\u066a \u0642\u0628\u0636 \u0628\u0631\u0642 \u0635\u0646\u0639\u062a\u06cc<\/p>\n              <\/div>\n            <\/div>\n            <blockquote class=\"bg-gray-50 rounded-xl p-3 border-r-2 border-brand-blue text-xs text-brand-gray italic leading-relaxed\">\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.\u00bb\n              <footer class=\"text-brand-dark font-semibold mt-1 not-italic\">\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<\/footer>\n            <\/blockquote>\n            <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"mt-4 w-full flex items-center justify-center gap-2 py-2.5 border-2 border-brand-blue text-brand-blue font-semibold text-sm rounded-xl hover:bg-brand-blue hover:text-white transition-all duration-200\">\n              \u0645\u0637\u0627\u0644\u0639\u0647 \u06a9\u0627\u0645\u0644 \u067e\u0631\u0648\u0698\u0647\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n            <\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Newsletter -->\n  <section class=\"py-16 md:py-24 bg-white\">\n    <div class=\"max-w-4xl mx-auto px-4 sm:px-6\">\n      <div class=\"relative bg-gradient-brand rounded-3xl p-10 md:p-14 text-center overflow-hidden glow-blue\">\n        <!-- Background decoration -->\n        <div class=\"absolute inset-0 opacity-10\" style=\"background-image: radial-gradient(circle at 20% 50%, rgba(245,196,0,0.8) 0%, transparent 50%), radial-gradient(circle at 80% 50%, rgba(255,255,255,0.3) 0%, transparent 50%)\"><\/div>\n        <div class=\"absolute inset-0 opacity-5\" style=\"background-image: linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 1px); background-size: 40px 40px\"><\/div>\n\n        <div class=\"relative z-10\">\n          <!-- Icon -->\n          <div class=\"w-16 h-16 bg-brand-yellow rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-brand-dark\"><rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"><\/rect><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"><\/path><\/svg>\n          <\/div>\n\n          <h2 class=\"text-3xl md:text-4xl font-black text-white mb-4\">\u0622\u062e\u0631\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u200c\u0647\u0627 \u0648 \u0627\u062e\u0628\u0627\u0631 \u0627\u0646\u0631\u0698\u06cc \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f<\/h2>\n          <p class=\"text-white\/70 text-lg mb-8 max-w-xl mx-auto\">\u0647\u0631 \u0647\u0641\u062a\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0645\u0642\u0627\u0644\u0627\u062a\u060c \u0631\u0627\u0647\u0646\u0645\u0627\u0647\u0627 \u0648 \u0627\u062e\u0628\u0627\u0631 \u0635\u0646\u0639\u062a \u0627\u0646\u0631\u0698\u06cc \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645 \u062f\u0631 \u0627\u06cc\u0645\u06cc\u0644 \u062e\u0648\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n\n          <form class=\"flex flex-col sm:flex-row gap-3 max-w-lg mx-auto\">\n            <input type=\"email\" placeholder=\"\u0622\u062f\u0631\u0633 \u0627\u06cc\u0645\u06cc\u0644 \u0634\u0645\u0627\" required=\"\" class=\"flex-1 bg-white\/15 border border-white\/25 text-white placeholder-white\/50 rounded-xl px-5 py-3.5 focus:outline-none focus:border-brand-yellow focus:ring-2 focus:ring-brand-yellow\/30 text-base\">\n            <button type=\"submit\" class=\"bg-brand-yellow text-brand-dark font-semibold px-6 py-3 rounded-xl hover:bg-brand-yellow-dark transition-all duration-200 hover:-translate-y-0.5 whitespace-nowrap flex items-center justify-center gap-2\">\n              \u0639\u0636\u0648\u06cc\u062a \u0631\u0627\u06cc\u06af\u0627\u0646\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n            <\/button>\n          <\/form>\n\n          <!-- Trust signals -->\n          <div class=\"flex flex-wrap justify-center gap-6 mt-8 text-white\/50 text-sm\">\n            <span>\u0628\u06cc\u0634 \u0627\u0632 \u06f1\u06f2\u066c\u06f0\u06f0\u06f0 \u0645\u0647\u0646\u062f\u0633 \u0639\u0636\u0648<\/span>\n            <span>\u2022<\/span>\n            <span>\u0628\u062f\u0648\u0646 \u0627\u0633\u067e\u0645<\/span>\n            <span>\u2022<\/span>\n            <span>\u0644\u063a\u0648 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0622\u0633\u0627\u0646<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Consultation Banner -->\n  <section id=\"consultation\" class=\"py-16 md:py-24 bg-brand-dark-800\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6\">\n      <div class=\"relative rounded-3xl overflow-hidden\">\n        <!-- Background Image -->\n        <div class=\"absolute inset-0\" style=\"background-image: url(&#39;https:\/\/images.pexels.com\/photos\/9875423\/pexels-photo-9875423.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1600&#39;); background-size: cover; background-position: center;\"><\/div>\n        <div class=\"absolute inset-0 bg-brand-dark\/85\"><\/div>\n\n        <div class=\"relative z-10 p-10 md:p-16 grid lg:grid-cols-2 gap-10 items-center\">\n          <!-- Left -->\n          <div>\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              \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646 \u2014 \u0647\u0645\u06cc\u0646 \u0627\u0644\u0627\u0646\n            <\/div>\n            <h2 class=\"text-3xl md:text-4xl font-black text-white mb-4 leading-tight\">\n              \u0628\u0631\u0627\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0633\u06cc\u0633\u062a\u0645 \u0645\u0646\u0627\u0633\u0628\n              <br>\n              <span class=\"text-brand-yellow\">\u0646\u06cc\u0627\u0632 \u0628\u0647 \u0645\u0634\u0627\u0648\u0631\u0647 \u062f\u0627\u0631\u06cc\u062f\u061f<\/span>\n            <\/h2>\n            <p class=\"text-white\/70 text-lg leading-relaxed mb-6\">\u06a9\u0627\u0631\u0634\u0646\u0627\u0633\u0627\u0646 \u0641\u0646\u06cc \u062a\u0627\u0628\u0627\u0698\u0648\u0644 \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. \u0647\u06cc\u0686 \u0647\u0632\u06cc\u0646\u0647\u200c\u0627\u06cc \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0648\u0631\u0647 \u0627\u0648\u0644\u06cc\u0647 \u062f\u0631\u06cc\u0627\u0641\u062a \u0646\u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n            <div class=\"flex flex-wrap gap-3\">\n              <a href=\"tel:02100000000\" class=\"bg-brand-yellow text-brand-dark font-semibold px-6 py-3 rounded-xl hover:bg-brand-yellow-dark transition-all duration-200 hover:-translate-y-0.5 shadow-lg 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><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=\"flex items-center gap-2 bg-green-500 hover:bg-green-600 text-white font-semibold px-6 py-3 rounded-xl transition-all duration-200 hover:-translate-y-0.5 shadow-lg\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><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=\"flex items-center gap-2 bg-white\/10 hover:bg-white\/20 border border-white\/20 text-white font-semibold px-6 py-3 rounded-xl transition-all duration-200 hover:-translate-y-0.5\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><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 \u062c\u0644\u0633\u0647\n              <\/a>\n            <\/div>\n          <\/div>\n\n          <!-- Right: Quick Form -->\n          <div class=\"glass rounded-2xl p-6\">\n            <h3 class=\"text-white font-bold text-lg mb-5\">\u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646<\/h3>\n            <div class=\"space-y-3\">\n              <input type=\"text\" placeholder=\"\u0646\u0627\u0645 \u0648 \u0646\u0627\u0645 \u062e\u0627\u0646\u0648\u0627\u062f\u06af\u06cc\" class=\"w-full bg-white\/10 border border-white\/15 text-white placeholder-white\/40 rounded-xl px-4 py-3 focus:outline-none focus:border-brand-yellow focus:ring-2 focus:ring-brand-yellow\/20 transition-all\">\n              <input type=\"tel\" placeholder=\"\u0634\u0645\u0627\u0631\u0647 \u0645\u0648\u0628\u0627\u06cc\u0644\" dir=\"ltr\" class=\"w-full bg-white\/10 border border-white\/15 text-white placeholder-white\/40 rounded-xl px-4 py-3 focus:outline-none focus:border-brand-yellow focus:ring-2 focus:ring-brand-yellow\/20 transition-all\">\n              <select class=\"w-full bg-white\/10 border border-white\/15 text-white\/70 rounded-xl px-4 py-3 focus:outline-none focus:border-brand-yellow transition-all\">\n                <option value=\"\" class=\"text-gray-900\">\u0646\u0648\u0639 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/option>\n                <option value=\"agricultural\" class=\"text-gray-900\">\u06a9\u0634\u0627\u0648\u0631\u0632\u06cc \u0648 \u0622\u0628\u06cc\u0627\u0631\u06cc<\/option>\n                <option value=\"residential\" class=\"text-gray-900\">\u0645\u0633\u06a9\u0648\u0646\u06cc<\/option>\n                <option value=\"industrial\" class=\"text-gray-900\">\u0635\u0646\u0639\u062a\u06cc<\/option>\n                <option value=\"offgrid\" class=\"text-gray-900\">\u0622\u0641\u200c\u06af\u0631\u06cc\u062f<\/option>\n              <\/select>\n              <textarea rows=\"3\" placeholder=\"\u062a\u0648\u0636\u06cc\u062d \u0645\u062e\u062a\u0635\u0631\u06cc \u0627\u0632 \u0646\u06cc\u0627\u0632 \u062e\u0648\u062f...\" class=\"w-full bg-white\/10 border border-white\/15 text-white placeholder-white\/40 rounded-xl px-4 py-3 focus:outline-none focus:border-brand-yellow focus:ring-2 focus:ring-brand-yellow\/20 transition-all resize-none\"><\/textarea>\n              <button class=\"w-full bg-brand-yellow text-brand-dark font-semibold px-6 py-3 rounded-xl hover:bg-brand-yellow-dark transition-all duration-200 flex items-center justify-center gap-2\">\n                \u0627\u0631\u0633\u0627\u0644 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"><\/path><\/svg>\n              <\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Popular Tags -->\n  <section class=\"py-12 bg-brand-gray-light\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6\">\n      <div class=\"flex items-center gap-3 mb-6\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-brand-blue\"><path d=\"M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z\"><\/path><path d=\"M7 7h.01\"><\/path><\/svg>\n        <h3 class=\"text-lg font-bold text-brand-dark\">\u0628\u0631\u0686\u0633\u0628\u200c\u0647\u0627\u06cc \u067e\u0631\u0637\u0631\u0641\u062f\u0627\u0631<\/h3>\n      <\/div>\n      <div class=\"flex flex-wrap gap-2\">\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u0647\u06cc\u0628\u0631\u06cc\u062f\u06cc<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u0622\u0646\u200c\u06af\u0631\u06cc\u062f<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u067e\u0645\u067e \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#MPPT<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u0628\u0627\u062a\u0631\u06cc<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u0627\u06cc\u0646\u0648\u0631\u062a\u0631<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u067e\u0646\u0644 \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u06a9\u0634\u0627\u0648\u0631\u0632\u06cc<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u0642\u0637\u0639\u06cc \u0628\u0631\u0642<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u067e\u0633\u062a\u0647<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u062e\u0631\u0645\u0627<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u06af\u0644\u062e\u0627\u0646\u0647<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u0635\u0646\u0639\u062a\u06cc<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u0627\u0646\u0631\u0698\u06cc \u062a\u062c\u062f\u06cc\u062f\u067e\u0630\u06cc\u0631<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u0622\u0641\u200c\u06af\u0631\u06cc\u062f<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#PWM<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u0644\u06cc\u062a\u06cc\u0648\u0645<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#AGM<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u0637\u0631\u0627\u062d\u06cc \u0633\u06cc\u0633\u062a\u0645<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u0646\u0635\u0628<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#\u0646\u06af\u0647\u062f\u0627\u0631\u06cc<\/a>\n        <a href=\"file:\/\/\/D:\/This%20PC\/Desktop\/New%20Text%20Document.html#\" class=\"px-4 py-2 bg-white border border-gray-200 text-brand-gray hover:border-brand-blue hover:text-brand-blue hover:bg-brand-blue-50 rounded-xl text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm\">#ROI<\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Footer -->\n  <footer class=\"bg-brand-dark text-white\">\n    \n  <\/footer>\n\n  <script>\n    \/\/ Navbar scroll effect\n    window.addEventListener('scroll', function() {\n      const navbar = document.getElementById('navbar');\n      const navLinks = navbar.querySelectorAll('.nav-link');\n      const navIcon = navbar.querySelector('.nav-icon');\n\n      if (window.scrollY > 20) {\n        navbar.classList.remove('navbar-transparent');\n        navbar.classList.add('navbar-scrolled');\n        navLinks.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        if (navIcon) {\n          navIcon.classList.remove('text-white', 'hover:bg-white\/10');\n          navIcon.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        navLinks.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        if (navIcon) {\n          navIcon.classList.add('text-white', 'hover:bg-white\/10');\n          navIcon.classList.remove('text-brand-dark', 'hover:bg-gray-100');\n        }\n      }\n    });\n\n    \/\/ Mobile menu toggle\n    function toggleMobileMenu() {\n      const menu = document.getElementById('mobile-menu');\n      menu.classList.toggle('hidden');\n    }\n\n    \/\/ Filters toggle\n    function toggleFilters() {\n      const filters = document.getElementById('filters-section');\n      filters.classList.toggle('hidden');\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>\u0645\u0631\u06a9\u0632 \u062f\u0627\u0646\u0634 \u062a\u0627\u0628\u0627\u0698\u0648\u0644 | \u0627\u0646\u0631\u0698\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f\u06cc\u060c \u06a9\u0634\u0627\u0648\u0631\u0632\u06cc \u0648 \u0628\u0631\u0642 \u0645\u0631\u06a9\u0632 \u062f\u0627\u0646\u0634 \u0645\u0642\u0627\u0644\u0627\u062a \u0631\u0627\u0647\u0646\u0645\u0627\u0647\u0627 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646 \u062e\u0627\u0646\u0647 \/ \u0645\u0631\u06a9\u0632<\/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-50","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tabajoule.ir\/index.php?rest_route=\/wp\/v2\/pages\/50","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=50"}],"version-history":[{"count":16,"href":"https:\/\/tabajoule.ir\/index.php?rest_route=\/wp\/v2\/pages\/50\/revisions"}],"predecessor-version":[{"id":286,"href":"https:\/\/tabajoule.ir\/index.php?rest_route=\/wp\/v2\/pages\/50\/revisions\/286"}],"wp:attachment":[{"href":"https:\/\/tabajoule.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}