{"id":15,"date":"2026-09-07T01:15:48","date_gmt":"2026-09-06T22:15:48","guid":{"rendered":"https:\/\/alaa-alkojok.dollani.cloud\/?page_id=15"},"modified":"2026-09-14T16:20:05","modified_gmt":"2026-09-14T13:20:05","slug":"%d8%a7%d9%84%d8%b1%d8%a6%d9%8a%d8%b3%d9%8a%d8%a9","status":"publish","type":"page","link":"https:\/\/alaa-alkojok.dollani.cloud\/","title":{"rendered":"\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"15\" class=\"elementor elementor-15\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7673c68 e-con-full e-flex e-con e-parent\" data-id=\"7673c68\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3321701 elementor-widget elementor-widget-html\" data-id=\"3321701\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u0647\u064a\u062f\u0631 \u062c\u062f\u064a\u062f \u0645\u0639 \u0634\u0639\u0627\u0631 \u0627\u0633\u0645 \u0627\u0644\u0634\u0631\u0643\u0629 KOJOK -->\r\n<header class=\"cyber-header\">\r\n  <div class=\"cyber-header-container\">\r\n    \r\n    <!-- \u0634\u0639\u0627\u0631 \u0627\u0644\u0634\u0631\u0643\u0629 \u0628\u0627\u0633\u0645 KOJOK -->\r\n    <a href=\"#\" class=\"cyber-logo-link\" aria-label=\"\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\">\r\n      <span class=\"logo-text\">KOJOK<span class=\"logo-dot\">.<\/span><\/span>\r\n    <\/a>\r\n\r\n    <!-- \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 -->\r\n    <nav class=\"cyber-nav\">\r\n      <a href=\"#servicesSection\" class=\"cyber-nav-link active\">\u0627\u0644\u062e\u062f\u0645\u0627\u062a<\/a>\r\n      <a href=\"#portfolioSection\" class=\"cyber-nav-link\">\u0645\u0639\u0631\u0636 \u0627\u0644\u0623\u0639\u0645\u0627\u0644<\/a>\r\n      <a href=\"#processSection\" class=\"cyber-nav-link\">\u0622\u0644\u064a\u0629 \u0627\u0644\u0639\u0645\u0644<\/a>\r\n      <a href=\"#pricingSection\" class=\"cyber-nav-link\">\u0627\u0644\u0628\u0627\u0642\u0627\u062a<\/a>\r\n      <a href=\"#faqSection\" class=\"cyber-nav-link\">\u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u0634\u0627\u0626\u0639\u0629<\/a>\r\n    <\/nav>\r\n\r\n    <!-- \u0627\u0644\u0632\u0631 \u0627\u0644\u0631\u0626\u064a\u0633\u064a -->\r\n    <div class=\"cyber-action\">\r\n      <a href=\"mailto:alokjokalaa@gmail.com\" class=\"cyber-btn\">\r\n        <span class=\"btn-text\">\u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643<\/span>\r\n        <span class=\"btn-icon\">\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line>\r\n            <polyline points=\"12 19 5 12 12 5\"><\/polyline>\r\n          <\/svg>\r\n        <\/span>\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n  <!-- \u062e\u0637 \u0627\u0644\u0646\u064a\u0648\u0646 \u0627\u0644\u0645\u062a\u0648\u0647\u062c \u0623\u0633\u0641\u0644 \u0627\u0644\u0647\u064a\u062f\u0631 -->\r\n  <div class=\"header-glow-line\"><\/div>\r\n<\/header>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@800;900&family=Cairo:wght@500;700;800;900&display=swap');\r\n\r\n  \/* \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0647\u064a\u062f\u0631 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 *\/\r\n  .cyber-header {\r\n    position: sticky;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    z-index: 9999;\r\n    background: rgba(11, 9, 13, 0.7);\r\n    backdrop-filter: blur(20px);\r\n    -webkit-backdrop-filter: blur(20px);\r\n    font-family: 'Cairo', sans-serif;\r\n    direction: rtl;\r\n    box-sizing: border-box;\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .cyber-header-container {\r\n    max-width: 1240px;\r\n    margin: 0 auto;\r\n    padding: 14px 24px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n  }\r\n\r\n  \/* \u062a\u0646\u0633\u064a\u0642 \u0634\u0639\u0627\u0631 \u0627\u0633\u0645 \u0627\u0644\u0634\u0631\u0643\u0629 KOJOK *\/\r\n  .cyber-logo-link {\r\n    display: flex;\r\n    align-items: center;\r\n    text-decoration: none;\r\n    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n  }\r\n\r\n  .logo-text {\r\n    font-family: 'Montserrat', sans-serif;\r\n    font-size: 26px;\r\n    font-weight: 900;\r\n    letter-spacing: 2px;\r\n    background: linear-gradient(135deg, #ffffff 30%, #ff476e 100%);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    filter: drop-shadow(0 0 10px rgba(230, 57, 86, 0.4));\r\n  }\r\n\r\n  .logo-dot {\r\n    -webkit-text-fill-color: #e63956;\r\n    font-size: 32px;\r\n  }\r\n\r\n  .cyber-logo-link:hover {\r\n    transform: scale(1.05);\r\n  }\r\n\r\n  .cyber-logo-link:hover .logo-text {\r\n    filter: drop-shadow(0 0 16px rgba(255, 60, 95, 0.8));\r\n  }\r\n\r\n  \/* \u0631\u0648\u0627\u0628\u0637 \u0627\u0644\u062a\u0646\u0642\u0644 \u0628\u0623\u0633\u0644\u0648\u0628 \u0627\u0644\u0643\u0628\u0633\u0648\u0644\u0629 Light Pill *\/\r\n  .cyber-nav {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    background: rgba(255, 255, 255, 0.03);\r\n    padding: 6px 10px;\r\n    border-radius: 30px;\r\n    border: 1px solid rgba(255, 255, 255, 0.05);\r\n  }\r\n\r\n  .cyber-nav-link {\r\n    color: #b3abb0;\r\n    text-decoration: none;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    padding: 8px 18px;\r\n    border-radius: 20px;\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .cyber-nav-link:hover {\r\n    color: #ffffff;\r\n    background: rgba(230, 57, 86, 0.15);\r\n  }\r\n\r\n  .cyber-nav-link.active {\r\n    color: #ffffff;\r\n    background: rgba(230, 57, 86, 0.25);\r\n    border: 1px solid rgba(230, 57, 86, 0.4);\r\n    box-shadow: 0 0 10px rgba(230, 57, 86, 0.2);\r\n  }\r\n\r\n  \/* \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0632\u0631 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a *\/\r\n  .cyber-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    background: linear-gradient(135deg, #e63956 0%, #a8132d 100%);\r\n    color: #ffffff;\r\n    padding: 10px 24px;\r\n    border-radius: 30px;\r\n    text-decoration: none;\r\n    font-size: 14px;\r\n    font-weight: 800;\r\n    box-shadow: 0 4px 20px rgba(230, 57, 86, 0.35);\r\n    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n  }\r\n\r\n  .cyber-btn:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 8px 25px rgba(230, 57, 86, 0.6);\r\n    background: linear-gradient(135deg, #ff476e 0%, #c41836 100%);\r\n  }\r\n\r\n  .btn-icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: transform 0.3s ease;\r\n  }\r\n\r\n  .cyber-btn:hover .btn-icon {\r\n    transform: translateX(-4px);\r\n  }\r\n\r\n  \/* \u062e\u0637 \u0627\u0644\u0646\u064a\u0648\u0646 \u0627\u0644\u0645\u062a\u0648\u0647\u062c \u0628\u0627\u0644\u0623\u0633\u0641\u0644 *\/\r\n  .header-glow-line {\r\n    width: 100%;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, \r\n      rgba(230, 57, 86, 0) 0%, \r\n      rgba(230, 57, 86, 0.5) 50%, \r\n      rgba(230, 57, 86, 0) 100%);\r\n  }\r\n\r\n  \/* \u0627\u0644\u062a\u062c\u0627\u0648\u0628 \u0645\u0639 \u0627\u0644\u062c\u0648\u0627\u0644 *\/\r\n  @media (max-width: 900px) {\r\n    .cyber-nav {\r\n      display: none;\r\n    }\r\n\r\n    .cyber-header-container {\r\n      padding: 10px 16px;\r\n    }\r\n\r\n    .logo-text {\r\n      font-size: 22px;\r\n    }\r\n\r\n    .cyber-btn {\r\n      padding: 8px 18px;\r\n      font-size: 13px;\r\n    }\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d2d93a elementor-widget elementor-widget-html\" data-id=\"6d2d93a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u0642\u0633\u0645 \u0627\u0644\u0647\u064a\u0631\u0648 \u0627\u0644\u0631\u0626\u064a\u0633\u064a \u0645\u0639 \u062e\u0644\u0641\u064a\u0629 \u0631\u0642\u0645\u064a\u0629 \u0641\u0627\u062e\u0631\u0629 - Pure HTML & CSS Hero Section -->\r\n<div class=\"hero-section-custom\" id=\"heroSection\">\r\n  \r\n  <!-- \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0645\u0628\u062a\u0643\u0631\u0629 (Ambient Background System) -->\r\n  <div class=\"hero-bg-wrapper\">\r\n    <div class=\"glow-orb orb-primary\"><\/div>\r\n    <div class=\"glow-orb orb-secondary\"><\/div>\r\n    <div class=\"glow-orb orb-center\"><\/div>\r\n    <div class=\"hero-grid-pattern\"><\/div>\r\n    <div class=\"light-beam beam-1\"><\/div>\r\n    <div class=\"light-beam beam-2\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"hero-container\">\r\n    \r\n    <!-- \u0642\u0633\u0645 \u0627\u0644\u0646\u0635\u0648\u0635 (\u064a\u0645\u064a\u0646) -->\r\n    <div class=\"hero-content\">\r\n      <div class=\"badge\">\r\n        <span class=\"dot\"><\/span>\r\n        <span>\u0627\u0633\u062a\u0648\u062f\u064a\u0648 \u0625\u0628\u062f\u0627\u0639\u064a \u0645\u0633\u062a\u0642\u0644<\/span>\r\n      <\/div>\r\n\r\n      <h1 class=\"main-title\">\r\n        \u0646\u062d\u0648\u0651\u0644<br>\r\n        <span class=\"highlight\">\u0627\u0644\u0623\u0641\u0643\u0627\u0631<\/span><br>\r\n        \u0625\u0644\u0649 <span class=\"highlight\">\u0623\u062b\u0631.<\/span>\r\n      <\/h1>\r\n\r\n      <p class=\"description\">\r\n        \u0646\u0635\u0646\u0639 \u0639\u0644\u0627\u0645\u0627\u062a \u0648\u062a\u062c\u0627\u0631\u0628 \u062a\u064f\u0634\u0628\u0647 \u0623\u0635\u062d\u0627\u0628\u0647\u0627\u060c \u0648\u0646\u062a\u0631\u0643 \u0645\u0643\u0627\u0646\u0627\u064b \u062c\u0645\u064a\u0644\u0627\u064b \u0641\u064a \u0630\u0627\u0643\u0631\u0629 \u0627\u0644\u0646\u0627\u0633.\r\n      <\/p>\r\n\r\n      <div class=\"cta-buttons\">\r\n        <a href=\"mailto:alokjokalaa@gmail.com\" class=\"btn btn-primary\">\r\n          \u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643\r\n          <span class=\"icon\">\u2190<\/span>\r\n        <\/a>\r\n        <a href=\"#portfolioSection\" class=\"btn btn-secondary\">\r\n          <span class=\"play-icon\">\u25b6<\/span>\r\n          \u0634\u0648\u0641 \u0634\u063a\u0644\u0646\u0627\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u0642\u0633\u0645 \u0627\u0644\u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629 3D \u0645\u0639 \u0627\u0644\u0639\u062f\u0627\u062f \u0627\u0644\u062d\u064a \u0648\u0627\u0644\u062e\u0637 \u0627\u0644\u0628\u064a\u0627\u0646\u064a -->\r\n    <div class=\"hero-media\">\r\n      <div class=\"interactive-card\" id=\"dashboardCard\">\r\n        \r\n        <!-- \u0634\u0628\u0643\u064a\u0629 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 -->\r\n        <div class=\"card-grid-bg\"><\/div>\r\n\r\n        <!-- \u0627\u0644\u0634\u0631\u064a\u0637 \u0627\u0644\u0639\u0644\u0648\u064a -->\r\n        <div class=\"card-header\">\r\n          <span class=\"card-code\">04 \/ 01<\/span>\r\n          <div class=\"live-status\">\r\n            <span class=\"pulse-dot\"><\/span>\r\n            LIVE ANALYTICS\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- \u0645\u0644\u0635\u0642 \u0648\u0631\u062f\u064a \u0645\u0627\u0626\u0644 \u062a\u0641\u0627\u0639\u0644\u064a -->\r\n        <div class=\"pink-sticker\">\r\n          <span>\u0627\u0644\u0623\u062c\u0645\u0644<br>\u0644\u0633\u0647 \u062c\u0627\u064a \u2728<\/span>\r\n        <\/div>\r\n\r\n        <!-- \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 -->\r\n        <div class=\"card-title-box\">\r\n          <span class=\"sub-label\">KOJOK \/ INSIGHT ENGINE<\/span>\r\n          <h2 class=\"card-main-title\">\u0627\u0644\u0641\u0643\u0631\u0629<br>\u062a\u062d\u0643\u064a.<\/h2>\r\n          <p class=\"card-sub-text\">\u0645\u0646 \u0627\u0644\u0631\u0642\u0645 \u0625\u0644\u0649 \u0627\u0644\u0642\u0631\u0627\u0631 \u0628\u0648\u0636\u0648\u062d \u0623\u0643\u0628\u0631.<\/p>\r\n        <\/div>\r\n\r\n        <!-- \u0645\u0631\u0628\u0639 \u0627\u0644\u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u0627\u0644\u0645\u062f\u0645\u062c -->\r\n        <div class=\"stats-box-animated\">\r\n          <span class=\"stat-label\">ACTIVE SIGNAL<\/span>\r\n          <div class=\"stat-value-container\">\r\n            <div class=\"main-percent-wrapper\">\r\n              <span class=\"stat-value\" id=\"mainNum\">0.0%<\/span>\r\n            <\/div>\r\n            <div class=\"trend-badge\" id=\"trendBadge\">\r\n              <span class=\"trend-num\" id=\"subNum\">0.0%<\/span>\r\n              <span class=\"trend-arrow\" id=\"arrowIcon\">\u25b2<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u0627\u0644\u062d\u064a -->\r\n        <div class=\"chart-container\">\r\n          <svg viewBox=\"0 0 500 180\" class=\"chart-svg\">\r\n            <defs>\r\n              <linearGradient id=\"area-gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n                <stop offset=\"0%\" stop-color=\"#e63956\" stop-opacity=\"0.5\"\/>\r\n                <stop offset=\"100%\" stop-color=\"#e63956\" stop-opacity=\"0\"\/>\r\n              <\/linearGradient>\r\n              \r\n              <linearGradient id=\"line-gradient\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\r\n                <stop offset=\"0%\" stop-color=\"#ff6b83\"\/>\r\n                <stop offset=\"50%\" stop-color=\"#e63956\"\/>\r\n                <stop offset=\"100%\" stop-color=\"#ff3b5c\"\/>\r\n              <\/linearGradient>\r\n            <\/defs>\r\n\r\n            <path class=\"chart-area wave-area-loop\" d=\"M0,150 Q100,120 180,90 T350,60 T500,25 L500,180 L0,180 Z\" fill=\"url(#area-gradient)\" \/>\r\n            <path class=\"chart-line wave-line-loop\" d=\"M0,150 Q100,120 180,90 T350,60 T500,25\" fill=\"none\" stroke=\"url(#line-gradient)\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\r\n            <circle cx=\"495\" cy=\"25\" r=\"6\" class=\"data-node node-synced-loop\" \/>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <!-- \u0623\u0633\u0641\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 -->\r\n        <div class=\"card-footer\">\r\n          <span class=\"footer-time\">12:00<\/span>\r\n          <span class=\"footer-stat\"><span class=\"glow-arrow\">\u2197<\/span> <span id=\"conversionVal\">64.8K<\/span> CONVERSION<\/span>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;700;900&display=swap');\r\n\r\n  \/* \u0625\u0644\u063a\u0627\u0621 \u0623\u064a \u0647\u0648\u0627\u0645\u0634 \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629 \u0642\u062f \u062a\u0633\u0628\u0628 \u0641\u062c\u0648\u0627\u062a *\/\r\n  div, p, h1, h2, span, a {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* \u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0628\u0639\u062f \u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u062a\u0645\u062f\u062f \u0627\u0644\u062e\u0627\u0637\u0626 *\/\r\n  .hero-section-custom {\r\n    background-color: #08060a;\r\n    color: #ffffff;\r\n    font-family: 'Cairo', sans-serif;\r\n    direction: rtl;\r\n    \r\n    width: 100% !important;\r\n    max-width: 100% !important;\r\n    padding-top: 140px !important;\r\n    padding-bottom: 90px !important;\r\n    padding-left: 5%;\r\n    padding-right: 5%;\r\n    \r\n    position: relative !important;\r\n    box-sizing: border-box;\r\n    overflow: hidden;\r\n    z-index: 1;\r\n  }\r\n\r\n  \/* =========================================================\r\n     \u062a\u0646\u0633\u064a\u0642\u0627\u062a \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0627\u0644\u0641\u0627\u062e\u0631\u0629\r\n     ========================================================= *\/\r\n  .hero-bg-wrapper {\r\n    position: absolute;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    width: 100%; height: 100%;\r\n    overflow: hidden;\r\n    pointer-events: none;\r\n    z-index: 0;\r\n  }\r\n\r\n  .glow-orb {\r\n    position: absolute;\r\n    border-radius: 50%;\r\n    filter: blur(100px);\r\n    opacity: 0.45;\r\n    animation: orbFloat 12s infinite ease-in-out alternate;\r\n  }\r\n\r\n  .orb-primary {\r\n    top: -10%;\r\n    right: 10%;\r\n    width: 450px;\r\n    height: 450px;\r\n    background: radial-gradient(circle, rgba(230, 57, 86, 0.45) 0%, transparent 70%);\r\n  }\r\n\r\n  .orb-secondary {\r\n    bottom: -15%;\r\n    left: 5%;\r\n    width: 500px;\r\n    height: 500px;\r\n    background: radial-gradient(circle, rgba(147, 51, 234, 0.25) 0%, transparent 70%);\r\n    animation-delay: -4s;\r\n  }\r\n\r\n  .orb-center {\r\n    top: 30%;\r\n    left: 45%;\r\n    width: 300px;\r\n    height: 300px;\r\n    background: radial-gradient(circle, rgba(230, 57, 86, 0.2) 0%, transparent 70%);\r\n    animation-delay: -8s;\r\n  }\r\n\r\n  @keyframes orbFloat {\r\n    0% { transform: translate(0, 0) scale(1); }\r\n    50% { transform: translate(-20px, 15px) scale(1.05); }\r\n    100% { transform: translate(20px, -15px) scale(0.95); }\r\n  }\r\n\r\n  .hero-grid-pattern {\r\n    position: absolute;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background-image: \r\n      linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),\r\n      linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);\r\n    background-size: 50px 50px;\r\n    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 100%);\r\n    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 100%);\r\n  }\r\n\r\n  .light-beam {\r\n    position: absolute;\r\n    width: 1px;\r\n    height: 200%;\r\n    background: linear-gradient(180deg, transparent, rgba(230, 57, 86, 0.3), transparent);\r\n    transform: rotate(35deg);\r\n    top: -50%;\r\n  }\r\n\r\n  .beam-1 { left: 20%; animation: beamMove 8s infinite linear; }\r\n  .beam-2 { right: 30%; animation: beamMove 12s infinite linear; animation-delay: -5s; }\r\n\r\n  @keyframes beamMove {\r\n    0% { transform: translateY(-30%) rotate(35deg); opacity: 0.2; }\r\n    50% { opacity: 0.6; }\r\n    100% { transform: translateY(30%) rotate(35deg); opacity: 0.2; }\r\n  }\r\n\r\n  \/* =========================================================\r\n     \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\r\n     ========================================================= *\/\r\n  .hero-container {\r\n    max-width: 1300px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 40px;\r\n    width: 100%;\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n\r\n  .hero-content { flex: 1; text-align: right; }\r\n\r\n  .badge {\r\n    display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #a09a9e; margin-bottom: 25px;\r\n    background: rgba(255, 255, 255, 0.03); padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08);\r\n    backdrop-filter: blur(5px);\r\n  }\r\n  .badge .dot {\r\n    width: 8px; height: 8px; background-color: #e63956; border-radius: 50%; box-shadow: 0 0 10px #e63956;\r\n  }\r\n\r\n  .main-title { font-size: 72px; font-weight: 900; line-height: 1.05; margin-bottom: 20px; color: #ffffff; }\r\n  .main-title .highlight { \r\n    color: #e63956;\r\n    background: linear-gradient(135deg, #ffffff 0%, #e63956 100%);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n  }\r\n  .description { font-size: 18px; line-height: 1.7; color: #a09a9e; margin-bottom: 35px; max-width: 480px; }\r\n\r\n  .cta-buttons { display: flex; align-items: center; gap: 20px; }\r\n  .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; border-radius: 35px; text-decoration: none; font-weight: 700; font-size: 16px; transition: all 0.3s ease; }\r\n  .btn-primary { background-color: #e63956; color: #ffffff; box-shadow: 0 8px 20px rgba(230, 57, 86, 0.3); }\r\n  .btn-primary:hover { background-color: #ff3b5c; box-shadow: 0 12px 28px rgba(230, 57, 86, 0.5); transform: translateY(-2px); }\r\n  .btn-secondary { background: rgba(255, 255, 255, 0.03); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px); }\r\n  .btn-secondary:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.08); }\r\n  .btn-secondary .play-icon { font-size: 10px; background: rgba(255, 255, 255, 0.1); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }\r\n\r\n  \/* \u0627\u0644\u0628\u0637\u0627\u0642\u0629 3D *\/\r\n  .hero-media { flex: 1; display: flex; justify-content: center; perspective: 1200px; }\r\n  \r\n  .interactive-card {\r\n    position: relative; width: 100%; max-width: 420px;\r\n    background: linear-gradient(150deg, rgba(35, 18, 29, 0.85) 0%, rgba(18, 9, 16, 0.95) 100%);\r\n    border: 1px solid rgba(230, 57, 86, 0.3); border-radius: 28px; padding: 30px; box-sizing: border-box;\r\n    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.15);\r\n    transform: rotateY(-8deg) rotateX(4deg);\r\n    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease, border-color 0.6s ease;\r\n    cursor: pointer; overflow: hidden;\r\n    backdrop-filter: blur(10px);\r\n  }\r\n\r\n  .interactive-card:hover {\r\n    transform: rotateY(0deg) rotateX(0deg) scale(1.02);\r\n    box-shadow: 0 40px 90px rgba(230, 57, 86, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.4);\r\n    border-color: rgba(230, 57, 86, 0.8);\r\n  }\r\n\r\n  .card-grid-bg {\r\n    position: absolute; top: 0; left: 0; right: 0; bottom: 0;\r\n    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);\r\n    background-size: 20px 20px; pointer-events: none;\r\n  }\r\n\r\n  .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; position: relative; z-index: 2; }\r\n  .card-code { font-size: 12px; color: #7a6372; font-weight: bold; letter-spacing: 1px; }\r\n  .live-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #e63956; font-weight: 800; }\r\n  .pulse-dot { width: 7px; height: 7px; background-color: #e63956; border-radius: 50%; animation: pulseGlow 1.4s infinite ease-in-out; }\r\n  \r\n  @keyframes pulseGlow {\r\n    0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(230, 57, 86, 0.8); }\r\n    70% { transform: scale(1.25); box-shadow: 0 0 0 10px rgba(230, 57, 86, 0); }\r\n    100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(230, 57, 86, 0); }\r\n  }\r\n\r\n  .pink-sticker {\r\n    position: absolute; top: 80px; left: -15px; background: linear-gradient(135deg, #e63956 0%, #b81f38 100%);\r\n    color: #ffffff; padding: 10px 18px; border-radius: 14px; font-size: 13px; font-weight: 800; line-height: 1.3;\r\n    transform: rotate(-9deg); box-shadow: 0 12px 25px rgba(230, 57, 86, 0.4);\r\n    transition: transform 0.4s ease; z-index: 3;\r\n  }\r\n  .interactive-card:hover .pink-sticker { transform: rotate(-2deg) scale(1.05) translateY(-4px); }\r\n\r\n  .card-title-box { margin-top: 10px; margin-bottom: 15px; position: relative; z-index: 2; }\r\n  .sub-label { font-size: 11px; color: #8c7383; font-weight: bold; }\r\n  .card-main-title { font-size: 36px; font-weight: 900; line-height: 1.1; margin: 4px 0; color: #ffffff; }\r\n  .card-sub-text { font-size: 13px; color: #a48f9d; margin: 0; }\r\n\r\n  .stats-box-animated {\r\n    background: rgba(18, 9, 16, 0.6);\r\n    border: 1px solid rgba(255, 255, 255, 0.08);\r\n    border-radius: 16px; padding: 16px 20px; margin-bottom: 15px;\r\n    direction: ltr; position: relative; z-index: 2; backdrop-filter: blur(8px);\r\n    transition: all 0.4s ease;\r\n  }\r\n  .interactive-card:hover .stats-box-animated { background: rgba(18, 9, 16, 0.85); border-color: rgba(230, 57, 86, 0.4); }\r\n\r\n  .stat-label { font-size: 10px; color: #836d7a; letter-spacing: 1.5px; display: block; margin-bottom: 4px; font-weight: 700; text-transform: uppercase; }\r\n  .stat-value-container { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; }\r\n  \r\n  .stat-value {\r\n    font-size: 38px; font-weight: 900; color: #ffffff; line-height: 1; display: inline-block;\r\n    transition: color 0.3s ease, text-shadow 0.3s ease;\r\n    text-shadow: 0 0 15px rgba(230, 57, 86, 0.3);\r\n  }\r\n  \r\n  .trend-badge { display: flex; align-items: center; gap: 6px; color: #e63956; font-weight: 800; font-size: 16px; transition: color 0.4s ease; }\r\n  .trend-arrow { display: inline-block; font-size: 14px; animation: arrowFloat 1.8s infinite ease-in-out; }\r\n  \r\n  @keyframes arrowFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }\r\n  .trend-badge.down { color: #22c55e; }\r\n  .trend-badge.down .trend-arrow { animation: arrowFloatDown 1.8s infinite ease-in-out; }\r\n  @keyframes arrowFloatDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }\r\n\r\n  .num-pulse { animation: pulseText 0.4s ease; }\r\n  @keyframes pulseText { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }\r\n\r\n  .chart-container { width: 100%; height: 100px; margin-bottom: 10px; position: relative; z-index: 2; }\r\n  .chart-svg { width: 100%; height: 100%; overflow: visible; }\r\n\r\n  .wave-line-loop { stroke-dasharray: 25 10; animation: loopLineMotion 1.2s linear infinite; }\r\n  .interactive-card:hover .wave-line-loop { animation-duration: 0.6s; }\r\n  @keyframes loopLineMotion { 0% { stroke-dashoffset: 70; } 100% { stroke-dashoffset: 0; } }\r\n\r\n  .wave-area-loop { animation: loopAreaPulse 1.2s infinite ease-in-out alternate; }\r\n  @keyframes loopAreaPulse { 0% { opacity: 0.4; transform: scaleY(0.95); } 100% { opacity: 0.85; transform: scaleY(1.05); } }\r\n\r\n  .node-synced-loop { fill: #e63956; stroke: #ffffff; stroke-width: 3px; animation: loopNodeBounce 1.2s infinite ease-in-out alternate; }\r\n  @keyframes loopNodeBounce { 0% { transform: translateY(6px) scale(0.9); filter: drop-shadow(0 0 4px #e63956); } 100% { transform: translateY(-8px) scale(1.3); filter: drop-shadow(0 0 16px #ff3b5c); } }\r\n\r\n  .card-footer { display: flex; justify-content: space-between; font-size: 11px; color: #7a6372; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 14px; font-weight: bold; position: relative; z-index: 2; }\r\n  .glow-arrow { color: #e63956; display: inline-block; transition: transform 0.3s ease; }\r\n  .interactive-card:hover .glow-arrow { transform: translate(-4px, -4px); }\r\n\r\n  \/* \u0631\u064a\u0633\u0628\u0648\u0646\u0633\u064a\u0641 \u0644\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0635\u063a\u064a\u0631\u0629 \u0648\u0627\u0644\u0645\u062a\u0648\u0633\u0637\u0629 *\/\r\n  @media (max-width: 991px) {\r\n    .hero-container { flex-direction: column; text-align: center; }\r\n    .hero-content { text-align: center; }\r\n    .description { margin-left: auto; margin-right: auto; }\r\n    .cta-buttons { justify-content: center; }\r\n    .main-title { font-size: 48px; }\r\n    .interactive-card { transform: none; margin-top: 20px; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  (function () {\r\n    function initHeroInteractions() {\r\n      const mainNum = document.getElementById(\"mainNum\");\r\n      const subNum = document.getElementById(\"subNum\");\r\n      const arrowIcon = document.getElementById(\"arrowIcon\");\r\n      const trendBadge = document.getElementById(\"trendBadge\");\r\n      const card = document.getElementById(\"dashboardCard\");\r\n      const conversionVal = document.getElementById(\"conversionVal\");\r\n\r\n      if (!mainNum || !subNum) return;\r\n\r\n      let isHovered = false;\r\n      let index = 0;\r\n\r\n      const targetMain = 84.6;\r\n      const targetSub = 12.4;\r\n      const startTime = performance.now();\r\n      const duration = 1200;\r\n\r\n      function animateCounter(currentTime) {\r\n        const elapsedTime = currentTime - startTime;\r\n        const progress = Math.min(elapsedTime \/ duration, 1);\r\n        const easeProgress = progress * (2 - progress);\r\n\r\n        mainNum.innerText = (targetMain * easeProgress).toFixed(1) + \"%\";\r\n        subNum.innerText = (targetSub * easeProgress).toFixed(1) + \"%\";\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animateCounter);\r\n        } else {\r\n          mainNum.innerText = targetMain.toFixed(1) + \"%\";\r\n          subNum.innerText = targetSub.toFixed(1) + \"%\";\r\n          startLoop();\r\n        }\r\n      }\r\n\r\n      requestAnimationFrame(animateCounter);\r\n\r\n      const loopSequence = [\r\n        { main: 84.6, sub: 12.4, isUp: true },\r\n        { main: 85.8, sub: 13.9, isUp: true },\r\n        { main: 87.2, sub: 15.1, isUp: true },\r\n        { main: 86.0, sub: 13.5, isUp: false },\r\n        { main: 83.4, sub: 10.2, isUp: false },\r\n        { main: 82.1, sub: 8.7, isUp: false },\r\n        { main: 83.9, sub: 11.0, isUp: true }\r\n      ];\r\n\r\n      function startLoop() {\r\n        setInterval(() => {\r\n          if (!isHovered) {\r\n            index = (index + 1) % loopSequence.length;\r\n            const data = loopSequence[index];\r\n\r\n            mainNum.classList.remove(\"num-pulse\");\r\n            void mainNum.offsetWidth;\r\n            mainNum.classList.add(\"num-pulse\");\r\n\r\n            mainNum.innerText = data.main.toFixed(1) + \"%\";\r\n            subNum.innerText = data.sub.toFixed(1) + \"%\";\r\n\r\n            if (data.isUp) {\r\n              arrowIcon.innerText = \"\u25b2\";\r\n              trendBadge.classList.remove(\"down\");\r\n            } else {\r\n              arrowIcon.innerText = \"\u25bc\";\r\n              trendBadge.classList.add(\"down\");\r\n            }\r\n          }\r\n        }, 1200);\r\n      }\r\n\r\n      if (card) {\r\n        card.addEventListener(\"mouseenter\", () => {\r\n          isHovered = true;\r\n          mainNum.innerText = \"94.8%\";\r\n          subNum.innerText = \"24.5%\";\r\n          arrowIcon.innerText = \"\u25b2\";\r\n          trendBadge.classList.remove(\"down\");\r\n          \r\n          mainNum.style.color = \"#ff3b5c\";\r\n          mainNum.style.textShadow = \"0 0 30px rgba(255, 59, 92, 0.9)\";\r\n          if(conversionVal) conversionVal.innerText = \"88.2K\";\r\n        });\r\n\r\n        card.addEventListener(\"mouseleave\", () => {\r\n          isHovered = false;\r\n          mainNum.style.color = \"#ffffff\";\r\n          mainNum.style.textShadow = \"0 0 15px rgba(230, 57, 86, 0.3)\";\r\n          if(conversionVal) conversionVal.innerText = \"64.8K\";\r\n        });\r\n      }\r\n    }\r\n\r\n    if (document.readyState === \"loading\") {\r\n      document.addEventListener(\"DOMContentLoaded\", initHeroInteractions);\r\n    } else {\r\n      initHeroInteractions();\r\n    }\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-658303b elementor-widget elementor-widget-html\" data-id=\"658303b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>\u0644\u0648\u062d\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 - KOJOK<\/title>\r\n  <style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@600;800;900&display=swap');\r\n\r\n    *, *::before, *::after {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    body {\r\n      background-color: #0b090d;\r\n      font-family: 'Cairo', sans-serif;\r\n      min-height: 100vh;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      overflow: hidden;\r\n      color: #fff;\r\n      position: relative;\r\n    }\r\n\r\n    \/* \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629 (Canvas) *\/\r\n    #particles-canvas {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      z-index: 0;\r\n      pointer-events: none;\r\n    }\r\n\r\n    \/* \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0639\u0631\u0636 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 *\/\r\n    .interactive-showcase {\r\n      position: relative;\r\n      width: 100%;\r\n      max-width: 1100px;\r\n      height: 650px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      perspective: 1000px;\r\n      z-index: 2;\r\n    }\r\n\r\n    \/* \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u062a\u0648\u0647\u062c \u0627\u0644\u062f\u0627\u0626\u0631\u064a\u0629 \u0627\u0644\u0645\u0631\u0643\u0632\u064a\u0629 *\/\r\n    .bg-glow {\r\n      position: absolute;\r\n      width: 450px;\r\n      height: 450px;\r\n      background: radial-gradient(circle, rgba(230, 57, 86, 0.25) 0%, rgba(11, 9, 13, 0) 70%);\r\n      filter: blur(60px);\r\n      z-index: 1;\r\n      pointer-events: none;\r\n    }\r\n\r\n    \/* \u0647\u064a\u0643\u0644 \u0634\u0627\u0634\u0629 \u0627\u0644\u0647\u0627\u062a\u0641 *\/\r\n    .phone-wrapper {\r\n      position: relative;\r\n      width: 250px;\r\n      height: 500px;\r\n      background: #150e17;\r\n      border: 3px solid rgba(255, 255, 255, 0.15);\r\n      border-radius: 40px;\r\n      box-shadow: 0 25px 50px rgba(0,0,0,0.8), inset 0 0 15px rgba(230, 57, 86, 0.25);\r\n      z-index: 2;\r\n      transform-style: preserve-3d;\r\n      transform: rotateY(-10deg) rotateX(5deg);\r\n      transition: transform 0.4s ease;\r\n    }\r\n\r\n    .interactive-showcase:hover .phone-wrapper {\r\n      transform: rotateY(0deg) rotateX(0deg) scale(1.02);\r\n    }\r\n\r\n    .phone-notch {\r\n      position: absolute;\r\n      top: 12px;\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      width: 75px;\r\n      height: 18px;\r\n      background: #0b090d;\r\n      border-radius: 10px;\r\n      z-index: 10;\r\n    }\r\n\r\n    .phone-screen {\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: 36px;\r\n      overflow: hidden;\r\n      position: relative;\r\n      background: linear-gradient(180deg, #1c101a 0%, #0b090d 100%);\r\n      padding: 45px 12px 16px;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n    }\r\n\r\n    \/* \u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0634\u0639\u0627\u0631 3D \u0627\u0644\u0645\u062f\u0645\u062c \u062f\u0627\u062e\u0644 \u0634\u0627\u0634\u0629 \u0627\u0644\u0647\u0627\u062a\u0641 *\/\r\n    .phone-logo-container {\r\n      width: 100%;\r\n      height: 100%;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n    }\r\n\r\n    .phone-logo-glow {\r\n      position: absolute;\r\n      width: 180px;\r\n      height: 180px;\r\n      background: radial-gradient(circle, rgba(255, 42, 85, 0.35) 0%, rgba(0, 0, 0, 0) 70%);\r\n      border-radius: 50%;\r\n      top: 45%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      animation: phoneGlowPulse 3s infinite alternate ease-in-out;\r\n      pointer-events: none;\r\n    }\r\n\r\n    @keyframes phoneGlowPulse {\r\n      0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }\r\n      100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.9; }\r\n    }\r\n\r\n    .phone-logo-svg {\r\n      width: 85%;\r\n      height: 220px;\r\n      z-index: 2;\r\n      filter: drop-shadow(0 10px 20px rgba(230, 57, 86, 0.45));\r\n    }\r\n\r\n    .draw-path {\r\n      stroke-dasharray: 400;\r\n      stroke-dashoffset: 400;\r\n      animation: drawAndFillLoop 4s infinite cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n\r\n    .path-1 { animation-delay: 0s; }\r\n    .path-2 { animation-delay: 0.3s; }\r\n    .path-3 { animation-delay: 0.6s; }\r\n\r\n    @keyframes drawAndFillLoop {\r\n      0% {\r\n        stroke-dashoffset: 400;\r\n        fill-opacity: 0;\r\n        transform: scale(0.96);\r\n      }\r\n      30% {\r\n        stroke-dashoffset: 0;\r\n        fill-opacity: 0.3;\r\n      }\r\n      50%, 80% {\r\n        stroke-dashoffset: 0;\r\n        fill-opacity: 1;\r\n        transform: scale(1);\r\n      }\r\n      100% {\r\n        stroke-dashoffset: -400;\r\n        fill-opacity: 0;\r\n        transform: scale(0.96);\r\n      }\r\n    }\r\n\r\n    .screen-chart-mock {\r\n      width: 100%;\r\n      height: 85px;\r\n      border-bottom: 2px solid rgba(230, 57, 86, 0.6);\r\n      background: linear-gradient(0deg, rgba(230, 57, 86, 0.25) 0%, rgba(0, 0, 0, 0) 100%);\r\n      border-radius: 8px;\r\n      margin-top: auto;\r\n    }\r\n\r\n    \/* \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629 *\/\r\n    .floating-card {\r\n      position: absolute;\r\n      z-index: 5;\r\n      background: rgba(22, 14, 20, 0.85);\r\n      border: 1px solid rgba(255, 255, 255, 0.12);\r\n      backdrop-filter: blur(14px);\r\n      -webkit-backdrop-filter: blur(14px);\r\n      border-radius: 18px;\r\n      padding: 10px 16px;\r\n      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(230, 57, 86, 0.15);\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 10px;\r\n      cursor: pointer;\r\n      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n\r\n    .floating-card:hover {\r\n      transform: scale(1.1) translateY(-6px) translateZ(30px) !important;\r\n      border-color: #e63956;\r\n      box-shadow: 0 20px 40px rgba(230, 57, 86, 0.4);\r\n    }\r\n\r\n    .element-instagram {\r\n      top: 50px;\r\n      right: 180px;\r\n      animation: floatAnim 4s ease-in-out infinite;\r\n    }\r\n\r\n    .insta-icon {\r\n      width: 32px;\r\n      height: 32px;\r\n      background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);\r\n      border-radius: 8px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .element-tiktok {\r\n      top: 130px;\r\n      left: 170px;\r\n      animation: floatAnim 3.6s ease-in-out infinite 0.8s;\r\n    }\r\n\r\n    .tiktok-icon {\r\n      width: 32px;\r\n      height: 32px;\r\n      background: #000;\r\n      border: 1px solid rgba(255, 255, 255, 0.2);\r\n      border-radius: 8px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: #00f2fe;\r\n    }\r\n\r\n    .element-whatsapp {\r\n      bottom: 120px;\r\n      right: 160px;\r\n      animation: floatAnim 4.2s ease-in-out infinite 0.4s;\r\n    }\r\n\r\n    .wa-icon {\r\n      width: 32px;\r\n      height: 32px;\r\n      background: #25d366;\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: #fff;\r\n    }\r\n\r\n    .element-stats {\r\n      top: 240px;\r\n      left: 110px;\r\n      animation: floatAnim 4.5s ease-in-out infinite 1.2s;\r\n    }\r\n\r\n    .stats-number {\r\n      font-size: 18px;\r\n      font-weight: 900;\r\n      color: #00ff88;\r\n      text-shadow: 0 0 10px rgba(0, 255, 136, 0.4);\r\n    }\r\n\r\n    .element-rating {\r\n      bottom: 210px;\r\n      right: 120px;\r\n      animation: floatAnim 3.8s ease-in-out infinite 1.6s;\r\n    }\r\n\r\n    .stars {\r\n      color: #ffb703;\r\n      font-size: 12px;\r\n    }\r\n\r\n    .element-growth {\r\n      bottom: 50px;\r\n      left: 200px;\r\n      animation: floatAnim 4s ease-in-out infinite 2s;\r\n    }\r\n\r\n    .growth-badge {\r\n      background: rgba(0, 255, 136, 0.15);\r\n      color: #00ff88;\r\n      padding: 2px 8px;\r\n      border-radius: 10px;\r\n      font-size: 11px;\r\n      font-weight: 900;\r\n    }\r\n\r\n    .card-info {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n\r\n    .card-title {\r\n      font-size: 11px;\r\n      color: #a09a9e;\r\n    }\r\n\r\n    .card-value {\r\n      font-size: 13px;\r\n      font-weight: 800;\r\n      color: #ffffff;\r\n    }\r\n\r\n    @keyframes floatAnim {\r\n      0%, 100% { transform: translateY(0px) rotate(0deg); }\r\n      50% { transform: translateY(-10px) rotate(1.5deg); }\r\n    }\r\n\r\n    @media (max-width: 850px) {\r\n      .interactive-showcase {\r\n        transform: scale(0.75);\r\n      }\r\n      .element-instagram { right: 20px; top: 20px; }\r\n      .element-tiktok { left: 10px; top: 80px; }\r\n      .element-whatsapp { right: 10px; bottom: 80px; }\r\n      .element-stats { left: 10px; top: 200px; }\r\n      .element-rating { right: 20px; bottom: 180px; }\r\n      .element-growth { left: 20px; bottom: 20px; }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u0648\u0627\u0644\u0634\u0628\u0643\u0629 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629 -->\r\n  <canvas id=\"particles-canvas\"><\/canvas>\r\n\r\n  <div class=\"interactive-showcase\" id=\"showcase\">\r\n    <div class=\"bg-glow\"><\/div>\r\n\r\n    <!-- 1. \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645 -->\r\n    <div class=\"floating-card element-instagram\">\r\n      <div class=\"insta-icon\">\r\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2.5\">\r\n          <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"><\/rect>\r\n          <path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"><\/path>\r\n          <line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"><\/line>\r\n        <\/svg>\r\n      <\/div>\r\n      <div class=\"card-info\">\r\n        <span class=\"card-title\">\u062d\u0645\u0644\u0627\u062a \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645<\/span>\r\n        <span class=\"card-value\">+150K \u062a\u0641\u0627\u0639\u0644<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- 2. \u062a\u064a\u0643 \u062a\u0648\u0643 -->\r\n    <div class=\"floating-card element-tiktok\">\r\n      <div class=\"tiktok-icon\">\r\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n          <path d=\"M12.525 0h3.08c.012 1.668 1.157 3.05 2.72 3.332v3.13a6.302 6.302 0 0 1-3.13-.83v8.307c0 4.256-3.45 7.702-7.701 7.702C3.238 21.64 0 18.403 0 14.148c0-4.256 3.45-7.702 7.701-7.702.43 0 .85.036 1.259.105v3.297a4.385 4.385 0 0 0-1.259-.187c-2.432 0-4.402 1.97-4.402 4.402s1.97 4.402 4.402 4.402c2.317 0 4.208-1.787 4.394-4.062V0z\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n      <div class=\"card-info\">\r\n        <span class=\"card-title\">\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u062a\u064a\u0643 \u062a\u0648\u0643<\/span>\r\n        <span class=\"card-value\">1.2M \u0645\u0634\u0627\u0647\u062f\u0629<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- 3. \u0627\u0644\u0623\u0631\u0628\u0627\u062d \u0627\u0644\u0645\u0628\u0627\u0634\u0631\u0629 -->\r\n    <div class=\"floating-card element-stats\">\r\n      <div class=\"card-info\">\r\n        <span class=\"card-title\">\u0627\u0644\u0623\u0631\u0628\u0627\u062d \u0627\u0644\u0645\u0628\u0627\u0634\u0631\u0629<\/span>\r\n        <span class=\"stats-number\" id=\"counter\">$100,000<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- 4. \u062a\u0642\u064a\u064a\u0645 \u0627\u0644\u0639\u0645\u0644\u0627\u0621 -->\r\n    <div class=\"floating-card element-rating\">\r\n      <div class=\"card-info\">\r\n        <span class=\"card-title\">\u062a\u0642\u064a\u064a\u0645 \u0627\u0644\u062e\u062f\u0645\u0629<\/span>\r\n        <span class=\"card-value\">4.9\/5 <span class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/span><\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- 5. \u0631\u0633\u0627\u0644\u0629 \u0648\u0627\u062a\u0633\u0627\u0628 -->\r\n    <div class=\"floating-card element-whatsapp\">\r\n      <div class=\"wa-icon\">\r\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n          <path d=\"M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n      <div class=\"card-info\">\r\n        <span class=\"card-title\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0628\u0627\u0634\u0631<\/span>\r\n        <span class=\"card-value\">\u062a\u0645 \u0627\u0633\u062a\u0644\u0627\u0645 \u0627\u0644\u0637\u0644\u0628!<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- 6. \u0646\u0633\u0628\u0629 \u0627\u0644\u0646\u0645\u0648 -->\r\n    <div class=\"floating-card element-growth\">\r\n      <span class=\"growth-badge\">\u2191 85%<\/span>\r\n      <div class=\"card-info\">\r\n        <span class=\"card-title\">\u0645\u0639\u062f\u0644 \u0627\u0644\u062a\u062d\u0648\u064a\u0644<\/span>\r\n        <span class=\"card-value\">\u0646\u0645\u0648 \u0645\u0631\u062a\u0641\u0639<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u0634\u0627\u0634\u0629 \u0627\u0644\u0647\u0627\u062a\u0641 \u0627\u0644\u0630\u0643\u064a \u0627\u0644\u062a\u064a \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0627\u0644\u0634\u0639\u0627\u0631 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a -->\r\n    <div class=\"phone-wrapper\">\r\n      <div class=\"phone-notch\"><\/div>\r\n      <div class=\"phone-screen\">\r\n        \r\n        <!-- \u0639\u0646\u0635\u0631 \u0627\u0644\u0634\u0639\u0627\u0631 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a 3D \u062f\u0627\u062e\u0644 \u0634\u0627\u0634\u0629 \u0627\u0644\u0647\u0627\u062a\u0641 -->\r\n        <div class=\"phone-logo-container\">\r\n          <div class=\"phone-logo-glow\"><\/div>\r\n          \r\n          <svg class=\"phone-logo-svg\" viewBox=\"0 0 300 350\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n            <defs>\r\n              <linearGradient id=\"redGlowGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n                <stop offset=\"0%\" stop-color=\"#ff2a55\" \/>\r\n                <stop offset=\"50%\" stop-color=\"#e63956\" \/>\r\n                <stop offset=\"100%\" stop-color=\"#80001a\" \/>\r\n              <\/linearGradient>\r\n\r\n              <filter id=\"neonGlow\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\">\r\n                <feGaussianBlur stdDeviation=\"6\" result=\"blur\" \/>\r\n                <feMerge>\r\n                  <feMergeNode in=\"blur\" \/>\r\n                  <feMergeNode in=\"SourceGraphic\" \/>\r\n                <\/feMerge>\r\n              <\/filter>\r\n            <\/defs>\r\n\r\n            <!-- \u0634\u0628\u0643\u0629 \u0627\u0644\u062f\u064a\u0643\u0648\u0631 \u0627\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0629 -->\r\n            <g opacity=\"0.2\">\r\n              <path d=\"M20,20 L50,20 M20,20 L20,50\" stroke=\"#ff2a55\" stroke-width=\"1.5\"\/>\r\n              <path d=\"M280,20 L250,20 M280,20 L280,50\" stroke=\"#ff2a55\" stroke-width=\"1.5\"\/>\r\n              <path d=\"M20,330 L50,330 M20,330 L20,300\" stroke=\"#ff2a55\" stroke-width=\"1.5\"\/>\r\n              <path d=\"M280,330 L250,330 M280,330 L280,300\" stroke=\"#ff2a55\" stroke-width=\"1.5\"\/>\r\n            <\/g>\r\n\r\n            <!-- \u0631\u0633\u0645 \u0645\u0633\u0627\u0631\u0627\u062a \u0627\u0644\u0634\u0639\u0627\u0631 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 Loop -->\r\n            <g filter=\"url(#neonGlow)\">\r\n              <path class=\"draw-path path-1\" \r\n                    d=\"M135,120 C110,150 110,190 120,215 C135,170 165,110 200,80 C180,80 155,95 135,120 Z\" \r\n                    fill=\"url(#redGlowGrad)\" stroke=\"#ff476e\" stroke-width=\"2\" \/>\r\n\r\n              <path class=\"draw-path path-2\" \r\n                    d=\"M135,185 C120,205 125,235 140,250 C155,210 180,160 200,135 C175,145 150,165 135,185 Z\" \r\n                    fill=\"url(#redGlowGrad)\" stroke=\"#ff476e\" stroke-width=\"2\" \/>\r\n\r\n              <path class=\"draw-path path-3\" \r\n                    d=\"M140,250 C155,265 170,265 175,245 C180,225 150,200 135,185 C130,210 132,235 140,250 Z\" \r\n                    fill=\"url(#redGlowGrad)\" stroke=\"#ff476e\" stroke-width=\"2\" opacity=\"0.9\" \/>\r\n            <\/g>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <div class=\"screen-chart-mock\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    \/* 1. \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u0641\u064a \u0627\u0644\u062e\u0644\u0641\u064a\u0629 *\/\r\n    const canvas = document.getElementById('particles-canvas');\r\n    const ctx = canvas.getContext('2d');\r\n    let particlesArray = [];\r\n\r\n    canvas.width = window.innerWidth;\r\n    canvas.height = window.innerHeight;\r\n\r\n    class Particle {\r\n      constructor(x, y, size, color, weight) {\r\n        this.x = x;\r\n        this.y = y;\r\n        this.size = size;\r\n        this.color = color;\r\n        this.weight = weight;\r\n      }\r\n      draw() {\r\n        ctx.beginPath();\r\n        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);\r\n        ctx.fillStyle = this.color;\r\n        ctx.fill();\r\n      }\r\n      update() {\r\n        this.x += this.weight.x;\r\n        this.y += this.weight.y;\r\n\r\n        if (this.x < 0 || this.x > canvas.width) this.weight.x *= -1;\r\n        if (this.y < 0 || this.y > canvas.height) this.weight.y *= -1;\r\n      }\r\n    }\r\n\r\n    function initParticles() {\r\n      particlesArray = [];\r\n      const numberOfParticles = (canvas.width * canvas.height) \/ 9000;\r\n      for (let i = 0; i < numberOfParticles; i++) {\r\n        let size = (Math.random() * 2) + 1;\r\n        let x = Math.random() * canvas.width;\r\n        let y = Math.random() * canvas.height;\r\n        let color = 'rgba(230, 57, 86, ' + (Math.random() * 0.5 + 0.2) + ')';\r\n        let weight = {\r\n          x: (Math.random() - 0.5) * 0.8,\r\n          y: (Math.random() - 0.5) * 0.8\r\n        };\r\n        particlesArray.push(new Particle(x, y, size, color, weight));\r\n      }\r\n    }\r\n\r\n    function animateParticles() {\r\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n      for (let i = 0; i < particlesArray.length; i++) {\r\n        particlesArray[i].update();\r\n        particlesArray[i].draw();\r\n\r\n        for (let j = i; j < particlesArray.length; j++) {\r\n          const dx = particlesArray[i].x - particlesArray[j].x;\r\n          const dy = particlesArray[i].y - particlesArray[j].y;\r\n          const distance = Math.sqrt(dx * dx + dy * dy);\r\n\r\n          if (distance < 100) {\r\n            ctx.beginPath();\r\n            ctx.strokeStyle = 'rgba(230, 57, 86, ' + (0.15 - distance \/ 700) + ')';\r\n            ctx.lineWidth = 0.5;\r\n            ctx.moveTo(particlesArray[i].x, particlesArray[i].y);\r\n            ctx.lineTo(particlesArray[j].x, particlesArray[j].y);\r\n            ctx.stroke();\r\n            ctx.closePath();\r\n          }\r\n        }\r\n      }\r\n      requestAnimationFrame(animateParticles);\r\n    }\r\n\r\n    window.addEventListener('resize', function() {\r\n      canvas.width = window.innerWidth;\r\n      canvas.height = window.innerHeight;\r\n      initParticles();\r\n    });\r\n\r\n    initParticles();\r\n    animateParticles();\r\n\r\n    \/* 2. \u0627\u0644\u0639\u062f\u0627\u062f \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a *\/\r\n    let count = 100000;\r\n    const target = 185400;\r\n    const counterElement = document.getElementById('counter');\r\n\r\n    function updateCounter() {\r\n      const increment = Math.ceil((target - count) \/ 30);\r\n      if (count < target) {\r\n        count += increment;\r\n        if (count > target) count = target;\r\n        counterElement.innerText = '$' + count.toLocaleString();\r\n        setTimeout(updateCounter, 25);\r\n      }\r\n    }\r\n    window.onload = updateCounter;\r\n\r\n    \/* 3. \u062d\u0631\u0643\u0629 3D \u0644\u0644\u0647\u0627\u062a\u0641 \u0645\u0639 \u062a\u062d\u0631\u064a\u0643 \u0627\u0644\u0645\u0627\u0648\u0633 *\/\r\n    const showcase = document.getElementById('showcase');\r\n    showcase.addEventListener('mousemove', (e) => {\r\n      const rect = showcase.getBoundingClientRect();\r\n      const x = e.clientX - rect.left - rect.width \/ 2;\r\n      const y = e.clientY - rect.top - rect.height \/ 2;\r\n      \r\n      const phone = document.querySelector('.phone-wrapper');\r\n      phone.style.transform = `rotateY(${x \/ 18}deg) rotateX(${-y \/ 18}deg)`;\r\n    });\r\n\r\n    showcase.addEventListener('mouseleave', () => {\r\n      const phone = document.querySelector('.phone-wrapper');\r\n      phone.style.transform = `rotateY(-10deg) rotateX(5deg)`;\r\n    });\r\n  <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6f27a00 elementor-widget elementor-widget-html\" data-id=\"6f27a00\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u0642\u0633\u0645 \u0623\u0639\u0645\u0627\u0644\u0646\u0627 \u0648\u062e\u062f\u0645\u0627\u062a\u0646\u0627 - Our Services Grid -->\r\n<section class=\"services-portfolio-section\" id=\"portfolioSection\">\r\n  <div class=\"services-container\">\r\n    \r\n    <!-- \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0642\u0633\u0645 -->\r\n    <div class=\"section-header\">\r\n      <div class=\"section-badge\">\r\n        <span class=\"badge-dot\"><\/span>\r\n        <span>\u0645\u0627\u0630\u0627 \u0646\u0642\u062f\u0645 \u0644\u0643<\/span>\r\n      <\/div>\r\n      <h2 class=\"section-title\">\u0623\u0639\u0645\u0627\u0644\u0646\u0627 \u0648\u062a\u062e\u0635\u0635\u0627\u062a\u0646\u0627<\/h2>\r\n      <p class=\"section-subtitle\">\r\n        \u0646\u0642\u062f\u0645 \u062d\u0644\u0648\u0644\u0627\u064b \u062a\u0633\u0648\u064a\u0642\u064a\u0629 \u0648\u0625\u0628\u062f\u0627\u0639\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u062a\u0633\u0627\u0639\u062f \u0639\u0644\u0627\u0645\u062a\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0639\u0644\u0649 \u0627\u0644\u0646\u0645\u0648 \u0648\u0627\u0644\u0628\u0631\u0648\u0632 \u0641\u064a \u0627\u0644\u0633\u0648\u0642.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- \u0634\u0628\u0643\u0629 \u0627\u0644\u0623\u0642\u0633\u0627\u0645 \u0627\u0644\u0623\u0631\u0628\u0639\u0629 -->\r\n    <div class=\"services-grid\">\r\n      \r\n      <!-- \u0627\u0644\u0642\u0633\u0645 1: \u0627\u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u062f\u0641\u0648\u0639\u0629 -->\r\n      <div class=\"service-card\">\r\n        <div class=\"card-icon-wrapper\">\r\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\"><\/line>\r\n            <path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"><\/path>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3 class=\"card-title\">\u0627\u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u062f\u0641\u0648\u0639\u0629<\/h3>\r\n        <p class=\"card-desc\">\r\n          \u0625\u062f\u0627\u0631\u0629 \u062d\u0645\u0644\u0627\u062a \u0625\u0639\u0644\u0627\u0646\u064a\u0629 \u0641\u0639\u0627\u0644\u0629 \u0644\u062a\u062d\u0642\u064a\u0642 \u0623\u0641\u0636\u0644 \u0627\u0644\u0646\u062a\u0627\u0626\u062c \u0628\u0623\u0642\u0644 \u0627\u0644\u062a\u0643\u0627\u0644\u064a\u0641 \u0648\u062a\u0635\u0644 \u0644\u062c\u0645\u0647\u0648\u0631\u0643 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641 \u0628\u062f\u0642\u0629.\r\n        <\/p>\r\n        <a href=\"#footerSection\" class=\"card-link\">\r\n          <span>\u0627\u0637\u0644\u0628 \u0627\u0644\u062e\u062f\u0645\u0629<\/span>\r\n          <span class=\"arrow\">\u2190<\/span>\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u0642\u0633\u0645 2: \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a \u062a\u0633\u0648\u064a\u0642\u064a\u0629 -->\r\n      <div class=\"service-card\">\r\n        <div class=\"card-icon-wrapper\">\r\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"><\/polyline>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3 class=\"card-title\">\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a \u062a\u0633\u0648\u064a\u0642\u064a\u0629<\/h3>\r\n        <p class=\"card-desc\">\r\n          \u062e\u0637\u0637 \u062a\u0633\u0648\u064a\u0642\u064a\u0629 \u0645\u062e\u0635\u0635\u0629 \u0644\u062a\u062d\u0642\u064a\u0642 \u0623\u0647\u062f\u0627\u0641\u0643 \u0648\u0632\u064a\u0627\u062f\u0629 \u0645\u0628\u064a\u0639\u0627\u062a\u0643 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u062f\u0631\u0627\u0633\u0629 \u062f\u0642\u064a\u0642\u0629 \u0644\u0644\u0633\u0648\u0642 \u0648\u0627\u0644\u0645\u0646\u0627\u0641\u0633\u064a\u0646.\r\n        <\/p>\r\n        <a href=\"#footerSection\" class=\"card-link\">\r\n          <span>\u0627\u0637\u0644\u0628 \u0627\u0644\u062e\u062f\u0645\u0629<\/span>\r\n          <span class=\"arrow\">\u2190<\/span>\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u0642\u0633\u0645 3: \u0625\u062f\u0627\u0631\u0629 \u062d\u0633\u0627\u0628\u0627\u062a \u0627\u0644\u0633\u0648\u0634\u0627\u0644 \u0645\u064a\u062f\u064a\u0627 -->\r\n      <div class=\"service-card\">\r\n        <div class=\"card-icon-wrapper\">\r\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"><\/path>\r\n            <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"><\/path>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3 class=\"card-title\">\u0625\u062f\u0627\u0631\u0629 \u062d\u0633\u0627\u0628\u0627\u062a \u0627\u0644\u0633\u0648\u0634\u0627\u0644 \u0645\u064a\u062f\u064a\u0627<\/h3>\r\n        <p class=\"card-desc\">\r\n          \u0625\u062f\u0627\u0631\u0629 \u064a\u0648\u0645\u064a\u0629 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0644\u062d\u0633\u0627\u0628\u0627\u062a\u0643 \u0648\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0648\u0627\u0644\u0645\u062a\u0627\u0628\u0639\u064a\u0646 \u0648\u0628\u0646\u0627\u0621 \u0645\u062c\u062a\u0645\u0639 \u0646\u0634\u0637 \u062d\u0648\u0644 \u0639\u0644\u0627\u0645\u062a\u0643.\r\n        <\/p>\r\n        <a href=\"#footerSection\" class=\"card-link\">\r\n          <span>\u0627\u0637\u0644\u0628 \u0627\u0644\u062e\u062f\u0645\u0629<\/span>\r\n          <span class=\"arrow\">\u2190<\/span>\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u0642\u0633\u0645 4: \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 -->\r\n      <div class=\"service-card\">\r\n        <div class=\"card-icon-wrapper\">\r\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <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>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3 class=\"card-title\">\u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649<\/h3>\r\n        <p class=\"card-desc\">\r\n          \u062a\u0635\u0645\u064a\u0645 \u0645\u062d\u062a\u0648\u0649 \u0625\u0628\u062f\u0627\u0639\u064a \u064a\u0639\u0643\u0633 \u0647\u0648\u064a\u0629 \u0639\u0644\u0627\u0645\u062a\u0643 \u0648\u064a\u062c\u0644\u0628 \u062c\u0645\u0647\u0648\u0631\u0643 \u0645\u0646 \u062e\u0644\u0627\u0644 \u062a\u0635\u0627\u0645\u064a\u0645 \u0648\u0646\u0635\u0648\u0635 \u062c\u0630\u0627\u0628\u0629.\r\n        <\/p>\r\n        <a href=\"#footerSection\" class=\"card-link\">\r\n          <span>\u0627\u0637\u0644\u0628 \u0627\u0644\u062e\u062f\u0645\u0629<\/span>\r\n          <span class=\"arrow\">\u2190<\/span>\r\n        <\/a>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;700;900&display=swap');\r\n\r\n  \/* \u062a\u0635\u0641\u064a\u0631 \u0627\u0644\u0647\u0648\u0627\u0645\u0634 \u0648\u0627\u0644\u0628\u0627\u062f\u0646\u062c \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a \u0644\u0636\u0645\u0627\u0646 \u0627\u0644\u0645\u0637\u0627\u0628\u0642\u0629 *\/\r\n  .services-portfolio-section,\r\n  .services-portfolio-section * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u062e\u0627\u0631\u062c\u064a \u0628\u0646\u0641\u0633 \u0646\u0633\u0642 \u0627\u0644\u0647\u064a\u0631\u0648 \u062a\u0645\u0627\u0645\u0627\u064b *\/\r\n  .services-portfolio-section {\r\n    background-color: #0b090d;\r\n    color: #ffffff;\r\n    font-family: 'Cairo', sans-serif;\r\n    direction: rtl;\r\n    \r\n    width: 100% !important;\r\n    max-width: 100% !important;\r\n    padding-top: 100px !important;\r\n    padding-bottom: 100px !important;\r\n    padding-left: 5% !important;\r\n    padding-right: 5% !important;\r\n    \r\n    position: relative !important;\r\n    box-sizing: border-box;\r\n    overflow: hidden;\r\n    z-index: 1;\r\n  }\r\n\r\n  .services-container {\r\n    max-width: 1300px; \/* \u062a\u0645 \u062a\u0639\u062f\u064a\u0644\u0647 \u0644\u064a\u062a\u0637\u0627\u0628\u0642 \u0645\u0639 max-width \u0627\u0644\u062e\u0627\u0635 \u0628\u0642\u0633\u0645 \u0627\u0644\u0647\u064a\u0631\u0648 *\/\r\n    margin: 0 auto;\r\n    width: 100%;\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n\r\n  \/* Header Styles *\/\r\n  .section-header {\r\n    text-align: center;\r\n    max-width: 650px;\r\n    margin: 0 auto 60px auto;\r\n  }\r\n\r\n  .section-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    background: rgba(230, 57, 86, 0.1);\r\n    border: 1px solid rgba(230, 57, 86, 0.25);\r\n    color: #e63956;\r\n    padding: 6px 16px;\r\n    border-radius: 20px;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    margin-bottom: 16px;\r\n  }\r\n\r\n  .badge-dot {\r\n    width: 7px;\r\n    height: 7px;\r\n    background-color: #e63956;\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 8px #e63956;\r\n  }\r\n\r\n  .section-title {\r\n    font-size: 40px;\r\n    font-weight: 900;\r\n    margin: 0 0 16px 0;\r\n    color: #ffffff;\r\n  }\r\n\r\n  .section-subtitle {\r\n    font-size: 16px;\r\n    color: #a09a9e;\r\n    line-height: 1.6;\r\n    margin: 0;\r\n  }\r\n\r\n  \/* Grid Layout *\/\r\n  .services-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 24px;\r\n    width: 100%;\r\n  }\r\n\r\n  \/* Card Styles *\/\r\n  .service-card {\r\n    background: linear-gradient(145deg, #161218 0%, #110d13 100%);\r\n    border: 1px solid rgba(255, 255, 255, 0.08);\r\n    border-radius: 24px;\r\n    padding: 40px 32px;\r\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n    display: flex;\r\n    flex-direction: column;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .service-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    width: 100%;\r\n    height: 3px;\r\n    background: linear-gradient(90deg, transparent, #e63956, transparent);\r\n    opacity: 0;\r\n    transition: opacity 0.3s ease;\r\n  }\r\n\r\n  .service-card:hover {\r\n    transform: translateY(-6px);\r\n    border-color: rgba(230, 57, 86, 0.3);\r\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(230, 57, 86, 0.1);\r\n  }\r\n\r\n  .service-card:hover::before {\r\n    opacity: 1;\r\n  }\r\n\r\n  \/* Icon *\/\r\n  .card-icon-wrapper {\r\n    width: 56px;\r\n    height: 56px;\r\n    background: rgba(230, 57, 86, 0.1);\r\n    border: 1px solid rgba(230, 57, 86, 0.2);\r\n    border-radius: 16px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #e63956;\r\n    margin-bottom: 24px;\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .service-card:hover .card-icon-wrapper {\r\n    background: #e63956;\r\n    color: #ffffff;\r\n    box-shadow: 0 8px 20px rgba(230, 57, 86, 0.4);\r\n  }\r\n\r\n  \/* Text & Links *\/\r\n  .card-title {\r\n    font-size: 22px;\r\n    font-weight: 800;\r\n    color: #ffffff;\r\n    margin: 0 0 12px 0;\r\n  }\r\n\r\n  .card-desc {\r\n    font-size: 15px;\r\n    color: #a09a9e;\r\n    line-height: 1.7;\r\n    margin: 0 0 28px 0;\r\n    flex-grow: 1;\r\n  }\r\n\r\n  .card-link {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #ffffff;\r\n    text-decoration: none;\r\n    font-weight: 700;\r\n    font-size: 14px;\r\n    transition: color 0.3s ease;\r\n  }\r\n\r\n  .card-link .arrow {\r\n    transition: transform 0.3s ease;\r\n    color: #e63956;\r\n  }\r\n\r\n  .service-card:hover .card-link {\r\n    color: #e63956;\r\n  }\r\n\r\n  .service-card:hover .card-link .arrow {\r\n    transform: translateX(-6px);\r\n  }\r\n\r\n  \/* Responsive \/ \u0627\u0644\u062a\u062c\u0627\u0648\u0628 *\/\r\n  @media (max-width: 991px) {\r\n    .services-grid {\r\n      grid-template-columns: repeat(2, 1fr);\r\n    }\r\n    .section-title {\r\n      font-size: 32px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 767px) {\r\n    .services-grid {\r\n      grid-template-columns: 1fr;\r\n    }\r\n    .services-portfolio-section {\r\n      padding-top: 60px !important;\r\n      padding-bottom: 60px !important;\r\n      padding-left: 20px !important;\r\n      padding-right: 20px !important;\r\n    }\r\n    .service-card {\r\n      padding: 30px 24px;\r\n    }\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2f34e9 elementor-widget elementor-widget-html\" data-id=\"a2f34e9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>\u0642\u0633\u0645 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0627\u0644\u0645\u0628\u062a\u0643\u0631\u0629 - KOJOK<\/title>\r\n  <style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@600;800;900&display=swap');\r\n\r\n    *, *::before, *::after {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    body {\r\n      background-color: #0b090d;\r\n      font-family: 'Cairo', sans-serif;\r\n      color: #fff;\r\n      padding: 60px 20px;\r\n    }\r\n\r\n    \/* \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0642\u0633\u0645 *\/\r\n    .interactive-section {\r\n      max-width: 1200px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    \/* \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0642\u0633\u0645 *\/\r\n    .section-header {\r\n      text-align: center;\r\n      margin-bottom: 50px;\r\n    }\r\n\r\n    .section-title {\r\n      font-size: 32px;\r\n      font-weight: 900;\r\n      background: linear-gradient(135deg, #ffffff 30%, #ff476e 100%);\r\n      -webkit-background-clip: text;\r\n      -webkit-text-fill-color: transparent;\r\n      margin-bottom: 10px;\r\n    }\r\n\r\n    .section-subtitle {\r\n      color: #a09a9e;\r\n      font-size: 16px;\r\n    }\r\n\r\n    \/* \u0634\u0628\u0643\u0629 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629 *\/\r\n    .cards-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n      gap: 25px;\r\n    }\r\n\r\n    \/* \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 *\/\r\n    .interactive-card {\r\n      position: relative;\r\n      background: rgba(22, 14, 20, 0.7);\r\n      border-radius: 24px;\r\n      padding: 30px;\r\n      border: 1px solid rgba(255, 255, 255, 0.08);\r\n      backdrop-filter: blur(15px);\r\n      overflow: hidden;\r\n      cursor: pointer;\r\n      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n      transform-style: preserve-3d;\r\n    }\r\n\r\n    .interactive-card:hover {\r\n      border-color: rgba(230, 57, 86, 0.5);\r\n      box-shadow: 0 20px 40px rgba(230, 57, 86, 0.25);\r\n    }\r\n\r\n    \/* 1. \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0636\u0648\u0621 \u0627\u0644\u0645\u062a\u0628\u0639 \u0644\u0644\u0645\u0627\u0648\u0633 (Spotlight Glow) *\/\r\n    .card-spotlight {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background: radial-gradient(300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(230, 57, 86, 0.25), transparent 80%);\r\n      opacity: 0;\r\n      transition: opacity 0.3s;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .interactive-card:hover .card-spotlight {\r\n      opacity: 1;\r\n    }\r\n\r\n    \/* \u0623\u064a\u0642\u0648\u0646\u0627\u062a \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a *\/\r\n    .card-icon {\r\n      width: 54px;\r\n      height: 54px;\r\n      background: linear-gradient(135deg, rgba(230, 57, 86, 0.2) 0%, rgba(230, 57, 86, 0.05) 100%);\r\n      border: 1px solid rgba(230, 57, 86, 0.3);\r\n      border-radius: 16px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      margin-bottom: 20px;\r\n      color: #ff476e;\r\n      transition: transform 0.4s ease;\r\n    }\r\n\r\n    .interactive-card:hover .card-icon {\r\n      transform: scale(1.15) rotate(-5deg);\r\n      background: #e63956;\r\n      color: #fff;\r\n      box-shadow: 0 0 20px rgba(230, 57, 86, 0.6);\r\n    }\r\n\r\n    .card-title {\r\n      font-size: 20px;\r\n      font-weight: 800;\r\n      margin-bottom: 10px;\r\n    }\r\n\r\n    .card-desc {\r\n      font-size: 14px;\r\n      color: #b3abb0;\r\n      line-height: 1.6;\r\n      margin-bottom: 20px;\r\n    }\r\n\r\n    \/* 2. \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u062b\u0627\u0646\u064a: \u0634\u0631\u064a\u0637 \u0627\u0644\u062a\u0642\u062f\u0645 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a (Interactive Progress Bar) *\/\r\n    .progress-wrapper {\r\n      margin-top: 15px;\r\n    }\r\n\r\n    .progress-info {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      font-size: 12px;\r\n      margin-bottom: 6px;\r\n      color: #a09a9e;\r\n    }\r\n\r\n    .progress-bar {\r\n      width: 100%;\r\n      height: 8px;\r\n      background: rgba(255, 255, 255, 0.08);\r\n      border-radius: 10px;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .progress-fill {\r\n      height: 100%;\r\n      width: 0%;\r\n      background: linear-gradient(90deg, #e63956, #ff476e);\r\n      border-radius: 10px;\r\n      transition: width 1.2s ease-out;\r\n    }\r\n\r\n    .interactive-card:hover .progress-fill {\r\n      width: var(--target-width);\r\n    }\r\n\r\n    \/* 3. \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u062b\u0627\u0644\u062b: \u0627\u0644\u0632\u0631 \u0627\u0644\u0645\u0646\u0632\u0644\u0642 (Slide Button) *\/\r\n    .card-action {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      font-size: 14px;\r\n      font-weight: 800;\r\n      color: #ff476e;\r\n      text-decoration: none;\r\n      transition: gap 0.3s ease;\r\n    }\r\n\r\n    .interactive-card:hover .card-action {\r\n      gap: 15px;\r\n      color: #ffffff;\r\n    }\r\n\r\n    \/* 4. \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0631\u0627\u0628\u0639: \u0627\u0644\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0639\u0646\u062f \u0627\u0644\u062a\u0645\u0631\u064a\u0631 *\/\r\n    .interactive-number {\r\n      font-size: 32px;\r\n      font-weight: 900;\r\n      color: #00ff88;\r\n      text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .cards-grid {\r\n        grid-template-columns: 1fr;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <section class=\"interactive-section\">\r\n    \r\n    <div class=\"section-header\">\r\n      <h2 class=\"section-title\">\u062d\u0644\u0648\u0644 \u0645\u0628\u062a\u0643\u0631\u0629 \u0644\u062a\u0646\u0645\u064a\u0629 \u0623\u0639\u0645\u0627\u0644\u0643<\/h2>\r\n      <p class=\"section-subtitle\">\u062d\u0631\u0643 \u0627\u0644\u0645\u0627\u0648\u0633 \u0641\u0648\u0642 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u0644\u0627\u0643\u062a\u0634\u0627\u0641 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"cards-grid\">\r\n\r\n      <!-- \u0628\u0637\u0627\u0642\u0629 1: \u0627\u0644\u0625\u0636\u0627\u0621\u0629 \u0627\u0644\u0645\u062a\u0628\u0639\u0629 \u0648\u0627\u0644\u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a -->\r\n      <div class=\"interactive-card spotlight-card\">\r\n        <div class=\"card-spotlight\"><\/div>\r\n        <div class=\"card-icon\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3 class=\"card-title\">\u0633\u0631\u0639\u0629 \u0627\u0644\u0623\u062f\u0627\u0621 \u0648\u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a<\/h3>\r\n        <p class=\"card-desc\">\u0646\u0636\u0645\u0646 \u062a\u0633\u0631\u064a\u0639 \u0645\u0639\u062f\u0644\u0627\u062a \u062a\u062d\u0648\u064a\u0644 \u0645\u062a\u062c\u0631\u0643 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0623\u0639\u0644\u0649 \u0639\u0627\u0626\u062f \u0627\u0633\u062a\u062b\u0645\u0627\u0631\u064a \u0645\u0645\u0643\u0646.<\/p>\r\n        \r\n        <div class=\"interactive-number\" data-value=\"99.4\">0%<\/div>\r\n        <span style=\"font-size: 12px; color: #a09a9e;\">\u0646\u0633\u0628\u0629 \u0643\u0641\u0627\u0621\u0629 \u062d\u0645\u0644\u0627\u062a\u0646\u0627<\/span>\r\n      <\/div>\r\n\r\n      <!-- \u0628\u0637\u0627\u0642\u0629 2: \u0634\u0631\u064a\u0637 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0648\u0627\u0644\u062a\u0642\u062f\u0645 -->\r\n      <div class=\"interactive-card spotlight-card\">\r\n        <div class=\"card-spotlight\"><\/div>\r\n        <div class=\"card-icon\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3 class=\"card-title\">\u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a \u0627\u0644\u0631\u0642\u0645\u064a\u0629<\/h3>\r\n        <p class=\"card-desc\">\u062a\u062d\u0644\u064a\u0644 \u0623\u062f\u0627\u0621 \u0627\u0644\u0633\u0648\u0642 \u0648\u0628\u0646\u0627\u0621 \u062e\u0637\u0637 \u062a\u0633\u0648\u064a\u0642\u064a\u0629 \u0645\u062e\u0635\u0635\u0629 \u062a\u062a\u0646\u0627\u0633\u0628 \u0645\u0639 \u062a\u0637\u0644\u0639\u0627\u062a\u0643.<\/p>\r\n        \r\n        <div class=\"progress-wrapper\">\r\n          <div class=\"progress-info\">\r\n            <span>\u0645\u0639\u062f\u0644 \u0627\u0644\u0646\u062c\u0627\u062d<\/span>\r\n            <span>92%<\/span>\r\n          <\/div>\r\n          <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" style=\"--target-width: 92%;\"><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u0628\u0637\u0627\u0642\u0629 3: \u062d\u0631\u0643\u0629 \u0627\u0644\u0632\u0631 \u0648\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0628\u0631\u0645\u062c\u064a -->\r\n      <div class=\"interactive-card spotlight-card\">\r\n        <div class=\"card-spotlight\"><\/div>\r\n        <div class=\"card-icon\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3 class=\"card-title\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0628\u0635\u0631\u064a\u0629<\/h3>\r\n        <p class=\"card-desc\">\u0635\u0646\u0627\u0639\u0629 \u0648\u062a\u0637\u0648\u064a\u0631 \u0647\u0648\u064a\u0629 \u0645\u0631\u0626\u064a\u0629 \u062a\u0639\u0643\u0633 \u0642\u0648\u0629 \u0627\u0644\u0639\u0644\u0627\u0645\u0629 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0643 \u0623\u0645\u0627\u0645 \u0627\u0644\u0639\u0645\u0644\u0627\u0621.<\/p>\r\n        \r\n        <a href=\"#\" class=\"card-action\">\r\n          <span>\u0627\u0633\u062a\u0643\u0634\u0641 \u0627\u0644\u062e\u062f\u0645\u0629<\/span>\r\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line>\r\n            <polyline points=\"12 19 5 12 12 5\"><\/polyline>\r\n          <\/svg>\r\n        <\/a>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n  <script>\r\n    \/* 1. \u0625\u0636\u0627\u0621\u0629 \u0627\u0644\u0645\u0627\u0648\u0633 \u0627\u0644\u0645\u062a\u0628\u0639\u0629 (Mouse Spotlight Effect) *\/\r\n    const cards = document.querySelectorAll('.spotlight-card');\r\n    \r\n    cards.forEach(card => {\r\n      card.addEventListener('mousemove', e => {\r\n        const rect = card.getBoundingClientRect();\r\n        const x = e.clientX - rect.left;\r\n        const y = e.clientY - rect.top;\r\n\r\n        card.style.setProperty('--mouse-x', `${x}px`);\r\n        card.style.setProperty('--mouse-y', `${y}px`);\r\n\r\n        \/\/ \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0625\u0645\u0627\u0644\u0629 \u062b\u0644\u0627\u062b\u064a\u0629 \u0627\u0644\u0623\u0628\u0639\u0627\u062f 3D Tilt\r\n        const centerX = rect.width \/ 2;\r\n        const centerY = rect.height \/ 2;\r\n        const rotateX = (y - centerY) \/ 12;\r\n        const rotateY = (centerX - x) \/ 12;\r\n\r\n        card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-5px)`;\r\n      });\r\n\r\n      card.addEventListener('mouseleave', () => {\r\n        card.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0px)`;\r\n      });\r\n    });\r\n\r\n    \/* 2. \u0639\u062f\u0627\u062f \u0645\u062a\u0632\u0627\u064a\u062f \u0639\u0646\u062f \u0627\u0644\u062a\u0645\u0631\u064a\u0631 \u0639\u0644\u0649 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 *\/\r\n    const numberCard = document.querySelector('.interactive-number');\r\n    let hasAnimated = false;\r\n\r\n    cards[0].addEventListener('mouseenter', () => {\r\n      if (!hasAnimated) {\r\n        let current = 0;\r\n        const target = parseFloat(numberCard.getAttribute('data-value'));\r\n        const interval = setInterval(() => {\r\n          current += 1.5;\r\n          if (current >= target) {\r\n            current = target;\r\n            clearInterval(interval);\r\n          }\r\n          numberCard.innerText = current.toFixed(1) + '%';\r\n        }, 20);\r\n        hasAnimated = true;\r\n      }\r\n    });\r\n  <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d428b6d elementor-widget elementor-widget-html\" data-id=\"d428b6d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u0642\u0633\u0645 \u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0648\u0627\u0644\u062d\u0644\u0648\u0644 - Bento Grid \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a \u0627\u0644\u0645\u062a\u0642\u062f\u0645 -->\r\n<section class=\"services-section-custom\" id=\"servicesSection\">\r\n  <div class=\"services-container\">\r\n    \r\n    <!-- \u0631\u0623\u0633 \u0627\u0644\u0642\u0633\u0645 -->\r\n    <div class=\"section-header\">\r\n      <div class=\"section-badge\">\r\n        <span class=\"badge-dot\"><\/span>\r\n        <span>\u0645\u0646\u0638\u0648\u0645\u0629 \u0627\u0644\u0646\u0645\u0648 \u0627\u0644\u0645\u062a\u0643\u0627\u0645\u0644\u0629<\/span>\r\n      <\/div>\r\n      <h2 class=\"section-title\">\r\n        \u0646\u062d\u0641\u0651\u0632 \u0627\u0644\u0646\u0645\u0648 \u0648\u0646\u0628\u0646\u064a <span class=\"highlight\">\u0623\u0631\u0628\u0627\u062d\u0627\u064b \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629<\/span> \u0644\u0639\u0644\u0627\u0645\u062a\u0643.\r\n      <\/h2>\r\n      <p class=\"section-subtitle\">\r\n        \u0646\u062c\u0645\u0639 \u0628\u064a\u0646 \u0627\u0644\u0647\u0648\u064a\u0627\u062a \u0627\u0644\u0628\u0635\u0631\u064a\u0629 \u0627\u0644\u0645\u0628\u062a\u0643\u0631\u0629 \u0648\u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0627\u0644\u0631\u0642\u0645\u064a \u0627\u0644\u0630\u0643\u064a \u0644\u062a\u0633\u0631\u064a\u0639 \u0623\u062f\u0627\u0621 \u0645\u062a\u062c\u0631\u0643 \u0648\u0645\u0636\u0627\u0639\u0641\u0629 \u0639\u0627\u0626\u062f\u0627\u062a\u0643 \u0627\u0644\u0645\u0628\u0627\u0634\u0631\u0629.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- \u0634\u0628\u0643\u0629 Bento Grid \u0644\u0644\u062e\u062f\u0645\u0627\u062a \u0648\u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a -->\r\n    <div class=\"bento-grid\">\r\n      \r\n      <!-- \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 (\u0643\u0628\u064a\u0631\u0629 - \u0627\u0644\u0647\u0648\u064a\u0629 \u0648\u0627\u0644\u0628\u0635\u0645\u0629) -->\r\n      <div class=\"bento-card card-large spotlight-card\">\r\n        <div class=\"card-spotlight\"><\/div>\r\n        <div class=\"card-header-flex\">\r\n          <div class=\"card-icon-box\">\r\n            <span class=\"card-icon\">\u26a1<\/span>\r\n          <\/div>\r\n          <span class=\"card-tag\">\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0639\u0644\u0627\u0645\u0627\u062a \u0648\u0627\u0644\u0628\u0631\u0627\u0646\u062f\u0646\u062c<\/span>\r\n        <\/div>\r\n        <div class=\"card-content\">\r\n          <h3 class=\"card-heading\">\u0647\u0648\u064a\u0627\u062a \u0628\u0635\u0631\u064a\u0629 \u062a\u062d\u0643\u064a \u0642\u0635\u0629 \u0646\u062c\u0627\u062d\u0643 \u0648\u062a\u062c\u0630\u0628 \u0627\u0644\u0639\u0645\u0644\u0627\u0621.<\/h3>\r\n          <p class=\"card-desc\">\r\n            \u0646\u0637\u0648\u0631 \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u062a\u0634\u0645\u0644 \u0627\u0644\u0634\u0639\u0627\u0631\u0627\u062a\u060c \u0646\u0628\u0631\u0629 \u0627\u0644\u0635\u0648\u062a\u060c \u0648\u0623\u062f\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0644\u062a\u0631\u0633\u064a\u062e \u062d\u0636\u0648\u0631\u0643 \u0627\u0644\u0630\u0647\u0646\u064a \u0628\u0627\u0644\u0645\u0644\u064a\u0645\u062a\u0631.\r\n          <\/p>\r\n        <\/div>\r\n        <div class=\"card-interactive-element\">\r\n          <div class=\"mini-bar-group\">\r\n            <div class=\"mini-bar fill-1\"><\/div>\r\n            <div class=\"mini-bar fill-2\"><\/div>\r\n            <div class=\"mini-bar fill-3\"><\/div>\r\n            <div class=\"mini-bar fill-4\"><\/div>\r\n          <\/div>\r\n          <span class=\"element-label\">\u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0639\u0644\u0627\u0645\u0629 98%<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629 (\u0645\u062a\u0648\u0633\u0637\u0629 - \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645) -->\r\n      <div class=\"bento-card spotlight-card\">\r\n        <div class=\"card-spotlight\"><\/div>\r\n        <div class=\"card-header-flex\">\r\n          <div class=\"card-icon-box\">\r\n            <span class=\"card-icon\">\ud83c\udf10<\/span>\r\n          <\/div>\r\n          <span class=\"card-tag\">\u0633\u0644\u0627\u0633\u0629 \u0627\u0644\u062a\u062d\u0648\u064a\u0644<\/span>\r\n        <\/div>\r\n        <div class=\"card-content\">\r\n          <h3 class=\"card-heading\">UI \/ UX Design<\/h3>\r\n          <p class=\"card-desc\">\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u062c\u0647\u0627\u062a \u0641\u0627\u0626\u0642\u0629 \u0627\u0644\u0633\u0644\u0627\u0633\u0629 \u062a\u062d\u0648\u0644 \u0627\u0644\u0632\u0648\u0627\u0631 \u0625\u0644\u0649 \u0639\u0645\u0644\u0627\u0621 \u062f\u0627\u0626\u0645\u064a\u0646 \u0628\u0636\u063a\u0637\u0629 \u0632\u0631.<\/p>\r\n        <\/div>\r\n        <div class=\"progress-bar-wrapper\">\r\n          <div class=\"progress-info\">\r\n            <span>\u0645\u0639\u062f\u0644 \u0627\u0644\u062a\u062d\u0648\u064a\u0644 (CR)<\/span>\r\n            <span class=\"progress-val\">8.4%<\/span>\r\n          <\/div>\r\n          <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\"><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629 (\u0625\u062d\u0635\u0627\u0626\u064a\u0629 \u0627\u0644\u0623\u0631\u0628\u0627\u062d \u0627\u0644\u0645\u0628\u0627\u0634\u0631\u0629 - \u062a\u0645 \u062a\u062e\u0641\u064a\u0636 \u0627\u0644\u0631\u0642\u0645 \u0625\u0644\u0649 185,400) -->\r\n      <div class=\"bento-card card-stat spotlight-card stat-primary\">\r\n        <div class=\"card-spotlight\"><\/div>\r\n        <span class=\"stat-badge\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0639\u0627\u0626\u062f \u0644\u0644\u0639\u0645\u0644\u0627\u0621<\/span>\r\n        <div class=\"stat-num-box\">\r\n          <span class=\"currency\">$<\/span><span class=\"counter-num\" data-target=\"185400\">0<\/span>\r\n        <\/div>\r\n        <p class=\"stat-text\">\u0623\u0631\u0628\u0627\u062d \u0635\u0627\u0641\u064a\u0629 \u0645\u062d\u0642\u0642\u0629 \u0639\u0628\u0631 \u062d\u0645\u0644\u0627\u062a\u0646\u0627 \u0648\u0625\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a \u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0631\u0642\u0645\u064a.<\/p>\r\n        <div class=\"stat-footer-line highlight-line\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629 (\u0625\u062d\u0635\u0627\u0626\u064a\u0629 \u0646\u0633\u0628\u0629 \u0646\u0645\u0648 \u0645\u0628\u064a\u0639\u0627\u062a \u0627\u0644\u0639\u0645\u0644\u0627\u0621) -->\r\n      <div class=\"bento-card card-stat spotlight-card\">\r\n        <div class=\"card-spotlight\"><\/div>\r\n        <span class=\"stat-badge\">\u0645\u062a\u0648\u0633\u0637 \u0646\u0645\u0648 \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a<\/span>\r\n        <div class=\"stat-num-box\">\r\n          <span class=\"plus\">+<\/span><span class=\"counter-num\" data-target=\"285\">0<\/span><span class=\"percent\">%<\/span>\r\n        <\/div>\r\n        <p class=\"stat-text\">\u0632\u064a\u0627\u062f\u0629 \u0645\u0633\u062a\u0645\u0631\u0629 \u0641\u064a \u0627\u0644\u0639\u0627\u0626\u062f \u0627\u0644\u0627\u0633\u062a\u062b\u0645\u0627\u0631\u064a \u0644\u0645\u0634\u0631\u0648\u0639\u0627\u062a\u0646\u0627 \u062e\u0644\u0627\u0644 \u0647\u0630\u0627 \u0627\u0644\u0639\u0627\u0645.<\/p>\r\n        <div class=\"stat-footer-line\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u062e\u0627\u0645\u0633\u0629 (\u0643\u0628\u064a\u0631\u0629 - \u0627\u0644\u0628\u0631\u0645\u062c\u0629 \u0648\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0635\u0627\u0631\u0648\u062e\u064a) -->\r\n      <div class=\"bento-card card-large alt-bg spotlight-card\">\r\n        <div class=\"card-spotlight\"><\/div>\r\n        <div class=\"card-header-flex\">\r\n          <div class=\"card-icon-box\">\r\n            <span class=\"card-icon\">\ud83d\ude80<\/span>\r\n          <\/div>\r\n          <span class=\"card-tag\">\u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0648\u0627\u0644\u062d\u0644\u0648\u0644 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629<\/span>\r\n        <\/div>\r\n        <div class=\"card-content\">\r\n          <h3 class=\"card-heading\">\u0623\u0643\u0648\u0627\u062f \u0641\u0627\u0626\u0642\u0629 \u0627\u0644\u0633\u0631\u0639\u0629 \u0648\u0623\u062f\u0627\u0621 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a \u064a\u0646\u0628\u0636 \u0628\u0627\u0644\u062d\u064a\u0627\u0629.<\/h3>\r\n          <p class=\"card-desc\">\r\n            \u0646\u062d\u0631\u0643 \u0627\u0644\u0645\u0633\u062a\u062d\u064a\u0644 \u0639\u0628\u0631 \u0628\u0631\u0645\u062c\u064a\u0627\u062a \u062d\u062f\u064a\u062b\u0629 \u0645\u062a\u0648\u0627\u0641\u0642\u0629 \u0643\u0644\u064a\u0627\u064b \u0645\u0639 \u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b \u0648\u062a\u0639\u0645\u0644 \u0628\u0643\u0641\u0627\u0621\u0629 \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629 \u0639\u0644\u0649 \u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0643\u0627\u0641\u0629.\r\n          <\/p>\r\n        <\/div>\r\n        <div class=\"action-link\">\r\n          <span>\u0627\u0628\u062f\u0623 \u0641\u064a \u062a\u0646\u0645\u064a\u0629 \u0623\u0631\u0628\u0627\u062d\u0643 \u0627\u0644\u0622\u0646<\/span>\r\n          <span class=\"arrow-icon\">\u2190<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;700;800;900&display=swap');\r\n\r\n  \/* \u062a\u0635\u0641\u064a\u0631 \u0627\u0644\u0647\u0648\u0627\u0645\u0634 \u0648\u0627\u0644\u0636\u0628\u0637 \u0627\u0644\u0639\u0627\u0645 *\/\r\n  .services-section-custom,\r\n  .services-section-custom * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .services-section-custom {\r\n    background-color: #0b090d;\r\n    color: #ffffff;\r\n    font-family: 'Cairo', sans-serif;\r\n    direction: rtl;\r\n    width: 100% !important;\r\n    max-width: 100% !important;\r\n    padding: 100px 5% !important;\r\n    position: relative !important;\r\n    overflow: hidden;\r\n    z-index: 1;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n  }\r\n\r\n  .services-container {\r\n    max-width: 1300px;\r\n    margin: 0 auto;\r\n    width: 100%;\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n\r\n  \/* \u0631\u0623\u0633 \u0627\u0644\u0642\u0633\u0645 *\/\r\n  .section-header {\r\n    text-align: center;\r\n    max-width: 750px;\r\n    margin: 0 auto 60px auto;\r\n  }\r\n\r\n  .section-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-size: 13px;\r\n    color: #a09a9e;\r\n    margin-bottom: 15px;\r\n    background: rgba(255, 255, 255, 0.03);\r\n    padding: 6px 16px;\r\n    border-radius: 20px;\r\n    border: 1px solid rgba(255, 255, 255, 0.08);\r\n  }\r\n\r\n  .badge-dot {\r\n    width: 7px;\r\n    height: 7px;\r\n    background-color: #00ff88;\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 10px #00ff88;\r\n    animation: blinkDot 1.5s infinite alternate;\r\n  }\r\n\r\n  @keyframes blinkDot {\r\n    0% { opacity: 0.4; transform: scale(0.8); }\r\n    100% { opacity: 1; transform: scale(1.2); }\r\n  }\r\n\r\n  .section-title {\r\n    font-size: 48px;\r\n    font-weight: 900;\r\n    line-height: 1.25;\r\n    margin-bottom: 18px;\r\n    color: #ffffff;\r\n  }\r\n\r\n  .section-title .highlight {\r\n    background: linear-gradient(135deg, #ff476e 0%, #e63956 100%);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n  }\r\n\r\n  .section-subtitle {\r\n    font-size: 17px;\r\n    color: #a09a9e;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  \/* Bento Grid *\/\r\n  .bento-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 24px;\r\n    width: 100%;\r\n  }\r\n\r\n  \/* \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 *\/\r\n  .bento-card {\r\n    position: relative;\r\n    background: linear-gradient(145deg, #160e14 0%, #0f090e 100%);\r\n    border: 1px solid rgba(255, 255, 255, 0.07);\r\n    border-radius: 24px;\r\n    padding: 32px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    transform-style: preserve-3d;\r\n  }\r\n\r\n  \/* \u0636\u0648\u0621 Spotlight \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0645\u062a\u0627\u0628\u0639\u0629 \u062d\u0631\u0643\u0629 \u0627\u0644\u0645\u0627\u0648\u0633 *\/\r\n  .card-spotlight {\r\n    position: absolute;\r\n    top: 0; left: 0; width: 100%; height: 100%;\r\n    background: radial-gradient(350px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(230, 57, 86, 0.22), transparent 80%);\r\n    opacity: 0;\r\n    transition: opacity 0.3s ease;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .bento-card:hover .card-spotlight {\r\n    opacity: 1;\r\n  }\r\n\r\n  .bento-card:hover {\r\n    border-color: rgba(230, 57, 86, 0.4);\r\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(230, 57, 86, 0.15);\r\n  }\r\n\r\n  .card-large {\r\n    grid-column: span 2;\r\n  }\r\n\r\n  .bento-card.alt-bg {\r\n    background: linear-gradient(145deg, #1e1018 0%, #120910 100%);\r\n  }\r\n\r\n  .card-header-flex {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .card-icon-box {\r\n    width: 48px;\r\n    height: 48px;\r\n    background: rgba(230, 57, 86, 0.12);\r\n    border: 1px solid rgba(230, 57, 86, 0.3);\r\n    border-radius: 14px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: transform 0.3s ease, background 0.3s ease;\r\n  }\r\n\r\n  .bento-card:hover .card-icon-box {\r\n    transform: scale(1.1) rotate(-5deg);\r\n    background: #e63956;\r\n  }\r\n\r\n  .card-icon {\r\n    font-size: 20px;\r\n  }\r\n\r\n  .card-tag {\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    color: #e63956;\r\n    letter-spacing: 0.5px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .card-heading {\r\n    font-size: 22px;\r\n    font-weight: 800;\r\n    color: #ffffff;\r\n    margin-bottom: 12px;\r\n    line-height: 1.35;\r\n  }\r\n\r\n  .card-desc {\r\n    font-size: 14px;\r\n    color: #a09a9e;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  \/* \u0627\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a (\u0627\u0644\u0623\u0639\u0645\u062f\u0629 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629) *\/\r\n  .card-interactive-element {\r\n    margin-top: 25px;\r\n    background: rgba(0, 0, 0, 0.35);\r\n    padding: 14px 18px;\r\n    border-radius: 14px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    border: 1px solid rgba(255, 255, 255, 0.05);\r\n  }\r\n\r\n  .mini-bar-group {\r\n    display: flex;\r\n    gap: 5px;\r\n    align-items: flex-end;\r\n    height: 22px;\r\n  }\r\n\r\n  .mini-bar {\r\n    width: 6px;\r\n    background: #e63956;\r\n    border-radius: 4px;\r\n    animation: barPulse 1.8s infinite ease-in-out alternate;\r\n  }\r\n\r\n  .mini-bar.fill-1 { height: 40%; animation-delay: 0.1s; }\r\n  .mini-bar.fill-2 { height: 90%; animation-delay: 0.3s; }\r\n  .mini-bar.fill-3 { height: 60%; animation-delay: 0.5s; }\r\n  .mini-bar.fill-4 { height: 100%; animation-delay: 0.2s; }\r\n\r\n  @keyframes barPulse {\r\n    0% { transform: scaleY(0.5); opacity: 0.6; }\r\n    100% { transform: scaleY(1.1); opacity: 1; }\r\n  }\r\n\r\n  .element-label {\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    color: #00ff88;\r\n    letter-spacing: 0.5px;\r\n  }\r\n\r\n  \/* \u0634\u0631\u064a\u0637 \u0627\u0644\u062a\u0642\u062f\u0645 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a *\/\r\n  .progress-bar-wrapper {\r\n    margin-top: 20px;\r\n  }\r\n\r\n  .progress-info {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    font-size: 12px;\r\n    color: #a09a9e;\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  .progress-val {\r\n    color: #00ff88;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .progress-bar {\r\n    width: 100%;\r\n    height: 7px;\r\n    background: rgba(255, 255, 255, 0.08);\r\n    border-radius: 10px;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .progress-fill {\r\n    height: 100%;\r\n    width: 0%;\r\n    background: linear-gradient(90deg, #e63956, #00ff88);\r\n    border-radius: 10px;\r\n    transition: width 1.2s cubic-bezier(0.1, 0.8, 0.3, 1);\r\n  }\r\n\r\n  .bento-card:hover .progress-fill {\r\n    width: 85%;\r\n  }\r\n\r\n  \/* \u0628\u0637\u0627\u0642\u0627\u062a \u0627\u0644\u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u0648\u0627\u0644\u0623\u0631\u0642\u0627\u0645 \u0627\u0644\u0643\u0628\u064a\u0631\u0629 *\/\r\n  .card-stat {\r\n    justify-content: center;\r\n    text-align: center;\r\n    align-items: center;\r\n    padding: 35px 24px;\r\n  }\r\n\r\n  .stat-badge {\r\n    font-size: 11px;\r\n    color: #a09a9e;\r\n    font-weight: 700;\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  .stat-num-box {\r\n    font-size: 46px;\r\n    font-weight: 900;\r\n    color: #ffffff;\r\n    line-height: 1;\r\n    margin-bottom: 10px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  .stat-primary .stat-num-box {\r\n    color: #00ff88;\r\n    text-shadow: 0 0 20px rgba(0, 255, 136, 0.25);\r\n  }\r\n\r\n  .stat-num-box .currency, .stat-num-box .plus, .stat-num-box .percent {\r\n    color: #e63956;\r\n    font-size: 32px;\r\n    margin: 0 3px;\r\n  }\r\n\r\n  .stat-primary .currency {\r\n    color: #00ff88;\r\n  }\r\n\r\n  .stat-text {\r\n    font-size: 13px;\r\n    color: #a09a9e;\r\n    margin-bottom: 18px;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  .stat-footer-line {\r\n    width: 40px;\r\n    height: 3px;\r\n    background: rgba(255, 255, 255, 0.1);\r\n    border-radius: 2px;\r\n    transition: width 0.4s ease, background 0.4s ease;\r\n  }\r\n\r\n  .bento-card:hover .stat-footer-line {\r\n    width: 90px;\r\n    background: #e63956;\r\n  }\r\n\r\n  .stat-primary:hover .stat-footer-line {\r\n    background: #00ff88;\r\n  }\r\n\r\n  \/* \u0632\u0631 \u0627\u0644\u0631\u0627\u0628\u0637 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a *\/\r\n  .action-link {\r\n    margin-top: 25px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    color: #e63956;\r\n    font-weight: 800;\r\n    font-size: 15px;\r\n    transition: gap 0.3s ease, color 0.3s ease;\r\n  }\r\n\r\n  .bento-card:hover .action-link {\r\n    gap: 16px;\r\n    color: #ff476e;\r\n  }\r\n\r\n  \/* \u0627\u0644\u062a\u062c\u0627\u0648\u0628 \u0645\u0639 \u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0635\u063a\u064a\u0631\u0629 *\/\r\n  @media (max-width: 991px) {\r\n    .bento-grid {\r\n      grid-template-columns: 1fr;\r\n    }\r\n    .card-large {\r\n      grid-column: span 1;\r\n    }\r\n    .section-title {\r\n      font-size: 36px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 767px) {\r\n    .services-section-custom {\r\n      padding: 60px 20px !important;\r\n    }\r\n    .stat-num-box {\r\n      font-size: 38px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- \u0633\u0643\u0631\u064a\u0628\u062a \u0645\u0636\u0627\u0639\u0641 \u0648\u0645\u0628\u0627\u0634\u0631 \u0644\u0636\u0645\u0627\u0646 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0628\u062f\u0648\u0646 \u0623\u064a \u0627\u0639\u062a\u0645\u0627\u062f\u0627\u062a \u062e\u0627\u0631\u062c\u064a\u0629 -->\r\n<script>\r\n  (function () {\r\n    function initHoverCounters() {\r\n      \/\/ 1. \u062d\u0631\u0643\u0629 \u0627\u0644\u0623\u0636\u0648\u0627\u0621 \u0648\u0627\u0644\u0640 3D\r\n      const spotlightCards = document.querySelectorAll('.spotlight-card');\r\n      spotlightCards.forEach(card => {\r\n        card.addEventListener('mousemove', e => {\r\n          const rect = card.getBoundingClientRect();\r\n          const x = e.clientX - rect.left;\r\n          const y = e.clientY - rect.top;\r\n          card.style.setProperty('--mouse-x', x + 'px');\r\n          card.style.setProperty('--mouse-y', y + 'px');\r\n          \r\n          const centerX = rect.width \/ 2;\r\n          const centerY = rect.height \/ 2;\r\n          const rotateX = (y - centerY) \/ 16;\r\n          const rotateY = (centerX - x) \/ 16;\r\n          card.style.transform = 'perspective(1000px) rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg) translateY(-5px)';\r\n        });\r\n\r\n        card.addEventListener('mouseleave', () => {\r\n          card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0px)';\r\n        });\r\n      });\r\n\r\n      \/\/ 2. \u0627\u0644\u0646\u0645\u0648 \u0627\u0644\u062a\u0635\u0627\u0639\u062f\u064a \u0644\u0644\u0623\u0631\u0642\u0627\u0645 \u0639\u0646\u062f \u0648\u0636\u0639 \u0627\u0644\u0645\u0627\u0648\u0633 (Hover)\r\n      const statCards = document.querySelectorAll('.card-stat');\r\n\r\n      statCards.forEach(card => {\r\n        let animTimer = null;\r\n\r\n        card.addEventListener('mouseenter', function () {\r\n          const counterEl = card.querySelector('.counter-num');\r\n          if (!counterEl) return;\r\n\r\n          const targetNum = parseInt(counterEl.getAttribute('data-target'), 10) || 0;\r\n          let currentNum = 0;\r\n          const totalSteps = 40; \r\n          const stepValue = targetNum \/ totalSteps;\r\n\r\n          if (animTimer) clearInterval(animTimer);\r\n\r\n          animTimer = setInterval(() => {\r\n            currentNum += stepValue;\r\n            if (currentNum >= targetNum) {\r\n              counterEl.innerText = targetNum.toLocaleString();\r\n              clearInterval(animTimer);\r\n            } else {\r\n              counterEl.innerText = Math.ceil(currentNum).toLocaleString();\r\n            }\r\n          }, 25);\r\n        });\r\n      });\r\n    }\r\n\r\n    if (document.readyState === 'loading') {\r\n      document.addEventListener('DOMContentLoaded', initHoverCounters);\r\n    } else {\r\n      initHoverCounters();\r\n    }\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e360b8c elementor-widget elementor-widget-html\" data-id=\"e360b8c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u0642\u0633\u0645 \u0627\u0633\u062a\u0639\u0631\u0627\u0636 \u0627\u0644\u0623\u0639\u0645\u0627\u0644 - \u0623\u0632\u0631\u0627\u0631 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u062a\u063a\u064a\u0651\u0631 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0628\u0635\u0631\u064a \u062f\u0627\u062e\u0644 \u0627\u0644\u0635\u0648\u0631 -->\r\n<section class=\"portfolio-section-custom\" id=\"portfolioSection\">\r\n  <div class=\"portfolio-container\">\r\n    \r\n    <!-- \u0631\u0623\u0633 \u0627\u0644\u0642\u0633\u0645 \u0648\u0627\u0644\u0641\u0644\u062a\u0631\u0629 -->\r\n    <div class=\"portfolio-header\">\r\n      <div class=\"header-text\">\r\n        <div class=\"section-badge\">\r\n          <span class=\"badge-dot\"><\/span>\r\n          <span>\u0645\u0639\u0631\u0636 \u0627\u0644\u0623\u0639\u0645\u0627\u0644<\/span>\r\n        <\/div>\r\n        <h2 class=\"section-title\">\r\n          \u0623\u0639\u0645\u0627\u0644 \u0645\u062e\u062a\u0627\u0631\u0629 \u0635\u0646\u0639\u062a <span class=\"highlight\">\u0627\u0644\u0641\u0627\u0631\u0642<\/span>.\r\n        <\/h2>\r\n      <\/div>\r\n\r\n      <!-- \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0641\u0644\u062a\u0631\u0629 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629 -->\r\n      <div class=\"portfolio-tabs\">\r\n        <button class=\"tab-btn active\" onclick=\"changeCategory('all', this)\">\u0627\u0644\u0643\u0644<\/button>\r\n        <button class=\"tab-btn\" onclick=\"changeCategory('branding', this)\">\u0647\u0648\u064a\u0627\u062a \u0628\u0635\u0631\u064a\u0629<\/button>\r\n        <button class=\"tab-btn\" onclick=\"changeCategory('uiux', this)\">\u0648\u0627\u062c\u0647\u0627\u062a \u0648\u062a\u0637\u0628\u064a\u0642\u0627\u062a<\/button>\r\n        <button class=\"tab-btn\" onclick=\"changeCategory('dev', this)\">\u0628\u0631\u0645\u062c\u064a\u0627\u062a \u062e\u0627\u0635\u0629<\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u0634\u0628\u0643\u0629 \u0639\u0631\u0636 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062b\u0627\u0628\u062a\u0629 \u0627\u0644\u0647\u064a\u0643\u0644\u060c \u0648\u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0628\u0635\u0631\u064a -->\r\n    <div class=\"projects-grid\">\r\n      \r\n      <!-- \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0627\u0644\u0623\u0648\u0644 -->\r\n      <div class=\"project-card\">\r\n        <div class=\"project-image-box\">\r\n          <div class=\"card-bg-gradient bg-1\"><\/div>\r\n          \r\n          <!-- \u062a\u0631\u0627\u0643\u0628 \u0627\u0644\u0640 Vector \u0648\u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0627\u062a \u0627\u0644\u0630\u064a \u064a\u062a\u063a\u064a\u0631 \u062d\u0633\u064e\u0628 \u0627\u0644\u0632\u0631 -->\r\n          <div class=\"visual-overlay\" id=\"overlay-1\">\r\n            <!-- \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0628\u0635\u0631\u064a \u0627\u0644\u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a \u064a\u0638\u0647\u0631 \u0647\u0646\u0627 -->\r\n          <\/div>\r\n\r\n          <div class=\"project-grid-pattern\"><\/div>\r\n          <div class=\"project-badge\" id=\"badge-1\">BRANDING<\/div>\r\n          <a href=\"#\" class=\"project-link-btn\">\u2197<\/a>\r\n        <\/div>\r\n        <div class=\"project-info\">\r\n          <h3 class=\"project-title\" id=\"title-1\">\u0645\u0646\u0635\u0629 \u0643\u0648\u062c\u0648\u0643 \u0627\u0644\u0625\u0628\u062f\u0627\u0639\u064a\u0629<\/h3>\r\n          <p class=\"project-desc\" id=\"desc-1\">\u0628\u0646\u0627\u0621 \u0647\u0648\u064a\u0629 \u0628\u0635\u0631\u064a\u0629 \u0643\u0627\u0645\u0644\u0629 \u0648\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0631\u0642\u0645\u064a\u0629 \u0644\u0639\u0644\u0627\u0645\u0629 \u062a\u062c\u0627\u0631\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629 \u0641\u064a \u0627\u0644\u062d\u0644\u0648\u0644 \u0627\u0644\u0630\u0643\u064a\u0629.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0627\u0644\u062b\u0627\u0646\u064a -->\r\n      <div class=\"project-card\">\r\n        <div class=\"project-image-box\">\r\n          <div class=\"card-bg-gradient bg-2\"><\/div>\r\n          \r\n          <div class=\"visual-overlay\" id=\"overlay-2\"><\/div>\r\n\r\n          <div class=\"project-grid-pattern\"><\/div>\r\n          <div class=\"project-badge\" id=\"badge-2\">UI\/UX DESIGN<\/div>\r\n          <a href=\"#\" class=\"project-link-btn\">\u2197<\/a>\r\n        <\/div>\r\n        <div class=\"project-info\">\r\n          <h3 class=\"project-title\" id=\"title-2\">\u062a\u0637\u0628\u064a\u0642 \u0646\u0643\u0633\u062a \u062c\u064a\u0646 \u0627\u0644\u0645\u0627\u0644\u064a<\/h3>\r\n          <p class=\"project-desc\" id=\"desc-2\">\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u062c\u0647\u0627\u062a \u0648\u062a\u062c\u0631\u0628\u0629 \u0645\u0633\u062a\u062e\u062f\u0645 \u0633\u0644\u0633\u0629 \u0644\u062a\u0637\u0628\u064a\u0642 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0627\u0633\u062a\u062b\u0645\u0627\u0631\u0627\u062a \u0648\u0627\u0644\u062a\u062f\u0627\u0648\u0644 \u0627\u0644\u0641\u0648\u0631\u064a.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0627\u0644\u062b\u0627\u0644\u062b -->\r\n      <div class=\"project-card\">\r\n        <div class=\"project-image-box\">\r\n          <div class=\"card-bg-gradient bg-3\"><\/div>\r\n          \r\n          <div class=\"visual-overlay\" id=\"overlay-3\"><\/div>\r\n\r\n          <div class=\"project-grid-pattern\"><\/div>\r\n          <div class=\"project-badge\" id=\"badge-3\">DEVELOPMENT<\/div>\r\n          <a href=\"#\" class=\"project-link-btn\">\u2197<\/a>\r\n        <\/div>\r\n        <div class=\"project-info\">\r\n          <h3 class=\"project-title\" id=\"title-3\">\u0645\u0633\u062a\u0643\u0634\u0641 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a<\/h3>\r\n          <p class=\"project-desc\" id=\"desc-3\">\u0628\u0631\u0645\u062c\u0629 \u0648\u0628\u0646\u0627\u0621 \u0645\u062d\u0631\u0643 \u062a\u062d\u0644\u064a\u0644 \u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0639 \u0644\u0648\u062d\u0629 \u062a\u062d\u0643\u0645 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u062d\u064a\u0629.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0627\u0644\u0631\u0627\u0628\u0639 -->\r\n      <div class=\"project-card\">\r\n        <div class=\"project-image-box\">\r\n          <div class=\"card-bg-gradient bg-4\"><\/div>\r\n          \r\n          <div class=\"visual-overlay\" id=\"overlay-4\"><\/div>\r\n\r\n          <div class=\"project-grid-pattern\"><\/div>\r\n          <div class=\"project-badge\" id=\"badge-4\">BRANDING<\/div>\r\n          <a href=\"#\" class=\"project-link-btn\">\u2197<\/a>\r\n        <\/div>\r\n        <div class=\"project-info\">\r\n          <h3 class=\"project-title\" id=\"title-4\">\u0627\u0633\u062a\u0648\u062f\u064a\u0648 \u0623\u0648\u0631\u0627 \u0627\u0644\u0641\u0646\u064a<\/h3>\r\n          <p class=\"project-desc\" id=\"desc-4\">\u0625\u0639\u0627\u062f\u0629 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0639\u0644\u0628 \u0648\u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0648\u062a\u0637\u0648\u064a\u0631 \u0646\u0638\u0627\u0645 \u0628\u0635\u0631\u064a \u0641\u0631\u064a\u062f \u0645\u0646 \u0646\u0648\u0639\u0647.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- \u0623\u0633\u0641\u0644 \u0627\u0644\u0645\u0639\u0631\u0636 -->\r\n    <div class=\"portfolio-footer\">\r\n      <p class=\"footer-note\">\u0647\u0644 \u0644\u062f\u064a\u0643 \u0645\u0634\u0631\u0648\u0639 \u0645\u0645\u064a\u0632 \u0648\u062a\u0648\u062f\u0651 \u0625\u0628\u0631\u0627\u0632\u0647 \u0628\u0627\u0644\u0634\u0643\u0644 \u0627\u0644\u0635\u062d\u064a\u062d\u061f<\/p>\r\n      <a href=\"#\" class=\"btn-project-cta\">\r\n        \u0634\u0627\u0647\u062f \u0643\u0627\u0641\u0629 \u0627\u0644\u0623\u0639\u0645\u0627\u0644\r\n        <span class=\"arrow-icon\">\u2190<\/span>\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;700;900&display=swap');\r\n\r\n  .portfolio-section-custom,\r\n  .portfolio-section-custom * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .portfolio-section-custom {\r\n    background-color: #0b090d;\r\n    color: #ffffff;\r\n    font-family: 'Cairo', sans-serif;\r\n    direction: rtl;\r\n    width: 100% !important;\r\n    max-width: 100% !important;\r\n    padding: 90px 5% !important;\r\n    position: relative !important;\r\n    overflow: hidden;\r\n    z-index: 1;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n  }\r\n\r\n  .portfolio-container {\r\n    max-width: 1300px;\r\n    margin: 0 auto;\r\n    width: 100%;\r\n  }\r\n\r\n  .portfolio-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-end;\r\n    margin-bottom: 45px;\r\n    flex-wrap: wrap;\r\n    gap: 20px;\r\n  }\r\n\r\n  .section-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-size: 13px;\r\n    color: #a09a9e;\r\n    margin-bottom: 12px;\r\n    background: rgba(255, 255, 255, 0.03);\r\n    padding: 6px 16px;\r\n    border-radius: 20px;\r\n    border: 1px solid rgba(255, 255, 255, 0.08);\r\n  }\r\n\r\n  .badge-dot {\r\n    width: 7px;\r\n    height: 7px;\r\n    background-color: #e63956;\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 8px #e63956;\r\n  }\r\n\r\n  .section-title {\r\n    font-size: 40px;\r\n    font-weight: 900;\r\n    line-height: 1.2;\r\n    color: #ffffff;\r\n  }\r\n\r\n  .section-title .highlight {\r\n    color: #e63956;\r\n  }\r\n\r\n  \/* \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0641\u0644\u062a\u0631\u0629 *\/\r\n  .portfolio-tabs {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 5px;\r\n    background: #120e14;\r\n    padding: 6px;\r\n    border-radius: 40px;\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n  }\r\n\r\n  .tab-btn {\r\n    background: transparent;\r\n    border: none;\r\n    color: #a09a9e;\r\n    padding: 10px 22px;\r\n    border-radius: 30px;\r\n    font-family: 'Cairo', sans-serif;\r\n    font-weight: 700;\r\n    font-size: 14px;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .tab-btn:hover { color: #ffffff; }\r\n\r\n  .tab-btn.active {\r\n    background-color: #e63956;\r\n    color: #ffffff;\r\n    box-shadow: 0 4px 18px rgba(230, 57, 86, 0.45);\r\n  }\r\n\r\n  \/* \u0634\u0628\u0643\u0629 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a *\/\r\n  .projects-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 30px;\r\n    width: 100%;\r\n  }\r\n\r\n  .project-card {\r\n    background: linear-gradient(150deg, #160e14 0%, #0f090e 100%);\r\n    border: 1px solid rgba(255, 255, 255, 0.07);\r\n    border-radius: 24px;\r\n    padding: 20px;\r\n    transition: all 0.4s ease;\r\n  }\r\n\r\n  .project-card:hover {\r\n    transform: translateY(-6px);\r\n    border-color: rgba(230, 57, 86, 0.5);\r\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);\r\n  }\r\n\r\n  .project-image-box {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 250px;\r\n    border-radius: 18px;\r\n    overflow: hidden;\r\n    margin-bottom: 20px;\r\n    background: #140d13;\r\n  }\r\n\r\n  .card-bg-gradient {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 1;\r\n    opacity: 0.6;\r\n  }\r\n\r\n  .bg-1 { background: linear-gradient(135deg, #2b1122 0%, #a8203c 100%); }\r\n  .bg-2 { background: linear-gradient(135deg, #121f2d 0%, #1e5250 100%); }\r\n  .bg-3 { background: linear-gradient(135deg, #22122b 0%, #5d20a8 100%); }\r\n  .bg-4 { background: linear-gradient(135deg, #2b2211 0%, #a86c20 100%); }\r\n\r\n  \/* \u0627\u0644\u062a\u0631\u0627\u0643\u0628 \u0627\u0644\u0628\u0635\u0631\u064a \u0627\u0644\u0645\u062a\u063a\u064a\u0631 \u0644\u0644\u0623\u064a\u0642\u0648\u0646\u0627\u062a \u0648\u0627\u0644\u0640 Vectors *\/\r\n  .visual-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 2;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 12px;\r\n    padding: 20px;\r\n    text-align: center;\r\n    transition: opacity 0.3s ease, transform 0.3s ease;\r\n  }\r\n\r\n  .visual-overlay .icon-box {\r\n    display: flex;\r\n    gap: 10px;\r\n  }\r\n\r\n  .visual-overlay .vector-tag {\r\n    background: rgba(255, 255, 255, 0.1);\r\n    border: 1px solid rgba(255, 255, 255, 0.2);\r\n    backdrop-filter: blur(8px);\r\n    padding: 6px 14px;\r\n    border-radius: 12px;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    color: #ffffff;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.3);\r\n  }\r\n\r\n  .project-grid-pattern {\r\n    position: absolute;\r\n    inset: 0;\r\n    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);\r\n    background-size: 16px 16px;\r\n    pointer-events: none;\r\n    z-index: 3;\r\n  }\r\n\r\n  .project-badge {\r\n    position: absolute;\r\n    top: 16px; right: 16px;\r\n    background: rgba(11, 9, 13, 0.85);\r\n    border: 1px solid rgba(255, 255, 255, 0.15);\r\n    backdrop-filter: blur(8px);\r\n    color: #ffffff;\r\n    padding: 6px 14px;\r\n    border-radius: 12px;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    z-index: 4;\r\n  }\r\n\r\n  .project-link-btn {\r\n    position: absolute;\r\n    bottom: 16px; left: 16px;\r\n    width: 42px; height: 42px;\r\n    background: #ffffff;\r\n    color: #0b090d;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    text-decoration: none;\r\n    font-weight: 900;\r\n    font-size: 18px;\r\n    z-index: 4;\r\n  }\r\n\r\n  .project-info { padding: 0 5px; }\r\n\r\n  .project-title {\r\n    font-size: 22px;\r\n    font-weight: 800;\r\n    color: #ffffff;\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  .project-desc {\r\n    font-size: 14px;\r\n    color: #a09a9e;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  .portfolio-footer {\r\n    margin-top: 55px;\r\n    text-align: center;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 15px;\r\n  }\r\n\r\n  .footer-note { font-size: 16px; color: #a09a9e; }\r\n\r\n  .btn-project-cta {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    background: transparent;\r\n    color: #ffffff;\r\n    border: 1px solid rgba(230, 57, 86, 0.4);\r\n    padding: 14px 32px;\r\n    border-radius: 30px;\r\n    text-decoration: none;\r\n    font-weight: 800;\r\n  }\r\n\r\n  @media (max-width: 991px) {\r\n    .projects-grid { grid-template-columns: 1fr; }\r\n    .portfolio-header { flex-direction: column; align-items: flex-start; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  \/\/ \u062a\u0631\u0627\u0643\u0628\u0627\u062a \u0639\u0646\u0627\u0635\u0631 Vector \u0648\u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0627\u062a \u0644\u0643\u0644 \u0632\u0631\r\n  const categoryData = {\r\n    all: [\r\n      { badge: \"BRANDING\", title: \"\u0645\u0646\u0635\u0629 \u0643\u0648\u062c\u0648\u0643 \u0627\u0644\u0625\u0628\u062f\u0627\u0639\u064a\u0629\", desc: \"\u0628\u0646\u0627\u0621 \u0647\u0648\u064a\u0629 \u0628\u0635\u0631\u064a\u0629 \u0643\u0627\u0645\u0644\u0629 \u0648\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0631\u0642\u0645\u064a\u0629 \u0644\u0639\u0644\u0627\u0645\u0629 \u062a\u062c\u0627\u0631\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629.\", icons: [\"\ud83c\udfa8 SVG Vector\", \"\ud83d\udcd0 Grid Logo\"] },\r\n      { badge: \"UI\/UX DESIGN\", title: \"\u062a\u0637\u0628\u064a\u0642 \u0646\u0643\u0633\u062a \u062c\u064a\u0646 \u0627\u0644\u0645\u0627\u0644\u064a\", desc: \"\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u062c\u0647\u0627\u062a \u0648\u062a\u062c\u0631\u0628\u0629 \u0645\u0633\u062a\u062e\u062f\u0645 \u0633\u0644\u0633\u0629 \u0644\u062a\u0637\u0628\u064a\u0642 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0627\u0633\u062a\u062b\u0645\u0627\u0631\u0627\u062a \u0648\u0627\u0644\u062a\u062f\u0627\u0648\u0644.\", icons: [\"\ud83d\udcf1 App Icons\", \"\u26a1 UX Wireframes\"] },\r\n      { badge: \"DEVELOPMENT\", title: \"\u0645\u0633\u062a\u0643\u0634\u0641 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\", desc: \"\u0628\u0631\u0645\u062c\u0629 \u0648\u0628\u0646\u0627\u0621 \u0645\u062d\u0631\u0643 \u062a\u062d\u0644\u064a\u0644 \u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0639 \u0644\u0648\u062d\u0629 \u062a\u062d\u0643\u0645 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629.\", icons: [\"\ud83d\udcbb Source Code\", \"\u2699\ufe0f API Engine\"] },\r\n      { badge: \"BRANDING\", title: \"\u0627\u0633\u062a\u0648\u062f\u064a\u0648 \u0623\u0648\u0631\u0627 \u0627\u0644\u0641\u0646\u064a\", desc: \"\u0625\u0639\u0627\u062f\u0629 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0639\u0644\u0628 \u0648\u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0648\u062a\u0637\u0648\u064a\u0631 \u0646\u0638\u0627\u0645 \u0628\u0635\u0631\u064a \u0641\u0631\u064a\u062f \u0645\u0646 \u0646\u0648\u0639\u0647.\", icons: [\"\ud83c\udff7\ufe0f Packaging\", \"\u2728 Brand System\"] }\r\n    ],\r\n    branding: [\r\n      { badge: \"VECTOR LOGO\", title: \"\u0627\u0633\u062a\u0648\u062f\u064a\u0648 \u0627\u0644\u0634\u0639\u0627\u0631\u0627\u062a \u0648\u0627\u0644\u0645\u062c\u0633\u0645\u0627\u062a\", desc: \"\u062a\u0648\u0644\u064a\u062f \u0634\u0639\u0627\u0631\u0627\u062a \u0648\u0642\u0648\u0627\u0644\u0628 Vector \u0645\u0641\u062a\u0648\u062d\u0629 \u0627\u0644\u0645\u0635\u062f\u0631 \u0648\u0628\u062f\u0642\u0629 \u0639\u0627\u0644\u064a\u0629 \u0644\u0644\u0639\u0644\u0627\u0645\u0627\u062a \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0651\u0629.\", icons: [\"\ud83c\udfa8 100% Vector\", \"\ud83d\udcd0 SVG Shapes\", \"\u270f\ufe0f Typography Grid\"] },\r\n      { badge: \"IDENTITY SYSTEM\", title: \"\u062f\u0644\u064a\u0644 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0628\u0635\u0631\u064a\u0629 \u0627\u0644\u062d\u0635\u0631\u064a\u0629\", desc: \"\u062a\u0635\u0627\u0645\u064a\u0645 \u0648\u0623\u0644\u0648\u0627\u0646 \u0645\u0639\u062a\u0645\u062f\u0629 \u0644\u0644\u0647\u0648\u064a\u0627\u062a \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0648\u062f\u0644\u0627\u0626\u0644 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0644\u0648\u062c\u0648.\", icons: [\"\ud83d\udcd8 Brand Book\", \"\ud83c\udfa8 Color Palettes\"] },\r\n      { badge: \"ILLUSTRATION\", title: \"\u0631\u0633\u0648\u0645 \u062a\u0648\u0636\u064a\u062d\u064a\u0629 Vector\", desc: \"\u0645\u062c\u0645\u0648\u0639\u0629 \u0631\u0633\u0645 \u0641\u064a\u0643\u062a\u0648\u0631 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0644\u0644\u0645\u062a\u0637\u0644\u0628\u0627\u062a \u0627\u0644\u0625\u0639\u0644\u0627\u0646\u064a\u0629 \u0648\u0627\u0644\u062a\u0633\u0648\u064a\u0642\u064a\u0629.\", icons: [\"\ud83d\udd8c\ufe0f Vector Art\", \"\ud83d\uddbc\ufe0f Mockup Assets\"] },\r\n      { badge: \"PACKAGING\", title: \"\u062a\u063a\u0644\u064a\u0641 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0639\u0635\u0631\u064a\u0629\", desc: \"\u0623\u0646\u0645\u0627\u0637 \u0648\u062a\u0635\u0627\u0645\u064a\u0645 \u0627\u0644\u0647\u0648\u064a\u0627\u062a \u0627\u0644\u0645\u0637\u0628\u0648\u0639\u0629 \u0648\u0627\u0644\u0645\u062c\u0633\u0645\u0627\u062a \u0627\u0644\u0628\u0635\u0631\u064a\u0629 \u062b\u0644\u0627\u062b\u064a\u0629 \u0627\u0644\u0623\u0628\u0639\u0627\u062f.\", icons: [\"\ud83d\udce6 3D Packaging\", \"\ud83c\udff7\ufe0f Die-cuts\"] }\r\n    ],\r\n    uiux: [\r\n      { badge: \"UI ICONS\", title: \"\u062d\u0632\u0645\u0629 \u0623\u064a\u0642\u0648\u0646\u0627\u062a \u0627\u0644\u0648\u0627\u062c\u0647\u0627\u062a\", desc: \"\u0623\u064a\u0642\u0648\u0646\u0627\u062a \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0645\u062e\u0635\u0635\u0629 \u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u062c\u0648\u0627\u0644 \u0648\u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629.\", icons: [\"\ud83d\udcf1 200+ Vector Icons\", \"\u26a1 UI Kit\"] },\r\n      { badge: \"MOBILE APP UI\", title: \"\u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0645\u062d\u0627\u0641\u0638 \u0627\u0644\u0631\u0642\u0645\u064a\u0629\", desc: \"\u0646\u0645\u0627\u0630\u062c \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0645\u0639 \u0646\u0645\u0637 \u0645\u0638\u0644\u0645 \u0641\u0627\u062e\u0631 \u0648\u062f\u0639\u0645 \u0627\u0644\u0625\u064a\u0645\u0627\u0621\u0627\u062a.\", icons: [\"\ud83d\udcf2 Dark Mode UI\", \"\ud83d\udcca Chart Views\"] },\r\n      { badge: \"DASHBOARD\", title: \"\u0644\u0648\u062d\u0629 \u062a\u062d\u0643\u0645 \u062a\u0641\u0627\u0639\u0644\u064a\u0629\", desc: \"\u0648\u0627\u062c\u0647\u0627\u062a \u0645\u0633\u062a\u062e\u062f\u0645 \u0645\u062e\u0635\u0635\u0629 \u0644\u0625\u062f\u0627\u0631\u0629 \u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0633\u062d\u0627\u0628 \u0648\u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0636\u062e\u0645\u0629.\", icons: [\"\ud83d\udda5\ufe0f Web App UI\", \"\ud83d\udcc9 Live Widgets\"] },\r\n      { badge: \"PROTOTYPING\", title: \"\u0646\u0645\u0630\u062c\u0629 \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 UX\", desc: \"\u062e\u0631\u0627\u0626\u0637 \u0631\u062d\u0644\u0629 \u0627\u0644\u0645\u0633\u062a\u0641\u064a\u062f \u0648\u0627\u0644\u062a\u0633\u0644\u0633\u0644\u0627\u062a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0623\u062f\u0627\u0621.\", icons: [\"\ud83d\udd17 Prototypes\", \"\ud83e\udde9 Components\"] }\r\n    ],\r\n    dev: [\r\n      { badge: \"BACKEND ENGINE\", title: \"\u0645\u062d\u0631\u0643\u0627\u062a \u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a\", desc: \"\u062e\u0648\u0627\u0631\u0632\u0645\u064a\u0627\u062a \u0645\u0639\u0627\u0644\u062c\u0629 \u0641\u0648\u0631\u064a\u0629 \u0648\u062a\u0648\u0641\u064a\u0631 \u0628\u064a\u0626\u0629 \u0631\u0628\u0637 \u0645\u062e\u0635\u0635\u0629 \u0628\u0631\u0645\u062c\u064a\u064b\u0627.\", icons: [\"\u2699\ufe0f REST API\", \"\ud83d\udee1\ufe0f High Security\"] },\r\n      { badge: \"FRONTEND DEV\", title: \"\u0645\u0643\u0648\u0646\u0627\u062a \u0648\u064a\u0628 \u062a\u0641\u0627\u0639\u0644\u064a\u0629\", desc: \"\u0628\u0646\u0627\u0621 \u0648\u0627\u062c\u0647\u0627\u062a \u0628\u0631\u0645\u062c\u064a\u0629 \u062e\u0641\u064a\u0641\u0629 \u0648\u0633\u0631\u064a\u0639\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u062d\u062f\u062b \u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0648\u064a\u0628.\", icons: [\"\u26a1 Web Components\", \"\ud83d\ude80 Fast Render\"] },\r\n      { badge: \"SOFTWARE API\", title: \"\u0631\u0628\u0637 \u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0633\u062d\u0627\u0628\u064a\u0629\", desc: \"\u0628\u0631\u0645\u062c\u0629 \u0628\u0631\u0648\u062a\u0648\u0643\u0648\u0644\u0627\u062a \u0627\u0644\u0631\u0628\u0637 \u0627\u0644\u0622\u0645\u0646 \u0648\u0627\u0644\u062a\u0643\u0627\u0645\u0644 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a \u0645\u0639 \u0627\u0644\u0645\u0646\u0635\u0627\u062a.\", icons: [\"\u2601\ufe0f Cloud Services\", \"\ud83d\udce1 Webhooks\"] },\r\n      { badge: \"AUTOMATION\", title: \"\u0623\u062a\u0645\u062a\u0629 \u0627\u0644\u0646\u0638\u0627\u0645 \u0648\u0627\u0644\u0645\u0647\u0627\u0645\", desc: \"\u062d\u0644\u0648\u0644 \u0628\u0631\u0645\u062c\u064a\u0629 \u0630\u0643\u064a\u0629 \u0644\u062a\u0633\u0631\u064a\u0639 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u062e\u0627\u0632\u0646 \u0648\u062d\u0633\u0627\u0628\u0627\u062a \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a.\", icons: [\"\ud83e\udd16 Automation\", \"\ud83d\udcca Real-time Sync\"] }\r\n    ]\r\n  };\r\n\r\n  function changeCategory(catKey, btnElem) {\r\n    \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0623\u0632\u0631\u0627\u0631\r\n    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));\r\n    btnElem.classList.add('active');\r\n\r\n    const items = categoryData[catKey];\r\n\r\n    \/\/ \u062a\u062d\u062f\u064a\u062b \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u0641\u0648\u0631\u0627\u064b \u0648\u0628\u0633\u0644\u0627\u0633\u0629\r\n    for (let i = 0; i < 4; i++) {\r\n      const data = items[i];\r\n      const cardOverlay = document.getElementById(`overlay-${i+1}`);\r\n      const cardBadge = document.getElementById(`badge-${i+1}`);\r\n      const cardTitle = document.getElementById(`title-${i+1}`);\r\n      const cardDesc = document.getElementById(`desc-${i+1}`);\r\n\r\n      cardBadge.innerText = data.badge;\r\n      cardTitle.innerText = data.title;\r\n      cardDesc.innerText = data.desc;\r\n\r\n      \/\/ \u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0628\u0635\u0631\u064a\u0629 (\u0623\u064a\u0642\u0648\u0646\u0627\u062a + \u0641\u064a\u0643\u062a\u0648\u0631\u0627\u062a)\r\n      cardOverlay.innerHTML = `\r\n        <div class=\"icon-box\">\r\n          ${data.icons.map(ic => `<span class=\"vector-tag\">${ic}<\/span>`).join('')}\r\n        <\/div>\r\n      `;\r\n    }\r\n  }\r\n\r\n  \/\/ \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0623\u0648\u0644 \u0641\u0648\u0631\u064a\u0627\u064b \u0639\u0646\u062f \u0641\u062a\u062d \u0627\u0644\u0635\u0641\u062d\u0629\r\n  document.addEventListener(\"DOMContentLoaded\", function () {\r\n    changeCategory('all', document.querySelector('.tab-btn.active'));\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2051890 elementor-widget elementor-widget-html\" data-id=\"2051890\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u0642\u0633\u0645 \u0622\u0644\u064a\u0629 \u0627\u0644\u0639\u0645\u0644 \u0648\u0627\u0644\u0645\u0631\u0627\u062d\u0644 - How We Work -->\r\n<section class=\"process-section-custom\" id=\"processSection\">\r\n  <div class=\"process-container\">\r\n    \r\n    <!-- \u0631\u0623\u0633 \u0627\u0644\u0642\u0633\u0645 -->\r\n    <div class=\"section-header center\">\r\n      <div class=\"section-badge\">\r\n        <span class=\"badge-dot\"><\/span>\r\n        <span>\u0622\u0644\u064a\u0629 \u0627\u0644\u0639\u0645\u0644<\/span>\r\n      <\/div>\r\n      <h2 class=\"section-title\">\r\n        \u0643\u064a\u0641 \u0646\u062d\u0648\u0644 \u0627\u0644\u0641\u0643\u0631\u0629 \u0625\u0644\u0649 <span class=\"highlight\">\u0648\u0627\u0642\u0639 \u0645\u0644\u0645\u0648\u0633<\/span>\u061f\r\n      <\/h2>\r\n      <p class=\"section-subtitle\">\r\n        \u0645\u0646\u0647\u062c\u064a\u0629 \u0639\u0645\u0644 \u0645\u062f\u0631\u0648\u0633\u0629 \u062a\u0636\u0645\u0646 \u0627\u0644\u0648\u0636\u0648\u062d\u060c \u0627\u0644\u0633\u0631\u0639\u0629\u060c \u0648\u0623\u0639\u0644\u0649 \u062c\u0648\u062f\u0629 \u0641\u064a \u0627\u0644\u062a\u0633\u0644\u064a\u0645.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- \u0634\u0628\u0643\u0629 \u062e\u0637\u0648\u0627\u062a \u0627\u0644\u0639\u0645\u0644 -->\r\n    <div class=\"process-grid\">\r\n      \r\n      <!-- \u0627\u0644\u062e\u0637\u0648\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 -->\r\n      <div class=\"process-card\">\r\n        <div class=\"step-number\">01<\/div>\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"process-content\">\r\n          <span class=\"process-tag\">\u0627\u0644\u0645\u0631\u062d\u0644\u0629 \u0627\u0644\u0623\u0648\u0644\u0649<\/span>\r\n          <h3 class=\"process-title\">\u0627\u0644\u0627\u0643\u062a\u0634\u0627\u0641 \u0648\u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629<\/h3>\r\n          <p class=\"process-desc\">\r\n            \u0646\u062f\u0631\u0633 \u0641\u0643\u0631\u062a\u0643\u060c \u0646\u062d\u062f\u062f \u0627\u0644\u062c\u0645\u0647\u0648\u0631 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641\u060c \u0648\u0646\u062d\u0644\u0644 \u0627\u0644\u0645\u0646\u0627\u0641\u0633\u064a\u0646 \u0644\u0628\u0646\u0627\u0621 \u062e\u0637\u0629 \u0639\u0645\u0644 \u0648\u0627\u0636\u062d\u0629 \u062a\u0636\u0645\u0646 \u062a\u062d\u0642\u064a\u0642 \u0623\u0647\u062f\u0627\u0641\u0643.\r\n          <\/p>\r\n        <\/div>\r\n        <div class=\"step-status\">\r\n          <span class=\"status-dot\"><\/span>\r\n          <span>RESEARCH & PLAN<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u062e\u0637\u0648\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629 -->\r\n      <div class=\"process-card\">\r\n        <div class=\"step-number\">02<\/div>\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"process-content\">\r\n          <span class=\"process-tag\">\u0627\u0644\u0645\u0631\u062d\u0644\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629<\/span>\r\n          <h3 class=\"process-title\">\u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631<\/h3>\r\n          <p class=\"process-desc\">\r\n            \u0646\u0635\u0646\u0639 \u0648\u0627\u062c\u0647\u0627\u062a \u0628\u0635\u0631\u064a\u0629 \u0648\u062a\u062c\u0627\u0631\u0628 \u0645\u0633\u062a\u062e\u062f\u0645 \u0641\u0631\u064a\u062f\u0629 \u062a\u0639\u0643\u0633 \u0647\u0648\u064a\u0629 \u0639\u0644\u0627\u0645\u0627\u062a\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0648\u062a\u0644\u0641\u062a \u0627\u0644\u0627\u0646\u062a\u0628\u0627\u0647 \u0645\u0646 \u0627\u0644\u0644\u062d\u0638\u0629 \u0627\u0644\u0623\u0648\u0644\u0649.\r\n          <\/p>\r\n        <\/div>\r\n        <div class=\"step-status\">\r\n          <span class=\"status-dot\"><\/span>\r\n          <span>UI\/UX & DESIGN<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u062e\u0637\u0648\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629 -->\r\n      <div class=\"process-card\">\r\n        <div class=\"step-number\">03<\/div>\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"process-content\">\r\n          <span class=\"process-tag\">\u0627\u0644\u0645\u0631\u062d\u0644\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629<\/span>\r\n          <h3 class=\"process-title\">\u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0648\u0627\u0644\u0628\u0631\u0645\u062c\u0629<\/h3>\r\n          <p class=\"process-desc\">\r\n            \u0646\u062d\u0648\u0644 \u0627\u0644\u062a\u0635\u0627\u0645\u064a\u0645 \u0625\u0644\u0649 \u0623\u0643\u0648\u0627\u062f \u0628\u0631\u0645\u062c\u064a\u0629 \u062d\u062f\u064a\u062b\u0629 \u0648\u0633\u0631\u064a\u0639\u0629 \u0648\u0645\u062a\u062c\u0627\u0648\u0628\u0629 \u062a\u0645\u0627\u0645\u0627\u064b \u0645\u0639 \u0645\u062e\u062a\u0644\u0641 \u0627\u0644\u0623\u062c\u0647\u0632\u0629 \u0648\u0627\u0644\u0634\u0627\u0634\u0627\u062a.\r\n          <\/p>\r\n        <\/div>\r\n        <div class=\"step-status\">\r\n          <span class=\"status-dot\"><\/span>\r\n          <span>CODE & BUILD<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u062e\u0637\u0648\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629 -->\r\n      <div class=\"process-card highlight-card\">\r\n        <div class=\"step-number\">04<\/div>\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"process-content\">\r\n          <span class=\"process-tag\">\u0627\u0644\u0645\u0631\u062d\u0644\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629<\/span>\r\n          <h3 class=\"process-title\">\u0627\u0644\u0625\u0646\u0637\u0644\u0627\u0642 \u0648\u0627\u0644\u0645\u062a\u0627\u0628\u0639\u0629<\/h3>\r\n          <p class=\"process-desc\">\r\n            \u0646\u0637\u0644\u0642 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0628\u0623\u0639\u0644\u0649 \u062c\u0627\u0647\u0632\u064a\u0629\u060c \u0645\u0639 \u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0623\u062f\u0627\u0621 \u0627\u0644\u0634\u0627\u0645\u0644 \u0648\u0646\u0638\u0627\u0645 \u062f\u0639\u0645 \u0645\u0633\u062a\u0645\u0631 \u0644\u0636\u0645\u0627\u0646 \u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629 \u0627\u0644\u0646\u062c\u0627\u062d.\r\n          <\/p>\r\n        <\/div>\r\n        <div class=\"step-status ready\">\r\n          <span class=\"status-dot\"><\/span>\r\n          <span>LAUNCH & GROW<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;700;900&display=swap');\r\n\r\n  \/* \u0636\u0648\u0627\u0628\u0637 \u0627\u0644\u0647\u0648\u0627\u0645\u0634 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0639\u062f\u0645 \u062d\u062f\u0648\u062b \u062a\u0639\u0627\u0631\u0636 *\/\r\n  .process-section-custom,\r\n  .process-section-custom * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  \/* \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u0631\u0626\u064a\u0633\u064a \u0645\u0639 \u0636\u0628\u0637 \u0627\u0644\u0647\u0648\u0627\u0645\u0634 \u0627\u0644\u062f\u0627\u062e\u0644\u064a\u0629 \u0648\u0627\u0644\u0623\u0641\u0642\u064a\u0629 \u0627\u0644\u0645\u062a\u0646\u0627\u0633\u0642\u0629 *\/\r\n  .process-section-custom {\r\n    background-color: #0b090d;\r\n    color: #ffffff;\r\n    font-family: 'Cairo', sans-serif;\r\n    direction: rtl;\r\n    width: 100% !important;\r\n    max-width: 100% !important;\r\n    \r\n    \/* \u0647\u0648\u0627\u0645\u0634 \u0645\u0646\u0638\u0645\u0629 \u0628\u062f\u0648\u0646 \u0633\u062d\u0628 \u0633\u0644\u0628\u064a \u062d\u0627\u062f \u062d\u062a\u0651\u0649 \u0644\u0627 \u064a\u062a\u062f\u062e\u0644 \u0645\u0639 \u0628\u0627\u0642\u064a \u0623\u062c\u0632\u0627\u0621 \u0627\u0644\u0635\u0641\u062d\u0629 *\/\r\n    margin: 0 !important;\r\n    padding-top: 80px !important;\r\n    padding-bottom: 80px !important;\r\n    padding-left: 5% !important;\r\n    padding-right: 5% !important;\r\n\r\n    position: relative !important;\r\n    overflow: hidden;\r\n    z-index: 1;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n  }\r\n\r\n  .process-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    width: 100%;\r\n  }\r\n\r\n  \/* \u0631\u0623\u0633 \u0627\u0644\u0642\u0633\u0645 *\/\r\n  .section-header.center {\r\n    text-align: center;\r\n    max-width: 650px;\r\n    margin: 0 auto 50px auto;\r\n  }\r\n\r\n  .section-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-size: 13px;\r\n    color: #a09a9e;\r\n    margin-bottom: 12px;\r\n    background: rgba(255, 255, 255, 0.03);\r\n    padding: 6px 16px;\r\n    border-radius: 20px;\r\n    border: 1px solid rgba(255, 255, 255, 0.08);\r\n  }\r\n\r\n  .badge-dot {\r\n    width: 7px;\r\n    height: 7px;\r\n    background-color: #e63956;\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 8px #e63956;\r\n  }\r\n\r\n  .section-title {\r\n    font-size: 40px;\r\n    font-weight: 900;\r\n    line-height: 1.25;\r\n    margin: 0 0 15px 0;\r\n    color: #ffffff;\r\n  }\r\n\r\n  .section-title .highlight {\r\n    color: #e63956;\r\n  }\r\n\r\n  .section-subtitle {\r\n    font-size: 16px;\r\n    color: #a09a9e;\r\n    line-height: 1.6;\r\n    margin: 0;\r\n  }\r\n\r\n  \/* \u0634\u0628\u0643\u0629 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a *\/\r\n  .process-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 20px;\r\n  }\r\n\r\n  .process-card {\r\n    position: relative;\r\n    background: linear-gradient(150deg, #160e14 0%, #0f090e 100%);\r\n    border: 1px solid rgba(255, 255, 255, 0.07);\r\n    border-radius: 24px;\r\n    padding: 28px 20px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n    overflow: hidden;\r\n    min-height: 300px;\r\n  }\r\n\r\n  .process-card:hover {\r\n    transform: translateY(-6px);\r\n    border-color: rgba(230, 57, 86, 0.5);\r\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(230, 57, 86, 0.15);\r\n  }\r\n\r\n  \/* \u062a\u0645\u064a\u064a\u0632 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0623\u062e\u064a\u0631\u0629 *\/\r\n  .process-card.highlight-card {\r\n    background: linear-gradient(150deg, #22101b 0%, #120910 100%);\r\n    border-color: rgba(230, 57, 86, 0.25);\r\n  }\r\n\r\n  .card-glow {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: radial-gradient(circle at 50% 0%, rgba(230, 57, 86, 0.2), transparent 75%);\r\n    opacity: 0;\r\n    transition: opacity 0.4s ease;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .process-card:hover .card-glow {\r\n    opacity: 1;\r\n  }\r\n\r\n  .step-number {\r\n    font-size: 44px;\r\n    font-weight: 900;\r\n    color: rgba(255, 255, 255, 0.08);\r\n    line-height: 1;\r\n    margin-bottom: 16px;\r\n    transition: all 0.4s ease;\r\n    letter-spacing: -2px;\r\n  }\r\n\r\n  .process-card:hover .step-number {\r\n    color: #e63956;\r\n    text-shadow: 0 0 20px rgba(230, 57, 86, 0.5);\r\n    transform: scale(1.05);\r\n  }\r\n\r\n  .process-tag {\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    color: #e63956;\r\n    letter-spacing: 1px;\r\n    display: block;\r\n    margin-bottom: 8px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .process-title {\r\n    font-size: 19px;\r\n    font-weight: 800;\r\n    color: #ffffff;\r\n    margin: 0 0 10px 0;\r\n    line-height: 1.3;\r\n  }\r\n\r\n  .process-desc {\r\n    font-size: 13px;\r\n    color: #a09a9e;\r\n    line-height: 1.6;\r\n    margin: 0;\r\n  }\r\n\r\n  .step-status {\r\n    margin-top: 20px;\r\n    padding-top: 12px;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.06);\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    color: #836d7a;\r\n    letter-spacing: 1px;\r\n  }\r\n\r\n  .status-dot {\r\n    width: 6px;\r\n    height: 6px;\r\n    background-color: #836d7a;\r\n    border-radius: 50%;\r\n    transition: background-color 0.3s ease, box-shadow 0.3s ease;\r\n  }\r\n\r\n  .process-card:hover .status-dot,\r\n  .step-status.ready .status-dot {\r\n    background-color: #e63956;\r\n    box-shadow: 0 0 8px #e63956;\r\n  }\r\n\r\n  .step-status.ready {\r\n    color: #e63956;\r\n  }\r\n\r\n  \/* \u0627\u0644\u0631\u064a\u0633\u0628\u0648\u0646\u0633\u064a\u0641 \u0648\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0623\u062c\u0647\u0632\u0629 \u0627\u0644\u0645\u062d\u0645\u0648\u0644\u0629 *\/\r\n  @media (max-width: 1024px) {\r\n    .process-grid {\r\n      grid-template-columns: repeat(2, 1fr);\r\n    }\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .process-section-custom {\r\n      padding-top: 50px !important;\r\n      padding-bottom: 50px !important;\r\n      padding-left: 20px !important;\r\n      padding-right: 20px !important;\r\n    }\r\n    .process-grid {\r\n      grid-template-columns: 1fr;\r\n    }\r\n    .section-title {\r\n      font-size: 30px;\r\n    }\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e9daca6 elementor-widget elementor-widget-html\" data-id=\"e9daca6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u0642\u0633\u0645 \u062e\u062f\u0645\u0627\u062a\u0646\u0627 - \u0645\u0645\u062a\u062f \u0639\u0644\u0649 \u0643\u0627\u0645\u0644 \u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0634\u0627\u0634\u0629 -->\n<section class=\"services-custom-section\" id=\"servicesCustom\">\n  <div class=\"services-container\">\n    \n    <!-- \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0642\u0633\u0645 -->\n    <div class=\"services-header\">\n      <span class=\"services-subtitle-top\">\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/span>\n      <h2 class=\"services-title\">\u0645\u0627 \u0646\u0642\u062f\u0645\u0647 \u0644\u0643<\/h2>\n    <\/div>\n\n    <!-- \u0634\u0628\u0643\u0629 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u0627\u0644\u0623\u0631\u0628\u0639 -->\n    <div class=\"services-grid\">\n      \n      <!-- \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0623\u0648\u0644\u0649: \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 -->\n      <div class=\"service-card red-theme\">\n        <div class=\"card-top-icon\">\u00d7<\/div>\n        <div class=\"service-icon\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg>\n        <\/div>\n        <div class=\"service-content\">\n          <h3 class=\"service-name\">\u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649<\/h3>\n          <span class=\"service-subname\">Content Creation<\/span>\n          <p class=\"service-desc\">\u0645\u062d\u062a\u0648\u0649 \u0625\u0628\u062f\u0627\u0639\u064a \u0648\u062c\u0630\u0627\u0628 \u064a\u0639\u0643\u0633 \u0647\u0648\u064a\u062a\u0643 \u0648\u064a\u0635\u0644 \u0644\u062c\u0645\u0647\u0648\u0631\u0643.<\/p>\n        <\/div>\n        <div class=\"card-arrow\">\n          <span>\u2190<\/span>\n        <\/div>\n      <\/div>\n\n      <!-- \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629: \u0625\u062f\u0627\u0631\u0629 \u062d\u0633\u0627\u0628\u0627\u062a \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627 -->\n      <div class=\"service-card blue-theme\">\n        <div class=\"service-icon\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><circle cx=\"18\" cy=\"5\" r=\"3\"\/><circle cx=\"6\" cy=\"12\" r=\"3\"\/><circle cx=\"18\" cy=\"19\" r=\"3\"\/><line x1=\"8.59\" y1=\"13.51\" x2=\"15.42\" y2=\"17.49\"\/><line x1=\"15.41\" y1=\"6.51\" x2=\"8.59\" y2=\"10.49\"\/><\/svg>\n        <\/div>\n        <div class=\"service-content\">\n          <h3 class=\"service-name\">\u0625\u062f\u0627\u0631\u0629 \u062d\u0633\u0627\u0628\u0627\u062a \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627<\/h3>\n          <span class=\"service-subname\">Social Media Management<\/span>\n          <p class=\"service-desc\">\u0625\u062f\u0627\u0631\u0629 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0644\u062d\u0633\u0627\u0628\u0627\u062a\u0643 \u0648\u0628\u0646\u0627\u0621 \u0645\u062c\u062a\u0645\u0639 \u0645\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0639\u0644\u0627\u0645\u062a\u0643.<\/p>\n        <\/div>\n        <div class=\"card-arrow\">\n          <span>\u2190<\/span>\n        <\/div>\n      <\/div>\n\n      <!-- \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629: \u0627\u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u062f\u0641\u0648\u0639\u0629 -->\n      <div class=\"service-card green-theme\">\n        <div class=\"service-icon\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"\/><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"\/><\/svg>\n        <\/div>\n        <div class=\"service-content\">\n          <h3 class=\"service-name\">\u0627\u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u062f\u0641\u0648\u0639\u0629<\/h3>\n          <span class=\"service-subname\">Paid Advertising<\/span>\n          <p class=\"service-desc\">\u062d\u0645\u0644\u0627\u062a \u0625\u0639\u0644\u0627\u0646\u064a\u0629 \u0645\u0633\u062a\u0647\u062f\u0641\u0629 \u062a\u0632\u064a\u062f \u0645\u0646 \u0648\u0635\u0648\u0644\u0643 \u0648\u0645\u0628\u064a\u0639\u0627\u062a\u0643.<\/p>\n        <\/div>\n        <div class=\"card-arrow\">\n          <span>\u2190<\/span>\n        <\/div>\n      <\/div>\n\n      <!-- \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629: \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a \u0627\u0644\u062a\u0633\u0648\u064a\u0642\u064a\u0629 -->\n      <div class=\"service-card gold-theme\">\n        <div class=\"service-icon\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"12\" cy=\"12\" r=\"6\"\/><circle cx=\"12\" cy=\"12\" r=\"2\"\/><\/svg>\n        <\/div>\n        <div class=\"service-content\">\n          <h3 class=\"service-name\">\u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a \u0627\u0644\u062a\u0633\u0648\u064a\u0642\u064a\u0629<\/h3>\n          <span class=\"service-subname\">Marketing Strategy<\/span>\n          <p class=\"service-desc\">\u062e\u0637\u0637 \u062a\u0633\u0648\u064a\u0642\u064a\u0629 \u0645\u062e\u0635\u0635\u0629 \u0644\u062a\u062d\u0642\u064a\u0642 \u0623\u0647\u062f\u0627\u0641\u0643 \u0648\u0646\u0645\u0648 \u0623\u0639\u0645\u0627\u0644\u0643.<\/p>\n        <\/div>\n        <div class=\"card-arrow\">\n          <span>\u2190<\/span>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700;900&display=swap');\n\n  .services-custom-section {\n    background-color: #0b090d;\n    color: #ffffff;\n    font-family: 'Cairo', sans-serif;\n    direction: rtl;\n    padding: 80px 0; \/* \u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u062d\u0634\u0648 \u0627\u0644\u062c\u0627\u0646\u0628\u064a \u0644\u0644\u0642\u0633\u0645 \u0646\u0641\u0633\u0647 \u0644\u062a\u063a\u0637\u064a\u0629 \u0627\u0644\u0634\u0627\u0634\u0629 \u0639\u0631\u0636\u064a\u0627\u064b *\/\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .services-container {\n    width: 100%;\n    max-width: 100% !important; \/* \u0641\u0631\u0636 \u0627\u0644\u062a\u0645\u062f\u062f \u0627\u0644\u0643\u0627\u0645\u0644 *\/\n    padding: 0 30px; \/* \u0647\u0648\u0627\u0645\u0634 \u062e\u0641\u064a\u0641\u0629 \u064a\u0633\u0627\u0631 \u0648\u064a\u0645\u064a\u0646 \u0644\u0643\u064a \u0644\u0627 \u062a\u0644\u062a\u0635\u0642 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u0628\u062d\u0648\u0627\u0641 \u0627\u0644\u0634\u0627\u0634\u0629 \u062a\u0645\u0627\u0645\u0627\u064b *\/\n    box-sizing: border-box;\n    margin: 0 auto;\n  }\n\n  .services-header {\n    text-align: center;\n    margin-bottom: 50px;\n  }\n\n  .services-subtitle-top {\n    font-size: 14px;\n    color: #a09a9e;\n    display: block;\n    margin-bottom: 8px;\n    letter-spacing: 1px;\n  }\n\n  .services-title {\n    font-size: 38px;\n    font-weight: 900;\n    color: #ffffff;\n    margin: 0;\n  }\n\n  \/* Grid Layout *\/\n  .services-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 20px;\n    width: 100%;\n  }\n\n  .service-card {\n    position: relative;\n    background: linear-gradient(150deg, #141014 0%, #0d0a0d 100%);\n    border: 1px solid rgba(255, 255, 255, 0.06);\n    border-radius: 20px;\n    padding: 35px 24px 30px 24px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    box-sizing: border-box;\n    transition: all 0.3s ease;\n  }\n\n  .card-top-icon {\n    position: absolute;\n    top: 15px;\n    left: 15px;\n    color: #e63956;\n    font-size: 16px;\n    font-weight: 900;\n  }\n\n  .service-icon {\n    width: 60px;\n    height: 60px;\n    border-radius: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 24px;\n    transition: transform 0.3s ease;\n  }\n\n  .service-name {\n    font-size: 18px;\n    font-weight: 800;\n    color: #ffffff;\n    margin: 0 0 6px 0;\n  }\n\n  .service-subname {\n    font-size: 12px;\n    color: #836d7a;\n    display: block;\n    margin-bottom: 18px;\n    font-weight: 600;\n  }\n\n  .service-desc {\n    font-size: 13px;\n    color: #a09a9e;\n    line-height: 1.6;\n    margin: 0 0 30px 0;\n  }\n\n  .card-arrow {\n    width: 32px;\n    height: 32px;\n    background: rgba(255, 255, 255, 0.04);\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #ffffff;\n    font-size: 14px;\n    margin-top: auto;\n    transition: all 0.3s ease;\n  }\n\n  \/* \u0623\u0644\u0648\u0627\u0646 \u0648\u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0627\u0644\u0647\u0648\u0641\u0631 \u0644\u0643\u0644 \u0628\u0637\u0627\u0642\u0629 *\/\n  .service-card.red-theme .service-icon { color: #e63956; background: rgba(230, 57, 86, 0.1); }\n  .service-card.blue-theme .service-icon { color: #3b82f6; background: rgba(59, 130, 246, 0.1); }\n  .service-card.green-theme .service-icon { color: #10b981; background: rgba(16, 185, 129, 0.1); }\n  .service-card.gold-theme .service-icon { color: #f59e0b; background: rgba(245, 158, 11, 0.1); }\n\n  .service-card.red-theme:hover { border-color: rgba(230, 57, 86, 0.5); box-shadow: 0 10px 30px rgba(230, 57, 86, 0.15); }\n  .service-card.blue-theme:hover { border-color: rgba(59, 130, 246, 0.5); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15); }\n  .service-card.green-theme:hover { border-color: rgba(16, 185, 129, 0.5); box-shadow: 0 10px 30px rgba(16, 185, 129, 0.15); }\n  .service-card.gold-theme:hover { border-color: rgba(245, 158, 11, 0.5); box-shadow: 0 10px 30px rgba(245, 158, 11, 0.15); }\n\n  .service-card:hover .card-arrow {\n    background: #ffffff;\n    color: #0b090d;\n    transform: scale(1.1);\n  }\n\n  .service-card:hover .service-icon {\n    transform: translateY(-4px);\n  }\n\n  \/* Responsive *\/\n  @media (max-width: 991px) {\n    .services-grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  @media (max-width: 576px) {\n    .services-grid {\n      grid-template-columns: 1fr;\n    }\n    .services-container {\n      padding: 0 15px;\n    }\n  }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd277e7 elementor-widget elementor-widget-html\" data-id=\"fd277e7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u0642\u0633\u0645 \u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u0634\u0627\u0626\u0639\u0629 \u0627\u0644\u0645\u0637\u0648\u0631 \u0648\u0627\u0644\u0645\u062d\u0645\u064a -->\r\n<section class=\"faq-section-custom\" id=\"faqSection\">\r\n  <div class=\"faq-container\">\r\n    \r\n    <div class=\"section-header\">\r\n      <div class=\"section-badge\">\r\n        <span class=\"badge-dot\"><\/span>\r\n        <span>\u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u0634\u0627\u0626\u0639\u0629<\/span>\r\n      <\/div>\r\n      <h2 class=\"section-title\">\r\n        \u0643\u0644 \u0645\u0627 \u062a\u062d\u062a\u0627\u062c \u0645\u0639\u0631\u0641\u062a\u0647 <span class=\"highlight\">\u0642\u0628\u0644 \u0627\u0644\u0628\u062f\u0627\u064a\u0629<\/span>\r\n      <\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"faq-accordion\">\r\n      \r\n      <div class=\"faq-item active\">\r\n        <button type=\"button\" class=\"faq-question\">\r\n          <span>\u0645\u0627 \u0647\u064a \u0645\u062f\u0629 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0627\u0644\u062a\u0642\u0646\u064a \u0623\u0648 \u0627\u0644\u0647\u0648\u064a\u0629\u061f<\/span>\r\n          <span class=\"faq-toggle-icon\">\u2212<\/span>\r\n        <\/button>\r\n        <div class=\"faq-answer\">\r\n          <p>\u062a\u062e\u062a\u0644\u0641 \u0627\u0644\u0645\u062f\u0629 \u0628\u062d\u0633\u0628 \u062d\u062c\u0645 \u0648\u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0645\u0634\u0631\u0648\u0639. \u0641\u064a \u0627\u0644\u0639\u0627\u062f\u0629\u060c \u062a\u062a\u0631\u0627\u0648\u062d \u0645\u062f\u0629 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0628\u0635\u0631\u064a\u0629 \u0628\u064a\u0646 7 \u0625\u0644\u0649 14 \u064a\u0648\u0645 \u0639\u0645\u0644.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"faq-item\">\r\n        <button type=\"button\" class=\"faq-question\">\r\n          <span>\u0643\u064a\u0641 \u064a\u062a\u0645 \u0645\u062a\u0627\u0628\u0639\u0629 \u0645\u0631\u0627\u062d\u0644 \u0627\u0644\u0639\u0645\u0644 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0623\u0643\u0648\u0627\u062f\u061f<\/span>\r\n          <span class=\"faq-toggle-icon\">+<\/span>\r\n        <\/button>\r\n        <div class=\"faq-answer\">\r\n          <p>\u0646\u0648\u0641\u0631 \u0644\u0643 \u0631\u0627\u0628\u0637 \u0645\u062a\u0627\u0628\u0639\u0629 \u062d\u064a\u0629 \u0644\u0645\u0631\u0627\u062d\u0644 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0645\u0639 \u062a\u0642\u0627\u0631\u064a\u0631 \u0648\u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u0645\u062d\u062f\u062b\u0629 \u062f\u0648\u0631\u064a\u0627\u064b.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"faq-item\">\r\n        <button type=\"button\" class=\"faq-question\">\r\n          <span>\u0647\u0644 \u062a\u0648\u0641\u0631\u0648\u0646 \u0627\u0644\u062f\u0639\u0645 \u0627\u0644\u0641\u0646\u064a \u0628\u0639\u062f \u0627\u0644\u062a\u0633\u0644\u064a\u0645\u061f<\/span>\r\n          <span class=\"faq-toggle-icon\">+<\/span>\r\n        <\/button>\r\n        <div class=\"faq-answer\">\r\n          <p>\u0646\u0639\u0645\u060c \u0646\u0645\u0646\u062d \u062c\u0645\u064a\u0639 \u0645\u0634\u0627\u0631\u064a\u0639\u0646\u0627 \u0641\u062a\u0631\u0629 \u0636\u0645\u0627\u0646 \u0648\u062f\u0639\u0645 \u0641\u0646\u064a \u0645\u062c\u0627\u0646\u064a \u0644\u0645\u062f\u0629 30 \u064a\u0648\u0645\u0627\u064b \u0628\u0639\u062f \u0627\u0644\u0625\u0637\u0644\u0627\u0642.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;700;900&display=swap');\r\n\r\n  \/* \u0636\u0628\u0637 \u0639\u0627\u0645 \u0644\u0644\u062d\u0627\u0648\u064a\u0629 *\/\r\n  .faq-section-custom,\r\n  .faq-section-custom * {\r\n    box-sizing: border-box !important;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  \/* \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u0631\u0626\u064a\u0633\u064a - \u062a\u0645 \u0625\u0644\u063a\u0627\u0621 \u0627\u0644\u0647\u0648\u0627\u0645\u0634 \u0627\u0644\u0633\u0644\u0628\u064a\u0629 \u0648\u0627\u0644\u0642\u0633\u0631\u064a\u0629 *\/\r\n  .faq-section-custom {\r\n    background-color: #0b090d;\r\n    color: #ffffff;\r\n    font-family: 'Cairo', sans-serif;\r\n    direction: rtl;\r\n    width: 100% !important;\r\n    max-width: 100% !important;\r\n    position: relative !important;\r\n    \r\n    \/* \u0647\u0648\u0627\u0645\u0634 \u062f\u0627\u062e\u0644\u064a\u0629 \u0645\u062a\u0648\u0627\u0632\u0646\u0629 \u062a\u0645\u0646\u0639 \u0627\u0644\u062e\u0631\u0648\u062c \u0639\u0646 \u0627\u0644\u0634\u0627\u0634\u0629 *\/\r\n    padding: 60px 20px !important;\r\n    margin: 0 auto !important;\r\n    \r\n    overflow: hidden;\r\n    z-index: 10;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n  }\r\n\r\n  .faq-container { \r\n    max-width: 800px; \r\n    margin: 0 auto; \r\n    width: 100%;\r\n  }\r\n\r\n  .section-header { \r\n    text-align: center; \r\n    margin-bottom: 35px; \r\n  }\r\n  \r\n  .section-badge {\r\n    display: inline-flex; \r\n    align-items: center; \r\n    gap: 8px;\r\n    font-size: 13px; \r\n    color: #a09a9e; \r\n    background: rgba(255, 255, 255, 0.03);\r\n    padding: 6px 16px; \r\n    border-radius: 20px; \r\n    border: 1px solid rgba(255, 255, 255, 0.08);\r\n  }\r\n\r\n  .badge-dot { \r\n    width: 7px; \r\n    height: 7px; \r\n    background: #e63956; \r\n    border-radius: 50%; \r\n    box-shadow: 0 0 8px #e63956;\r\n  }\r\n\r\n  .section-title { \r\n    font-size: 38px; \r\n    font-weight: 900; \r\n    margin-top: 15px; \r\n    color: #ffffff;\r\n    line-height: 1.3;\r\n  }\r\n\r\n  .section-title .highlight { \r\n    color: #e63956; \r\n  }\r\n\r\n  .faq-accordion { \r\n    display: flex; \r\n    flex-direction: column; \r\n    gap: 16px; \r\n  }\r\n\r\n  .faq-item {\r\n    background: linear-gradient(150deg, #160e14 0%, #0f090e 100%);\r\n    border: 1px solid rgba(255, 255, 255, 0.08);\r\n    border-radius: 16px;\r\n    overflow: hidden;\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .faq-question {\r\n    width: 100%;\r\n    background: transparent;\r\n    border: none;\r\n    outline: none;\r\n    padding: 20px 24px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    color: #ffffff;\r\n    font-family: 'Cairo', sans-serif;\r\n    font-size: 17px;\r\n    font-weight: 700;\r\n    cursor: pointer;\r\n    text-align: right;\r\n    transition: color 0.3s ease;\r\n  }\r\n\r\n  .faq-toggle-icon {\r\n    font-size: 20px;\r\n    color: #e63956;\r\n    width: 32px; \r\n    height: 32px;\r\n    background: rgba(230, 57, 86, 0.1);\r\n    border-radius: 50%;\r\n    display: flex; \r\n    align-items: center; \r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .faq-answer {\r\n    display: none;\r\n    padding: 0 24px 20px 24px;\r\n    color: #a09a9e;\r\n    font-size: 15px;\r\n    line-height: 1.7;\r\n  }\r\n\r\n  .faq-item.active .faq-answer { \r\n    display: block; \r\n  }\r\n\r\n  .faq-item.active { \r\n    border-color: rgba(230, 57, 86, 0.5); \r\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(230, 57, 86, 0.1);\r\n  }\r\n\r\n  .faq-item.active .faq-question { \r\n    color: #e63956; \r\n  }\r\n\r\n  .faq-item.active .faq-toggle-icon {\r\n    background: #e63956;\r\n    color: #ffffff;\r\n  }\r\n\r\n  \/* \u0647\u0648\u0627\u0645\u0634 \u0648\u062a\u0646\u0633\u064a\u0642\u0627\u062a \u0627\u0644\u0647\u0648\u0627\u062a\u0641 \u0627\u0644\u0630\u0643\u064a\u0629 *\/\r\n  @media (max-width: 600px) {\r\n    .faq-section-custom {\r\n      padding: 40px 15px !important;\r\n    }\r\n    .section-title {\r\n      font-size: 28px;\r\n    }\r\n    .faq-question {\r\n      font-size: 15px;\r\n      padding: 16px 18px;\r\n    }\r\n    .faq-answer {\r\n      padding: 0 18px 18px 18px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  (function() {\r\n    function initFAQ() {\r\n      const section = document.getElementById(\"faqSection\");\r\n      if (!section) return;\r\n\r\n      const questions = section.querySelectorAll(\".faq-question\");\r\n      questions.forEach(btn => {\r\n        btn.onclick = function(e) {\r\n          e.preventDefault();\r\n          const item = this.parentElement;\r\n          const isActive = item.classList.contains(\"active\");\r\n          \r\n          section.querySelectorAll(\".faq-item\").forEach(el => {\r\n            el.classList.remove(\"active\");\r\n            const icon = el.querySelector(\".faq-toggle-icon\");\r\n            if (icon) icon.innerText = \"+\";\r\n          });\r\n\r\n          if (!isActive) {\r\n            item.classList.add(\"active\");\r\n            const icon = item.querySelector(\".faq-toggle-icon\");\r\n            if (icon) icon.innerText = \"\u2212\";\r\n          }\r\n        };\r\n      });\r\n    }\r\n\r\n    if (document.readyState === \"loading\") {\r\n      document.addEventListener(\"DOMContentLoaded\", initFAQ);\r\n    } else {\r\n      initFAQ();\r\n    }\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ae3731c elementor-widget elementor-widget-html\" data-id=\"ae3731c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u0642\u0633\u0645 \u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u0634\u0627\u0626\u0639\u0629 - \u0646\u0638\u0627\u0645 \u0627\u0644\u0641\u0642\u0627\u0639\u0627\u062a \u0627\u0644\u0639\u0627\u0626\u0645\u0629 -->\r\n<section class=\"floating-faq-section\">\r\n  <div class=\"bubbles-wrapper\">\r\n\r\n    <!-- \u0627\u0644\u0641\u0642\u0627\u0639\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 -->\r\n    <div class=\"faq-bubble\">\r\n      <div class=\"bubble-header\">\r\n        <div class=\"bubble-icon\">?<\/div>\r\n        <h3 class=\"bubble-title\">\u0647\u0644 \u062a\u0636\u0645\u0646\u0648\u0646 \u0644\u064a \u062a\u062d\u0642\u064a\u0642 \u0645\u0628\u064a\u0639\u0627\u062a \u0623\u0648 \u0623\u0631\u0642\u0627\u0645 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u0645\u0634\u0627\u0647\u062f\u0627\u062a\u061f<\/h3>\r\n        <div class=\"bubble-action\">+<\/div>\r\n      <\/div>\r\n      <div class=\"bubble-content\">\r\n        <p>\r\n          \u0646\u0636\u0645\u0646 \u0644\u0643 \u0628\u0646\u0627\u0621 \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u062a\u0633\u0648\u064a\u0642\u064a\u0629 \u0645\u062f\u0631\u0648\u0633\u0629 \u0648\u062a\u062d\u0633\u064a\u0646 \u0638\u0647\u0648\u0631 \u0639\u0644\u0627\u0645\u062a\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0628\u0634\u0643\u0644 \u0627\u062d\u062a\u0631\u0627\u0641\u064a \u0645\u0639 \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062a\u0641\u0627\u0639\u0644. \u0623\u0645\u0627 \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a \u0641\u0647\u064a \u0646\u062a\u064a\u062c\u0629 \u062a\u0643\u0627\u0645\u0644 \u062c\u0648\u062f\u0629 \u0627\u0644\u062e\u062f\u0645\u0629\/\u0627\u0644\u0645\u0646\u062a\u062c \u0648\u0633\u0639\u0631\u0647\u0627 \u0645\u0639 \u0627\u0644\u062d\u0645\u0644\u0627\u062a \u0627\u0644\u0625\u0639\u0644\u0627\u0646\u064a\u0629\u060c \u0648\u0646\u062d\u0646 \u0646\u0644\u062a\u0632\u0645 \u0628\u062a\u0642\u062f\u064a\u0645 \u062a\u0642\u0627\u0631\u064a\u0631 \u062f\u0648\u0631\u064a\u0629 \u0634\u0641\u0627\u0641\u0629 \u062a\u0639\u0643\u0633 \u062a\u0637\u0648\u0631 \u0627\u0644\u0623\u062f\u0627\u0621 \u0648\u0627\u0644\u0646\u062a\u0627\u0626\u062c \u062e\u0637\u0648\u0629 \u0628\u062e\u0637\u0648\u0629.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u0627\u0644\u0641\u0642\u0627\u0639\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629 -->\r\n    <div class=\"faq-bubble\">\r\n      <div class=\"bubble-header\">\r\n        <div class=\"bubble-icon\">?<\/div>\r\n        <h3 class=\"bubble-title\">\u0643\u064a\u0641 \u0633\u0623\u062a\u0627\u0628\u0639 \u0645\u0639\u0643\u0645 \u0633\u064a\u0631 \u0627\u0644\u0639\u0645\u0644 \u0648\u0627\u0644\u0645\u0646\u0634\u0648\u0631\u0627\u062a \u0642\u0628\u0644 \u0646\u0634\u0631\u0647\u0627\u061f<\/h3>\r\n        <div class=\"bubble-action\">+<\/div>\r\n      <\/div>\r\n      <div class=\"bubble-content\">\r\n        <p>\r\n          \u0646\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u062a\u0642\u0648\u064a\u0645 \u0645\u062d\u062a\u0648\u0649 \u0634\u0647\u0631\u064a \u0623\u0648 \u0623\u0633\u0628\u0648\u0639\u064a (Content Calendar) \u064a\u064f\u0634\u0627\u0631\u0643 \u0645\u0639\u0643 \u0645\u0633\u0628\u0642\u0627\u064b \u0644\u0645\u0631\u0627\u062c\u0639\u062a\u0647 \u0648\u0627\u0639\u062a\u0645\u0627\u062f\u0647\u060c \u0645\u0639 \u0625\u0631\u0633\u0627\u0644 \u062a\u0642\u0631\u064a\u0631 \u0623\u062f\u0627\u0621 \u062a\u062d\u0644\u064a\u0644\u064a \u0646\u0647\u0627\u064a\u0629 \u0643\u0644 \u0634\u0647\u0631.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u0627\u0644\u0641\u0642\u0627\u0639\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629 -->\r\n    <div class=\"faq-bubble\">\r\n      <div class=\"bubble-header\">\r\n        <div class=\"bubble-icon\">?<\/div>\r\n        <h3 class=\"bubble-title\">\u0647\u0644 \u064a\u062a\u0636\u0645\u0646 \u0627\u0644\u0639\u0631\u0636 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0646\u0634\u0648\u0631\u0627\u062a \u0648\u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u0646\u0635\u0648\u0635\u060c \u0623\u0645 \u064a\u062c\u0628 \u0623\u0646 \u0623\u0642\u062f\u0645\u0647\u0627 \u062c\u0627\u0647\u0632\u0629\u061f<\/h3>\r\n        <div class=\"bubble-action\">+<\/div>\r\n      <\/div>\r\n      <div class=\"bubble-content\">\r\n        <p>\r\n          \u0628\u0627\u0642\u0627\u062a\u0646\u0627 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0648\u062a\u0634\u0645\u0644 \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0628\u0627\u0644\u0643\u0627\u0645\u0644: \u0628\u062f\u0621\u0627\u064b \u0645\u0646 \u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u0646\u0635\u0648\u0635 \u0627\u0644\u0625\u0628\u062f\u0627\u0639\u064a\u0629 (Copywriting)\u060c \u0648\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0635\u0648\u0631 \u0648\u0627\u0644\u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a \u0628\u0645\u0627 \u064a\u062a\u0648\u0627\u0641\u0642 \u0645\u0639 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0628\u0635\u0631\u064a\u0629 \u0644\u0639\u0644\u0627\u0645\u062a\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629\u060c \u0648\u062d\u062a\u0649 \u062c\u062f\u0648\u0644\u0629 \u0627\u0644\u0646\u0634\u0631 \u0648\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062a\u0639\u0644\u064a\u0642\u0627\u062a \u0648\u0627\u0644\u0631\u0633\u0627\u0626\u0644.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;700;900&display=swap');\r\n\r\n  \/* \u062a\u0635\u0641\u064a\u0631 \u0648\u062d\u0645\u0627\u064a\u0629 \u062f\u0627\u062e\u0644\u064a\u0629 \u0644\u0645\u0646\u0639 \u0623\u064a \u062e\u0631\u0648\u062c \u0639\u0646 \u0627\u0644\u0634\u0627\u0634\u0629 *\/\r\n  .floating-faq-section,\r\n  .floating-faq-section * {\r\n    box-sizing: border-box !important;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .floating-faq-section {\r\n    background-color: #0b090d;\r\n    font-family: 'Cairo', sans-serif;\r\n    direction: rtl;\r\n    width: 100% !important;\r\n    max-width: 100% !important;\r\n    padding: 60px 20px !important;\r\n    overflow: hidden !important; \/* \u064a\u0645\u0646\u0639 \u062e\u0631\u0648\u062c \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0646\u0647\u0627\u0626\u064a\u0627\u064b *\/\r\n    position: relative;\r\n  }\r\n\r\n  .bubbles-wrapper {\r\n    max-width: 850px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 22px;\r\n    width: 100%;\r\n  }\r\n\r\n  \/* \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0641\u0642\u0627\u0639\u0629 \u0627\u0644\u0639\u0627\u0626\u0645\u0629 *\/\r\n  .faq-bubble {\r\n    background: rgba(22, 14, 20, 0.85);\r\n    border: 1px solid rgba(255, 255, 255, 0.08);\r\n    border-radius: 28px;\r\n    padding: 22px 28px;\r\n    backdrop-filter: blur(12px);\r\n    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.1);\r\n    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    cursor: pointer;\r\n    position: relative;\r\n  }\r\n\r\n  \/* \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0637\u0641\u0648 \u0648\u0627\u0644\u062a\u0648\u0647\u062c \u0639\u0646\u062f \u0645\u0631\u0631 \u0627\u0644\u0645\u0627\u0648\u0633 \u0623\u0648 \u0627\u0644\u062a\u0641\u0639\u064a\u0644 *\/\r\n  .faq-bubble:hover,\r\n  .faq-bubble.active {\r\n    transform: translateY(-8px) scale(1.01);\r\n    border-color: rgba(230, 57, 86, 0.6);\r\n    box-shadow: 0 20px 40px rgba(230, 57, 86, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.2);\r\n    background: rgba(30, 16, 26, 0.95);\r\n  }\r\n\r\n  \/* \u0647\u064a\u062f\u0631 \u0627\u0644\u0641\u0642\u0627\u0639\u0629 *\/\r\n  .bubble-header {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n    width: 100%;\r\n  }\r\n\r\n  \/* \u0623\u064a\u0642\u0648\u0646\u0629 \u0627\u0644\u0627\u0633\u062a\u0641\u0647\u0627\u0645 \u0627\u0644\u0639\u0627\u0626\u0645\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0641\u0642\u0627\u0639\u0629 *\/\r\n  .bubble-icon {\r\n    width: 38px;\r\n    height: 38px;\r\n    min-width: 38px;\r\n    background: linear-gradient(135deg, #2b111a 0%, #e63956 100%);\r\n    color: #ffffff;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-weight: 900;\r\n    font-size: 18px;\r\n    box-shadow: 0 4px 12px rgba(230, 57, 86, 0.4);\r\n  }\r\n\r\n  \/* \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0633\u0624\u0627\u0644 *\/\r\n  .bubble-title {\r\n    font-size: 18px;\r\n    font-weight: 800;\r\n    color: #ffffff;\r\n    line-height: 1.4;\r\n    flex-grow: 1;\r\n    transition: color 0.3s ease;\r\n  }\r\n\r\n  .faq-bubble:hover .bubble-title,\r\n  .faq-bubble.active .bubble-title {\r\n    color: #ff6b81;\r\n  }\r\n\r\n  \/* \u0632\u0631 \u0627\u0644\u062a\u0648\u0633\u0639 (+) *\/\r\n  .bubble-action {\r\n    width: 34px;\r\n    height: 34px;\r\n    min-width: 34px;\r\n    background: rgba(255, 255, 255, 0.05);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    color: #ffffff;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-weight: 900;\r\n    font-size: 18px;\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .faq-bubble:hover .bubble-action,\r\n  .faq-bubble.active .bubble-action {\r\n    background-color: #e63956;\r\n    color: #ffffff;\r\n    transform: rotate(45deg);\r\n    box-shadow: 0 0 12px rgba(230, 57, 86, 0.6);\r\n  }\r\n\r\n  \/* \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0625\u062c\u0627\u0628\u0629 \u064a\u0638\u0647\u0631 \u0639\u0646\u062f hover \u0623\u0648 \u0627\u0644\u0636\u063a\u0637 *\/\r\n  .bubble-content {\r\n    max-height: 0;\r\n    opacity: 0;\r\n    overflow: hidden;\r\n    transition: max-height 0.5s ease, opacity 0.4s ease, padding-top 0.3s ease;\r\n  }\r\n\r\n  \/* \u062a\u0641\u0639\u064a\u0644 \u0641\u062a\u062d \u0627\u0644\u0625\u062c\u0627\u0628\u0629 \u0628\u0643\u0644 \u0633\u0644\u0627\u0633\u0629 *\/\r\n  .faq-bubble:hover .bubble-content,\r\n  .faq-bubble.active .bubble-content {\r\n    max-height: 500px; \/* \u064a\u0633\u0645\u062d \u0628\u0631\u0624\u064a\u0629 \u0627\u0644\u0646\u0635 \u0643\u0627\u0645\u0644\u0627\u064b \u062f\u0648\u0646 \u0642\u0637\u0639 *\/\r\n    opacity: 1;\r\n    padding-top: 18px;\r\n  }\r\n\r\n  .bubble-content p {\r\n    font-size: 15px;\r\n    color: #c4bdc2;\r\n    line-height: 1.8;\r\n    border-top: 1px dashed rgba(255, 255, 255, 0.1);\r\n    padding-top: 16px;\r\n  }\r\n\r\n  \/* \u0627\u0644\u062a\u0648\u0627\u0641\u0642 \u0645\u0639 \u0627\u0644\u062c\u0648\u0627\u0644 *\/\r\n  @media (max-width: 600px) {\r\n    .floating-faq-section {\r\n      padding: 40px 15px !important;\r\n    }\r\n    .faq-bubble {\r\n      padding: 18px 20px;\r\n      border-radius: 20px;\r\n    }\r\n    .bubble-title {\r\n      font-size: 15px;\r\n    }\r\n    .bubble-icon {\r\n      width: 30px;\r\n      height: 30px;\r\n      min-width: 30px;\r\n      font-size: 14px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  \/\/ \u062a\u0641\u0639\u064a\u0644 \u0627\u0644\u062a\u062b\u0628\u064a\u062a \u0639\u0646\u062f \u0627\u0644\u0636\u063a\u0637 \u0628\u0627\u0644\u0623\u0635\u0628\u0639 \u0641\u064a \u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0644\u0645\u0633\u064a\u0629 \u0648\u0627\u0644\u062c\u0648\u0627\u0644\r\n  document.addEventListener('DOMContentLoaded', function() {\r\n    const bubbles = document.querySelectorAll('.faq-bubble');\r\n\r\n    bubbles.forEach(bubble => {\r\n      bubble.addEventListener('click', function(e) {\r\n        const isActive = this.classList.contains('active');\r\n        bubbles.forEach(b => b.classList.remove('active'));\r\n        if (!isActive) {\r\n          this.classList.add('active');\r\n        }\r\n      });\r\n    });\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e490e0 elementor-widget elementor-widget-html\" data-id=\"3e490e0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u0642\u0633\u0645 \u0627\u0644\u0641\u0648\u062a\u0631 \u0627\u0644\u0646\u0647\u0627\u0626\u064a \u0648\u0627\u0644\u062f\u0639\u0648\u0629 \u0644\u0644\u062a\u0648\u0627\u0635\u0644 - Pure HTML & CSS Footer -->\r\n<footer class=\"footer-section-pure\" id=\"footerSection\">\r\n  <div class=\"footer-container\">\r\n    \r\n    <!-- 1. \u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u062f\u0639\u0648\u0629 \u0644\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0639\u0644\u0648\u064a (CTA) -->\r\n    <div class=\"cta-card\">\r\n      <div class=\"cta-glow-bg\"><\/div>\r\n      \r\n      <div class=\"cta-content\">\r\n        <div class=\"availability-badge\">\r\n          <span class=\"pulse-dot\"><\/span>\r\n          <span>\u062c\u0627\u0647\u0632\u0648\u0646 \u0644\u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0645\u0634\u0627\u0631\u064a\u0639 \u062c\u062f\u064a\u062f\u0629<\/span>\r\n        <\/div>\r\n\r\n        <h2 class=\"cta-title\">\r\n          \u062c\u0627\u0647\u0632 \u0644\u062a\u0623\u062e\u0630 \u0645\u0634\u0631\u0648\u0639\u0643 \u0625\u0644\u0649 <br>\r\n          <span class=\"highlight\">\u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062a\u0627\u0644\u064a<\/span>\u061f\r\n        <\/h2>\r\n\r\n        <p class=\"cta-desc\">\r\n          \u062f\u0639\u0646\u0627 \u0646\u062a\u062d\u062f\u062b \u0639\u0646 \u0623\u0641\u0643\u0627\u0631\u0643 \u0648\u0646\u0628\u0646\u064a \u062a\u062c\u0631\u0628\u0629 \u0631\u0642\u0645\u064a\u0629 \u0644\u0627 \u062a\u064f\u0646\u0633\u0649 \u062a\u062b\u0628\u062a \u062d\u0636\u0648\u0631\u0643 \u0641\u064a \u0627\u0644\u0633\u0648\u0642.\r\n        <\/p>\r\n\r\n        <div class=\"cta-actions\">\r\n          <a href=\"mailto:hello@kojokstudio.com\" class=\"btn-cta-primary\">\r\n            \u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643 \u0627\u0644\u0622\u0646\r\n            <span class=\"arrow\">\u2190<\/span>\r\n          <\/a>\r\n          <a href=\"https:\/\/wa.me\/00000000000\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"btn-cta-secondary\">\r\n            \u062a\u062d\u062f\u062b \u0645\u0639\u0646\u0627 \u0639\u0628\u0631 \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628\r\n          <\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- 2. \u0634\u0628\u0643\u0629 \u0623\u0639\u0645\u062f\u0629 \u0627\u0644\u0641\u0648\u062a\u0631 -->\r\n    <div class=\"footer-grid\">\r\n      \r\n      <!-- \u0627\u0644\u0639\u0645\u0648\u062f \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u062a\u0639\u0631\u064a\u0641 \u0648\u0627\u0644\u0627\u0633\u062a\u0648\u062f\u064a\u0648 -->\r\n      <div class=\"footer-col brand-col\">\r\n        <div class=\"footer-logo\">\r\n          KOJOK<span class=\"dot\">.<\/span>\r\n        <\/div>\r\n        <p class=\"brand-desc\">\r\n          \u0627\u0633\u062a\u0648\u062f\u064a\u0648 \u0625\u0628\u062f\u0627\u0639\u064a \u0631\u0642\u0645\u064a \u0645\u062a\u062e\u0635\u0635 \u0641\u064a \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0647\u0646\u062f\u0633\u064a\u0629\u060c \u0627\u0644\u0647\u0648\u064a\u0627\u062a \u0627\u0644\u0628\u0635\u0631\u064a\u0629 \u0627\u0644\u0645\u0628\u062a\u0643\u0631\u0629\u060c \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0641\u0627\u0626\u0642\u0629 \u0627\u0644\u0633\u0631\u0639\u0629.\r\n        <\/p>\r\n        <div class=\"status-indicator\">\r\n          <span class=\"live-dot\"><\/span>\r\n          <span>ALL SYSTEMS OPERATIONAL<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u0639\u0645\u0648\u062f \u0627\u0644\u062b\u0627\u0646\u064a: \u0627\u0644\u062a\u0646\u0642\u0644 \u0627\u0644\u0633\u0631\u064a\u0639 -->\r\n      <div class=\"footer-col\">\r\n        <h3 class=\"col-title\">\u0631\u0648\u0627\u0628\u0637 \u0633\u0631\u064a\u0639\u0629<\/h3>\r\n        <ul class=\"footer-links\">\r\n          <li><a href=\"#servicesSection\">\u0627\u0644\u062e\u062f\u0645\u0627\u062a<\/a><\/li>\r\n          <li><a href=\"#portfolioSection\">\u0645\u0639\u0631\u0636 \u0627\u0644\u0623\u0639\u0645\u0627\u0644<\/a><\/li>\r\n          <li><a href=\"#processSection\">\u0622\u0644\u064a\u0629 \u0627\u0644\u0639\u0645\u0644<\/a><\/li>\r\n          <li><a href=\"#pricingSection\">\u0627\u0644\u0628\u0627\u0642\u0627\u062a \u0648\u0627\u0644\u0623\u0633\u0639\u0627\u0631<\/a><\/li>\r\n          <li><a href=\"#faqSection\">\u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u0634\u0627\u0626\u0639\u0629<\/a><\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u0639\u0645\u0648\u062f \u0627\u0644\u062b\u0627\u0644\u062b: \u0627\u0644\u062e\u062f\u0645\u0627\u062a -->\r\n      <div class=\"footer-col\">\r\n        <h3 class=\"col-title\">\u062a\u062e\u0635\u0635\u0627\u062a\u0646\u0627<\/h3>\r\n        <ul class=\"footer-links\">\r\n          <li><a href=\"#\">\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u062c\u0647\u0627\u062a UI\/UX<\/a><\/li>\r\n          <li><a href=\"#\">\u062a\u0637\u0648\u064a\u0631 \u0645\u0648\u0627\u0642\u0639 \u0648\u0645\u062a\u0627\u062c\u0631<\/a><\/li>\r\n          <li><a href=\"#\">\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0647\u0648\u064a\u0627\u062a \u0627\u0644\u0628\u0635\u0631\u064a\u0629<\/a><\/li>\r\n          <li><a href=\"#\">\u062a\u062d\u0633\u064a\u0646 \u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b SEO<\/a><\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u0639\u0645\u0648\u062f \u0627\u0644\u0631\u0627\u0628\u0639: \u0648\u0633\u0627\u0626\u0644 \u0627\u0644\u062a\u0648\u0627\u0635\u0644 -->\r\n      <div class=\"footer-col\">\r\n        <h3 class=\"col-title\">\u062a\u0627\u0628\u0639\u0646\u0627<\/h3>\r\n        <div class=\"social-grid\">\r\n          <a href=\"#\" class=\"social-link\">X \/ Twitter<\/a>\r\n          <a href=\"#\" class=\"social-link\">LinkedIn<\/a>\r\n          <a href=\"#\" class=\"social-link\">Instagram<\/a>\r\n          <a href=\"#\" class=\"social-link\">Behance<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- 3. \u0627\u0644\u0634\u0631\u064a\u0637 \u0627\u0644\u0633\u0641\u0644\u064a \u0644\u0644\u062d\u0642\u0648\u0642 \u0648\u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0644\u0623\u0639\u0644\u0649 -->\r\n    <div class=\"footer-bottom\">\r\n      <p class=\"copyright-text\">\r\n        \u00a9 2026 KOJOK Studio. \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629.\r\n      <\/p>\r\n\r\n      <!-- \u0632\u0631 \u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0644\u0647\u064a\u0631\u0648 -->\r\n      <a href=\"#heroSection\" class=\"back-to-top\" id=\"backToHeroBtn\" title=\"\u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0642\u0633\u0645 \u0627\u0644\u0647\u064a\u0631\u0648\">\r\n        <span>\u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0644\u0623\u0639\u0644\u0649<\/span>\r\n        <span class=\"up-arrow\">\u2191<\/span>\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/footer>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;700;900&display=swap');\r\n\r\n  \/* \u062a\u0641\u0639\u064a\u0644 \u0627\u0644\u062a\u0645\u0631\u064a\u0631 \u0627\u0644\u0633\u0644\u0633 *\/\r\n  html {\r\n    scroll-behavior: smooth;\r\n  }\r\n\r\n  html, body {\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    overflow-x: hidden;\r\n  }\r\n\r\n  div, p, h2, h3, button, a, ul, li {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* \u062a\u0646\u0633\u064a\u0642 \u0642\u0633\u0645 \u0627\u0644\u0641\u0648\u062a\u0631 \u0627\u0644\u0631\u0626\u064a\u0633\u064a *\/\r\n  .footer-section-pure {\r\n    background-color: #0b090d;\r\n    color: #ffffff;\r\n    font-family: 'Cairo', sans-serif;\r\n    direction: rtl;\r\n    \r\n    width: 100% !important;\r\n    position: relative !important;\r\n    padding-top: 100px !important;\r\n    padding-bottom: 50px !important;\r\n    padding-left: 5%;\r\n    padding-right: 5%;\r\n\r\n    box-sizing: border-box;\r\n    overflow: hidden;\r\n    z-index: 10;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n  }\r\n\r\n  .footer-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    width: 100%;\r\n  }\r\n\r\n  \/* 1. cta card *\/\r\n  .cta-card {\r\n    position: relative;\r\n    background: linear-gradient(145deg, #1f0e1a 0%, #11080f 100%);\r\n    border: 1px solid rgba(230, 57, 86, 0.3);\r\n    border-radius: 28px;\r\n    padding: 60px 30px;\r\n    text-align: center;\r\n    margin-bottom: 80px;\r\n    overflow: hidden;\r\n    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);\r\n  }\r\n\r\n  .cta-glow-bg {\r\n    position: absolute;\r\n    top: -50%; \r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 500px; \r\n    height: 250px;\r\n    background: radial-gradient(circle, rgba(230, 57, 86, 0.25) 0%, transparent 70%);\r\n    pointer-events: none;\r\n    filter: blur(40px);\r\n  }\r\n\r\n  .cta-content {\r\n    position: relative;\r\n    z-index: 2;\r\n    max-width: 650px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .availability-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    background: rgba(34, 197, 94, 0.1);\r\n    border: 1px solid rgba(34, 197, 94, 0.25);\r\n    color: #22c55e;\r\n    padding: 6px 16px;\r\n    border-radius: 20px;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  \/* \u0623\u0646\u064a\u0645\u064a\u0634\u0646 \u0627\u0644\u0646\u0628\u0636 \u0644\u0644\u0646\u0642\u0637\u0629 \u0627\u0644\u062e\u0636\u0631\u0627\u0621 *\/\r\n  @keyframes pulseGlow {\r\n    0% {\r\n      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);\r\n    }\r\n    70% {\r\n      box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);\r\n    }\r\n    100% {\r\n      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);\r\n    }\r\n  }\r\n\r\n  .pulse-dot {\r\n    width: 8px; \r\n    height: 8px;\r\n    background-color: #22c55e;\r\n    border-radius: 50%;\r\n    animation: pulseGlow 2s infinite;\r\n  }\r\n\r\n  .cta-title {\r\n    font-size: 46px;\r\n    font-weight: 900;\r\n    line-height: 1.2;\r\n    margin: 0 0 16px 0;\r\n    color: #ffffff;\r\n  }\r\n\r\n  .cta-title .highlight {\r\n    color: #e63956;\r\n  }\r\n\r\n  .cta-desc {\r\n    font-size: 16px;\r\n    color: #a09a9e;\r\n    line-height: 1.6;\r\n    margin: 0 0 32px 0;\r\n  }\r\n\r\n  .cta-actions {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 16px;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .btn-cta-primary {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    background-color: #e63956;\r\n    color: #ffffff;\r\n    padding: 14px 32px;\r\n    border-radius: 30px;\r\n    text-decoration: none;\r\n    font-weight: 800;\r\n    font-size: 15px;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 8px 20px rgba(230, 57, 86, 0.4);\r\n  }\r\n\r\n  .btn-cta-primary .arrow {\r\n    transition: transform 0.3s ease;\r\n  }\r\n\r\n  .btn-cta-primary:hover {\r\n    background-color: #ff3b5c;\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 12px 25px rgba(230, 57, 86, 0.5);\r\n  }\r\n\r\n  .btn-cta-primary:hover .arrow {\r\n    transform: translateX(-4px);\r\n  }\r\n\r\n  .btn-cta-secondary {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    color: #ffffff;\r\n    padding: 14px 28px;\r\n    border-radius: 30px;\r\n    text-decoration: none;\r\n    font-weight: 700;\r\n    font-size: 14px;\r\n    background: rgba(255, 255, 255, 0.04);\r\n    border: 1px solid rgba(255, 255, 255, 0.12);\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .btn-cta-secondary:hover {\r\n    background: rgba(255, 255, 255, 0.1);\r\n    border-color: #ffffff;\r\n  }\r\n\r\n  \/* 2. footer columns *\/\r\n  .footer-grid {\r\n    display: grid;\r\n    grid-template-columns: 2fr repeat(3, 1fr);\r\n    gap: 40px;\r\n    padding-bottom: 50px;\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.06);\r\n  }\r\n\r\n  .brand-col .footer-logo {\r\n    font-size: 28px;\r\n    font-weight: 900;\r\n    color: #ffffff;\r\n    margin-bottom: 12px;\r\n    letter-spacing: -1px;\r\n  }\r\n\r\n  .brand-col .footer-logo .dot {\r\n    color: #e63956;\r\n  }\r\n\r\n  .brand-desc {\r\n    font-size: 14px;\r\n    color: #a09a9e;\r\n    line-height: 1.7;\r\n    margin: 0 0 20px 0;\r\n    max-width: 320px;\r\n  }\r\n\r\n  .status-indicator {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    color: #836d7a;\r\n    letter-spacing: 1px;\r\n  }\r\n\r\n  .live-dot {\r\n    width: 6px; \r\n    height: 6px;\r\n    background-color: #e63956;\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 6px #e63956;\r\n  }\r\n\r\n  .col-title {\r\n    font-size: 16px;\r\n    font-weight: 800;\r\n    color: #ffffff;\r\n    margin: 0 0 20px 0;\r\n  }\r\n\r\n  .footer-links {\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n\r\n  .footer-links li {\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .footer-links a {\r\n    color: #a09a9e;\r\n    text-decoration: none;\r\n    font-size: 14px;\r\n    transition: color 0.3s ease, padding-right 0.3s ease;\r\n    display: inline-block;\r\n  }\r\n\r\n  .footer-links a:hover {\r\n    color: #e63956;\r\n    padding-right: 6px;\r\n  }\r\n\r\n  .social-grid {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n  }\r\n\r\n  .social-link {\r\n    color: #a09a9e;\r\n    text-decoration: none;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    transition: color 0.3s ease;\r\n  }\r\n\r\n  .social-link:hover {\r\n    color: #e63956;\r\n  }\r\n\r\n  \/* 3. footer bottom *\/\r\n  .footer-bottom {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding-top: 25px;\r\n    font-size: 13px;\r\n    color: #836d7a;\r\n  }\r\n\r\n  .back-to-top {\r\n    color: #a09a9e;\r\n    text-decoration: none;\r\n    padding: 8px 18px;\r\n    border-radius: 20px;\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    transition: all 0.3s ease;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .back-to-top .up-arrow {\r\n    transition: transform 0.3s ease;\r\n  }\r\n\r\n  .back-to-top:hover {\r\n    border-color: #e63956;\r\n    color: #ffffff;\r\n    background: rgba(230, 57, 86, 0.1);\r\n  }\r\n\r\n  .back-to-top:hover .up-arrow {\r\n    transform: translateY(-3px);\r\n  }\r\n\r\n  \/* Responsive \/ \u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629 *\/\r\n  @media (max-width: 991px) {\r\n    .cta-title { font-size: 36px; }\r\n    .footer-grid { \r\n      grid-template-columns: repeat(2, 1fr); \r\n    }\r\n    .brand-col { \r\n      grid-column: span 2; \r\n    }\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .footer-grid { \r\n      grid-template-columns: 1fr; \r\n    }\r\n    .brand-col { \r\n      grid-column: span 1; \r\n    }\r\n    .footer-bottom {\r\n      flex-direction: column;\r\n      gap: 15px;\r\n      text-align: center;\r\n    }\r\n    .cta-card { padding: 40px 20px; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  (function() {\r\n    function initScrollToHero() {\r\n      const btn = document.getElementById('backToHeroBtn');\r\n      if (!btn) return;\r\n\r\n      btn.addEventListener('click', function(e) {\r\n        e.preventDefault();\r\n        \r\n        \/\/ \u0627\u0644\u0628\u062d\u062b \u0639\u0646 \u0642\u0633\u0645 \u0627\u0644\u0647\u064a\u0631\u0648 \u0627\u0644\u0645\u062e\u0635\u0635\u060c \u0623\u0648 \u0627\u0644\u062a\u0645\u0631\u064a\u0631 \u0644\u0623\u0639\u0644\u0649 \u0627\u0644\u0635\u0641\u062d\u0629\r\n        const heroSection = document.getElementById('heroSection') || document.querySelector('header') || document.body;\r\n        \r\n        if (heroSection) {\r\n          heroSection.scrollIntoView({\r\n            behavior: 'smooth',\r\n            block: 'start'\r\n          });\r\n        }\r\n      });\r\n    }\r\n\r\n    if (document.readyState === 'loading') {\r\n      document.addEventListener('DOMContentLoaded', initScrollToHero);\r\n    } else {\r\n      initScrollToHero();\r\n    }\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f79e02e elementor-widget elementor-widget-html\" data-id=\"f79e02e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u0642\u0633\u0645 \u0627\u0644\u0641\u0648\u062a\u0631 \u0627\u0644\u0646\u0647\u0627\u0626\u064a \u0648\u0627\u0644\u062f\u0639\u0648\u0629 \u0644\u0644\u062a\u0648\u0627\u0635\u0644 - Pure HTML & CSS Footer -->\r\n<footer class=\"footer-section-pure\" id=\"footerSection\">\r\n  <div class=\"footer-container\">\r\n    \r\n    <!-- 1. \u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u062f\u0639\u0648\u0629 \u0644\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0639\u0644\u0648\u064a (CTA) -->\r\n    <div class=\"cta-card\">\r\n      <div class=\"cta-glow-bg\"><\/div>\r\n      \r\n      <div class=\"cta-content\">\r\n        <div class=\"availability-badge\">\r\n          <span class=\"pulse-dot\"><\/span>\r\n          <span>\u062c\u0627\u0647\u0632\u0648\u0646 \u0644\u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0645\u0634\u0627\u0631\u064a\u0639 \u062c\u062f\u064a\u062f\u0629<\/span>\r\n        <\/div>\r\n\r\n        <h2 class=\"cta-title\">\r\n          \u062c\u0627\u0647\u0632 \u0644\u062a\u0623\u062e\u0630 \u0645\u0634\u0631\u0648\u0639\u0643 \u0625\u0644\u0649 <br>\r\n          <span class=\"highlight\">\u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062a\u0627\u0644\u064a<\/span>\u061f\r\n        <\/h2>\r\n\r\n        <p class=\"cta-desc\">\r\n          \u062f\u0639\u0646\u0627 \u0646\u062a\u062d\u062f\u062b \u0639\u0646 \u0623\u0641\u0643\u0627\u0631\u0643 \u0648\u0646\u0628\u0646\u064a \u062a\u062c\u0631\u0628\u0629 \u0631\u0642\u0645\u064a\u0629 \u0644\u0627 \u062a\u064f\u0646\u0633\u0649 \u062a\u062b\u0628\u062a \u062d\u0636\u0648\u0631\u0643 \u0641\u064a \u0627\u0644\u0633\u0648\u0642.\r\n        <\/p>\r\n\r\n        <div class=\"cta-actions\">\r\n          <a href=\"mailto:hello@kojokstudio.com\" class=\"btn-cta-primary\">\r\n            \u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643 \u0627\u0644\u0622\u0646\r\n            <span class=\"arrow\">\u2190<\/span>\r\n          <\/a>\r\n          <a href=\"https:\/\/wa.me\/00000000000\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"btn-cta-secondary\">\r\n            \u062a\u062d\u062f\u062b \u0645\u0639\u0646\u0627 \u0639\u0628\u0631 \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628\r\n          <\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- 2. \u0634\u0628\u0643\u0629 \u0623\u0639\u0645\u062f\u0629 \u0627\u0644\u0641\u0648\u062a\u0631 -->\r\n    <div class=\"footer-grid\">\r\n      \r\n      <!-- \u0627\u0644\u0639\u0645\u0648\u062f \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u062a\u0639\u0631\u064a\u0641 \u0648\u0627\u0644\u0627\u0633\u062a\u0648\u062f\u064a\u0648 -->\r\n      <div class=\"footer-col brand-col\">\r\n        <div class=\"footer-logo\">\r\n          KOJOK<span class=\"dot\">.<\/span>\r\n        <\/div>\r\n        <p class=\"brand-desc\">\r\n          \u0627\u0633\u062a\u0648\u062f\u064a\u0648 \u0625\u0628\u062f\u0627\u0639\u064a \u0631\u0642\u0645\u064a \u0645\u062a\u062e\u0635\u0635 \u0641\u064a \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0647\u0646\u062f\u0633\u064a\u0629\u060c \u0627\u0644\u0647\u0648\u064a\u0627\u062a \u0627\u0644\u0628\u0635\u0631\u064a\u0629 \u0627\u0644\u0645\u0628\u062a\u0643\u0631\u0629\u060c \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0641\u0627\u0626\u0642\u0629 \u0627\u0644\u0633\u0631\u0639\u0629.\r\n        <\/p>\r\n        <div class=\"status-indicator\">\r\n          <span class=\"live-dot\"><\/span>\r\n          <span>ALL SYSTEMS OPERATIONAL<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u0639\u0645\u0648\u062f \u0627\u0644\u062b\u0627\u0646\u064a: \u0627\u0644\u062a\u0646\u0642\u0644 \u0627\u0644\u0633\u0631\u064a\u0639 -->\r\n      <div class=\"footer-col\">\r\n        <h3 class=\"col-title\">\u0631\u0648\u0627\u0628\u0637 \u0633\u0631\u064a\u0639\u0629<\/h3>\r\n        <ul class=\"footer-links\">\r\n          <li><a href=\"#servicesSection\">\u0627\u0644\u062e\u062f\u0645\u0627\u062a<\/a><\/li>\r\n          <li><a href=\"#portfolioSection\">\u0645\u0639\u0631\u0636 \u0627\u0644\u0623\u0639\u0645\u0627\u0644<\/a><\/li>\r\n          <li><a href=\"#processSection\">\u0622\u0644\u064a\u0629 \u0627\u0644\u0639\u0645\u0644<\/a><\/li>\r\n          <li><a href=\"#pricingSection\">\u0627\u0644\u0628\u0627\u0642\u0627\u062a \u0648\u0627\u0644\u0623\u0633\u0639\u0627\u0631<\/a><\/li>\r\n          <li><a href=\"#faqSection\">\u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u0634\u0627\u0626\u0639\u0629<\/a><\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u0639\u0645\u0648\u062f \u0627\u0644\u062b\u0627\u0644\u062b: \u0627\u0644\u062e\u062f\u0645\u0627\u062a -->\r\n      <div class=\"footer-col\">\r\n        <h3 class=\"col-title\">\u062a\u062e\u0635\u0635\u0627\u062a\u0646\u0627<\/h3>\r\n        <ul class=\"footer-links\">\r\n          <li><a href=\"#\">\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u062c\u0647\u0627\u062a UI\/UX<\/a><\/li>\r\n          <li><a href=\"#\">\u062a\u0637\u0648\u064a\u0631 \u0645\u0648\u0627\u0642\u0639 \u0648\u0645\u062a\u0627\u062c\u0631<\/a><\/li>\r\n          <li><a href=\"#\">\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0647\u0648\u064a\u0627\u062a \u0627\u0644\u0628\u0635\u0631\u064a\u0629<\/a><\/li>\r\n          <li><a href=\"#\">\u062a\u062d\u0633\u064a\u0646 \u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b SEO<\/a><\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n      <!-- \u0627\u0644\u0639\u0645\u0648\u062f \u0627\u0644\u0631\u0627\u0628\u0639: \u0648\u0633\u0627\u0626\u0644 \u0627\u0644\u062a\u0648\u0627\u0635\u0644 -->\r\n      <div class=\"footer-col\">\r\n        <h3 class=\"col-title\">\u062a\u0627\u0628\u0639\u0646\u0627<\/h3>\r\n        <div class=\"social-grid\">\r\n          <a href=\"#\" class=\"social-link\">X \/ Twitter<\/a>\r\n          <a href=\"#\" class=\"social-link\">LinkedIn<\/a>\r\n          <a href=\"#\" class=\"social-link\">Instagram<\/a>\r\n          <a href=\"#\" class=\"social-link\">Behance<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- 3. \u0627\u0644\u0634\u0631\u064a\u0637 \u0627\u0644\u0633\u0641\u0644\u064a \u0644\u0644\u062d\u0642\u0648\u0642 \u0648\u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0644\u0623\u0639\u0644\u0649 -->\r\n    <div class=\"footer-bottom\">\r\n      <p class=\"copyright-text\">\r\n        \u00a9 2026 KOJOK Studio. \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629.\r\n      <\/p>\r\n\r\n      <!-- \u0632\u0631 \u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0644\u0647\u064a\u0631\u0648 -->\r\n      <a href=\"#heroSection\" class=\"back-to-top\" id=\"backToHeroBtn\" title=\"\u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0642\u0633\u0645 \u0627\u0644\u0647\u064a\u0631\u0648\">\r\n        <span>\u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0644\u0623\u0639\u0644\u0649<\/span>\r\n        <span class=\"up-arrow\">\u2191<\/span>\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/footer>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;700;900&display=swap');\r\n\r\n  \/* \u062a\u0641\u0639\u064a\u0644 \u0627\u0644\u062a\u0645\u0631\u064a\u0631 \u0627\u0644\u0633\u0644\u0633 *\/\r\n  html {\r\n    scroll-behavior: smooth;\r\n  }\r\n\r\n  html, body {\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    overflow-x: hidden;\r\n  }\r\n\r\n  div, p, h2, h3, button, a, ul, li {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* \u062a\u0646\u0633\u064a\u0642 \u0642\u0633\u0645 \u0627\u0644\u0641\u0648\u062a\u0631 \u0627\u0644\u0631\u0626\u064a\u0633\u064a *\/\r\n  .footer-section-pure {\r\n    background-color: #0b090d;\r\n    color: #ffffff;\r\n    font-family: 'Cairo', sans-serif;\r\n    direction: rtl;\r\n    \r\n    width: 100% !important;\r\n    position: relative !important;\r\n    padding-top: 100px !important;\r\n    padding-bottom: 50px !important;\r\n    padding-left: 5%;\r\n    padding-right: 5%;\r\n\r\n    box-sizing: border-box;\r\n    overflow: hidden;\r\n    z-index: 10;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n  }\r\n\r\n  .footer-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    width: 100%;\r\n  }\r\n\r\n  \/* 1. cta card *\/\r\n  .cta-card {\r\n    position: relative;\r\n    background: linear-gradient(145deg, #1f0e1a 0%, #11080f 100%);\r\n    border: 1px solid rgba(230, 57, 86, 0.3);\r\n    border-radius: 28px;\r\n    padding: 60px 30px;\r\n    text-align: center;\r\n    margin-bottom: 80px;\r\n    overflow: hidden;\r\n    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);\r\n  }\r\n\r\n  .cta-glow-bg {\r\n    position: absolute;\r\n    top: -50%; \r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 500px; \r\n    height: 250px;\r\n    background: radial-gradient(circle, rgba(230, 57, 86, 0.25) 0%, transparent 70%);\r\n    pointer-events: none;\r\n    filter: blur(40px);\r\n  }\r\n\r\n  .cta-content {\r\n    position: relative;\r\n    z-index: 2;\r\n    max-width: 650px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .availability-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    background: rgba(34, 197, 94, 0.1);\r\n    border: 1px solid rgba(34, 197, 94, 0.25);\r\n    color: #22c55e;\r\n    padding: 6px 16px;\r\n    border-radius: 20px;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  \/* \u0623\u0646\u064a\u0645\u064a\u0634\u0646 \u0627\u0644\u0646\u0628\u0636 \u0644\u0644\u0646\u0642\u0637\u0629 \u0627\u0644\u062e\u0636\u0631\u0627\u0621 *\/\r\n  @keyframes pulseGlow {\r\n    0% {\r\n      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);\r\n    }\r\n    70% {\r\n      box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);\r\n    }\r\n    100% {\r\n      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);\r\n    }\r\n  }\r\n\r\n  .pulse-dot {\r\n    width: 8px; \r\n    height: 8px;\r\n    background-color: #22c55e;\r\n    border-radius: 50%;\r\n    animation: pulseGlow 2s infinite;\r\n  }\r\n\r\n  .cta-title {\r\n    font-size: 46px;\r\n    font-weight: 900;\r\n    line-height: 1.2;\r\n    margin: 0 0 16px 0;\r\n    color: #ffffff;\r\n  }\r\n\r\n  .cta-title .highlight {\r\n    color: #e63956;\r\n  }\r\n\r\n  .cta-desc {\r\n    font-size: 16px;\r\n    color: #a09a9e;\r\n    line-height: 1.6;\r\n    margin: 0 0 32px 0;\r\n  }\r\n\r\n  .cta-actions {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 16px;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .btn-cta-primary {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    background-color: #e63956;\r\n    color: #ffffff;\r\n    padding: 14px 32px;\r\n    border-radius: 30px;\r\n    text-decoration: none;\r\n    font-weight: 800;\r\n    font-size: 15px;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 8px 20px rgba(230, 57, 86, 0.4);\r\n  }\r\n\r\n  .btn-cta-primary .arrow {\r\n    transition: transform 0.3s ease;\r\n  }\r\n\r\n  .btn-cta-primary:hover {\r\n    background-color: #ff3b5c;\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 12px 25px rgba(230, 57, 86, 0.5);\r\n  }\r\n\r\n  .btn-cta-primary:hover .arrow {\r\n    transform: translateX(-4px);\r\n  }\r\n\r\n  .btn-cta-secondary {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    color: #ffffff;\r\n    padding: 14px 28px;\r\n    border-radius: 30px;\r\n    text-decoration: none;\r\n    font-weight: 700;\r\n    font-size: 14px;\r\n    background: rgba(255, 255, 255, 0.04);\r\n    border: 1px solid rgba(255, 255, 255, 0.12);\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .btn-cta-secondary:hover {\r\n    background: rgba(255, 255, 255, 0.1);\r\n    border-color: #ffffff;\r\n  }\r\n\r\n  \/* 2. footer columns *\/\r\n  .footer-grid {\r\n    display: grid;\r\n    grid-template-columns: 2fr repeat(3, 1fr);\r\n    gap: 40px;\r\n    padding-bottom: 50px;\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.06);\r\n  }\r\n\r\n  .brand-col .footer-logo {\r\n    font-size: 28px;\r\n    font-weight: 900;\r\n    color: #ffffff;\r\n    margin-bottom: 12px;\r\n    letter-spacing: -1px;\r\n  }\r\n\r\n  .brand-col .footer-logo .dot {\r\n    color: #e63956;\r\n  }\r\n\r\n  .brand-desc {\r\n    font-size: 14px;\r\n    color: #a09a9e;\r\n    line-height: 1.7;\r\n    margin: 0 0 20px 0;\r\n    max-width: 320px;\r\n  }\r\n\r\n  .status-indicator {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    color: #836d7a;\r\n    letter-spacing: 1px;\r\n  }\r\n\r\n  .live-dot {\r\n    width: 6px; \r\n    height: 6px;\r\n    background-color: #e63956;\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 6px #e63956;\r\n  }\r\n\r\n  .col-title {\r\n    font-size: 16px;\r\n    font-weight: 800;\r\n    color: #ffffff;\r\n    margin: 0 0 20px 0;\r\n  }\r\n\r\n  .footer-links {\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n\r\n  .footer-links li {\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .footer-links a {\r\n    color: #a09a9e;\r\n    text-decoration: none;\r\n    font-size: 14px;\r\n    transition: color 0.3s ease, padding-right 0.3s ease;\r\n    display: inline-block;\r\n  }\r\n\r\n  .footer-links a:hover {\r\n    color: #e63956;\r\n    padding-right: 6px;\r\n  }\r\n\r\n  .social-grid {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n  }\r\n\r\n  .social-link {\r\n    color: #a09a9e;\r\n    text-decoration: none;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    transition: color 0.3s ease;\r\n  }\r\n\r\n  .social-link:hover {\r\n    color: #e63956;\r\n  }\r\n\r\n  \/* 3. footer bottom *\/\r\n  .footer-bottom {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding-top: 25px;\r\n    font-size: 13px;\r\n    color: #836d7a;\r\n  }\r\n\r\n  .back-to-top {\r\n    color: #a09a9e;\r\n    text-decoration: none;\r\n    padding: 8px 18px;\r\n    border-radius: 20px;\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    transition: all 0.3s ease;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .back-to-top .up-arrow {\r\n    transition: transform 0.3s ease;\r\n  }\r\n\r\n  .back-to-top:hover {\r\n    border-color: #e63956;\r\n    color: #ffffff;\r\n    background: rgba(230, 57, 86, 0.1);\r\n  }\r\n\r\n  .back-to-top:hover .up-arrow {\r\n    transform: translateY(-3px);\r\n  }\r\n\r\n  \/* Responsive \/ \u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629 *\/\r\n  @media (max-width: 991px) {\r\n    .cta-title { font-size: 36px; }\r\n    .footer-grid { \r\n      grid-template-columns: repeat(2, 1fr); \r\n    }\r\n    .brand-col { \r\n      grid-column: span 2; \r\n    }\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .footer-grid { \r\n      grid-template-columns: 1fr; \r\n    }\r\n    .brand-col { \r\n      grid-column: span 1; \r\n    }\r\n    .footer-bottom {\r\n      flex-direction: column;\r\n      gap: 15px;\r\n      text-align: center;\r\n    }\r\n    .cta-card { padding: 40px 20px; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  (function() {\r\n    function initScrollToHero() {\r\n      const btn = document.getElementById('backToHeroBtn');\r\n      if (!btn) return;\r\n\r\n      btn.addEventListener('click', function(e) {\r\n        e.preventDefault();\r\n        \r\n        \/\/ \u0627\u0644\u0628\u062d\u062b \u0639\u0646 \u0642\u0633\u0645 \u0627\u0644\u0647\u064a\u0631\u0648 \u0627\u0644\u0645\u062e\u0635\u0635\u060c \u0623\u0648 \u0627\u0644\u062a\u0645\u0631\u064a\u0631 \u0644\u0623\u0639\u0644\u0649 \u0627\u0644\u0635\u0641\u062d\u0629\r\n        const heroSection = document.getElementById('heroSection') || document.querySelector('header') || document.body;\r\n        \r\n        if (heroSection) {\r\n          heroSection.scrollIntoView({\r\n            behavior: 'smooth',\r\n            block: 'start'\r\n          });\r\n        }\r\n      });\r\n    }\r\n\r\n    if (document.readyState === 'loading') {\r\n      document.addEventListener('DOMContentLoaded', initScrollToHero);\r\n    } else {\r\n      initScrollToHero();\r\n    }\r\n  })();\r\n<\/script>\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>KOJOK. \u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0645\u0639\u0631\u0636 \u0627\u0644\u0623\u0639\u0645\u0627\u0644 \u0622\u0644\u064a\u0629 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0628\u0627\u0642\u0627\u062a \u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u0634\u0627\u0626\u0639\u0629 \u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643 \u0627\u0633\u062a\u0648\u062f\u064a\u0648 \u0625\u0628\u062f\u0627\u0639\u064a \u0645\u0633\u062a\u0642\u0644 \u0646\u062d\u0648\u0651\u0644 \u0627\u0644\u0623\u0641\u0643\u0627\u0631 \u0625\u0644\u0649 \u0623\u062b\u0631. \u0646\u0635\u0646\u0639 \u0639\u0644\u0627\u0645\u0627\u062a \u0648\u062a\u062c\u0627\u0631\u0628 \u062a\u064f\u0634\u0628\u0647 \u0623\u0635\u062d\u0627\u0628\u0647\u0627\u060c \u0648\u0646\u062a\u0631\u0643 \u0645\u0643\u0627\u0646\u0627\u064b \u062c\u0645\u064a\u0644\u0627\u064b \u0641\u064a \u0630\u0627\u0643\u0631\u0629 \u0627\u0644\u0646\u0627\u0633. \u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643 \u2190 \u25b6 \u0634\u0648\u0641 \u0634\u063a\u0644\u0646\u0627 04 \/ 01 LIVE ANALYTICS \u0627\u0644\u0623\u062c\u0645\u0644\u0644\u0633\u0647 \u062c\u0627\u064a \u2728 KOJOK \/ INSIGHT ENGINE \u0627\u0644\u0641\u0643\u0631\u0629\u062a\u062d\u0643\u064a. \u0645\u0646 \u0627\u0644\u0631\u0642\u0645 \u0625\u0644\u0649 \u0627\u0644\u0642\u0631\u0627\u0631 \u0628\u0648\u0636\u0648\u062d \u0623\u0643\u0628\u0631. ACTIVE [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry","entry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/alaa-alkojok.dollani.cloud\/index.php?rest_route=\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alaa-alkojok.dollani.cloud\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alaa-alkojok.dollani.cloud\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alaa-alkojok.dollani.cloud\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alaa-alkojok.dollani.cloud\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15"}],"version-history":[{"count":67,"href":"https:\/\/alaa-alkojok.dollani.cloud\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":137,"href":"https:\/\/alaa-alkojok.dollani.cloud\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions\/137"}],"wp:attachment":[{"href":"https:\/\/alaa-alkojok.dollani.cloud\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}