{"id":14631,"date":"2025-12-04T21:49:50","date_gmt":"2025-12-04T21:49:50","guid":{"rendered":"https:\/\/thetouch.sa\/%d8%a7%d9%84%d8%ad%d9%84%d9%88%d9%84-%d8%a7%d9%84%d8%b1%d9%82%d9%85%d9%8a%d8%a9\/"},"modified":"2025-12-27T00:08:43","modified_gmt":"2025-12-27T00:08:43","slug":"%d8%a7%d9%84%d8%ad%d9%84%d9%88%d9%84-%d8%a7%d9%84%d8%b1%d9%82%d9%85%d9%8a%d8%a9","status":"publish","type":"page","link":"https:\/\/thetouch.sa\/ar\/%d8%a7%d9%84%d8%ad%d9%84%d9%88%d9%84-%d8%a7%d9%84%d8%b1%d9%82%d9%85%d9%8a%d8%a9\/","title":{"rendered":"\u0627\u0644\u062d\u0644\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a\u0629"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14631\" class=\"elementor elementor-14631 elementor-13884\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b783de6 e-flex e-con-boxed e-con e-parent\" data-id=\"b783de6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5107889 e-flex e-con-boxed e-con e-parent\" data-id=\"5107889\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f0917bb elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"f0917bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n.digital-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 100%); overflow: hidden; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; box-sizing: border-box; padding: 120px 20px; margin-top: -1px; margin-bottom: -1px; }\r\n\r\n.digital-hero-bg { position: absolute; inset: 0; opacity: 0.05; }\r\n.digital-hero-code { position: absolute; font-family: 'Courier New', monospace; font-size: 14px; color: #5A2D82; white-space: pre; opacity: 0.3; animation: floatCode 20s linear infinite; }\r\n.digital-hero-code:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; }\r\n.digital-hero-code:nth-child(2) { top: 30%; right: 10%; animation-delay: -5s; }\r\n.digital-hero-code:nth-child(3) { bottom: 20%; left: 15%; animation-delay: -10s; }\r\n.digital-hero-code:nth-child(4) { top: 60%; right: 20%; animation-delay: -15s; }\r\n\r\n@keyframes floatCode { 0%, 100% { transform: translateY(0px); opacity: 0.2; } 50% { transform: translateY(-30px); opacity: 0.4; } }\r\n\r\n.digital-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(90,45,130,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(90,45,130,0.1) 1px, transparent 1px); background-size: 50px 50px; animation: gridMove 20s linear infinite; }\r\n@keyframes gridMove { 0% { transform: translate(0, 0); } 100% { transform: translate(50px, 50px); } }\r\n\r\n.digital-hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); animation: orbFloat 8s ease-in-out infinite; }\r\n.digital-hero-orb:nth-child(1) { width: 400px; height: 400px; background: radial-gradient(circle, rgba(90,45,130,0.3) 0%, transparent 70%); top: -10%; left: -10%; animation-delay: 0s; }\r\n.digital-hero-orb:nth-child(2) { width: 350px; height: 350px; background: radial-gradient(circle, rgba(219,39,119,0.2) 0%, transparent 70%); bottom: -10%; right: -10%; animation-delay: -4s; }\r\n\r\n@keyframes orbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -30px) scale(1.1); } }\r\n\r\n.digital-hero-content { position: relative; z-index: 2; max-width: 1200px; text-align: center; }\r\n\r\n.digital-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; background: rgba(90,45,130,0.2); border: 1px solid rgba(90,45,130,0.3); border-radius: 50px; color: #db2777; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; margin-bottom: 30px; animation: fadeInUp 0.6s ease forwards; opacity: 0; }\r\n.digital-hero-badge-dot { width: 8px; height: 8px; background: #db2777; border-radius: 50%; animation: pulse 2s ease infinite; }\r\n@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } }\r\n\r\n.digital-hero h1 { font-family: 'Playfair Display', serif; font-size: 72px; font-weight: 700; line-height: 1.1; margin: 0 0 30px 0; color: #ffffff; animation: fadeInUp 0.8s ease 0.2s forwards; opacity: 0; }\r\n.digital-hero h1 .gradient-text { background: linear-gradient(135deg, #db2777 0%, #E1306C 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n\r\n.digital-hero p { font-family: 'Inter', sans-serif; font-size: 20px; line-height: 1.6; color: rgba(255,255,255,0.7); max-width: 800px; margin: 0 auto 50px auto; animation: fadeInUp 1s ease 0.4s forwards; opacity: 0; }\r\n\r\n@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }\r\n\r\n.digital-hero-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; animation: fadeInUp 1.2s ease 0.6s forwards; opacity: 0; }\r\n.digital-hero-btn { padding: 18px 40px; border-radius: 50px; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; cursor: pointer; border: none; }\r\n.digital-hero-btn-primary { background: linear-gradient(135deg, #5A2D82 0%, #db2777 100%); color: white; box-shadow: 0 10px 30px rgba(90,45,130,0.3); }\r\n.digital-hero-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(90,45,130,0.5); }\r\n.digital-hero-btn-secondary { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.2); }\r\n.digital-hero-btn-secondary:hover { border-color: #5A2D82; background: rgba(90,45,130,0.1); }\r\n\r\n\/* New interactive terminal design *\/\r\n.digital-hero-terminal { position: relative; margin-top: 80px; animation: fadeInUp 1.4s ease 0.8s forwards; opacity: 0; }\r\n.digital-terminal { position: relative; max-width: 900px; margin: 0 auto; background: #0d1117; border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid rgba(90,45,130,0.3); overflow: hidden; }\r\n.digital-terminal-header { display: flex; align-items: center; padding: 12px 16px; background: #161b22; border-bottom: 1px solid #30363d; }\r\n.digital-terminal-dots { display: flex; gap: 8px; }\r\n.digital-terminal-dot { width: 12px; height: 12px; border-radius: 50%; }\r\n.digital-terminal-dot.red { background: #ff5f56; }\r\n.digital-terminal-dot.yellow { background: #ffbd2e; }\r\n.digital-terminal-dot.green { background: #27c93f; }\r\n.digital-terminal-title { flex: 1; text-align: center; font-family: 'Inter', sans-serif; font-size: 13px; color: #8b949e; }\r\n.digital-terminal-body { padding: 24px; min-height: 280px; font-family: 'Fira Code', 'Courier New', monospace; font-size: 14px; line-height: 1.8; }\r\n\r\n\/* Terminal lines *\/\r\n.terminal-line { display: flex; margin-bottom: 8px; opacity: 0; animation: typeIn 0.5s ease forwards; }\r\n.terminal-line:nth-child(1) { animation-delay: 0.5s; }\r\n.terminal-line:nth-child(2) { animation-delay: 1.5s; }\r\n.terminal-line:nth-child(3) { animation-delay: 2.5s; }\r\n.terminal-line:nth-child(4) { animation-delay: 3.5s; }\r\n.terminal-line:nth-child(5) { animation-delay: 4.5s; }\r\n.terminal-line:nth-child(6) { animation-delay: 5.5s; }\r\n.terminal-line:nth-child(7) { animation-delay: 6.5s; }\r\n.terminal-line:nth-child(8) { animation-delay: 7.5s; }\r\n\r\n@keyframes typeIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }\r\n\r\n.terminal-prompt { color: #7ee787; margin-right: 10px; }\r\n.terminal-command { color: #79c0ff; }\r\n.terminal-output { color: #8b949e; padding-left: 20px; }\r\n.terminal-success { color: #3fb950; }\r\n.terminal-highlight { color: #db2777; }\r\n.terminal-comment { color: #6e7681; font-style: italic; }\r\n\r\n\/* Blinking cursor *\/\r\n.terminal-cursor { display: inline-block; width: 10px; height: 18px; background: #7ee787; margin-left: 4px; animation: blink 1s step-end infinite; vertical-align: middle; }\r\n@keyframes blink { 50% { opacity: 0; } }\r\n\r\n\/* Progress bar animation *\/\r\n.terminal-progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; opacity: 0; animation: typeIn 0.5s ease 8s forwards; }\r\n.progress-bar { width: 200px; height: 6px; background: #30363d; border-radius: 3px; overflow: hidden; }\r\n.progress-fill { height: 100%; background: linear-gradient(90deg, #5A2D82, #db2777); width: 0%; animation: fillProgress 2s ease 8.5s forwards; }\r\n@keyframes fillProgress { to { width: 100%; } }\r\n.progress-text { color: #3fb950; font-size: 12px; }\r\n\r\n\/* Live status indicators *\/\r\n.terminal-status { display: flex; gap: 20px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #30363d; opacity: 0; animation: typeIn 0.5s ease 10s forwards; }\r\n.status-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #8b949e; }\r\n.status-dot { width: 8px; height: 8px; border-radius: 50%; animation: statusPulse 2s ease infinite; }\r\n.status-dot.live { background: #3fb950; }\r\n.status-dot.building { background: #f0883e; animation: statusBlink 0.5s ease infinite; }\r\n@keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }\r\n@keyframes statusBlink { 50% { opacity: 0.3; } }\r\n\r\n@media (max-width: 768px) {\r\n  .digital-hero { min-height: 90vh; padding: 80px 20px; }\r\n  .digital-hero h1 { font-size: 40px; }\r\n  .digital-hero p { font-size: 16px; }\r\n  .digital-hero-buttons { flex-direction: column; width: 100%; }\r\n  .digital-hero-btn { width: 100%; }\r\n  .digital-terminal { margin: 0 -10px; }\r\n  .digital-terminal-body { padding: 16px; font-size: 11px; min-height: 250px; }\r\n  .terminal-status { flex-wrap: wrap; gap: 10px; }\r\n}\r\n<\/style><div class=\"digital-hero\"><div class=\"digital-hero-bg\"><div class=\"digital-hero-grid\"><\/div><div class=\"digital-hero-orb\"><\/div><div class=\"digital-hero-orb\"><\/div><div class=\"digital-hero-code\">&lt;html&gt;\r\n  &lt;body&gt;\r\n    &lt;div className=\"brand\"&gt;<\/div><div class=\"digital-hero-code\">const build = () => {\r\n  return &lt;Experience \/&gt;\r\n}<\/div><div class=\"digital-hero-code\">function App() {\r\n  const [success, setSuccess]\r\n  return &lt;Digital \/&gt;\r\n}<\/div><div class=\"digital-hero-code\">import React from 'react'\r\nexport default Brand<\/div><\/div><div class=\"digital-hero-content\"><div class=\"digital-hero-badge\"><div class=\"digital-hero-badge-dot\"><\/div>\u0627\u0644\u062d\u0644\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a\u0629\r\n    <\/div><h1>\u062d\u0644\u0648\u0644 \u0631\u0642\u0645\u064a\u0629 <span class=\"gradient-text\">\u062a\u062f\u0639\u0645 \u0639\u0644\u0627\u0645\u062a\u0643<\/span><\/h1><p>\u0645\u0648\u0627\u0642\u0639 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\u060c \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u062c\u0648\u0627\u0644\u060c \u0648\u062a\u062c\u0627\u0631\u0628 \u0631\u0642\u0645\u064a\u0629 \u062a\u064f\u0635\u0645\u0651\u064e\u0645 \u0644\u0631\u0641\u0639 \u0642\u064a\u0645\u0629 \u0639\u0644\u0627\u0645\u062a\u0643\u060c \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0623\u062f\u0627\u0621\u060c \u0648\u062a\u062d\u0642\u064a\u0642 \u0646\u062a\u0627\u0626\u062c \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u0642\u064a\u0627\u0633.\r\n    <\/p><div class=\"digital-hero-buttons\"><a href=\"https:\/\/wa.me\/966567069088\" class=\"digital-hero-btn digital-hero-btn-primary\" target=\"_blank\" rel=\"noopener\">\u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643<\/a><\/div><!-- Interactive Terminal with typing animation --><div class=\"digital-hero-terminal\"><div class=\"digital-terminal\"><div class=\"digital-terminal-header\"><div class=\"digital-terminal-dots\"><div class=\"digital-terminal-dot red\"><\/div><div class=\"digital-terminal-dot yellow\"><\/div><div class=\"digital-terminal-dot green\"><\/div><\/div><div class=\"digital-terminal-title\">\u0627\u0644\u0637\u0631\u0642\u064a\u0629 \u2014 thetouch-project<\/div><\/div><div class=\"digital-terminal-body\"><div class=\"terminal-line\"><span class=\"terminal-prompt\">$<\/span><span class=\"terminal-command\">npx create-thetouch-app your-brand<\/span><\/div><div class=\"terminal-line\"><span class=\"terminal-output\">\u062c\u0627\u0631\u064a \u0625\u0646\u0634\u0627\u0621 \u0645\u0634\u0631\u0648\u0639 \u062c\u062f\u064a\u062f \u062f\u0627\u062e\u0644 .\/your-brand<\/span><\/div><div class=\"terminal-line\"><span class=\"terminal-output terminal-comment\"># \u062c\u0627\u0631\u064a \u062a\u062b\u0628\u064a\u062a \u0627\u0644\u0645\u062a\u0637\u0644\u0628\u0627\u062a...<\/span><\/div><div class=\"terminal-line\"><span class=\"terminal-success\">\u2713<\/span><span class=\"terminal-output\"> \u062a\u0645\u062a \u0625\u0636\u0627\u0641\u0629 <span class=\"terminal-highlight\">\u0646\u0638\u0627\u0645 \u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/span><\/span><\/div><div class=\"terminal-line\"><span class=\"terminal-success\">\u2713<\/span><span class=\"terminal-output\"> \u062a\u0645\u062a \u0625\u0636\u0627\u0641\u0629 <span class=\"terminal-highlight\">\u0648\u0627\u062c\u0647\u0629 \u0645\u062a\u062c\u0627\u0648\u0628\u0629<\/span><\/span><\/div><div class=\"terminal-line\"><span class=\"terminal-success\">\u2713<\/span><span class=\"terminal-output\"> \u062a\u0645\u062a \u0625\u0636\u0627\u0641\u0629 <span class=\"terminal-highlight\">\u0645\u062d\u0633\u0651\u0646 \u0627\u0644\u0623\u062f\u0627\u0621<\/span><\/span><\/div><div class=\"terminal-line\"><span class=\"terminal-success\">\u2713<\/span><span class=\"terminal-output\"> \u062a\u0645\u062a \u0625\u0636\u0627\u0641\u0629 <span class=\"terminal-highlight\">\u062d\u0632\u0645\u0629 SEO<\/span><\/span><\/div><div class=\"terminal-line\"><span class=\"terminal-prompt\">$<\/span><span class=\"terminal-command\">npm run deploy<\/span><span class=\"terminal-cursor\"><\/span><\/div><div class=\"terminal-progress\"><div class=\"progress-bar\"><div class=\"progress-fill\"><\/div><\/div><span class=\"progress-text\">\u062c\u0627\u0631\u064a \u0627\u0644\u0646\u0634\u0631...<\/span><\/div><div class=\"terminal-status\"><div class=\"status-item\"><div class=\"status-dot live\"><\/div><span>\u0627\u0644\u0645\u0648\u0642\u0639: \u0645\u0628\u0627\u0634\u0631<\/span><\/div><div class=\"status-item\"><div class=\"status-dot live\"><\/div><span>\u0627\u0644\u0623\u062f\u0627\u0621: 98\/100<\/span><\/div><div class=\"status-item\"><div class=\"status-dot live\"><\/div><span>SEO: \u0645\u064f\u062d\u0633\u0651\u0646<\/span><\/div><div class=\"status-item\"><div class=\"status-dot building\"><\/div><span>\u0627\u0644\u062a\u062d\u0644\u064a\u0644\u0627\u062a: \u0645\u062a\u0635\u0644\u0629<\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div><script>(function() {\r\n  const observer = new IntersectionObserver((entries) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        entry.target.style.animationPlayState = 'running';\r\n      }\r\n    });\r\n  }, { threshold: 0.1 });\r\n  \r\n  document.querySelectorAll('.digital-hero-content > *').forEach(el => observer.observe(el));\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-20590a3 e-con-full e-flex e-con e-parent\" data-id=\"20590a3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38df15a elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"38df15a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n.digital-what { position: relative; padding: 140px 20px; background: #ffffff; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; box-sizing: border-box; margin-top: -1px; margin-bottom: -1px; overflow: hidden; }\r\n\r\n.digital-what-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }\r\n\r\n\/* Split Layout *\/\r\n.digital-what-split { display: flex; align-items: center; gap: 80px; }\r\n\r\n\/* Left Side - Text *\/\r\n.digital-what-text { flex: 1; }\r\n\r\n\/* Animation classes for text elements *\/\r\n.digital-what-label { display: inline-flex; align-items: center; gap: 10px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #5A2D82; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 30px; opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }\r\n.digital-what-label.visible { opacity: 1; transform: translateY(0); }\r\n.digital-what-label::before { content: ''; width: 40px; height: 2px; background: linear-gradient(90deg, #5A2D82, #E1306C); }\r\n\r\n.digital-what h2 { font-family: 'Playfair Display', serif; font-size: 56px; font-weight: 700; color: #0a0a0a; margin: 0 0 30px 0; line-height: 1.15; opacity: 0; transform: translateY(40px) scale(0.95); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }\r\n.digital-what h2.visible { opacity: 1; transform: translateY(0) scale(1); }\r\n.digital-what h2 .highlight { color: #5A2D82; display: inline-block; animation: highlightPulse 3s ease-in-out infinite; }\r\n@keyframes highlightPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }\r\n\r\n.digital-what-desc { font-family: 'Inter', sans-serif; font-size: 18px; line-height: 1.8; color: #555; margin: 0; opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s; }\r\n.digital-what-desc.visible { opacity: 1; transform: translateY(0); }\r\n\r\n\/* Right Side - Visual *\/\r\n.digital-what-visual { flex: 1; position: relative; opacity: 0; transform: translateX(50px) scale(0.9); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; }\r\n.digital-what-visual.visible { opacity: 1; transform: translateX(0) scale(1); }\r\n\r\n\/* Browser Window *\/\r\n.browser-window { background: #1a1a1a; border-radius: 16px; overflow: hidden; box-shadow: 0 50px 100px rgba(0,0,0,0.15); transform: perspective(1000px) rotateY(-5deg) rotateX(2deg); transition: transform 0.5s ease; }\r\n.browser-window:hover { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); }\r\n\r\n.browser-header { background: #2a2a2a; padding: 15px 20px; display: flex; align-items: center; gap: 10px; }\r\n.browser-dots { display: flex; gap: 8px; }\r\n.browser-dot { width: 12px; height: 12px; border-radius: 50%; }\r\n.browser-dot:nth-child(1) { background: #ff5f57; }\r\n.browser-dot:nth-child(2) { background: #ffbd2e; }\r\n.browser-dot:nth-child(3) { background: #28ca42; }\r\n.browser-url { flex: 1; margin-left: 15px; background: #1a1a1a; border-radius: 6px; padding: 8px 15px; font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255,255,255,0.5); }\r\n\r\n.browser-content { padding: 30px; min-height: 300px; position: relative; overflow: hidden; }\r\n\r\n\/* Animated Code Lines *\/\r\n.code-lines { display: flex; flex-direction: column; gap: 12px; }\r\n.code-line { display: flex; align-items: center; gap: 15px; opacity: 0; transform: translateX(-30px); }\r\n.digital-what-visual.visible .code-line { animation: typeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }\r\n.digital-what-visual.visible .code-line:nth-child(1) { animation-delay: 0.5s; }\r\n.digital-what-visual.visible .code-line:nth-child(2) { animation-delay: 0.7s; }\r\n.digital-what-visual.visible .code-line:nth-child(3) { animation-delay: 0.9s; }\r\n.digital-what-visual.visible .code-line:nth-child(4) { animation-delay: 1.1s; }\r\n.digital-what-visual.visible .code-line:nth-child(5) { animation-delay: 1.3s; }\r\n.digital-what-visual.visible .code-line:nth-child(6) { animation-delay: 1.5s; }\r\n\r\n@keyframes typeIn { \r\n  0% { opacity: 0; transform: translateX(-30px); } \r\n  100% { opacity: 1; transform: translateX(0); } \r\n}\r\n\r\n.line-number { font-family: 'Courier New', monospace; font-size: 13px; color: rgba(255,255,255,0.3); min-width: 25px; }\r\n.line-code { font-family: 'Courier New', monospace; font-size: 14px; }\r\n.code-purple { color: #C792EA; }\r\n.code-blue { color: #82AAFF; }\r\n.code-green { color: #C3E88D; }\r\n.code-orange { color: #FFCB6B; }\r\n.code-white { color: rgba(255,255,255,0.9); }\r\n.code-gray { color: rgba(255,255,255,0.4); }\r\n\r\n\/* Floating Elements *\/\r\n.floating-badge { position: absolute; background: white; border-radius: 12px; padding: 15px 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 12px; opacity: 0; }\r\n.floating-badge-1 { top: -30px; right: -20px; }\r\n.floating-badge-2 { bottom: 50px; left: -40px; }\r\n\r\n\/* Floating badges appear with zoom effect *\/\r\n.digital-what-visual.visible .floating-badge-1 { animation: zoomInBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards; }\r\n.digital-what-visual.visible .floating-badge-2 { animation: zoomInBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s forwards; }\r\n\r\n@keyframes zoomInBounce { \r\n  0% { opacity: 0; transform: scale(0) translateY(20px); } \r\n  100% { opacity: 1; transform: scale(1) translateY(0); } \r\n}\r\n\r\n\/* Continuous float animation after appearing *\/\r\n.digital-what-visual.visible .floating-badge-1 { animation: zoomInBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards, floatBadge 4s ease-in-out 1.8s infinite; }\r\n.digital-what-visual.visible .floating-badge-2 { animation: zoomInBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s forwards, floatBadge 4s ease-in-out 2.1s infinite; }\r\n\r\n@keyframes floatBadge { \r\n  0%, 100% { transform: translateY(0); } \r\n  50% { transform: translateY(-15px); } \r\n}\r\n\r\n.badge-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }\r\n.badge-icon-purple { background: linear-gradient(135deg, #5A2D82, #E1306C); }\r\n.badge-icon-green { background: linear-gradient(135deg, #28ca42, #20a83a); }\r\n.badge-icon svg { width: 20px; height: 20px; color: white; }\r\n.badge-text { font-family: 'Inter', sans-serif; }\r\n.badge-title { font-size: 14px; font-weight: 600; color: #0a0a0a; }\r\n.badge-sub { font-size: 12px; color: #888; }\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 1024px) {\r\n  .digital-what { padding: 100px 20px; }\r\n  .digital-what-split { gap: 50px; }\r\n  .digital-what h2 { font-size: 42px; }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .digital-what { padding: 70px 15px; }\r\n  .digital-what-split { flex-direction: column; gap: 50px; }\r\n  .digital-what-text { text-align: center; }\r\n  .digital-what h2 { font-size: 32px; }\r\n  .digital-what-desc { font-size: 16px; }\r\n  .browser-window { transform: none; }\r\n  .browser-window:hover { transform: none; }\r\n  .floating-badge { display: none; }\r\n  .browser-content { padding: 20px; min-height: 250px; }\r\n  .code-line { gap: 10px; }\r\n  .line-code { font-size: 12px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"digital-what\">\r\n  <div class=\"digital-what-container\">\r\n    <div class=\"digital-what-split\">\r\n\r\n      <!-- Left Side - Text -->\r\n      <div class=\"digital-what-text\">\r\n        <div class=\"digital-what-label digital-what-animate\">\u0645\u0627\u0630\u0627 \u0646\u0642\u062f\u0645<\/div>\r\n\r\n        <h2 class=\"digital-what-animate\">\r\n          \u0646\u062d\u0648\u0644 \u0627\u0644\u0623\u0641\u0643\u0627\u0631 \u0625\u0644\u0649 <span class=\"highlight\">\u0648\u0627\u0642\u0639 \u0631\u0642\u0645\u064a<\/span>\r\n        <\/h2>\r\n\r\n        <p class=\"digital-what-desc digital-what-animate\">\r\n          \u0645\u0646 \u0627\u0644\u0641\u0643\u0631\u0629 \u0625\u0644\u0649 \u0627\u0644\u0625\u0637\u0644\u0627\u0642\u060c \u0646\u0635\u0645\u0645 \u0645\u0648\u0627\u0642\u0639 \u0648\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0644\u0627 \u062a\u0643\u062a\u0641\u064a \u0628\u0627\u0644\u0645\u0638\u0647\u0631 \u0627\u0644\u062c\u0645\u064a\u0644\u060c\r\n          \u0628\u0644 \u062a\u062d\u0642\u0642 \u0623\u062f\u0627\u0621\u064b \u0639\u0627\u0644\u064a\u064b\u0627\u060c \u0648\u062a\u062d\u0641\u0651\u0632 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u060c \u0648\u062a\u0643\u0628\u0631 \u0645\u0639 \u0646\u0645\u0648 \u0623\u0639\u0645\u0627\u0644\u0643.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <!-- Right Side - Visual -->\r\n      <div class=\"digital-what-visual digital-what-animate\">\r\n\r\n        <!-- Floating Badge 1 -->\r\n        <div class=\"floating-badge floating-badge-1\">\r\n          <div class=\"badge-icon badge-icon-green\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M20 6L9 17l-5-5\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"badge-text\">\r\n            <div class=\"badge-title\">\u062a\u0645 \u0627\u0644\u0625\u0637\u0644\u0627\u0642<\/div>\r\n            <div class=\"badge-sub\">\u0642\u0628\u0644 \u0644\u062d\u0638\u0627\u062a<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Browser Window -->\r\n        <div class=\"browser-window\">\r\n          <div class=\"browser-header\">\r\n            <div class=\"browser-dots\">\r\n              <div class=\"browser-dot\"><\/div>\r\n              <div class=\"browser-dot\"><\/div>\r\n              <div class=\"browser-dot\"><\/div>\r\n            <\/div>\r\n            <div class=\"browser-url\">thetouch.sa\/your-project<\/div>\r\n          <\/div>\r\n\r\n          <div class=\"browser-content\">\r\n            <div class=\"code-lines\">\r\n              <div class=\"code-line\">\r\n                <span class=\"line-number\">1<\/span>\r\n                <span class=\"line-code\">\r\n                  <span class=\"code-purple\">const<\/span>\r\n                  <span class=\"code-blue\">project<\/span>\r\n                  <span class=\"code-white\">=<\/span>\r\n                  <span class=\"code-orange\">\"\u0639\u0644\u0627\u0645\u062a\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629\"<\/span><span class=\"code-white\">;<\/span>\r\n                <\/span>\r\n              <\/div>\r\n\r\n              <div class=\"code-line\">\r\n                <span class=\"line-number\">2<\/span>\r\n                <span class=\"line-code\">\r\n                  <span class=\"code-purple\">const<\/span>\r\n                  <span class=\"code-blue\">status<\/span>\r\n                  <span class=\"code-white\">=<\/span>\r\n                  <span class=\"code-green\">\"\u0645\u0628\u0627\u0634\u0631\"<\/span><span class=\"code-white\">;<\/span>\r\n                <\/span>\r\n              <\/div>\r\n\r\n              <div class=\"code-line\">\r\n                <span class=\"line-number\">3<\/span>\r\n                <span class=\"line-code\">\r\n                  <span class=\"code-purple\">const<\/span>\r\n                  <span class=\"code-blue\">performance<\/span>\r\n                  <span class=\"code-white\">=<\/span>\r\n                  <span class=\"code-green\">\"\u0645\u062d\u0633\u0651\u0646\"<\/span><span class=\"code-white\">;<\/span>\r\n                <\/span>\r\n              <\/div>\r\n\r\n              <div class=\"code-line\">\r\n                <span class=\"line-number\">4<\/span>\r\n                <span class=\"line-code\"><\/span>\r\n              <\/div>\r\n\r\n              <div class=\"code-line\">\r\n                <span class=\"line-number\">5<\/span>\r\n                <span class=\"line-code\">\r\n                  <span class=\"code-gray\">\/\/ \u0646\u062c\u0627\u062d\u0643 \u064a\u0628\u062f\u0623 \u0645\u0646 \u0647\u0646\u0627<\/span>\r\n                <\/span>\r\n              <\/div>\r\n\r\n              <div class=\"code-line\">\r\n                <span class=\"line-number\">6<\/span>\r\n                <span class=\"line-code\">\r\n                  <span class=\"code-blue\">launch<\/span><span class=\"code-white\">(<\/span>\r\n                  <span class=\"code-blue\">project<\/span><span class=\"code-white\">);<\/span>\r\n                  <span class=\"code-green\">\u2713<\/span>\r\n                <\/span>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Floating Badge 2 -->\r\n        <div class=\"floating-badge floating-badge-2\">\r\n          <div class=\"badge-icon badge-icon-purple\">\r\n            <svg 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          <div class=\"badge-text\">\r\n            <div class=\"badge-title\">\u062a\u0642\u064a\u064a\u0645 100%<\/div>\r\n            <div class=\"badge-sub\">\u0627\u0644\u0623\u062f\u0627\u0621<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n  const observer = new IntersectionObserver((entries) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        entry.target.classList.add('visible');\r\n      }\r\n    });\r\n  }, { threshold: 0.2 });\r\n\r\n  document.querySelectorAll('.digital-what-animate').forEach(el => observer.observe(el));\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61aaa65 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"61aaa65\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n.digital-capabilities { position: relative; padding: 120px 20px; background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 100%); width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; box-sizing: border-box; margin-top: -1px; margin-bottom: -1px; overflow: hidden; }\r\n\r\n.digital-capabilities-bg { position: absolute; inset: 0; opacity: 0.05; }\r\n.digital-capabilities-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(90,45,130,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(90,45,130,0.1) 1px, transparent 1px); background-size: 50px 50px; }\r\n\r\n.digital-capabilities-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }\r\n\r\n.digital-capabilities-header { text-align: center; margin-bottom: 80px; }\r\n.digital-capabilities-label { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #db2777; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }\r\n.digital-capabilities h2 { font-family: 'Playfair Display', serif; font-size: 56px; font-weight: 700; color: white; margin: 0 0 30px 0; line-height: 1.2; }\r\n.digital-capabilities h2 .gradient-text { background: linear-gradient(135deg, #ffffff 0%, #db2777 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n\r\n.digital-capabilities-grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }\r\n\r\n.digital-capability-card { background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 40px; transition: all 0.3s ease; position: relative; overflow: hidden; opacity: 0; animation: fadeInUp 0.8s ease forwards; }\r\n.digital-capability-card:nth-child(1) { animation-delay: 0.1s; }\r\n.digital-capability-card:nth-child(2) { animation-delay: 0.2s; }\r\n.digital-capability-card:nth-child(3) { animation-delay: 0.3s; }\r\n.digital-capability-card:nth-child(4) { animation-delay: 0.4s; }\r\n.digital-capability-card:nth-child(5) { animation-delay: 0.5s; }\r\n.digital-capability-card:nth-child(6) { animation-delay: 0.6s; }\r\n\r\n.digital-capability-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #5A2D82 0%, #db2777 100%); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }\r\n.digital-capability-card:hover::before { transform: scaleX(1); }\r\n.digital-capability-card:hover { transform: translateY(-5px); background: rgba(255,255,255,0.08); border-color: rgba(90,45,130,0.5); }\r\n\r\n.digital-capability-num { font-family: 'Inter', sans-serif; font-size: 80px; font-weight: 800; color: rgba(90,45,130,0.2); line-height: 1; margin-bottom: 20px; }\r\n\r\n.digital-capability-icon { width: 60px; height: 60px; background: linear-gradient(135deg, #5A2D82 0%, #db2777 100%); border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; }\r\n.digital-capability-icon svg { width: 30px; height: 30px; stroke: white; fill: none; stroke-width: 2; }\r\n\r\n.digital-capability-card h3 { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 600; color: white; margin: 0 0 15px 0; }\r\n.digital-capability-card p { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.7); margin: 0; }\r\n\r\n@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }\r\n\r\n@media (max-width: 968px) {\r\n  .digital-capabilities { padding: 80px 20px; }\r\n  .digital-capabilities h2 { font-size: 40px; }\r\n  .digital-capabilities-grid-container { grid-template-columns: repeat(2, 1fr); gap: 20px; }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  .digital-capabilities-grid-container { grid-template-columns: 1fr; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"digital-capabilities\">\r\n  <div class=\"digital-capabilities-bg\">\r\n    <div class=\"digital-capabilities-grid\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"digital-capabilities-container\">\r\n    <div class=\"digital-capabilities-header\">\r\n      <div class=\"digital-capabilities-label\">\u0642\u062f\u0631\u0627\u062a\u0646\u0627 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/div>\r\n      <h2>\u062e\u0628\u0631\u0627\u062a <span class=\"gradient-text\">\u062a\u062d\u0642\u0642 \u0627\u0644\u0646\u062a\u0627\u0626\u062c<\/span><\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"digital-capabilities-grid-container\">\r\n\r\n      <div class=\"digital-capability-card\">\r\n        <div class=\"digital-capability-num\">01<\/div>\r\n        <div class=\"digital-capability-icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/>\r\n            <path d=\"M3 9h18\"\/>\r\n            <path d=\"M9 21V9\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>\u062a\u0635\u0645\u064a\u0645 \u062a\u062c\u0631\u0628\u0629 \u0648\u0648\u0627\u062c\u0647\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645<\/h3>\r\n        <p>\u0631\u062d\u0644\u0627\u062a \u0631\u0642\u0645\u064a\u0629 \u062a\u062a\u0645\u062d\u0648\u0631 \u062d\u0648\u0644 \u0627\u0644\u0625\u0646\u0633\u0627\u0646\u060c \u062a\u0639\u0643\u0633 \u0647\u0648\u064a\u0629 \u0639\u0644\u0627\u0645\u062a\u0643 \u0648\u062a\u064f\u062d\u0633\u0651\u0646 \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0648\u062a\u062f\u0641\u0642 \u0627\u0644\u062a\u0641\u0627\u0639\u0644.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"digital-capability-card\">\r\n        <div class=\"digital-capability-num\">02<\/div>\r\n        <div class=\"digital-capability-icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l5.586 5.586M9 9l5.586 5.586\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/h3>\r\n        <p>\u0645\u0648\u0627\u0642\u0639 \u0633\u0631\u064a\u0639\u0629 \u0648\u0622\u0645\u0646\u0629 \u0648\u0645\u062a\u062c\u0627\u0648\u0628\u0629\u060c \u0645\u0635\u0645\u0645\u0629 \u0644\u062a\u062d\u0642\u064a\u0642 \u0627\u0644\u0646\u062a\u0627\u0626\u062c \u0648\u0627\u0644\u0646\u0645\u0648 \u0645\u0639 \u062a\u0648\u0633\u0651\u0639 \u0623\u0639\u0645\u0627\u0644\u0643.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"digital-capability-card\">\r\n        <div class=\"digital-capability-num\">03<\/div>\r\n        <div class=\"digital-capability-icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\"\/>\r\n            <path d=\"M12 18h.01\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>\u062a\u0637\u0648\u064a\u0631 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u062c\u0648\u0627\u0644<\/h3>\r\n        <p>\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0623\u0635\u0644\u064a\u0629 \u0648\u0645\u062a\u0639\u062f\u062f\u0629 \u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0628\u0648\u0627\u062c\u0647\u0627\u062a \u0633\u0647\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0648\u0648\u0638\u0627\u0626\u0641 \u0642\u0648\u064a\u0629.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"digital-capability-card\">\r\n        <div class=\"digital-capability-num\">04<\/div>\r\n        <div class=\"digital-capability-icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <circle cx=\"9\" cy=\"21\" r=\"1\"\/>\r\n            <circle cx=\"20\" cy=\"21\" r=\"1\"\/>\r\n            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>\u062d\u0644\u0648\u0644 \u0627\u0644\u062a\u062c\u0627\u0631\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/h3>\r\n        <p>\u0645\u062a\u0627\u062c\u0631 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u062a\u062d\u0648\u064a\u0644\u060c \u0645\u062d\u0633\u0651\u0646\u0629 \u0644\u0644\u0645\u0628\u064a\u0639\u0627\u062a \u0648\u0627\u0644\u0633\u0631\u0639\u0629 \u0648\u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0639\u0645\u0644\u0627\u0621.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"digital-capability-card\">\r\n        <div class=\"digital-capability-num\">05<\/div>\r\n        <div class=\"digital-capability-icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\r\n            <path d=\"M21 21l-4.35-4.35\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>\u062a\u062d\u0633\u064a\u0646 \u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0623\u062f\u0627\u0621<\/h3>\r\n        <p>\u062a\u062d\u0633\u064a\u0646 \u062a\u0642\u0646\u064a \u0634\u0627\u0645\u0644\u060c \u0648\u0636\u0628\u0637 \u0627\u0644\u0645\u062d\u062a\u0648\u0649\u060c \u0648\u062a\u0633\u0631\u064a\u0639 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0644\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0638\u0647\u0648\u0631 \u0648\u0627\u0644\u062a\u0631\u062a\u064a\u0628.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"digital-capability-card\">\r\n        <div class=\"digital-capability-num\">06<\/div>\r\n        <div class=\"digital-capability-icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <polyline points=\"16 18 22 12 16 6\"\/>\r\n            <polyline points=\"8 6 2 12 8 18\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>\u062a\u0643\u0627\u0645\u0644 \u0627\u0644\u0623\u0646\u0638\u0645\u0629 \u0648\u0627\u0644\u0623\u062a\u0645\u062a\u0629<\/h3>\r\n        <p>\u0631\u0628\u0637 \u0627\u0644\u0623\u0646\u0638\u0645\u0629\u060c \u0648\u0623\u0646\u0638\u0645\u0629 CRM\u060c \u0648\u0627\u0644\u062f\u0641\u0639\u060c \u0648\u0623\u062f\u0648\u0627\u062a \u0627\u0644\u0623\u0639\u0645\u0627\u0644 \u0644\u062a\u0634\u063a\u064a\u0644 \u0633\u0644\u0633 \u0648\u0645\u062a\u0643\u0627\u0645\u0644.<\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n  const observer = new IntersectionObserver((entries) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        entry.target.style.animationPlayState = 'running';\r\n      }\r\n    });\r\n  }, { threshold: 0.1 });\r\n\r\n  document.querySelectorAll('.digital-capability-card').forEach(el => observer.observe(el));\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5d1ba6a e-flex e-con-boxed e-con e-parent\" data-id=\"5d1ba6a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f7f5e9f elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"f7f5e9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n.digital-tech { position: relative; padding: 120px 20px; background: linear-gradient(180deg, #0a0a0a 0%, #1a0a2e 100%); width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; box-sizing: border-box; margin-top: -1px; margin-bottom: -1px; overflow: hidden; }\r\n\r\n\/* Background decorations *\/\r\n.digital-tech-bg { position: absolute; inset: 0; overflow: hidden; }\r\n.digital-tech-orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.3; }\r\n.digital-tech-orb:nth-child(1) { width: 400px; height: 400px; background: #5A2D82; top: -100px; left: -100px; }\r\n.digital-tech-orb:nth-child(2) { width: 300px; height: 300px; background: #db2777; bottom: -100px; right: -100px; }\r\n\r\n.digital-tech-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }\r\n\r\n.digital-tech-header { text-align: center; margin-bottom: 80px; }\r\n.digital-tech-label { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #db2777; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; display: inline-block; padding: 8px 20px; background: rgba(219,39,119,0.1); border: 1px solid rgba(219,39,119,0.2); border-radius: 50px; }\r\n.digital-tech h2 { font-family: 'Playfair Display', serif; font-size: 56px; font-weight: 700; color: #ffffff; margin: 0 0 30px 0; line-height: 1.2; }\r\n.digital-tech h2 .gradient-text { background: linear-gradient(135deg, #db2777 0%, #E1306C 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n\r\n\/* New animated tech grid with SVG icons *\/\r\n.digital-tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }\r\n\r\n.digital-tech-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 40px 30px; text-align: center; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; transform: translateY(30px); position: relative; overflow: hidden; }\r\n\r\n.digital-tech-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #5A2D82, #db2777); transform: scaleX(0); transition: transform 0.4s ease; }\r\n\r\n.digital-tech-item:hover { transform: translateY(-10px); background: rgba(255,255,255,0.08); border-color: rgba(90,45,130,0.5); box-shadow: 0 20px 40px rgba(90,45,130,0.2); }\r\n.digital-tech-item:hover::before { transform: scaleX(1); }\r\n.digital-tech-item:hover .digital-tech-icon { transform: scale(1.1) rotateY(360deg); }\r\n.digital-tech-item:hover .digital-tech-icon svg { filter: drop-shadow(0 0 20px currentColor); }\r\n\r\n\/* SVG Icon container with animations *\/\r\n.digital-tech-icon { width: 80px; height: 80px; margin: 0 auto 24px auto; display: flex; align-items: center; justify-content: center; transition: all 0.6s ease; }\r\n.digital-tech-icon svg { width: 60px; height: 60px; transition: all 0.4s ease; }\r\n\r\n\/* Individual icon colors *\/\r\n.icon-react { color: #61DAFB; }\r\n.icon-mobile { color: #3DDC84; }\r\n.icon-wordpress { color: #21759B; }\r\n.icon-shopify { color: #7AB55C; }\r\n.icon-figma { color: #F24E1E; }\r\n.icon-node { color: #339933; }\r\n.icon-seo { color: #4285F4; }\r\n.icon-cloud { color: #FF9900; }\r\n\r\n.digital-tech-item h3 { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; color: #ffffff; margin: 0 0 10px 0; }\r\n.digital-tech-item p { font-family: 'Inter', sans-serif; font-size: 14px; color: rgba(255,255,255,0.6); margin: 0; }\r\n\r\n\/* Floating particles *\/\r\n.tech-particle { position: absolute; width: 4px; height: 4px; background: #5A2D82; border-radius: 50%; opacity: 0; }\r\n.digital-tech-item:hover .tech-particle { animation: particleFloat 1s ease forwards; }\r\n.tech-particle:nth-child(1) { top: 20%; left: 20%; animation-delay: 0s; }\r\n.tech-particle:nth-child(2) { top: 30%; right: 20%; animation-delay: 0.1s; }\r\n.tech-particle:nth-child(3) { bottom: 30%; left: 30%; animation-delay: 0.2s; }\r\n.tech-particle:nth-child(4) { bottom: 20%; right: 30%; animation-delay: 0.3s; }\r\n\r\n@keyframes particleFloat { 0% { opacity: 0; transform: translateY(0) scale(0); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px) scale(1.5); } }\r\n\r\n@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }\r\n\r\n.digital-tech-item.visible { animation: fadeInUp 0.8s ease forwards; }\r\n\r\n@media (max-width: 968px) {\r\n  .digital-tech { padding: 80px 20px; }\r\n  .digital-tech h2 { font-size: 40px; }\r\n  .digital-tech-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  .digital-tech-grid { grid-template-columns: 1fr; }\r\n  .digital-tech-item { padding: 30px 20px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"digital-tech\">\r\n  <div class=\"digital-tech-bg\">\r\n    <div class=\"digital-tech-orb\"><\/div>\r\n    <div class=\"digital-tech-orb\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"digital-tech-container\">\r\n    <div class=\"digital-tech-header\">\r\n      <div class=\"digital-tech-label\">\u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u062a\u064a \u0646\u062a\u0642\u0646\u0647\u0627<\/div>\r\n      <h2>\u0645\u062f\u0639\u0648\u0645\u0648\u0646 \u0628\u0640 <span class=\"gradient-text\">\u062a\u0642\u0646\u064a\u0627\u062a \u062d\u062f\u064a\u062b\u0629<\/span><\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"digital-tech-grid\">\r\n      <!-- React & Next.js -->\r\n      <div class=\"digital-tech-item\">\r\n        <div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div>\r\n        <div class=\"digital-tech-icon icon-react\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <path d=\"M12 13.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z\"\/>\r\n            <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" d=\"M12 21c5.523 0 10-4.477 10-10S17.523 1 12 1 2 5.477 2 11s4.477 10 10 10Z\"\/>\r\n            <ellipse cx=\"12\" cy=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" rx=\"10\" ry=\"4\"\/>\r\n            <ellipse cx=\"12\" cy=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" rx=\"10\" ry=\"4\" transform=\"rotate(60 12 12)\"\/>\r\n            <ellipse cx=\"12\" cy=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" rx=\"10\" ry=\"4\" transform=\"rotate(120 12 12)\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>React \u0648 Next.js<\/h3>\r\n        <p>\u0623\u0637\u0631 \u0648\u0627\u062c\u0647\u0627\u062a \u0623\u0645\u0627\u0645\u064a\u0629 \u062d\u062f\u064a\u062b\u0629<\/p>\r\n      <\/div>\r\n\r\n      <!-- Mobile Apps -->\r\n      <div class=\"digital-tech-item\">\r\n        <div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div>\r\n        <div class=\"digital-tech-icon icon-mobile\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n            <rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"3\" ry=\"3\"\/>\r\n            <line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"18.01\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>React Native \u0648 Flutter<\/h3>\r\n        <p>\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u062c\u0648\u0627\u0644 \u0645\u062a\u0639\u062f\u062f\u0629 \u0627\u0644\u0645\u0646\u0635\u0627\u062a<\/p>\r\n      <\/div>\r\n\r\n      <!-- WordPress -->\r\n      <div class=\"digital-tech-item\">\r\n        <div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div>\r\n        <div class=\"digital-tech-icon icon-wordpress\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <path d=\"M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm-1.5 15.5L6 9h2.5l2.5 6 2.5-6H16l-5.5 8.5zM19 12c0 1.85-.63 3.55-1.68 4.91L13.5 8H16c.28 0 .5.22.5.5 0 .28.22.5.5.5s.5-.22.5-.5c0-.83-.67-1.5-1.5-1.5h-3.09l-.41-1H16c.28 0 .5-.22.5-.5s-.22-.5-.5-.5H11.5l-.3-.75C11.08 5.28 10.56 5 10 5c-.83 0-1.5.67-1.5 1.5 0 .28.22.5.5.5s.5-.22.5-.5c0-.28.22-.5.5-.5s.5.22.5.5l.3.75.41 1H7c-.83 0-1.5.67-1.5 1.5 0 .28.22.5.5.5s.5-.22.5-.5c0-.28.22-.5.5-.5h2.5l3 7.5L9 17H6c-.83 0-1.5.67-1.5 1.5S5.17 20 6 20h.59C5.22 18.57 4 15.43 4 12c0-4.41 3.59-8 8-8 1.85 0 3.55.63 4.91 1.68L12 10v4.5l3.5-5.25c.89.89 1.5 2.09 1.5 3.75h-2l4 4c.89-1.36 1.5-2.91 1.5-4.5 0-.24-.02-.48-.04-.71L19 12z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>WordPress \u0648\u0623\u0646\u0638\u0645\u0629 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649<\/h3>\r\n        <p>\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0628\u0633\u0647\u0648\u0644\u0629 \u0648\u0645\u0631\u0648\u0646\u0629<\/p>\r\n      <\/div>\r\n\r\n      <!-- Shopify -->\r\n      <div class=\"digital-tech-item\">\r\n        <div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div>\r\n        <div class=\"digital-tech-icon icon-shopify\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <path d=\"M15.337 3.415c-.03-.017-.06-.017-.09-.005-.03.012-.05.035-.06.065-.01.03-.07.17-.13.38-.06-.17-.14-.37-.25-.58-.39-.74-1.01-1.14-1.75-1.14-.05 0-.1 0-.15.005-.02-.025-.04-.05-.07-.07-.28-.28-.64-.42-1.06-.4-.82.03-1.64.62-2.3 1.66-.47.73-.83 1.65-.93 2.36-1.01.31-1.71.53-1.73.54-.51.16-.53.18-.6.66-.05.36-.56 4.34-.56 4.34L13.6 22l5.83-1.26s-2.51-17.02-2.54-17.21c-.03-.17-.11-.26-.18-.3l-.01.005zM12.047 5.7l-.88.27c-.01-.07-.02-.14-.04-.22-.17-.86-.63-1.28-1.23-1.35.01-.02.02-.04.04-.06.32-.42.76-.63 1.14-.65.31-.02.55.08.75.28.2.2.36.55.46 1.04.04.23.06.47.07.69h-.01zm-1.8.56l-1.85.57c.18-.69.52-1.38.94-1.83.16-.17.38-.36.64-.47.25.52.29 1.26.27 1.73zm-1.18-2.57c.15 0 .27.02.38.05-.24.12-.48.3-.7.53-.58.62-.98 1.58-1.13 2.5l-1.51.47c.33-1.4 1.47-3.44 2.96-3.55z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>Shopify \u0648 WooCommerce<\/h3>\r\n        <p>\u0645\u0646\u0635\u0627\u062a \u062a\u062c\u0627\u0631\u0629 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/p>\r\n      <\/div>\r\n\r\n      <!-- Figma -->\r\n      <div class=\"digital-tech-item\">\r\n        <div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div>\r\n        <div class=\"digital-tech-icon icon-figma\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <path d=\"M8 24c2.208 0 4-1.792 4-4v-4H8c-2.208 0-4 1.792-4 4s1.792 4 4 4z\"\/>\r\n            <path d=\"M4 12c0-2.208 1.792-4 4-4h4v8H8c-2.208 0-4-1.792-4-4z\" fill=\"#A259FF\"\/>\r\n            <path d=\"M4 4c0-2.208 1.792-4 4-4h4v8H8C5.792 8 4 6.208 4 4z\" fill=\"#F24E1E\"\/>\r\n            <path d=\"M12 0h4c2.208 0 4 1.792 4 4s-1.792 4-4 4h-4V0z\" fill=\"#FF7262\"\/>\r\n            <path d=\"M20 12c0 2.208-1.792 4-4 4s-4-1.792-4-4 1.792-4 4-4 4 1.792 4 4z\" fill=\"#1ABCFE\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>Figma \u0648 Adobe XD<\/h3>\r\n        <p>\u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u062c\u0631\u0628\u0629 \u0648\u0646\u0645\u0630\u062c\u0629<\/p>\r\n      <\/div>\r\n\r\n      <!-- Node.js -->\r\n      <div class=\"digital-tech-item\">\r\n        <div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div>\r\n        <div class=\"digital-tech-icon icon-node\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <path d=\"M12 1.85c-.27 0-.55.07-.78.2L3.78 6.35c-.48.28-.78.8-.78 1.36v8.58c0 .56.3 1.08.78 1.36l7.44 4.3c.23.13.5.2.78.2s.55-.07.78-.2l7.44-4.3c.48-.28.78-.8.78-1.36V7.71c0-.56-.3-1.08-.78-1.36l-7.44-4.3c-.23-.13-.5-.2-.78-.2zM8 15c-.55 0-1-.45-1-1V10c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm4 0c-.55 0-1-.45-1-1V10c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm4 0c-.55 0-1-.45-1-1V10c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>Node.js \u0648\u0648\u0627\u062c\u0647\u0627\u062a API<\/h3>\r\n        <p>\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 (Back-end)<\/p>\r\n      <\/div>\r\n\r\n      <!-- SEO -->\r\n      <div class=\"digital-tech-item\">\r\n        <div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div>\r\n        <div class=\"digital-tech-icon icon-seo\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n            <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\r\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/>\r\n            <path d=\"M8 11h6M11 8v6\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>SEO \u0648\u0627\u0644\u062a\u062d\u0644\u064a\u0644\u0627\u062a<\/h3>\r\n        <p>\u0623\u062f\u0648\u0627\u062a \u0627\u0644\u062a\u062d\u0633\u064a\u0646 \u0648\u0627\u0644\u0642\u064a\u0627\u0633<\/p>\r\n      <\/div>\r\n\r\n      <!-- Cloud -->\r\n      <div class=\"digital-tech-item\">\r\n        <div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div><div class=\"tech-particle\"><\/div>\r\n        <div class=\"digital-tech-icon icon-cloud\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n            <path d=\"M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z\"\/>\r\n            <polyline points=\"12,14 12,20\"\/>\r\n            <polyline points=\"9,17 12,20 15,17\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>\u0627\u0644\u0633\u062d\u0627\u0628\u0629 \u0648\u0627\u0644\u0627\u0633\u062a\u0636\u0627\u0641\u0629<\/h3>\r\n        <p>AWS\u060c Vercel\u060c Cloudflare<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>(function() {\r\n  const observer = new IntersectionObserver((entries) => {\r\n    entries.forEach((entry, index) => {\r\n      if (entry.isIntersecting) {\r\n        setTimeout(() => {\r\n          entry.target.classList.add('visible');\r\n        }, index * 100);\r\n      }\r\n    });\r\n  }, { threshold: 0.1 });\r\n  \r\n  document.querySelectorAll('.digital-tech-item').forEach(el => observer.observe(el));\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7fce10b e-flex e-con-boxed e-con e-parent\" data-id=\"7fce10b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-89c720b elementor-widget elementor-widget-html\" data-id=\"89c720b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n.digital-why { position: relative; padding: 120px 20px; background: linear-gradient(135deg, #5A2D82 0%, #3d1a5f 100%); width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; box-sizing: border-box; margin-top: -1px; margin-bottom: -1px; overflow: hidden; }\r\n\r\n.digital-why-bg { position: absolute; inset: 0; }\r\n.digital-why-orb { position: absolute; border-radius: 50%; filter: blur(100px); }\r\n.digital-why-orb:nth-child(1) { width: 500px; height: 500px; background: rgba(219,39,119,0.3); top: -20%; left: -10%; animation: orbFloat 10s ease-in-out infinite; }\r\n.digital-why-orb:nth-child(2) { width: 400px; height: 400px; background: rgba(90,45,130,0.3); bottom: -15%; right: -10%; animation: orbFloat 12s ease-in-out infinite; animation-delay: -4s; }\r\n\r\n@keyframes orbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -40px) scale(1.1); } }\r\n\r\n.digital-why-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }\r\n\r\n.digital-why-header { text-align: center; margin-bottom: 80px; }\r\n.digital-why-label { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #db2777; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }\r\n.digital-why h2 { font-family: 'Playfair Display', serif; font-size: 56px; font-weight: 700; color: white; margin: 0 0 30px 0; line-height: 1.2; }\r\n.digital-why h2 .gradient-text { background: linear-gradient(135deg, #ffffff 0%, #db2777 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n\r\n.digital-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }\r\n\r\n.digital-why-card { background: rgba(255,255,255,0.08); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.15); border-radius: 25px; padding: 50px; transition: all 0.3s ease; position: relative; overflow: hidden; opacity: 0; animation: fadeInUp 0.8s ease forwards; }\r\n.digital-why-card:nth-child(1) { animation-delay: 0.2s; }\r\n.digital-why-card:nth-child(2) { animation-delay: 0.4s; }\r\n.digital-why-card:nth-child(3) { animation-delay: 0.6s; }\r\n.digital-why-card:nth-child(4) { animation-delay: 0.8s; }\r\n\r\n.digital-why-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent 0%, #db2777 50%, transparent 100%); transform: translateX(-100%); transition: transform 0.6s ease; }\r\n.digital-why-card:hover::before { transform: translateX(0); }\r\n.digital-why-card:hover { transform: translateY(-8px); background: rgba(255,255,255,0.12); }\r\n\r\n.digital-why-icon { width: 70px; height: 70px; background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(219,39,119,0.3) 100%); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; font-size: 36px; }\r\n\r\n.digital-why-card h3 { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 600; color: white; margin: 0 0 20px 0; }\r\n.digital-why-card p { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.8; color: rgba(255,255,255,0.8); margin: 0; }\r\n\r\n@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }\r\n\r\n@media (max-width: 968px) {\r\n  .digital-why { padding: 80px 20px; }\r\n  .digital-why h2 { font-size: 40px; }\r\n  .digital-why-grid { grid-template-columns: 1fr; gap: 25px; }\r\n  .digital-why-card { padding: 35px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"digital-why\">\r\n  <div class=\"digital-why-bg\">\r\n    <div class=\"digital-why-orb\"><\/div>\r\n    <div class=\"digital-why-orb\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"digital-why-container\">\r\n    <div class=\"digital-why-header\">\r\n      <div class=\"digital-why-label\">\u0644\u0645\u0627\u0630\u0627 \u062a\u062e\u062a\u0627\u0631 \u0630\u0627 \u062a\u062a\u0634 \u062f\u064a\u062c\u064a\u062a\u0627\u0644<\/div>\r\n      <h2>\u0645\u0635\u0645\u0651\u0645 \u0644\u0640 <span class=\"gradient-text\">\u0627\u0644\u0623\u062f\u0627\u0621 \u0648\u0627\u0644\u0646\u0645\u0648<\/span><\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"digital-why-grid\">\r\n      <div class=\"digital-why-card\">\r\n        <div class=\"digital-why-icon\">\ud83c\udfaf<\/div>\r\n        <h3>\u0627\u0644\u0639\u0644\u0627\u0645\u0629 \u0623\u0648\u0644\u0627\u064b<\/h3>\r\n        <p>\u0646\u0628\u0646\u064a \u0645\u0646\u062a\u062c\u0627\u062a \u0631\u0642\u0645\u064a\u0629 \u062a\u062a\u062d\u062f\u062b \u0628\u0644\u063a\u0629 \u0639\u0644\u0627\u0645\u062a\u0643 \u2014 \u0628\u0635\u0631\u064a\u064b\u0627 \u0648\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u064b\u0627.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"digital-why-card\">\r\n        <div class=\"digital-why-icon\">\u2699\ufe0f<\/div>\r\n        <h3>\u062a\u0645\u064a\u0632 \u062a\u0642\u0646\u064a<\/h3>\r\n        <p>\u0639\u0645\u0644\u064a\u0629 \u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0644\u062f\u064a\u0646\u0627 \u062a\u0636\u0645\u0646 \u0643\u0648\u062f\u064b\u0627 \u0646\u0638\u064a\u0641\u064b\u0627\u060c \u0623\u062f\u0627\u0621\u064b \u0633\u0631\u064a\u0639\u064b\u0627\u060c \u0648\u0627\u0639\u062a\u0645\u0627\u062f\u064a\u0629 \u0637\u0648\u064a\u0644\u0629 \u0627\u0644\u0645\u062f\u0649.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"digital-why-card\">\r\n        <div class=\"digital-why-icon\">\ud83d\udee0\ufe0f<\/div>\r\n        <h3>\u062f\u0639\u0645 \u0648\u0635\u064a\u0627\u0646\u0629 \u0643\u0627\u0645\u0644\u0629<\/h3>\r\n        <p>\u0645\u0646 \u0627\u0644\u0625\u0637\u0644\u0627\u0642 \u0625\u0644\u0649 \u0627\u0644\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u0645\u0631\u0629\u060c \u0646\u0643\u0648\u0646 \u0645\u0639\u0643 \u062e\u0637\u0648\u0629 \u0628\u062e\u0637\u0648\u0629.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"digital-why-card\">\r\n        <div class=\"digital-why-icon\">\ud83d\udcc8<\/div>\r\n        <h3>\u0645\u0628\u0646\u064a \u0639\u0644\u0649 \u0627\u0644\u062a\u062d\u0648\u064a\u0644<\/h3>\r\n        <p>\u0643\u0644 \u0635\u0641\u062d\u0629 \u0648\u0645\u0633\u0627\u0631 \u0648\u062a\u0641\u0627\u0639\u0644 \u0645\u064f\u0635\u0645\u0645 \u0644\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0648\u062a\u062d\u0642\u064a\u0642 \u0646\u062a\u0627\u0626\u062c \u0623\u0641\u0636\u0644.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>(function() {\r\n  const observer = new IntersectionObserver((entries) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        entry.target.style.animationPlayState = 'running';\r\n      }\r\n    });\r\n  }, { threshold: 0.1 });\r\n  \r\n  document.querySelectorAll('.digital-why-card').forEach(el => observer.observe(el));\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-53013c8 e-flex e-con-boxed e-con e-parent\" data-id=\"53013c8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be2dc7d elementor-widget elementor-widget-html\" data-id=\"be2dc7d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n.digital-process { position: relative; padding: 120px 20px; background: #ffffff; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; box-sizing: border-box; margin-top: -1px; margin-bottom: -1px; overflow: hidden; }\r\n\r\n.digital-process-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }\r\n\r\n.digital-process-header { text-align: center; margin-bottom: 80px; }\r\n.digital-process-label { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #5A2D82; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }\r\n.digital-process h2 { font-family: 'Playfair Display', serif; font-size: 56px; font-weight: 700; color: #0a0a0a; margin: 0; line-height: 1.2; }\r\n.digital-process h2 .gradient-text { background: linear-gradient(135deg, #5A2D82 0%, #db2777 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n\r\n.digital-process-timeline { position: relative; padding: 40px 0; }\r\n\r\n.digital-process-step { display: flex; gap: 40px; margin-bottom: 80px; align-items: flex-start; opacity: 0; animation: fadeInUp 0.8s ease forwards; }\r\n.digital-process-step:nth-child(1) { animation-delay: 0.2s; }\r\n.digital-process-step:nth-child(2) { animation-delay: 0.4s; }\r\n.digital-process-step:nth-child(3) { animation-delay: 0.6s; }\r\n.digital-process-step:nth-child(4) { animation-delay: 0.8s; }\r\n.digital-process-step:nth-child(5) { animation-delay: 1s; }\r\n\r\n.digital-process-num { position: relative; flex-shrink: 0; }\r\n.digital-process-circle { width: 80px; height: 80px; background: white; border: 3px solid #5A2D82; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 800; color: #5A2D82; position: relative; z-index: 2; transition: all 0.3s ease; }\r\n.digital-process-step:hover .digital-process-circle { background: linear-gradient(135deg, #5A2D82 0%, #db2777 100%); color: white; border-color: #db2777; transform: scale(1.1); }\r\n\r\n.digital-process-line { position: absolute; left: 39px; top: 80px; width: 2px; height: calc(100% + 40px); background: linear-gradient(180deg, #5A2D82 0%, #db2777 100%); opacity: 0.3; }\r\n.digital-process-step:last-child .digital-process-line { display: none; }\r\n\r\n.digital-process-content { flex: 1; padding-top: 10px; }\r\n.digital-process-content h3 { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 600; color: #0a0a0a; margin: 0 0 15px 0; }\r\n.digital-process-content p { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.8; color: #666; margin: 0; }\r\n\r\n@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }\r\n\r\n@media (max-width: 768px) {\r\n  .digital-process { padding: 80px 20px; }\r\n  .digital-process h2 { font-size: 40px; }\r\n  .digital-process-step { flex-direction: column; gap: 20px; margin-bottom: 60px; }\r\n  .digital-process-num { width: 100%; }\r\n  .digital-process-line { display: none; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"digital-process\">\r\n  <div class=\"digital-process-container\">\r\n    <div class=\"digital-process-header\">\r\n      <div class=\"digital-process-label\">\u0643\u064a\u0641 \u0646\u0639\u0645\u0644<\/div>\r\n      <h2>\u0645\u0646\u0647\u062c\u0646\u0627\u060c <span class=\"gradient-text\">\u0628\u0628\u0633\u0627\u0637\u0629<\/span><\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"digital-process-timeline\">\r\n      <div class=\"digital-process-step\">\r\n        <div class=\"digital-process-num\">\r\n          <div class=\"digital-process-circle\">1<\/div>\r\n          <div class=\"digital-process-line\"><\/div>\r\n        <\/div>\r\n        <div class=\"digital-process-content\">\r\n          <h3>\u0627\u0644\u0627\u0633\u062a\u0643\u0634\u0627\u0641 \u0648\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u062a\u0637\u0644\u0628\u0627\u062a<\/h3>\r\n          <p>\u0641\u0647\u0645 \u0623\u0647\u062f\u0627\u0641\u0643 \u0648\u0645\u0633\u062a\u062e\u062f\u0645\u064a\u0643 \u0648\u062a\u062d\u062f\u064a\u0627\u062a\u0643 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0644\u0628\u0646\u0627\u0621 \u0623\u0633\u0627\u0633 \u0642\u0648\u064a \u0644\u0645\u0634\u0631\u0648\u0639\u0643.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"digital-process-step\">\r\n        <div class=\"digital-process-num\">\r\n          <div class=\"digital-process-circle\">2<\/div>\r\n          <div class=\"digital-process-line\"><\/div>\r\n        <\/div>\r\n        <div class=\"digital-process-content\">\r\n          <h3>\u0627\u0644\u0647\u064a\u0643\u0644\u0629 \u0648\u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 UI\/UX<\/h3>\r\n          <p>\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u0628\u0635\u0631\u064a \u0648\u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0625\u0628\u062f\u0627\u0639\u064a \u0627\u0644\u0630\u064a \u064a\u064f\u0638\u0647\u0631 \u0639\u0644\u0627\u0645\u062a\u0643 \u0628\u0634\u0643\u0644 \u062d\u064a \u0648\u0648\u0627\u0636\u062d.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"digital-process-step\">\r\n        <div class=\"digital-process-num\">\r\n          <div class=\"digital-process-circle\">3<\/div>\r\n          <div class=\"digital-process-line\"><\/div>\r\n        <\/div>\r\n        <div class=\"digital-process-content\">\r\n          <h3>\u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0648\u0627\u0644\u0631\u0628\u0637 \u0627\u0644\u062a\u0642\u0646\u064a<\/h3>\r\n          <p>\u0628\u0646\u0627\u0621 \u0645\u0648\u0642\u0639\u0643\/\u062a\u0637\u0628\u064a\u0642\u0643 \u0628\u0643\u0648\u062f \u0646\u0638\u064a\u0641 \u0642\u0627\u0628\u0644 \u0644\u0644\u062a\u0648\u0633\u0639 \u0645\u0639 \u062a\u0643\u0627\u0645\u0644 \u0633\u0644\u0633 \u0645\u0639 \u0627\u0644\u0623\u0646\u0638\u0645\u0629 \u0648\u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u062e\u0627\u0631\u062c\u064a\u0629.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"digital-process-step\">\r\n        <div class=\"digital-process-num\">\r\n          <div class=\"digital-process-circle\">4<\/div>\r\n          <div class=\"digital-process-line\"><\/div>\r\n        <\/div>\r\n        <div class=\"digital-process-content\">\r\n          <h3>\u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u0648\u0627\u0644\u062a\u062d\u0633\u064a\u0646<\/h3>\r\n          <p>\u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u0623\u062f\u0627\u0621\u060c \u0648\u0641\u062d\u0635 SEO\u060c \u0648\u062a\u062d\u0633\u064a\u0646\u0627\u062a \u0648\u0627\u062c\u0647\u0629 \u0644\u0636\u0645\u0627\u0646 \u0639\u0645\u0644 \u0643\u0644 \u0634\u064a\u0621 \u0628\u0643\u0641\u0627\u0621\u0629 \u0648\u0628\u062f\u0648\u0646 \u0623\u062e\u0637\u0627\u0621.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"digital-process-step\">\r\n        <div class=\"digital-process-num\">\r\n          <div class=\"digital-process-circle\">5<\/div>\r\n        <\/div>\r\n        <div class=\"digital-process-content\">\r\n          <h3>\u0627\u0644\u0625\u0637\u0644\u0627\u0642 \u0648\u0627\u0644\u062f\u0639\u0645<\/h3>\r\n          <p>\u0625\u0637\u0644\u0627\u0642 \u0633\u0644\u0633 \u0645\u0639 \u062a\u062d\u0633\u064a\u0646\u0627\u062a \u0645\u0633\u062a\u0645\u0631\u0629\u060c \u0648\u062a\u062f\u0631\u064a\u0628\u060c \u0648\u062f\u0639\u0645 \u0645\u062e\u0635\u0635.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>(function() {\r\n  const observer = new IntersectionObserver((entries) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        entry.target.style.animationPlayState = 'running';\r\n      }\r\n    });\r\n  }, { threshold: 0.1 });\r\n  \r\n  document.querySelectorAll('.digital-process-step').forEach(el => observer.observe(el));\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cda0458 e-flex e-con-boxed e-con e-parent\" data-id=\"cda0458\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-910fb57 elementor-widget elementor-widget-html\" data-id=\"910fb57\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n.digital-deliverables { position: relative; padding: 120px 20px; background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 100%); width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; box-sizing: border-box; margin-top: -1px; margin-bottom: -1px; overflow: hidden; }\r\n\r\n.digital-deliverables-bg { position: absolute; inset: 0; }\r\n.digital-deliverables-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(90,45,130,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(90,45,130,0.05) 1px, transparent 1px); background-size: 50px 50px; }\r\n\r\n.digital-deliverables-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }\r\n\r\n.digital-deliverables-header { text-align: center; margin-bottom: 80px; }\r\n.digital-deliverables-label { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #db2777; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }\r\n.digital-deliverables h2 { font-family: 'Playfair Display', serif; font-size: 56px; font-weight: 700; color: white; margin: 0; line-height: 1.2; }\r\n.digital-deliverables h2 .gradient-text { background: linear-gradient(135deg, #ffffff 0%, #db2777 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n\r\n.digital-deliverables-content { display: flex; gap: 60px; align-items: center; }\r\n\r\n.digital-deliverables-list { flex: 1; }\r\n.digital-deliverables-item { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 30px; opacity: 0; animation: fadeInUp 0.8s ease forwards; }\r\n\r\n.digital-deliverables-check { width: 32px; height: 32px; background: linear-gradient(135deg, #5A2D82 0%, #db2777 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\r\n.digital-deliverables-check svg { width: 18px; height: 18px; stroke: white; fill: none; stroke-width: 3; }\r\n\r\n.digital-deliverables-text h3 { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 600; color: white; margin: 0 0 5px 0; }\r\n.digital-deliverables-text p { font-family: 'Inter', sans-serif; font-size: 15px; color: rgba(255,255,255,0.6); margin: 0; }\r\n\r\n.digital-deliverables-visual { flex: 1; }\r\n.digital-deliverables-box { background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); border: 2px solid rgba(90,45,130,0.3); border-radius: 25px; padding: 60px; text-align: center; }\r\n.digital-deliverables-box-icon { font-size: 80px; margin-bottom: 30px; }\r\n.digital-deliverables-box h3 { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 600; color: white; margin: 0 0 15px 0; }\r\n.digital-deliverables-box p { font-family: 'Inter', sans-serif; font-size: 16px; color: rgba(255,255,255,0.7); margin: 0; }\r\n\r\n@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }\r\n\r\n@media (max-width: 968px) {\r\n  .digital-deliverables { padding: 80px 20px; }\r\n  .digital-deliverables h2 { font-size: 40px; }\r\n  .digital-deliverables-content { flex-direction: column; gap: 40px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"digital-deliverables\">\r\n  <div class=\"digital-deliverables-bg\">\r\n    <div class=\"digital-deliverables-grid\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"digital-deliverables-container\">\r\n    <div class=\"digital-deliverables-header\">\r\n      <div class=\"digital-deliverables-label\">\u0645\u0627\u0630\u0627 \u0633\u062a\u062d\u0635\u0644 \u0639\u0644\u064a\u0647<\/div>\r\n      <h2>\u0645\u062e\u0631\u062c\u0627\u062a <span class=\"gradient-text\">\u0645\u062a\u0643\u0627\u0645\u0644\u0629<\/span><\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"digital-deliverables-content\">\r\n      <div class=\"digital-deliverables-list\">\r\n\r\n        <div class=\"digital-deliverables-item\">\r\n          <div class=\"digital-deliverables-check\">\r\n            <svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"digital-deliverables-text\">\r\n            <h3>\u0645\u0644\u0641\u0627\u062a \u0627\u0644\u062a\u0635\u0645\u064a\u0645 UI\/UX (Figma)<\/h3>\r\n            <p>\u0646\u0638\u0627\u0645 \u062a\u0635\u0645\u064a\u0645 \u0643\u0627\u0645\u0644 \u0645\u0639 \u0646\u0645\u0627\u0630\u062c \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u062c\u0627\u0647\u0632\u0629<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"digital-deliverables-item\">\r\n          <div class=\"digital-deliverables-check\">\r\n            <svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"digital-deliverables-text\">\r\n            <h3>\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0642\u0639 \/ \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0628\u0627\u0644\u0643\u0627\u0645\u0644<\/h3>\r\n            <p>\u0643\u0648\u062f \u062c\u0627\u0647\u0632 \u0644\u0644\u0625\u0637\u0644\u0627\u0642 \u0645\u0639 \u0627\u0644\u0646\u0634\u0631 \u0627\u0644\u0641\u0639\u0644\u064a<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"digital-deliverables-item\">\r\n          <div class=\"digital-deliverables-check\">\r\n            <svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"digital-deliverables-text\">\r\n            <h3>\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0633\u0631\u0639\u0629 \u0648\u0627\u0644\u0623\u062f\u0627\u0621<\/h3>\r\n            <p>\u062a\u0642\u064a\u064a\u0645 \u0623\u062f\u0627\u0621 \u064a\u062a\u062c\u0627\u0648\u0632 90 \u0641\u064a Lighthouse<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"digital-deliverables-item\">\r\n          <div class=\"digital-deliverables-check\">\r\n            <svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"digital-deliverables-text\">\r\n            <h3>\u0647\u064a\u0643\u0644\u0629 \u062c\u0627\u0647\u0632\u0629 \u0644\u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b<\/h3>\r\n            <p>\u0645\u064f\u0647\u064a\u0623 \u0644\u0644\u0640 SEO \u0645\u0646 \u0627\u0644\u064a\u0648\u0645 \u0627\u0644\u0623\u0648\u0644<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"digital-deliverables-item\">\r\n          <div class=\"digital-deliverables-check\">\r\n            <svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"digital-deliverables-text\">\r\n            <h3>\u0627\u0644\u062a\u062f\u0631\u064a\u0628 \u0648\u0627\u0644\u062a\u0648\u062b\u064a\u0642<\/h3>\r\n            <p>\u0623\u062f\u0644\u0629 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0648\u0627\u0636\u062d\u0629 \u0644\u0641\u0631\u064a\u0642\u0643<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"digital-deliverables-item\">\r\n          <div class=\"digital-deliverables-check\">\r\n            <svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"digital-deliverables-text\">\r\n            <h3>\u062f\u0639\u0645 \u0628\u0639\u062f \u0627\u0644\u0625\u0637\u0644\u0627\u0642 (30\u201360 \u064a\u0648\u0645)<\/h3>\r\n            <p>\u0645\u062a\u0627\u0628\u0639\u0629\u060c \u062a\u062d\u062f\u064a\u062b\u0627\u062a\u060c \u0648\u062f\u0639\u0645 \u0645\u0633\u062a\u0645\u0631<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"digital-deliverables-visual\">\r\n        <div class=\"digital-deliverables-box\">\r\n          <div class=\"digital-deliverables-box-icon\">\ud83d\udce6<\/div>\r\n          <h3>\u0643\u0644 \u0645\u0627 \u062a\u062d\u062a\u0627\u062c\u0647<\/h3>\r\n          <p>\u062d\u0632\u0645\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0628\u062f\u0648\u0646 \u062a\u0643\u0627\u0644\u064a\u0641 \u0645\u062e\u0641\u064a\u0629 \u0623\u0648 \u0645\u0641\u0627\u062c\u0622\u062a<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>(function() {\r\n  const observer = new IntersectionObserver((entries) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        entry.target.style.animationPlayState = 'running';\r\n      }\r\n    });\r\n  }, { threshold: 0.1 });\r\n  \r\n  document.querySelectorAll('.digital-deliverables-item').forEach(el => observer.observe(el));\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e862204 elementor-widget elementor-widget-html\" data-id=\"e862204\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n.digital-cta { position: relative; padding: 120px 20px; background: linear-gradient(135deg, #5A2D82 0%, #3d1a5f 100%); width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; box-sizing: border-box; margin-top: -1px; margin-bottom: -1px; overflow: hidden; }\r\n\r\n.digital-cta-bg { position: absolute; inset: 0; }\r\n.digital-cta-orb { position: absolute; border-radius: 50%; filter: blur(100px); animation: orbFloat 8s ease-in-out infinite; }\r\n.digital-cta-orb:nth-child(1) { width: 400px; height: 400px; background: rgba(219,39,119,0.3); top: -20%; left: -10%; }\r\n.digital-cta-orb:nth-child(2) { width: 350px; height: 350px; background: rgba(90,45,130,0.3); bottom: -15%; right: -10%; animation-delay: -4s; }\r\n\r\n@keyframes orbFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -30px); } }\r\n\r\n.digital-cta-container { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }\r\n\r\n.digital-cta-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); border-radius: 50px; color: #ffffff; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; margin-bottom: 30px; }\r\n.digital-cta-badge-dot { width: 8px; height: 8px; background: #db2777; border-radius: 50%; animation: pulse 2s ease infinite; }\r\n@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }\r\n\r\n.digital-cta h2 { font-family: 'Playfair Display', serif; font-size: 64px; font-weight: 700; color: #ffffff; margin: 0 0 25px 0; line-height: 1.1; }\r\n.digital-cta h2 .highlight { background: linear-gradient(135deg, #db2777 0%, #f472b6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n\r\n.digital-cta p { font-family: 'Inter', sans-serif; font-size: 20px; line-height: 1.6; color: rgba(255,255,255,0.9); margin: 0 0 50px 0; }\r\n\r\n.digital-cta-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }\r\n.digital-cta-btn { padding: 20px 50px; border-radius: 50px; font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 10px; }\r\n.digital-cta-btn-primary { background: white; color: #5A2D82; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }\r\n.digital-cta-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(0,0,0,0.4); }\r\n.digital-cta-btn-secondary { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.3); }\r\n.digital-cta-btn-secondary:hover { border-color: white; background: rgba(255,255,255,0.1); }\r\n\r\n@media (max-width: 768px) {\r\n  .digital-cta { padding: 80px 20px; }\r\n  .digital-cta h2 { font-size: 36px; }\r\n  .digital-cta p { font-size: 16px; }\r\n  .digital-cta-buttons { flex-direction: column; width: 100%; }\r\n  .digital-cta-btn { width: 100%; justify-content: center; padding: 16px 30px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"digital-cta\">\r\n  <div class=\"digital-cta-bg\">\r\n    <div class=\"digital-cta-orb\"><\/div>\r\n    <div class=\"digital-cta-orb\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"digital-cta-container\">\r\n    <div class=\"digital-cta-badge\">\r\n      <div class=\"digital-cta-badge-dot\"><\/div>\r\n      \u0644\u0646\u062a\u062d\u062f\u062b\r\n    <\/div>\r\n\r\n    <h2>\u0647\u0644 \u0623\u0646\u062a \u062c\u0627\u0647\u0632 \u0644\u0628\u0646\u0627\u0621 \u0634\u064a\u0621 <span class=\"highlight\">\u0642\u0648\u064a<\/span>\u061f<\/h2>\r\n\r\n    <p>\r\n      \u062f\u0639\u0646\u0627 \u0646\u062d\u0648\u0644 \u0641\u0643\u0631\u062a\u0643 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0625\u0644\u0649 \u0648\u0627\u0642\u0639 \u2014 \u0628\u062a\u0635\u0645\u064a\u0645 \u062c\u0645\u064a\u0644\u060c \u062a\u062e\u0637\u064a\u0637 \u0630\u0643\u064a\u060c \u0648\u062a\u0646\u0641\u064a\u0630 \u062f\u0642\u064a\u0642.\r\n    <\/p>\r\n\r\n    <div class=\"digital-cta-buttons\">\r\n      <a href=\"https:\/\/wa.me\/966567069088\" class=\"digital-cta-btn digital-cta-btn-primary\" target=\"_blank\" rel=\"noopener\">\r\n        \u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643 \u0627\u0644\u0622\u0646\r\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n          <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/>\r\n          <polyline points=\"12 5 19 12 12 19\"\/>\r\n        <\/svg>\r\n      <\/a>\r\n\r\n      <a href=\"https:\/\/wa.me\/966567069088\" class=\"digital-cta-btn digital-cta-btn-secondary\" target=\"_blank\" rel=\"noopener\">\r\n        \u062a\u0648\u0627\u0635\u0644 \u0645\u0639 \u0641\u0631\u064a\u0642\u0646\u0627\r\n      <\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>&lt;html&gt; &lt;body&gt; &lt;div className=&#8221;brand&#8221;&gt;const build = () => { return &lt;Experience \/&gt; }function App() { const [success, setSuccess] return &lt;Digital \/&gt; }import React from &#8216;react&#8217; export default Brand\u0627\u0644\u062d\u0644\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u062d\u0644\u0648\u0644 \u0631\u0642\u0645\u064a\u0629 \u062a\u062f\u0639\u0645 \u0639\u0644\u0627\u0645\u062a\u0643 \u0645\u0648\u0627\u0642\u0639 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\u060c \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u062c\u0648\u0627\u0644\u060c \u0648\u062a\u062c\u0627\u0631\u0628 \u0631\u0642\u0645\u064a\u0629 \u062a\u064f\u0635\u0645\u0651\u064e\u0645 \u0644\u0631\u0641\u0639 \u0642\u064a\u0645\u0629 \u0639\u0644\u0627\u0645\u062a\u0643\u060c \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0623\u062f\u0627\u0621\u060c \u0648\u062a\u062d\u0642\u064a\u0642 \u0646\u062a\u0627\u0626\u062c \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u0642\u064a\u0627\u0633. \u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643\u0627\u0644\u0637\u0631\u0642\u064a\u0629 \u2014 thetouch-project$npx create-thetouch-app your-brand\u062c\u0627\u0631\u064a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_joinchat":[],"footnotes":""},"class_list":["post-14631","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/pages\/14631","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/comments?post=14631"}],"version-history":[{"count":4,"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/pages\/14631\/revisions"}],"predecessor-version":[{"id":14681,"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/pages\/14631\/revisions\/14681"}],"wp:attachment":[{"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/media?parent=14631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}