{"id":6,"date":"2026-05-30T10:26:47","date_gmt":"2026-05-30T10:26:47","guid":{"rendered":"https:\/\/shawkyai.com\/?page_id=6"},"modified":"2026-05-30T14:07:12","modified_gmt":"2026-05-30T14:07:12","slug":"home","status":"publish","type":"page","link":"https:\/\/shawkyai.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6\" class=\"elementor elementor-6\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6f0cc89 e-con e-atomic-element e-flexbox-base e-4ef9f32 \" data-id=\"6f0cc89\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"6f0cc89\">\n    \t\t<div class=\"elementor-element elementor-element-705a166 elementor-widget elementor-widget-html\" data-id=\"705a166\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     SHAWKY AI \u2014 BLACK & GOLD HEADER\r\n     Logo left | Nav center | Button right\r\n     ============================================================ -->\r\n\r\n<style>\r\n#shawky-header {\r\n  position: fixed;\r\n  top: 0; left: 0;\r\n  width: 100%;\r\n  z-index: 9999;\r\n  background: #0a0a0a;\r\n  border-bottom: 1px solid rgba(197,160,80,0.25);\r\n  transition: background 0.35s ease, border-color 0.35s ease;\r\n  font-family: 'Cormorant Garamond', 'Georgia', serif;\r\n}\r\n#shawky-header.sh-scrolled {\r\n  background: rgba(5,5,5,0.97);\r\n  border-bottom-color: rgba(197,160,80,0.55);\r\n}\r\n\r\n.sh-gold-line {\r\n  position: absolute;\r\n  bottom: 0; left: 0; right: 0; height: 1px;\r\n  background: linear-gradient(90deg, transparent 0%, #c5a050 30%, #f0d080 50%, #c5a050 70%, transparent 100%);\r\n  opacity: 0; transition: opacity 0.35s;\r\n}\r\n#shawky-header.sh-scrolled .sh-gold-line { opacity: 0.7; }\r\n\r\n\/* \u2500\u2500 ROW: logo left | nav center | button right \u2500\u2500 *\/\r\n.sh-inner {\r\n  display: grid;\r\n  grid-template-columns: 1fr auto 1fr;\r\n  align-items: center;\r\n  padding: 14px 40px;\r\n  transition: padding 0.35s ease;\r\n}\r\n#shawky-header.sh-scrolled .sh-inner { padding: 8px 40px; }\r\n\r\n\/* \u2500\u2500 LOGO (left) \u2500\u2500 *\/\r\n.sh-logo { justify-self: start; }\r\n.sh-logo img {\r\n  height: 90px;\r\n  width: auto;\r\n  display: block;\r\n  transition: height 0.35s ease;\r\n  filter: drop-shadow(0 0 10px rgba(197,160,80,0.45));\r\n}\r\n#shawky-header.sh-scrolled .sh-logo img { height: 48px; }\r\n\r\n\/* \u2500\u2500 NAV (center) \u2500\u2500 *\/\r\n.sh-nav { justify-self: center; }\r\n.sh-nav ul,\r\n.sh-nav ul li { margin: 0; padding: 0; list-style: none; }\r\n.sh-nav ul { display: flex; align-items: center; gap: 4px; }\r\n.sh-nav ul li a {\r\n  display: block;\r\n  padding: 7px 16px;\r\n  font-family: 'Cormorant Garamond', 'Georgia', serif;\r\n  font-size: 15px; font-weight: 500;\r\n  letter-spacing: 0.09em; text-transform: uppercase;\r\n  color: #c8c8c0 !important;\r\n  text-decoration: none !important;\r\n  border-bottom: 1.5px solid transparent;\r\n  transition: color 0.25s, border-color 0.25s;\r\n}\r\n.sh-nav ul li a:hover,\r\n.sh-nav ul li.current-menu-item a {\r\n  color: #c5a050 !important;\r\n  border-bottom-color: #c5a050;\r\n}\r\n\r\n\/* \u2500\u2500 CTA BUTTON (right) \u2500\u2500 *\/\r\n.sh-cta-wrap { justify-self: end; }\r\n.sh-cta {\r\n  display: inline-flex; align-items: center; gap: 8px;\r\n  padding: 11px 26px;\r\n  background: transparent; border: 1.5px solid #c5a050;\r\n  color: #c5a050 !important;\r\n  font-family: 'Cormorant Garamond', 'Georgia', serif;\r\n  font-size: 14px; font-weight: 600;\r\n  letter-spacing: 0.12em; text-transform: uppercase;\r\n  text-decoration: none !important;\r\n  cursor: pointer; white-space: nowrap;\r\n  transition: background 0.25s, color 0.25s, box-shadow 0.25s;\r\n}\r\n.sh-cta svg {\r\n  width: 14px; height: 14px;\r\n  stroke: currentColor; fill: none;\r\n  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;\r\n}\r\n.sh-cta:hover {\r\n  background: #c5a050; color: #0a0a0a !important;\r\n  box-shadow: 0 0 22px rgba(197,160,80,0.4);\r\n}\r\n\r\n\/* \u2500\u2500 HAMBURGER \u2500\u2500 *\/\r\n.sh-burger {\r\n  display: none;\r\n  flex-direction: column; justify-content: center; align-items: center;\r\n  width: 40px; height: 40px; gap: 5px;\r\n  background: none; border: none; cursor: pointer; padding: 0;\r\n}\r\n.sh-burger span {\r\n  display: block; width: 24px; height: 1.5px; background: #c5a050;\r\n  transition: transform 0.3s ease, opacity 0.3s ease;\r\n  transform-origin: center;\r\n}\r\n.sh-burger.sh-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }\r\n.sh-burger.sh-open span:nth-child(2) { opacity: 0; }\r\n.sh-burger.sh-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }\r\n\r\n\/* \u2500\u2500 MOBILE DRAWER \u2500\u2500 *\/\r\n.sh-mobile-drawer {\r\n  display: none; flex-direction: column; align-items: center;\r\n  background: rgba(5,5,5,0.98);\r\n  border-top: 1px solid rgba(197,160,80,0.2);\r\n  max-height: 0; overflow: hidden;\r\n  transition: max-height 0.4s ease, padding 0.4s ease;\r\n}\r\n.sh-mobile-drawer.sh-open { max-height: 600px; padding: 16px 0 24px; }\r\n.sh-mobile-drawer ul { margin: 0; padding: 0; list-style: none; width: 100%; text-align: center; }\r\n.sh-mobile-drawer ul li a {\r\n  display: block; padding: 13px 32px;\r\n  font-family: 'Cormorant Garamond', 'Georgia', serif;\r\n  font-size: 17px; font-weight: 500;\r\n  letter-spacing: 0.07em; text-transform: uppercase;\r\n  color: #c8c8c0 !important; text-decoration: none !important;\r\n  transition: color 0.25s;\r\n}\r\n.sh-mobile-drawer ul li a:hover,\r\n.sh-mobile-drawer ul li.current-menu-item a { color: #c5a050 !important; }\r\n.sh-mobile-cta {\r\n  margin-top: 14px;\r\n  display: inline-flex; align-items: center; gap: 8px;\r\n  padding: 12px 28px; border: 1.5px solid #c5a050;\r\n  color: #c5a050 !important;\r\n  font-family: 'Cormorant Garamond', 'Georgia', serif;\r\n  font-size: 14px; font-weight: 600;\r\n  letter-spacing: 0.1em; text-transform: uppercase;\r\n  text-decoration: none !important;\r\n  transition: background 0.25s, color 0.25s;\r\n}\r\n.sh-mobile-cta:hover { background: #c5a050; color: #0a0a0a !important; }\r\n\r\nbody { padding-top: 120px; }\r\n\r\n@media (max-width: 900px) {\r\n  .sh-nav, .sh-cta-wrap { display: none; }\r\n  .sh-burger { display: flex; }\r\n  .sh-mobile-drawer { display: flex; }\r\n  .sh-inner { grid-template-columns: 1fr auto; }\r\n  body { padding-top: 80px; }\r\n}\r\n@media (max-width: 480px) {\r\n  .sh-inner { padding: 10px 20px; }\r\n  .sh-logo img { height: 56px; }\r\n  body { padding-top: 72px; }\r\n}\r\n<\/style>\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<header id=\"shawky-header\">\r\n  <div class=\"sh-gold-line\"><\/div>\r\n  <div class=\"sh-inner\">\r\n\r\n    <!-- Logo \u2014 far left -->\r\n    <a href=\"\/\" class=\"sh-logo\">\r\n      <img decoding=\"async\" src=\"https:\/\/shawkyai.com\/wp-content\/uploads\/2026\/05\/Untitled_design__1_-removebg-preview.png\" alt=\"Shawky AI\">\r\n    <\/a>\r\n\r\n    <!-- Nav \u2014 center -->\r\n    <nav class=\"sh-nav\" aria-label=\"Primary navigation\">\r\n      <ul id=\"menu-primary-menu\" class=\"menu\"><li id=\"menu-item-66\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-66\"><a href=\"#1\" class=\"menu-link\">About Us<\/a><\/li>\n<li id=\"menu-item-67\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-67\"><a href=\"#2\" class=\"menu-link\">Services<\/a><\/li>\n<li id=\"menu-item-68\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-68\"><a href=\"#3\" class=\"menu-link\">Projects<\/a><\/li>\n<li id=\"menu-item-69\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-69\"><a href=\"#4\" class=\"menu-link\">Our Process<\/a><\/li>\n<\/ul>\r\n    <\/nav>\r\n\r\n    <!-- Call Us \u2014 far right -->\r\n    <div class=\"sh-cta-wrap\">\r\n      <a href=\"#f\" class=\"sh-cta\">\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8 19.79 19.79 0 01.22 2.18 2 2 0 012.18 0H5.2a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.18 7.91a16 16 0 006.11 6.11l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z\"\/><\/svg>\r\n        Call Us\r\n      <\/a>\r\n    <\/div>\r\n\r\n    <!-- Hamburger (mobile) -->\r\n    <button class=\"sh-burger\" id=\"sh-burger-btn\" aria-label=\"Toggle menu\" aria-expanded=\"false\">\r\n      <span><\/span><span><\/span><span><\/span>\r\n    <\/button>\r\n\r\n  <\/div>\r\n\r\n  <!-- Mobile Drawer -->\r\n  <div class=\"sh-mobile-drawer\" id=\"sh-mobile-drawer\" aria-hidden=\"true\">\r\n    <ul id=\"menu-primary-menu-1\" class=\"menu\"><li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-66\"><a href=\"#1\" class=\"menu-link\">About Us<\/a><\/li>\n<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-67\"><a href=\"#2\" class=\"menu-link\">Services<\/a><\/li>\n<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-68\"><a href=\"#3\" class=\"menu-link\">Projects<\/a><\/li>\n<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-69\"><a href=\"#4\" class=\"menu-link\">Our Process<\/a><\/li>\n<\/ul>\r\n    <a href=\"#f\" class=\"sh-mobile-cta\">\r\n      <svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8 19.79 19.79 0 01.22 2.18 2 2 0 012.18 0H5.2a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.18 7.91a16 16 0 006.11 6.11l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z\"\/><\/svg>\r\n      Call Us\r\n    <\/a>\r\n  <\/div>\r\n<\/header>\r\n\r\n<script>\r\n(function() {\r\n  var header = document.getElementById('shawky-header');\r\n  var burger = document.getElementById('sh-burger-btn');\r\n  var drawer = document.getElementById('sh-mobile-drawer');\r\n\r\n  window.addEventListener('scroll', function() {\r\n    header.classList.toggle('sh-scrolled', window.scrollY > 50);\r\n  }, { passive: true });\r\n\r\n  burger.addEventListener('click', function() {\r\n    var isOpen = drawer.classList.toggle('sh-open');\r\n    burger.classList.toggle('sh-open', isOpen);\r\n    burger.setAttribute('aria-expanded', isOpen);\r\n    drawer.setAttribute('aria-hidden', !isOpen);\r\n  });\r\n\r\n  drawer.querySelectorAll('a').forEach(function(link) {\r\n    link.addEventListener('click', function() {\r\n      drawer.classList.remove('sh-open');\r\n      burger.classList.remove('sh-open');\r\n      burger.setAttribute('aria-expanded', 'false');\r\n      drawer.setAttribute('aria-hidden', 'true');\r\n    });\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-26cdabd e-con e-atomic-element e-flexbox-base e-d371ce7 \" data-id=\"26cdabd\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"26cdabd\">\n    \t\t<div class=\"elementor-element elementor-element-bbce5e4 elementor-widget elementor-widget-html\" data-id=\"bbce5e4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     SHAWKY AI \u2014 HERO SECTION\r\n     Elementor HTML Widget \u2014 drop this into an HTML element\r\n     ============================================================ -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<style>\r\n.sai-hero-wrap {\r\n  --sai-gold:        #C9A84C;\r\n  --sai-gold-light:  #E8C97A;\r\n  --sai-gold-dim:    #8A6A28;\r\n  --sai-gold-glow:   rgba(201,168,76,0.18);\r\n  --sai-gold-glow2:  rgba(201,168,76,0.06);\r\n  --sai-white:       #F5F0E8;\r\n  --sai-white-muted: rgba(245,240,232,0.55);\r\n  --sai-border:      rgba(201,168,76,0.18);\r\n  --sai-border-hard: rgba(201,168,76,0.38);\r\n  --sai-card-bg:     rgba(10,10,10,0.85);\r\n  --ff-display:      'Cormorant Garamond', Georgia, serif;\r\n  --ff-body:         'DM Sans', sans-serif;\r\n}\r\n\r\n.sai-hero-wrap {\r\n  position: relative;\r\n  width: 100%;\r\n  min-height: 100vh;\r\n  display: flex;\r\n  align-items: center;\r\n  overflow: hidden;\r\n  padding: 80px 5vw 100px;\r\n  box-sizing: border-box;\r\n  background: transparent;\r\n}\r\n\r\n.sai-hw-glow {\r\n  position: absolute;\r\n  top: -15%; left: 50%;\r\n  transform: translateX(-50%);\r\n  width: min(900px, 120vw);\r\n  height: 700px;\r\n  background: radial-gradient(ellipse at center,\r\n    rgba(201,168,76,0.13) 0%,\r\n    rgba(201,168,76,0.05) 40%,\r\n    transparent 70%);\r\n  pointer-events: none;\r\n  z-index: 0;\r\n  animation: sai-hw-pulse 5s ease-in-out infinite;\r\n}\r\n@keyframes sai-hw-pulse {\r\n  0%,100% { opacity:1; transform:translateX(-50%) scale(1); }\r\n  50%      { opacity:.55; transform:translateX(-50%) scale(1.09); }\r\n}\r\n\r\n.sai-hw-grid {\r\n  position: absolute;\r\n  inset: 0;\r\n  pointer-events: none;\r\n  z-index: 0;\r\n  background-image:\r\n    linear-gradient(rgba(201,168,76,0.045) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(201,168,76,0.045) 1px, transparent 1px);\r\n  background-size: 60px 60px;\r\n  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 18%, transparent 72%);\r\n  mask-image:         radial-gradient(ellipse at 50% 40%, black 18%, transparent 72%);\r\n  transition: transform 0.12s ease;\r\n}\r\n\r\n.sai-hw-vline {\r\n  position: absolute;\r\n  top: 0;\r\n  width: 1px;\r\n  height: 100%;\r\n  pointer-events: none;\r\n  z-index: 0;\r\n}\r\n.sai-hw-vline-r {\r\n  right: 11vw;\r\n  background: linear-gradient(to bottom, transparent 0%, var(--sai-gold-dim) 40%, transparent 100%);\r\n  opacity: 0.4;\r\n}\r\n.sai-hw-vline-l {\r\n  left: 17vw;\r\n  background: linear-gradient(to bottom, transparent 0%, var(--sai-gold-dim) 50%, transparent 100%);\r\n  opacity: 0.18;\r\n}\r\n\r\n.sai-hw-orb {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  pointer-events: none;\r\n  z-index: 0;\r\n  animation: sai-hw-orb linear infinite;\r\n}\r\n.sai-hw-orb-a { width:5px;height:5px; background:var(--sai-gold);   top:28%;left:13%; box-shadow:0 0 14px 4px var(--sai-gold-glow); animation-duration:8s;  animation-delay:0s; }\r\n.sai-hw-orb-b { width:3px;height:3px; background:var(--sai-gold-light);top:60%;left:79%; box-shadow:0 0 8px 2px var(--sai-gold-glow);  animation-duration:11s; animation-delay:-3s; }\r\n.sai-hw-orb-c { width:4px;height:4px; background:var(--sai-gold);   top:78%;left:33%; box-shadow:0 0 10px 3px var(--sai-gold-glow); animation-duration:14s; animation-delay:-6s; }\r\n.sai-hw-orb-d { width:2px;height:2px; background:var(--sai-gold-light);top:16%;left:87%; animation-duration:9s;  animation-delay:-2s; }\r\n@keyframes sai-hw-orb {\r\n  0%   { transform:translateY(0) translateX(0);   opacity:0; }\r\n  10%  { opacity:1; }\r\n  50%  { transform:translateY(-28px) translateX(10px); opacity:.8; }\r\n  90%  { opacity:1; }\r\n  100% { transform:translateY(0) translateX(0);   opacity:0; }\r\n}\r\n\r\n.sai-hw-content {\r\n  position: relative;\r\n  z-index: 2;\r\n  max-width: 820px;\r\n}\r\n\r\n.sai-hw-pill {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  border: 1px solid var(--sai-border-hard);\r\n  padding: 0.38rem 1.1rem;\r\n  margin-bottom: 2.2rem;\r\n  font-size: 0.72rem;\r\n  letter-spacing: 0.16em;\r\n  text-transform: uppercase;\r\n  color: var(--sai-gold);\r\n  font-family: var(--ff-body);\r\n  font-weight: 500;\r\n  background: rgba(201,168,76,0.06);\r\n  clip-path: polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);\r\n  opacity: 0;\r\n  animation: sai-hw-up 0.7s 0.3s ease forwards;\r\n}\r\n.sai-hw-pill-dot {\r\n  width: 6px; height: 6px;\r\n  background: var(--sai-gold);\r\n  border-radius: 50%;\r\n  flex-shrink: 0;\r\n  animation: sai-hw-blink 1.8s ease-in-out infinite;\r\n}\r\n@keyframes sai-hw-blink {\r\n  0%,100% { opacity:1; }\r\n  50%      { opacity:.15; }\r\n}\r\n\r\n.sai-hw-h1 {\r\n  font-family: var(--ff-display);\r\n  font-size: clamp(3rem, 7.2vw, 6.8rem);\r\n  font-weight: 700;\r\n  line-height: 1.04;\r\n  letter-spacing: -0.01em;\r\n  color: var(--sai-white);\r\n  margin: 0 0 1.6rem;\r\n  opacity: 0;\r\n  animation: sai-hw-up 0.85s 0.5s ease forwards;\r\n}\r\n.sai-hw-h1-gold {\r\n  color: var(--sai-gold);\r\n  font-style: italic;\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n.sai-hw-h1-gold::after {\r\n  content: '';\r\n  position: absolute;\r\n  bottom: 2px; left: 0; right: 0;\r\n  height: 2px;\r\n  background: linear-gradient(90deg, var(--sai-gold), transparent);\r\n}\r\n\r\n.sai-hw-caret {\r\n  border-right: 2px solid var(--sai-gold);\r\n  animation: sai-hw-caret-blink 0.75s step-end infinite;\r\n}\r\n@keyframes sai-hw-caret-blink {\r\n  0%,100% { border-color:var(--sai-gold); }\r\n  50%      { border-color:transparent; }\r\n}\r\n\r\n.sai-hw-sub {\r\n  font-family: var(--ff-body);\r\n  font-size: clamp(0.98rem, 1.55vw, 1.16rem);\r\n  font-weight: 300;\r\n  line-height: 1.78;\r\n  color: var(--sai-white-muted);\r\n  max-width: 580px;\r\n  margin: 0 0 2.8rem;\r\n  opacity: 0;\r\n  animation: sai-hw-up 0.85s 0.7s ease forwards;\r\n}\r\n.sai-hw-sub strong {\r\n  color: var(--sai-white);\r\n  font-weight: 400;\r\n}\r\n\r\n.sai-hw-ctas {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n  gap: 1.2rem;\r\n  margin-bottom: 3.2rem;\r\n  opacity: 0;\r\n  animation: sai-hw-up 0.85s 0.9s ease forwards;\r\n}\r\n\r\n.sai-hw-btn-primary {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.55rem;\r\n  font-family: var(--ff-body);\r\n  font-size: 0.88rem;\r\n  font-weight: 500;\r\n  letter-spacing: 0.06em;\r\n  color: #080808;\r\n  background: var(--sai-gold);\r\n  border: none;\r\n  padding: 0.95rem 2rem;\r\n  cursor: pointer;\r\n  text-decoration: none;\r\n  position: relative;\r\n  overflow: hidden;\r\n  clip-path: polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);\r\n  transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n}\r\n.sai-hw-btn-primary::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background: var(--sai-gold-light);\r\n  transform: translateX(-110%);\r\n  transition: transform 0.3s ease;\r\n}\r\n.sai-hw-btn-primary:hover {\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 14px 40px rgba(201,168,76,0.32);\r\n}\r\n.sai-hw-btn-primary:hover::before { transform: translateX(0); }\r\n.sai-hw-btn-primary-text { position:relative; z-index:1; }\r\n.sai-hw-btn-primary-arrow {\r\n  position: relative; z-index:1;\r\n  display: inline-block;\r\n  transition: transform 0.25s ease;\r\n}\r\n.sai-hw-btn-primary:hover .sai-hw-btn-primary-arrow { transform: translateX(5px); }\r\n\r\n.sai-hw-btn-secondary {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.55rem;\r\n  font-family: var(--ff-body);\r\n  font-size: 0.88rem;\r\n  font-weight: 400;\r\n  letter-spacing: 0.06em;\r\n  color: var(--sai-gold);\r\n  background: transparent;\r\n  border: 1px solid var(--sai-border-hard);\r\n  padding: 0.95rem 2rem;\r\n  cursor: pointer;\r\n  text-decoration: none;\r\n  clip-path: polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);\r\n  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;\r\n}\r\n.sai-hw-btn-secondary:hover {\r\n  background: var(--sai-gold-glow2);\r\n  border-color: var(--sai-gold);\r\n  color: var(--sai-gold-light);\r\n}\r\n\r\n.sai-hw-proof {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 1rem;\r\n  opacity: 0;\r\n  animation: sai-hw-up 0.85s 1.1s ease forwards;\r\n}\r\n.sai-hw-proof-bar {\r\n  width: 36px; height: 1px;\r\n  background: linear-gradient(90deg, var(--sai-gold), transparent);\r\n  flex-shrink: 0;\r\n}\r\n.sai-hw-proof-text {\r\n  font-family: var(--ff-body);\r\n  font-size: 0.78rem;\r\n  letter-spacing: 0.07em;\r\n  color: var(--sai-white-muted);\r\n  font-weight: 300;\r\n  margin: 0;\r\n}\r\n.sai-hw-proof-text strong {\r\n  color: var(--sai-gold);\r\n  font-weight: 400;\r\n}\r\n\r\n.sai-hw-stats {\r\n  position: absolute;\r\n  right: 5vw;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  z-index: 2;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 1rem;\r\n  opacity: 0;\r\n  animation: sai-hw-from-right 0.9s 1.3s ease forwards;\r\n}\r\n.sai-hw-stat-card {\r\n  background: var(--sai-card-bg);\r\n  border: 1px solid var(--sai-border);\r\n  padding: 1.3rem 1.7rem;\r\n  min-width: 155px;\r\n  position: relative;\r\n  overflow: hidden;\r\n  transition: border-color 0.3s ease, transform 0.3s ease;\r\n  backdrop-filter: blur(6px);\r\n  -webkit-backdrop-filter: blur(6px);\r\n}\r\n.sai-hw-stat-card::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0; left: 0; right: 0;\r\n  height: 1px;\r\n  background: linear-gradient(90deg, var(--sai-gold), transparent);\r\n}\r\n.sai-hw-stat-card:hover {\r\n  border-color: rgba(201,168,76,0.4);\r\n  transform: translateX(-5px);\r\n}\r\n.sai-hw-stat-num {\r\n  font-family: var(--ff-display);\r\n  font-size: 2.3rem;\r\n  font-weight: 700;\r\n  color: var(--sai-gold);\r\n  line-height: 1;\r\n  margin: 0 0 0.25rem;\r\n  display: block;\r\n}\r\n.sai-hw-stat-lbl {\r\n  font-family: var(--ff-body);\r\n  font-size: 0.68rem;\r\n  letter-spacing: 0.12em;\r\n  text-transform: uppercase;\r\n  color: var(--sai-white-muted);\r\n  font-weight: 300;\r\n  display: block;\r\n}\r\n\r\n.sai-hw-scroll {\r\n  position: absolute;\r\n  bottom: 2rem;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  z-index: 2;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.45rem;\r\n  opacity: 0;\r\n  animation: sai-hw-up 0.8s 1.7s ease forwards;\r\n}\r\n.sai-hw-scroll-txt {\r\n  font-family: var(--ff-body);\r\n  font-size: 0.62rem;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: var(--sai-white-muted);\r\n}\r\n.sai-hw-scroll-mouse {\r\n  width: 20px; height: 32px;\r\n  border: 1px solid var(--sai-border-hard);\r\n  border-radius: 10px;\r\n  display: flex;\r\n  justify-content: center;\r\n  padding-top: 5px;\r\n  box-sizing: border-box;\r\n}\r\n.sai-hw-scroll-wheel {\r\n  width: 3px; height: 6px;\r\n  background: var(--sai-gold);\r\n  border-radius: 2px;\r\n  animation: sai-hw-wheel 1.9s ease-in-out infinite;\r\n}\r\n@keyframes sai-hw-wheel {\r\n  0%,100% { transform:translateY(0);   opacity:1; }\r\n  65%      { transform:translateY(9px); opacity:0; }\r\n}\r\n\r\n@keyframes sai-hw-up {\r\n  from { opacity:0; transform:translateY(26px); }\r\n  to   { opacity:1; transform:translateY(0); }\r\n}\r\n@keyframes sai-hw-from-right {\r\n  from { opacity:0; transform:translateY(-50%) translateX(28px); }\r\n  to   { opacity:1; transform:translateY(-50%) translateX(0); }\r\n}\r\n\r\n@media (max-width: 960px) {\r\n  .sai-hw-stats  { display:none; }\r\n  .sai-hw-h1     { font-size: clamp(2.6rem,10vw,4rem); }\r\n  .sai-hw-vline-l { display:none; }\r\n}\r\n@media (max-width: 520px) {\r\n  .sai-hero-wrap       { padding: 60px 6vw 80px; }\r\n  .sai-hw-btn-primary,\r\n  .sai-hw-btn-secondary { width:100%; justify-content:center; }\r\n  .sai-hw-ctas { gap:0.75rem; }\r\n  .sai-hw-scroll { display:none; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"sai-hero-wrap\" id=\"saiHeroWrap\">\r\n\r\n  <!-- Bg layers -->\r\n  <div class=\"sai-hw-glow\" id=\"saiHwGlow\"><\/div>\r\n  <div class=\"sai-hw-grid\" id=\"saiHwGrid\"><\/div>\r\n  <div class=\"sai-hw-vline sai-hw-vline-r\"><\/div>\r\n  <div class=\"sai-hw-vline sai-hw-vline-l\"><\/div>\r\n\r\n  <!-- Orbs -->\r\n  <div class=\"sai-hw-orb sai-hw-orb-a\"><\/div>\r\n  <div class=\"sai-hw-orb sai-hw-orb-b\"><\/div>\r\n  <div class=\"sai-hw-orb sai-hw-orb-c\"><\/div>\r\n  <div class=\"sai-hw-orb sai-hw-orb-d\"><\/div>\r\n\r\n  <!-- Main content -->\r\n  <div class=\"sai-hw-content\">\r\n\r\n    <div class=\"sai-hw-pill\">\r\n      <span class=\"sai-hw-pill-dot\"><\/span>\r\n      Cairo-Based AI Agency &amp; Automation Studio\r\n    <\/div>\r\n\r\n    <h1 class=\"sai-hw-h1\">\r\n      We Build AI That<br>\r\n      <span class=\"sai-hw-h1-gold\"><span id=\"saiHwType\" class=\"sai-hw-caret\"><\/span><\/span>\r\n    <\/h1>\r\n\r\n    <p class=\"sai-hw-sub\">\r\n      Shawky AI specializes in <strong>intelligent automation<\/strong>,\r\n      custom AI development, and <strong>n8n workflow systems<\/strong> \u2014\r\n      helping businesses move faster, cut costs, and scale with confidence.\r\n    <\/p>\r\n\r\n    <div class=\"sai-hw-ctas\">\r\n      <a href=\"#f\" class=\"sai-hw-btn-primary\">\r\n        <span class=\"sai-hw-btn-primary-text\">Start Your Project<\/span>\r\n        <span class=\"sai-hw-btn-primary-arrow\">\u2192<\/span>\r\n      <\/a>\r\n      <a href=\"#3\" class=\"sai-hw-btn-secondary\">See Our Work<\/a>\r\n    <\/div>\r\n\r\n    <div class=\"sai-hw-proof\">\r\n      <div class=\"sai-hw-proof-bar\"><\/div>\r\n      <p class=\"sai-hw-proof-text\">\r\n        Delivering real AI solutions to businesses across\r\n        <strong>Egypt<\/strong>, the <strong>Gulf<\/strong>, and <strong>Europe<\/strong>\r\n      <\/p>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- Stats -->\r\n  <div class=\"sai-hw-stats\">\r\n    <div class=\"sai-hw-stat-card\">\r\n      <span class=\"sai-hw-stat-num\" data-target=\"50\" data-suffix=\"+\">0<\/span>\r\n      <span class=\"sai-hw-stat-lbl\">Projects Delivered<\/span>\r\n    <\/div>\r\n    <div class=\"sai-hw-stat-card\">\r\n      <span class=\"sai-hw-stat-num\" data-target=\"3\" data-suffix=\"+\">0<\/span>\r\n      <span class=\"sai-hw-stat-lbl\">Years of Expertise<\/span>\r\n    <\/div>\r\n    <div class=\"sai-hw-stat-card\">\r\n      <span class=\"sai-hw-stat-num\" data-target=\"24\" data-suffix=\"h\">0<\/span>\r\n      <span class=\"sai-hw-stat-lbl\">Response Time<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Scroll hint -->\r\n  <div class=\"sai-hw-scroll\">\r\n    <span class=\"sai-hw-scroll-txt\">Scroll<\/span>\r\n    <div class=\"sai-hw-scroll-mouse\">\r\n      <div class=\"sai-hw-scroll-wheel\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n\r\n  \/* \u2500\u2500 TOUCH DEVICE CHECK \u2014 skip custom cursor on phones\/tablets \u2500\u2500 *\/\r\n  if ('ontouchstart' in window || navigator.maxTouchPoints > 0) {\r\n\r\n    \/* \u2500\u2500 TYPEWRITER (touch devices still get this) \u2500\u2500 *\/\r\n    var phrases = ['Actually Works', 'Scales Smartly', 'Runs on n8n', 'Drives Results'];\r\n    var pIdx = 0, cIdx = 0, deleting = false;\r\n    var typeEl = document.getElementById('saiHwType');\r\n    function tick() {\r\n      var phrase = phrases[pIdx];\r\n      if (!deleting) {\r\n        typeEl.textContent = phrase.slice(0, ++cIdx);\r\n        if (cIdx === phrase.length) { deleting = true; setTimeout(tick, 2000); return; }\r\n        setTimeout(tick, 72);\r\n      } else {\r\n        typeEl.textContent = phrase.slice(0, --cIdx);\r\n        if (cIdx === 0) { deleting = false; pIdx = (pIdx + 1) % phrases.length; setTimeout(tick, 380); return; }\r\n        setTimeout(tick, 36);\r\n      }\r\n    }\r\n    setTimeout(tick, 1200);\r\n\r\n    \/* \u2500\u2500 COUNTER (touch devices still get this) \u2500\u2500 *\/\r\n    function runCount(el) {\r\n      var tgt = parseInt(el.getAttribute('data-target'), 10);\r\n      var sfx = el.getAttribute('data-suffix') || '';\r\n      var n = 0, step = tgt \/ 45;\r\n      var iv = setInterval(function() {\r\n        n += step;\r\n        if (n >= tgt) { el.textContent = tgt + sfx; clearInterval(iv); return; }\r\n        el.textContent = Math.floor(n) + sfx;\r\n      }, 32);\r\n    }\r\n    var io = new IntersectionObserver(function(entries) {\r\n      entries.forEach(function(e) { if (e.isIntersecting) { runCount(e.target); io.unobserve(e.target); } });\r\n    }, { threshold: 0.6 });\r\n    document.querySelectorAll('.sai-hw-stat-num[data-target]').forEach(function(el) { io.observe(el); });\r\n\r\n    return; \/* exit \u2014 no cursor, no parallax *\/\r\n  }\r\n\r\n  \/* \u2500\u2500 DESKTOP ONLY FROM HERE \u2500\u2500 *\/\r\n\r\n  var cursorStyle = document.createElement('style');\r\n  cursorStyle.textContent =\r\n    'html, body, body * { cursor: none !important; }' +\r\n    '.sai-page-cursor { position:fixed; width:10px; height:10px; background:#C9A84C; border-radius:50%; pointer-events:none; z-index:999999; transform:translate(-50%,-50%); mix-blend-mode:difference; transition:width .18s ease,height .18s ease; top:-100px; left:-100px; }' +\r\n    '.sai-page-cursor-ring { position:fixed; width:36px; height:36px; border:1.5px solid #C9A84C; border-radius:50%; pointer-events:none; z-index:999998; transform:translate(-50%,-50%); opacity:.65; transition:width .22s ease,height .22s ease,border-color .2s ease,opacity .2s ease; top:-100px; left:-100px; }' +\r\n    '.sai-page-cursor-ring.sai-pcr-big { width:54px; height:54px; border-color:#E8C97A; opacity:1; }';\r\n  document.head.appendChild(cursorStyle);\r\n\r\n  var dot  = document.createElement('div'); dot.className  = 'sai-page-cursor';\r\n  var ring = document.createElement('div'); ring.className = 'sai-page-cursor-ring';\r\n  document.body.appendChild(dot);\r\n  document.body.appendChild(ring);\r\n\r\n  var mx = -200, my = -200, rx = -200, ry = -200;\r\n  document.addEventListener('mousemove', function(e) { mx = e.clientX; my = e.clientY; });\r\n  (function loop() {\r\n    rx += (mx - rx) * 0.14;\r\n    ry += (my - ry) * 0.14;\r\n    dot.style.left  = mx + 'px'; dot.style.top   = my + 'px';\r\n    ring.style.left = rx + 'px'; ring.style.top  = ry + 'px';\r\n    requestAnimationFrame(loop);\r\n  })();\r\n\r\n  document.addEventListener('mouseover', function(e) {\r\n    var t = e.target;\r\n    if (t.tagName==='A'||t.tagName==='BUTTON'||t.classList.contains('sai-hw-stat-card')||t.classList.contains('sai-hw-btn-primary')||t.classList.contains('sai-hw-btn-secondary')) ring.classList.add('sai-pcr-big');\r\n  });\r\n  document.addEventListener('mouseout', function(e) {\r\n    var t = e.target;\r\n    if (t.tagName==='A'||t.tagName==='BUTTON'||t.classList.contains('sai-hw-stat-card')||t.classList.contains('sai-hw-btn-primary')||t.classList.contains('sai-hw-btn-secondary')) ring.classList.remove('sai-pcr-big');\r\n  });\r\n  document.addEventListener('mouseleave', function() { dot.style.opacity='0'; ring.style.opacity='0'; });\r\n  document.addEventListener('mouseenter', function() { dot.style.opacity='1'; ring.style.opacity=''; });\r\n\r\n  \/* \u2500\u2500 TYPEWRITER \u2500\u2500 *\/\r\n  var phrases = ['Actually Works', 'Scales Smartly', 'Runs on n8n', 'Drives Results'];\r\n  var pIdx = 0, cIdx = 0, deleting = false;\r\n  var typeEl = document.getElementById('saiHwType');\r\n  function tick() {\r\n    var phrase = phrases[pIdx];\r\n    if (!deleting) {\r\n      typeEl.textContent = phrase.slice(0, ++cIdx);\r\n      if (cIdx === phrase.length) { deleting = true; setTimeout(tick, 2000); return; }\r\n      setTimeout(tick, 72);\r\n    } else {\r\n      typeEl.textContent = phrase.slice(0, --cIdx);\r\n      if (cIdx === 0) { deleting = false; pIdx = (pIdx + 1) % phrases.length; setTimeout(tick, 380); return; }\r\n      setTimeout(tick, 36);\r\n    }\r\n  }\r\n  setTimeout(tick, 1200);\r\n\r\n  \/* \u2500\u2500 COUNTER \u2500\u2500 *\/\r\n  function runCount(el) {\r\n    var tgt = parseInt(el.getAttribute('data-target'), 10);\r\n    var sfx = el.getAttribute('data-suffix') || '';\r\n    var n = 0, step = tgt \/ 45;\r\n    var iv = setInterval(function() {\r\n      n += step;\r\n      if (n >= tgt) { el.textContent = tgt + sfx; clearInterval(iv); return; }\r\n      el.textContent = Math.floor(n) + sfx;\r\n    }, 32);\r\n  }\r\n  var io = new IntersectionObserver(function(entries) {\r\n    entries.forEach(function(e) { if (e.isIntersecting) { runCount(e.target); io.unobserve(e.target); } });\r\n  }, { threshold: 0.6 });\r\n  document.querySelectorAll('.sai-hw-stat-num[data-target]').forEach(function(el) { io.observe(el); });\r\n\r\n  \/* \u2500\u2500 PARALLAX \u2500\u2500 *\/\r\n  var grid = document.getElementById('saiHwGrid');\r\n  var glow = document.getElementById('saiHwGlow');\r\n  var wrap = document.getElementById('saiHeroWrap');\r\n  wrap.addEventListener('mousemove', function(e) {\r\n    var r  = wrap.getBoundingClientRect();\r\n    var xP = ((e.clientX - r.left) \/ r.width  - 0.5) * 14;\r\n    var yP = ((e.clientY - r.top)  \/ r.height - 0.5) * 14;\r\n    grid.style.transform = 'translate(' + xP + 'px,' + yP + 'px)';\r\n    glow.style.transform = 'translateX(calc(-50% + ' + (xP * 1.6) + 'px)) translateY(' + yP + 'px)';\r\n  });\r\n  wrap.addEventListener('mouseleave', function() {\r\n    grid.style.transform = '';\r\n    glow.style.transform = 'translateX(-50%)';\r\n  });\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-0bdbc97 e-con e-atomic-element e-flexbox-base e-a360fe9 \" data-id=\"0bdbc97\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"0bdbc97\" id=\"1\">\n    \t\t<div class=\"elementor-element elementor-element-bf328cb elementor-widget elementor-widget-html\" data-id=\"bf328cb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     SHAWKY AI \u2014 ABOUT SECTION (Section 2)\r\n     Elementor HTML Widget \u2014 drop into an HTML element\r\n     Fonts already loaded from Hero section \u2014 skip <link> if on same page\r\n     ============================================================ -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\r\n\/* \u2500\u2500 TOKENS scoped to this section \u2500\u2500 *\/\r\n.sai-ab-wrap {\r\n  --sai-gold:        #C9A84C;\r\n  --sai-gold-light:  #E8C97A;\r\n  --sai-gold-dim:    #8A6A28;\r\n  --sai-gold-glow:   rgba(201,168,76,0.18);\r\n  --sai-gold-glow2:  rgba(201,168,76,0.07);\r\n  --sai-white:       #F5F0E8;\r\n  --sai-white-muted: rgba(245,240,232,0.55);\r\n  --sai-white-soft:  rgba(245,240,232,0.80);\r\n  --sai-border:      rgba(201,168,76,0.16);\r\n  --sai-border-hard: rgba(201,168,76,0.36);\r\n  --sai-card-bg:     rgba(12,12,12,0.92);\r\n  --ff-display:      'Cormorant Garamond', Georgia, serif;\r\n  --ff-body:         'DM Sans', sans-serif;\r\n}\r\n\r\n\/* \u2500\u2500 OUTER WRAP \u2500\u2500 *\/\r\n.sai-ab-wrap {\r\n  position: relative;\r\n  width: 100%;\r\n  padding: 120px 5vw 130px;\r\n  box-sizing: border-box;\r\n  background: transparent;\r\n  overflow: hidden;\r\n}\r\n\r\n\/* \u2500\u2500 BACKGROUND EFFECTS \u2500\u2500 *\/\r\n.sai-ab-bg-glow {\r\n  position: absolute;\r\n  bottom: -10%; right: -5%;\r\n  width: 700px; height: 700px;\r\n  background: radial-gradient(ellipse at center,\r\n    rgba(201,168,76,0.10) 0%,\r\n    rgba(201,168,76,0.03) 45%,\r\n    transparent 70%);\r\n  pointer-events: none;\r\n  z-index: 0;\r\n  animation: sai-ab-glow-breathe 6s ease-in-out infinite;\r\n}\r\n.sai-ab-bg-glow-2 {\r\n  position: absolute;\r\n  top: -5%; left: -8%;\r\n  width: 500px; height: 500px;\r\n  background: radial-gradient(ellipse at center,\r\n    rgba(201,168,76,0.06) 0%,\r\n    transparent 65%);\r\n  pointer-events: none;\r\n  z-index: 0;\r\n  animation: sai-ab-glow-breathe 8s ease-in-out infinite reverse;\r\n}\r\n@keyframes sai-ab-glow-breathe {\r\n  0%,100% { opacity:1; transform:scale(1); }\r\n  50%      { opacity:.5; transform:scale(1.1); }\r\n}\r\n\r\n\/* Horizontal rule lines *\/\r\n.sai-ab-hline {\r\n  position: absolute;\r\n  left: 0; right: 0;\r\n  height: 1px;\r\n  pointer-events: none;\r\n  z-index: 0;\r\n  background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.18) 30%, rgba(201,168,76,0.18) 70%, transparent 100%);\r\n}\r\n.sai-ab-hline-top    { top: 0; }\r\n.sai-ab-hline-bottom { bottom: 0; }\r\n\r\n\/* Gold corner accents *\/\r\n.sai-ab-corner {\r\n  position: absolute;\r\n  width: 40px; height: 40px;\r\n  pointer-events: none;\r\n  z-index: 0;\r\n}\r\n.sai-ab-corner::before,\r\n.sai-ab-corner::after {\r\n  content: '';\r\n  position: absolute;\r\n  background: var(--sai-gold);\r\n  opacity: 0.5;\r\n}\r\n.sai-ab-corner::before { width: 1px; height: 100%; top:0; }\r\n.sai-ab-corner::after  { width: 100%; height: 1px; }\r\n.sai-ab-corner-tl { top:0; left:0; }\r\n.sai-ab-corner-tl::after  { top:0; left:0; }\r\n.sai-ab-corner-tl::before { left:0; }\r\n.sai-ab-corner-tr { top:0; right:0; }\r\n.sai-ab-corner-tr::after  { top:0; right:0; }\r\n.sai-ab-corner-tr::before { right:0; }\r\n.sai-ab-corner-bl { bottom:0; left:0; }\r\n.sai-ab-corner-bl::after  { bottom:0; left:0; }\r\n.sai-ab-corner-bl::before { left:0; bottom:0; top:auto; }\r\n.sai-ab-corner-br { bottom:0; right:0; }\r\n.sai-ab-corner-br::after  { bottom:0; right:0; }\r\n.sai-ab-corner-br::before { right:0; bottom:0; top:auto; }\r\n\r\n\/* Floating particles *\/\r\n.sai-ab-particle {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  pointer-events: none;\r\n  z-index: 0;\r\n  animation: sai-ab-particle-float linear infinite;\r\n  opacity: 0;\r\n}\r\n.sai-ab-p1 { width:4px;height:4px; background:var(--sai-gold);   top:20%;left:8%;  animation-duration:10s; animation-delay:0s; box-shadow:0 0 10px 3px var(--sai-gold-glow); }\r\n.sai-ab-p2 { width:3px;height:3px; background:var(--sai-gold-light);top:70%;left:92%; animation-duration:13s; animation-delay:-4s; }\r\n.sai-ab-p3 { width:2px;height:2px; background:var(--sai-gold);   top:45%;left:96%; animation-duration:9s;  animation-delay:-2s; }\r\n.sai-ab-p4 { width:3px;height:3px; background:var(--sai-gold-light);top:85%;left:15%; animation-duration:12s; animation-delay:-7s; box-shadow:0 0 8px 2px var(--sai-gold-glow); }\r\n@keyframes sai-ab-particle-float {\r\n  0%   { transform:translateY(0) translateX(0);     opacity:0; }\r\n  12%  { opacity:1; }\r\n  50%  { transform:translateY(-35px) translateX(12px); opacity:.75; }\r\n  88%  { opacity:1; }\r\n  100% { transform:translateY(0) translateX(0);     opacity:0; }\r\n}\r\n\r\n\/* \u2500\u2500 GRID LAYOUT \u2500\u2500 *\/\r\n.sai-ab-grid {\r\n  position: relative;\r\n  z-index: 2;\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 80px;\r\n  align-items: start;\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* \u2500\u2500 LEFT COLUMN \u2500\u2500 *\/\r\n.sai-ab-left { display:flex; flex-direction:column; }\r\n\r\n\/* Label *\/\r\n.sai-ab-label {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.7rem;\r\n  margin-bottom: 1.8rem;\r\n  opacity: 0;\r\n  transform: translateY(22px);\r\n  transition: opacity .7s ease, transform .7s ease;\r\n}\r\n.sai-ab-label.sai-ab-visible {\r\n  opacity: 1; transform: translateY(0);\r\n  transition-delay: 0.1s;\r\n}\r\n.sai-ab-label-line {\r\n  width: 32px; height: 1px;\r\n  background: var(--sai-gold);\r\n}\r\n.sai-ab-label-text {\r\n  font-family: var(--ff-body);\r\n  font-size: 0.7rem;\r\n  font-weight: 500;\r\n  letter-spacing: 0.2em;\r\n  text-transform: uppercase;\r\n  color: var(--sai-gold);\r\n}\r\n\r\n\/* Headline *\/\r\n.sai-ab-headline {\r\n  font-family: var(--ff-display);\r\n  font-size: clamp(2.4rem, 4.5vw, 4rem);\r\n  font-weight: 700;\r\n  line-height: 1.08;\r\n  color: var(--sai-white);\r\n  margin: 0 0 2rem;\r\n  opacity: 0;\r\n  transform: translateY(28px);\r\n  transition: opacity .8s ease, transform .8s ease;\r\n}\r\n.sai-ab-headline.sai-ab-visible {\r\n  opacity: 1; transform: translateY(0);\r\n  transition-delay: 0.22s;\r\n}\r\n.sai-ab-headline-italic {\r\n  font-style: italic;\r\n  color: var(--sai-gold);\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n.sai-ab-headline-italic::after {\r\n  content: '';\r\n  position: absolute;\r\n  bottom: 2px; left: 0; right: 0;\r\n  height: 1.5px;\r\n  background: linear-gradient(90deg, var(--sai-gold), transparent);\r\n}\r\n\r\n\/* Body text *\/\r\n.sai-ab-body {\r\n  font-family: var(--ff-body);\r\n  font-size: clamp(0.95rem, 1.4vw, 1.05rem);\r\n  font-weight: 300;\r\n  line-height: 1.82;\r\n  color: var(--sai-white-muted);\r\n  margin: 0 0 1.6rem;\r\n  opacity: 0;\r\n  transform: translateY(22px);\r\n  transition: opacity .8s ease, transform .8s ease;\r\n}\r\n.sai-ab-body.sai-ab-visible {\r\n  opacity: 1; transform: translateY(0);\r\n  transition-delay: 0.36s;\r\n}\r\n.sai-ab-body strong {\r\n  color: var(--sai-white-soft);\r\n  font-weight: 400;\r\n}\r\n.sai-ab-body-2 { transition-delay: 0.48s !important; }\r\n\r\n\/* Gold divider *\/\r\n.sai-ab-divider {\r\n  width: 60px; height: 1.5px;\r\n  background: linear-gradient(90deg, var(--sai-gold), transparent);\r\n  margin: 0.4rem 0 2.4rem;\r\n  opacity: 0;\r\n  transition: opacity .7s ease .55s, width .9s ease .55s;\r\n}\r\n.sai-ab-divider.sai-ab-visible {\r\n  opacity: 1; width: 60px;\r\n}\r\n\r\n\/* \u2500\u2500 RIGHT COLUMN \u2500\u2500 *\/\r\n.sai-ab-right { display: flex; flex-direction: column; gap: 1rem; }\r\n\r\n\/* Stat items *\/\r\n.sai-ab-stat-item {\r\n  position: relative;\r\n  padding: 1.5rem 1.8rem;\r\n  border: 1px solid var(--sai-border);\r\n  background: var(--sai-card-bg);\r\n  overflow: hidden;\r\n  opacity: 0;\r\n  transform: translateX(32px);\r\n  transition: opacity .7s ease, transform .7s ease, border-color .3s ease;\r\n  backdrop-filter: blur(8px);\r\n  -webkit-backdrop-filter: blur(8px);\r\n  cursor: default;\r\n}\r\n.sai-ab-stat-item.sai-ab-visible {\r\n  opacity: 1; transform: translateX(0);\r\n}\r\n.sai-ab-stat-item:nth-child(1) { transition-delay: 0.15s; }\r\n.sai-ab-stat-item:nth-child(2) { transition-delay: 0.28s; }\r\n.sai-ab-stat-item:nth-child(3) { transition-delay: 0.41s; }\r\n.sai-ab-stat-item:nth-child(4) { transition-delay: 0.54s; }\r\n\r\n\/* top gold line reveal on hover *\/\r\n.sai-ab-stat-item::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0; left: 0;\r\n  height: 2px;\r\n  width: 0;\r\n  background: linear-gradient(90deg, var(--sai-gold), transparent);\r\n  transition: width .45s ease;\r\n}\r\n.sai-ab-stat-item:hover::before { width: 100%; }\r\n\r\n\/* left accent bar *\/\r\n.sai-ab-stat-item::after {\r\n  content: '';\r\n  position: absolute;\r\n  left: 0; top: 0; bottom: 0;\r\n  width: 2px;\r\n  background: linear-gradient(to bottom, var(--sai-gold), transparent);\r\n  opacity: 0;\r\n  transition: opacity .3s ease;\r\n}\r\n.sai-ab-stat-item:hover::after  { opacity: 1; }\r\n.sai-ab-stat-item:hover { border-color: var(--sai-border-hard); }\r\n\r\n.sai-ab-stat-icon {\r\n  font-size: 1.1rem;\r\n  margin-bottom: 0.55rem;\r\n  display: block;\r\n  filter: sepia(1) saturate(3) hue-rotate(5deg);\r\n  transition: transform .35s ease;\r\n}\r\n.sai-ab-stat-item:hover .sai-ab-stat-icon { transform: scale(1.2) rotate(-5deg); }\r\n\r\n.sai-ab-stat-title {\r\n  font-family: var(--ff-display);\r\n  font-size: 1.5rem;\r\n  font-weight: 700;\r\n  color: var(--sai-gold);\r\n  line-height: 1;\r\n  margin: 0 0 0.3rem;\r\n  display: block;\r\n}\r\n.sai-ab-stat-desc {\r\n  font-family: var(--ff-body);\r\n  font-size: 0.8rem;\r\n  font-weight: 300;\r\n  letter-spacing: 0.04em;\r\n  color: var(--sai-white-muted);\r\n  display: block;\r\n}\r\n\r\n\/* \u2500\u2500 BOTTOM STRIP \u2014 process tags \u2500\u2500 *\/\r\n.sai-ab-process {\r\n  position: relative;\r\n  z-index: 2;\r\n  max-width: 1200px;\r\n  margin: 60px auto 0;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0;\r\n  flex-wrap: wrap;\r\n  opacity: 0;\r\n  transform: translateY(20px);\r\n  transition: opacity .8s ease .7s, transform .8s ease .7s;\r\n}\r\n.sai-ab-process.sai-ab-visible {\r\n  opacity: 1; transform: translateY(0);\r\n}\r\n.sai-ab-process-step {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.6rem;\r\n  padding: 0.6rem 1.2rem;\r\n  border: 1px solid var(--sai-border);\r\n  font-family: var(--ff-body);\r\n  font-size: 0.75rem;\r\n  font-weight: 400;\r\n  letter-spacing: 0.08em;\r\n  text-transform: uppercase;\r\n  color: var(--sai-white-muted);\r\n  background: rgba(201,168,76,0.03);\r\n  clip-path: polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);\r\n  transition: color .25s ease, background .25s ease, border-color .25s ease;\r\n  cursor: default;\r\n}\r\n.sai-ab-process-step:hover {\r\n  color: var(--sai-gold);\r\n  background: var(--sai-gold-glow2);\r\n  border-color: var(--sai-border-hard);\r\n}\r\n.sai-ab-process-step-dot {\r\n  width: 5px; height: 5px;\r\n  background: var(--sai-gold);\r\n  border-radius: 50%;\r\n  flex-shrink: 0;\r\n  opacity: 0.7;\r\n}\r\n.sai-ab-process-arrow {\r\n  font-size: 0.8rem;\r\n  color: var(--sai-gold-dim);\r\n  padding: 0 0.2rem;\r\n  flex-shrink: 0;\r\n}\r\n\r\n\/* \u2500\u2500 ANIMATIONS \u2500\u2500 *\/\r\n@keyframes sai-ab-up {\r\n  from { opacity:0; transform:translateY(26px); }\r\n  to   { opacity:1; transform:translateY(0); }\r\n}\r\n\r\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n@media (max-width: 900px) {\r\n  .sai-ab-grid { grid-template-columns: 1fr; gap: 48px; }\r\n  .sai-ab-stat-item { transform: translateY(22px) !important; }\r\n  .sai-ab-stat-item.sai-ab-visible { transform: translateY(0) !important; }\r\n  .sai-ab-headline { font-size: clamp(2rem, 8vw, 3rem); }\r\n}\r\n@media (max-width: 560px) {\r\n  .sai-ab-wrap { padding: 80px 6vw 90px; }\r\n  .sai-ab-process { gap: 0.4rem; }\r\n  .sai-ab-process-step { font-size: 0.68rem; padding: 0.5rem 0.9rem; }\r\n  .sai-ab-process-arrow { display: none; }\r\n}\r\n\r\n<\/style>\r\n\r\n<!-- \u2500\u2500 ABOUT MARKUP \u2500\u2500 -->\r\n<div class=\"sai-ab-wrap\" id=\"saiAbWrap\">\r\n\r\n  <!-- Background decoration -->\r\n  <div class=\"sai-ab-bg-glow\"><\/div>\r\n  <div class=\"sai-ab-bg-glow-2\"><\/div>\r\n  <div class=\"sai-ab-hline sai-ab-hline-top\"><\/div>\r\n  <div class=\"sai-ab-hline sai-ab-hline-bottom\"><\/div>\r\n  <div class=\"sai-ab-corner sai-ab-corner-tl\"><\/div>\r\n  <div class=\"sai-ab-corner sai-ab-corner-tr\"><\/div>\r\n  <div class=\"sai-ab-corner sai-ab-corner-bl\"><\/div>\r\n  <div class=\"sai-ab-corner sai-ab-corner-br\"><\/div>\r\n\r\n  <!-- Floating particles -->\r\n  <div class=\"sai-ab-particle sai-ab-p1\"><\/div>\r\n  <div class=\"sai-ab-particle sai-ab-p2\"><\/div>\r\n  <div class=\"sai-ab-particle sai-ab-p3\"><\/div>\r\n  <div class=\"sai-ab-particle sai-ab-p4\"><\/div>\r\n\r\n  <!-- Two-column grid -->\r\n  <div class=\"sai-ab-grid\">\r\n\r\n    <!-- LEFT: Text content -->\r\n    <div class=\"sai-ab-left\">\r\n\r\n      <div class=\"sai-ab-label\" data-sai-scroll>\r\n        <span class=\"sai-ab-label-line\"><\/span>\r\n        <span class=\"sai-ab-label-text\">Who We Are<\/span>\r\n      <\/div>\r\n\r\n      <h2 class=\"sai-ab-headline\" data-sai-scroll>\r\n        A Team That <span class=\"sai-ab-headline-italic\">Builds<\/span>,<br>Not Just Consults\r\n      <\/h2>\r\n\r\n      <p class=\"sai-ab-body\" data-sai-scroll>\r\n        Shawky AI is a hands-on AI agency and development studio based in\r\n        <strong>Cairo, Egypt<\/strong>. We don't just advise \u2014 we build.\r\n        From intelligent automation pipelines using <strong>n8n<\/strong> to full\r\n        custom AI applications powered by the latest large language models,\r\n        we take your idea from whiteboard to production.\r\n      <\/p>\r\n\r\n      <div class=\"sai-ab-divider\" data-sai-scroll><\/div>\r\n\r\n      <p class=\"sai-ab-body sai-ab-body-2\" data-sai-scroll>\r\n        We work with <strong>startups<\/strong>, <strong>SMEs<\/strong>, and\r\n        enterprise teams who want real results \u2014 not slide decks. Our team\r\n        combines deep technical expertise in AI, automation, and software\r\n        engineering with a clear focus on business outcomes.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n    <!-- RIGHT: Stats cards -->\r\n    <div class=\"sai-ab-right\" id=\"saiAbStats\">\r\n\r\n      <div class=\"sai-ab-stat-item\" data-sai-scroll>\r\n        <span class=\"sai-ab-stat-icon\">\u26a1<\/span>\r\n        <span class=\"sai-ab-stat-title\">3+ Years<\/span>\r\n        <span class=\"sai-ab-stat-desc\">Building AI Products<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"sai-ab-stat-item\" data-sai-scroll>\r\n        <span class=\"sai-ab-stat-icon\">\ud83d\udd27<\/span>\r\n        <span class=\"sai-ab-stat-title\">50+<\/span>\r\n        <span class=\"sai-ab-stat-desc\">Automation &amp; AI Projects Delivered<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"sai-ab-stat-item\" data-sai-scroll>\r\n        <span class=\"sai-ab-stat-icon\">\ud83c\udf0d<\/span>\r\n        <span class=\"sai-ab-stat-title\">4 Markets<\/span>\r\n        <span class=\"sai-ab-stat-desc\">Egypt \u00b7 UAE \u00b7 Saudi Arabia \u00b7 Europe<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"sai-ab-stat-item\" data-sai-scroll>\r\n        <span class=\"sai-ab-stat-icon\">\ud83d\udd01<\/span>\r\n        <span class=\"sai-ab-stat-title\">End-to-End<\/span>\r\n        <span class=\"sai-ab-stat-desc\">Strategy \u2192 Build \u2192 Deploy \u2192 Support<\/span>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Process strip -->\r\n  <div class=\"sai-ab-process\" id=\"saiAbProcess\" data-sai-scroll>\r\n    <div class=\"sai-ab-process-step\"><span class=\"sai-ab-process-step-dot\"><\/span>Strategy<\/div>\r\n    <span class=\"sai-ab-process-arrow\">\u2192<\/span>\r\n    <div class=\"sai-ab-process-step\"><span class=\"sai-ab-process-step-dot\"><\/span>Design<\/div>\r\n    <span class=\"sai-ab-process-arrow\">\u2192<\/span>\r\n    <div class=\"sai-ab-process-step\"><span class=\"sai-ab-process-step-dot\"><\/span>Build<\/div>\r\n    <span class=\"sai-ab-process-arrow\">\u2192<\/span>\r\n    <div class=\"sai-ab-process-step\"><span class=\"sai-ab-process-step-dot\"><\/span>Deploy<\/div>\r\n    <span class=\"sai-ab-process-arrow\">\u2192<\/span>\r\n    <div class=\"sai-ab-process-step\"><span class=\"sai-ab-process-step-dot\"><\/span>Support<\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n\r\n  \/* \u2500\u2500 SCROLL REVEAL \u2500\u2500\r\n     Watches all [data-sai-scroll] elements inside this section.\r\n     Adds .sai-ab-visible when they enter the viewport.\r\n  \u2500\u2500 *\/\r\n  var revealEls = document.querySelectorAll('#saiAbWrap [data-sai-scroll]');\r\n\r\n  if (!revealEls.length) return;\r\n\r\n  var revealObs = new IntersectionObserver(function (entries) {\r\n    entries.forEach(function (entry) {\r\n      if (entry.isIntersecting) {\r\n        entry.target.classList.add('sai-ab-visible');\r\n        revealObs.unobserve(entry.target);\r\n      }\r\n    });\r\n  }, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' });\r\n\r\n  revealEls.forEach(function (el) { revealObs.observe(el); });\r\n\r\n\r\n  \/* \u2500\u2500 NUMBER COUNT-UP on stat titles that are numeric \u2500\u2500 *\/\r\n  var statTitles = document.querySelectorAll('#saiAbStats .sai-ab-stat-title');\r\n\r\n  var countObs = new IntersectionObserver(function (entries) {\r\n    entries.forEach(function (entry) {\r\n      if (!entry.isIntersecting) return;\r\n      var el  = entry.target;\r\n      var raw = el.textContent.trim();            \/* e.g. \"3+ Years\" or \"50+\" *\/\r\n      var num = parseInt(raw, 10);\r\n      if (isNaN(num) || num < 2) return;          \/* skip non-numeric \/ tiny *\/\r\n      var sfx = raw.replace(\/^\\d+\/, '');          \/* suffix: \"+ Years\", \"+\" \u2026 *\/\r\n      var n = 0, step = num \/ 40;\r\n      countObs.unobserve(el);\r\n      var iv = setInterval(function () {\r\n        n += step;\r\n        if (n >= num) { el.textContent = num + sfx; clearInterval(iv); return; }\r\n        el.textContent = Math.floor(n) + sfx;\r\n      }, 30);\r\n    });\r\n  }, { threshold: 0.7 });\r\n\r\n  statTitles.forEach(function (el) { countObs.observe(el); });\r\n\r\n\r\n  \/* \u2500\u2500 PARALLAX glow on mouse move inside section \u2500\u2500 *\/\r\n  var wrap  = document.getElementById('saiAbWrap');\r\n  var glows = wrap.querySelectorAll('.sai-ab-bg-glow, .sai-ab-bg-glow-2');\r\n\r\n  wrap.addEventListener('mousemove', function (e) {\r\n    var r  = wrap.getBoundingClientRect();\r\n    var xP = ((e.clientX - r.left)  \/ r.width  - 0.5) * 20;\r\n    var yP = ((e.clientY - r.top)   \/ r.height - 0.5) * 20;\r\n    glows[0].style.transform = 'translate(' + xP + 'px,' + yP + 'px)';\r\n    glows[1].style.transform = 'translate(' + (-xP * 0.6) + 'px,' + (-yP * 0.6) + 'px)';\r\n  });\r\n\r\n  wrap.addEventListener('mouseleave', function () {\r\n    glows[0].style.transform = '';\r\n    glows[1].style.transform = '';\r\n  });\r\n\r\n\r\n  \/* \u2500\u2500 CARD tilt on hover \u2500\u2500 *\/\r\n  var cards = document.querySelectorAll('#saiAbWrap .sai-ab-stat-item');\r\n  cards.forEach(function (card) {\r\n    card.addEventListener('mousemove', function (e) {\r\n      var r   = card.getBoundingClientRect();\r\n      var xC  = (e.clientX - r.left)  \/ r.width  - 0.5;   \/* -0.5 \u2192 0.5 *\/\r\n      var yC  = (e.clientY - r.top)   \/ r.height - 0.5;\r\n      var tiltX = -(yC * 7).toFixed(1);\r\n      var tiltY =  (xC * 7).toFixed(1);\r\n      card.style.transform = 'translateX(0) perspective(600px) rotateX(' + tiltX + 'deg) rotateY(' + tiltY + 'deg)';\r\n    });\r\n    card.addEventListener('mouseleave', function () {\r\n      card.style.transform = '';\r\n    });\r\n  });\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-d58841d e-con e-atomic-element e-flexbox-base e-ab10476 \" data-id=\"d58841d\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d58841d\" id=\"2\">\n    \t\t<div class=\"elementor-element elementor-element-6bf4bac elementor-widget elementor-widget-html\" data-id=\"6bf4bac\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     SHAWKY AI \u2014 SERVICES SECTION (Section 3)\r\n     Elementor HTML Widget \u2014 drop into an HTML element\r\n     Matches Section 2 (About) design system exactly\r\n     Fonts: Cormorant Garamond + DM Sans (loaded from About section;\r\n     add the <link> tags below only if this is NOT on the same page)\r\n     ============================================================ -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\r\n\/* \u2500\u2500 TOKENS (scoped to this section) \u2500\u2500 *\/\r\n.sai-sv-wrap {\r\n  --sai-gold:        #C9A84C;\r\n  --sai-gold-light:  #E8C97A;\r\n  --sai-gold-dim:    #8A6A28;\r\n  --sai-gold-glow:   rgba(201,168,76,0.18);\r\n  --sai-gold-glow2:  rgba(201,168,76,0.07);\r\n  --sai-white:       #F5F0E8;\r\n  --sai-white-muted: rgba(245,240,232,0.55);\r\n  --sai-white-soft:  rgba(245,240,232,0.80);\r\n  --sai-border:      rgba(201,168,76,0.16);\r\n  --sai-border-hard: rgba(201,168,76,0.36);\r\n  --sai-card-bg:     rgba(12,12,12,0.95);\r\n  --ff-display:      'Cormorant Garamond', Georgia, serif;\r\n  --ff-body:         'DM Sans', sans-serif;\r\n  --ff-mono:         'Courier New', monospace;\r\n}\r\n\r\n\/* \u2500\u2500 OUTER WRAP \u2500\u2500 *\/\r\n.sai-sv-wrap {\r\n  position: relative;\r\n  width: 100%;\r\n  padding: 120px 5vw 130px;\r\n  box-sizing: border-box;\r\n  background: transparent;\r\n  overflow: hidden;\r\n}\r\n\r\n\/* \u2500\u2500 BACKGROUND EFFECTS \u2500\u2500 *\/\r\n.sai-sv-bg-glow {\r\n  position: absolute;\r\n  top: -10%; left: -5%;\r\n  width: 700px; height: 700px;\r\n  background: radial-gradient(ellipse at center,\r\n    rgba(201,168,76,0.10) 0%,\r\n    rgba(201,168,76,0.03) 45%,\r\n    transparent 70%);\r\n  pointer-events: none;\r\n  z-index: 0;\r\n  animation: sai-sv-glow-breathe 7s ease-in-out infinite;\r\n}\r\n.sai-sv-bg-glow-2 {\r\n  position: absolute;\r\n  bottom: -5%; right: -8%;\r\n  width: 500px; height: 500px;\r\n  background: radial-gradient(ellipse at center,\r\n    rgba(201,168,76,0.07) 0%,\r\n    transparent 65%);\r\n  pointer-events: none;\r\n  z-index: 0;\r\n  animation: sai-sv-glow-breathe 9s ease-in-out infinite reverse;\r\n}\r\n@keyframes sai-sv-glow-breathe {\r\n  0%,100% { opacity:1; transform:scale(1); }\r\n  50%      { opacity:.45; transform:scale(1.12); }\r\n}\r\n\r\n\/* Horizontal rule lines *\/\r\n.sai-sv-hline {\r\n  position: absolute;\r\n  left: 0; right: 0; height: 1px;\r\n  pointer-events: none; z-index: 0;\r\n  background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.18) 30%, rgba(201,168,76,0.18) 70%, transparent 100%);\r\n}\r\n.sai-sv-hline-top    { top: 0; }\r\n.sai-sv-hline-bottom { bottom: 0; }\r\n\r\n\/* Gold corner accents *\/\r\n.sai-sv-corner {\r\n  position: absolute;\r\n  width: 40px; height: 40px;\r\n  pointer-events: none; z-index: 0;\r\n}\r\n.sai-sv-corner::before,\r\n.sai-sv-corner::after {\r\n  content: '';\r\n  position: absolute;\r\n  background: var(--sai-gold);\r\n  opacity: 0.5;\r\n}\r\n.sai-sv-corner::before { width: 1px; height: 100%; top:0; }\r\n.sai-sv-corner::after  { width: 100%; height: 1px; }\r\n.sai-sv-corner-tl { top:0; left:0; }\r\n.sai-sv-corner-tl::after  { top:0; left:0; }\r\n.sai-sv-corner-tl::before { left:0; }\r\n.sai-sv-corner-tr { top:0; right:0; }\r\n.sai-sv-corner-tr::after  { top:0; right:0; }\r\n.sai-sv-corner-tr::before { right:0; }\r\n.sai-sv-corner-bl { bottom:0; left:0; }\r\n.sai-sv-corner-bl::after  { bottom:0; left:0; }\r\n.sai-sv-corner-bl::before { left:0; bottom:0; top:auto; }\r\n.sai-sv-corner-br { bottom:0; right:0; }\r\n.sai-sv-corner-br::after  { bottom:0; right:0; }\r\n.sai-sv-corner-br::before { right:0; bottom:0; top:auto; }\r\n\r\n\/* Floating particles *\/\r\n.sai-sv-particle {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  pointer-events: none; z-index: 0;\r\n  animation: sai-sv-particle-float linear infinite;\r\n  opacity: 0;\r\n}\r\n.sai-sv-p1 { width:4px;height:4px; background:var(--sai-gold);        top:15%; left:5%;  animation-duration:11s; animation-delay:0s;   box-shadow:0 0 10px 3px var(--sai-gold-glow); }\r\n.sai-sv-p2 { width:3px;height:3px; background:var(--sai-gold-light);   top:65%; left:94%; animation-duration:14s; animation-delay:-5s; }\r\n.sai-sv-p3 { width:2px;height:2px; background:var(--sai-gold);         top:40%; left:97%; animation-duration:8s;  animation-delay:-3s; }\r\n.sai-sv-p4 { width:3px;height:3px; background:var(--sai-gold-light);   top:80%; left:10%; animation-duration:13s; animation-delay:-8s; box-shadow:0 0 8px 2px var(--sai-gold-glow); }\r\n.sai-sv-p5 { width:2px;height:2px; background:var(--sai-gold);         top:50%; left:50%; animation-duration:10s; animation-delay:-2s; }\r\n@keyframes sai-sv-particle-float {\r\n  0%   { transform:translateY(0) translateX(0);      opacity:0; }\r\n  12%  { opacity:1; }\r\n  50%  { transform:translateY(-40px) translateX(15px); opacity:.7; }\r\n  88%  { opacity:1; }\r\n  100% { transform:translateY(0) translateX(0);      opacity:0; }\r\n}\r\n\r\n\/* \u2500\u2500 SECTION HEADER \u2500\u2500 *\/\r\n.sai-sv-header {\r\n  position: relative; z-index: 2;\r\n  text-align: center;\r\n  max-width: 780px;\r\n  margin: 0 auto 72px;\r\n}\r\n\r\n.sai-sv-label {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.7rem;\r\n  margin-bottom: 1.8rem;\r\n  opacity: 0;\r\n  transform: translateY(22px);\r\n  transition: opacity .7s ease, transform .7s ease;\r\n}\r\n.sai-sv-label.sai-sv-visible { opacity:1; transform:translateY(0); transition-delay:0.1s; }\r\n.sai-sv-label-line {\r\n  width: 32px; height: 1px;\r\n  background: var(--sai-gold);\r\n}\r\n.sai-sv-label-text {\r\n  font-family: var(--ff-body);\r\n  font-size: 0.7rem;\r\n  font-weight: 500;\r\n  letter-spacing: 0.22em;\r\n  text-transform: uppercase;\r\n  color: var(--sai-gold);\r\n}\r\n\r\n.sai-sv-headline {\r\n  font-family: var(--ff-display);\r\n  font-size: clamp(2.4rem, 4.5vw, 4rem);\r\n  font-weight: 700;\r\n  line-height: 1.08;\r\n  color: var(--sai-white);\r\n  margin: 0 0 1.6rem;\r\n  opacity: 0;\r\n  transform: translateY(28px);\r\n  transition: opacity .8s ease, transform .8s ease;\r\n}\r\n.sai-sv-headline.sai-sv-visible { opacity:1; transform:translateY(0); transition-delay:0.22s; }\r\n.sai-sv-headline-italic {\r\n  font-style: italic;\r\n  color: var(--sai-gold);\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n.sai-sv-headline-italic::after {\r\n  content: '';\r\n  position: absolute;\r\n  bottom: 2px; left: 0; right: 0;\r\n  height: 1.5px;\r\n  background: linear-gradient(90deg, var(--sai-gold), transparent);\r\n}\r\n\r\n.sai-sv-sub {\r\n  font-family: var(--ff-body);\r\n  font-size: clamp(0.9rem, 1.3vw, 1rem);\r\n  font-weight: 300;\r\n  line-height: 1.8;\r\n  color: var(--sai-white-muted);\r\n  margin: 0 0 2rem;\r\n  opacity: 0;\r\n  transform: translateY(18px);\r\n  transition: opacity .8s ease, transform .8s ease;\r\n}\r\n.sai-sv-sub.sai-sv-visible { opacity:1; transform:translateY(0); transition-delay:0.36s; }\r\n\r\n\/* Star divider *\/\r\n.sai-sv-divider {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 14px;\r\n  opacity: 0;\r\n  transition: opacity .7s ease .5s;\r\n}\r\n.sai-sv-divider.sai-sv-visible { opacity:1; }\r\n.sai-sv-divider-line {\r\n  width: 60px; height: 1px;\r\n  background: linear-gradient(90deg, transparent, var(--sai-gold));\r\n}\r\n.sai-sv-divider-line:last-child {\r\n  background: linear-gradient(90deg, var(--sai-gold), transparent);\r\n}\r\n\r\n\/* \u2500\u2500 SERVICES GRID \u2500\u2500 *\/\r\n.sai-sv-grid {\r\n  position: relative; z-index: 2;\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 1px;\r\n  background: var(--sai-border);\r\n  border: 1px solid var(--sai-border);\r\n  max-width: 1260px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* \u2500\u2500 CARD \u2500\u2500 *\/\r\n.sai-sv-card {\r\n  background: var(--sai-card-bg);\r\n  padding: 38px 30px 34px;\r\n  position: relative;\r\n  overflow: hidden;\r\n  cursor: default;\r\n  opacity: 0;\r\n  transform: translateY(32px);\r\n  transition: opacity .7s ease, transform .7s ease, background .3s ease, border-color .3s ease;\r\n  backdrop-filter: blur(6px);\r\n  -webkit-backdrop-filter: blur(6px);\r\n}\r\n.sai-sv-card.sai-sv-visible { opacity:1; transform:translateY(0); }\r\n\r\n\/* stagger delays 1\u20136 *\/\r\n.sai-sv-card:nth-child(1) { transition-delay:0.10s; }\r\n.sai-sv-card:nth-child(2) { transition-delay:0.22s; }\r\n.sai-sv-card:nth-child(3) { transition-delay:0.34s; }\r\n.sai-sv-card:nth-child(4) { transition-delay:0.46s; }\r\n.sai-sv-card:nth-child(5) { transition-delay:0.58s; }\r\n.sai-sv-card:nth-child(6) { transition-delay:0.70s; }\r\n\r\n\/* top gold reveal line *\/\r\n.sai-sv-card::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0; left: 0;\r\n  height: 2px; width: 0;\r\n  background: linear-gradient(90deg, var(--sai-gold), transparent);\r\n  transition: width .45s ease;\r\n}\r\n.sai-sv-card:hover::before { width: 100%; }\r\n\r\n\/* left accent bar *\/\r\n.sai-sv-card::after {\r\n  content: '';\r\n  position: absolute;\r\n  left: 0; top: 0; bottom: 0;\r\n  width: 2px;\r\n  background: linear-gradient(to bottom, var(--sai-gold), transparent);\r\n  opacity: 0;\r\n  transition: opacity .3s ease;\r\n}\r\n.sai-sv-card:hover::after  { opacity:1; }\r\n.sai-sv-card:hover { background: #111108; }\r\n\r\n\/* \u2500\u2500 FEATURED card (Service 3) \u2500\u2500 *\/\r\n.sai-sv-card-featured {\r\n  background: linear-gradient(145deg, #C9A84C 0%, #E8C96A 45%, #B8922E 100%) !important;\r\n}\r\n.sai-sv-card-featured:hover {\r\n  background: linear-gradient(145deg, #D4B455 0%, #F0D470 45%, #C49A35 100%) !important;\r\n}\r\n.sai-sv-card-featured::before,\r\n.sai-sv-card-featured::after { display:none; }\r\n\r\n.sai-sv-featured-badge {\r\n  position: absolute;\r\n  top: 14px; right: 14px;\r\n  font-family: var(--ff-mono);\r\n  font-size: 8.5px;\r\n  font-weight: 700;\r\n  letter-spacing: 2px;\r\n  text-transform: uppercase;\r\n  color: var(--sai-gold);\r\n  background: #0D0D0D;\r\n  padding: 4px 10px;\r\n  border-radius: 2px;\r\n  animation: sai-sv-badge-pulse 3s ease-in-out infinite;\r\n}\r\n@keyframes sai-sv-badge-pulse {\r\n  0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }\r\n  50%      { box-shadow: 0 0 0 4px rgba(201,168,76,0.2); }\r\n}\r\n\r\n\/* \u2500\u2500 CARD TOP ROW \u2500\u2500 *\/\r\n.sai-sv-card-top {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: flex-start;\r\n  margin-bottom: 22px;\r\n}\r\n\r\n.sai-sv-icon-wrap {\r\n  width: 52px; height: 52px;\r\n  background: rgba(201,168,76,0.08);\r\n  border: 1px solid rgba(201,168,76,0.2);\r\n  border-radius: 4px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  transition: background .3s ease, border-color .3s ease, transform .35s ease;\r\n}\r\n.sai-sv-card:hover .sai-sv-icon-wrap {\r\n  background: rgba(201,168,76,0.14);\r\n  border-color: rgba(201,168,76,0.4);\r\n  transform: scale(1.08) rotate(-4deg);\r\n}\r\n.sai-sv-card-featured .sai-sv-icon-wrap {\r\n  background: rgba(0,0,0,0.14);\r\n  border-color: rgba(0,0,0,0.22);\r\n}\r\n\r\n.sai-sv-num {\r\n  font-family: var(--ff-mono);\r\n  font-size: 12px;\r\n  color: rgba(201,168,76,0.3);\r\n  font-weight: 700;\r\n  letter-spacing: 1px;\r\n  line-height: 1;\r\n  padding-top: 4px;\r\n  transition: color .3s ease;\r\n}\r\n.sai-sv-card:hover .sai-sv-num { color: rgba(201,168,76,0.6); }\r\n\r\n\/* \u2500\u2500 CARD CONTENT \u2500\u2500 *\/\r\n.sai-sv-card-title {\r\n  font-family: var(--ff-display);\r\n  font-size: 1.22rem;\r\n  font-weight: 700;\r\n  color: var(--sai-white);\r\n  margin: 0 0 10px;\r\n  line-height: 1.3;\r\n}\r\n.sai-sv-card-title em {\r\n  font-style: italic;\r\n  color: var(--sai-gold);\r\n}\r\n\r\n.sai-sv-card-desc {\r\n  font-family: var(--ff-body);\r\n  font-size: 0.83rem;\r\n  font-weight: 300;\r\n  line-height: 1.78;\r\n  color: var(--sai-white-muted);\r\n  margin: 0 0 16px;\r\n}\r\n.sai-sv-card-desc strong {\r\n  color: var(--sai-white-soft);\r\n  font-weight: 400;\r\n}\r\n\r\n.sai-sv-micro-label {\r\n  font-family: var(--ff-mono);\r\n  font-size: 9.5px;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: var(--sai-gold);\r\n  font-weight: 700;\r\n  margin-bottom: 8px;\r\n  display: block;\r\n}\r\n\r\n\/* List *\/\r\n.sai-sv-list {\r\n  margin: 0; padding: 0; list-style: none;\r\n}\r\n.sai-sv-list li {\r\n  font-family: var(--ff-body);\r\n  font-size: 0.8rem;\r\n  font-weight: 300;\r\n  color: var(--sai-white-muted);\r\n  padding: 6px 0 6px 18px;\r\n  position: relative;\r\n  border-bottom: 1px solid rgba(201,168,76,0.07);\r\n  line-height: 1.55;\r\n  transition: color .25s ease;\r\n}\r\n.sai-sv-list li:last-child { border-bottom: none; }\r\n.sai-sv-list li::before {\r\n  content: '\u2192';\r\n  position: absolute;\r\n  left: 0; top: 7px;\r\n  color: var(--sai-gold);\r\n  font-size: 10px;\r\n}\r\n.sai-sv-card:hover .sai-sv-list li { color: var(--sai-white-soft); }\r\n\r\n\/* Dark list (for featured gold card) *\/\r\n.sai-sv-list-dark li {\r\n  color: rgba(0,0,0,0.60) !important;\r\n  border-bottom-color: rgba(0,0,0,0.1) !important;\r\n}\r\n.sai-sv-list-dark li::before { color: rgba(0,0,0,0.45) !important; }\r\n\r\n\/* Pills *\/\r\n.sai-sv-pills {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 5px;\r\n}\r\n.sai-sv-pill {\r\n  display: inline-block;\r\n  font-family: var(--ff-mono);\r\n  font-size: 9.5px;\r\n  font-weight: 700;\r\n  letter-spacing: 0.05em;\r\n  color: var(--sai-gold);\r\n  background: rgba(201,168,76,0.07);\r\n  border: 1px solid rgba(201,168,76,0.22);\r\n  padding: 4px 10px;\r\n  border-radius: 2px;\r\n  transition: background .25s ease, border-color .25s ease;\r\n}\r\n.sai-sv-card:hover .sai-sv-pill {\r\n  background: rgba(201,168,76,0.12);\r\n  border-color: rgba(201,168,76,0.4);\r\n}\r\n.sai-sv-pill-gap { margin-top: 10px; }\r\n\r\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n@media (max-width: 1024px) {\r\n  .sai-sv-grid { grid-template-columns: repeat(2, 1fr); }\r\n  .sai-sv-wrap { padding: 90px 5vw 100px; }\r\n}\r\n@media (max-width: 640px) {\r\n  .sai-sv-wrap { padding: 72px 6vw 80px; }\r\n  .sai-sv-grid { grid-template-columns: 1fr; }\r\n  .sai-sv-header { margin-bottom: 48px; }\r\n  .sai-sv-card { padding: 28px 20px 26px; }\r\n  .sai-sv-card-title { font-size: 1.1rem; }\r\n  .sai-sv-divider-line { width: 40px; }\r\n}\r\n\r\n<\/style>\r\n\r\n<!-- \u2500\u2500 SERVICES MARKUP \u2500\u2500 -->\r\n<div class=\"sai-sv-wrap\" id=\"saiSvWrap\">\r\n\r\n  <!-- Background decoration -->\r\n  <div class=\"sai-sv-bg-glow\"><\/div>\r\n  <div class=\"sai-sv-bg-glow-2\"><\/div>\r\n  <div class=\"sai-sv-hline sai-sv-hline-top\"><\/div>\r\n  <div class=\"sai-sv-hline sai-sv-hline-bottom\"><\/div>\r\n  <div class=\"sai-sv-corner sai-sv-corner-tl\"><\/div>\r\n  <div class=\"sai-sv-corner sai-sv-corner-tr\"><\/div>\r\n  <div class=\"sai-sv-corner sai-sv-corner-bl\"><\/div>\r\n  <div class=\"sai-sv-corner sai-sv-corner-br\"><\/div>\r\n\r\n  <!-- Particles -->\r\n  <div class=\"sai-sv-particle sai-sv-p1\"><\/div>\r\n  <div class=\"sai-sv-particle sai-sv-p2\"><\/div>\r\n  <div class=\"sai-sv-particle sai-sv-p3\"><\/div>\r\n  <div class=\"sai-sv-particle sai-sv-p4\"><\/div>\r\n  <div class=\"sai-sv-particle sai-sv-p5\"><\/div>\r\n\r\n  <!-- Section header -->\r\n  <div class=\"sai-sv-header\">\r\n\r\n    <div class=\"sai-sv-label\" data-sai-sv-scroll>\r\n      <span class=\"sai-sv-label-line\"><\/span>\r\n      <span class=\"sai-sv-label-text\">What We Do<\/span>\r\n      <span class=\"sai-sv-label-line\" style=\"background:linear-gradient(90deg,var(--sai-gold),transparent)\"><\/span>\r\n    <\/div>\r\n\r\n    <h2 class=\"sai-sv-headline\" data-sai-sv-scroll>\r\n      AI &amp; Automation Services<br>\r\n      <span class=\"sai-sv-headline-italic\">Built Around Your Business<\/span>\r\n    <\/h2>\r\n\r\n    <p class=\"sai-sv-sub\" data-sai-sv-scroll>\r\n      From intelligent workflow automation to full-stack AI applications \u2014 we build\r\n      <strong style=\"color:rgba(245,240,232,0.80);font-weight:400;\">production-ready systems<\/strong> that create real business outcomes.\r\n    <\/p>\r\n\r\n    <div class=\"sai-sv-divider\" data-sai-sv-scroll>\r\n      <span class=\"sai-sv-divider-line\"><\/span>\r\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n        <polygon points=\"12,2 14.9,9.1 22.5,9.1 16.6,13.8 18.8,21 12,16.9 5.2,21 7.4,13.8 1.5,9.1 9.1,9.1\" fill=\"#C9A84C\"\/>\r\n      <\/svg>\r\n      <span class=\"sai-sv-divider-line\"><\/span>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- Services grid -->\r\n  <div class=\"sai-sv-grid\" id=\"saiSvGrid\">\r\n\r\n    <!-- 01 -->\r\n    <div class=\"sai-sv-card\" data-sai-sv-scroll>\r\n      <div class=\"sai-sv-card-top\">\r\n        <div class=\"sai-sv-icon-wrap\">\r\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n            <rect x=\"4\" y=\"4\" width=\"10\" height=\"10\" rx=\"1.5\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <rect x=\"18\" y=\"4\" width=\"10\" height=\"10\" rx=\"1.5\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <rect x=\"4\" y=\"18\" width=\"10\" height=\"10\" rx=\"1.5\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <rect x=\"18\" y=\"18\" width=\"10\" height=\"10\" rx=\"1.5\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <line x1=\"14\" y1=\"9\" x2=\"18\" y2=\"9\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <line x1=\"9\" y1=\"14\" x2=\"9\" y2=\"18\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <line x1=\"23\" y1=\"14\" x2=\"23\" y2=\"18\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <span class=\"sai-sv-num\">01<\/span>\r\n      <\/div>\r\n      <h3 class=\"sai-sv-card-title\">n8n Workflow Automation<\/h3>\r\n      <p class=\"sai-sv-card-desc\">We design and build powerful automated workflows using n8n \u2014 connecting your tools, eliminating repetitive tasks, and making your business <strong>run on autopilot<\/strong>.<\/p>\r\n      <span class=\"sai-sv-micro-label\">What we automate:<\/span>\r\n      <ul class=\"sai-sv-list\">\r\n        <li>Lead capture \u2192 CRM \u2192 follow-up sequences<\/li>\r\n        <li>Invoice generation and payment tracking<\/li>\r\n        <li>Social media scheduling and reporting<\/li>\r\n        <li>Internal notifications and team alerts<\/li>\r\n        <li>Data sync: Sheets, Notion, Airtable, Slack, WhatsApp<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <!-- 02 -->\r\n    <div class=\"sai-sv-card\" data-sai-sv-scroll>\r\n      <div class=\"sai-sv-card-top\">\r\n        <div class=\"sai-sv-icon-wrap\">\r\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n            <circle cx=\"16\" cy=\"16\" r=\"11\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <path d=\"M10 16 Q13 11 16 16 Q19 21 22 16\" stroke=\"#C9A84C\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"\/>\r\n            <circle cx=\"10\" cy=\"16\" r=\"1.8\" fill=\"#C9A84C\"\/>\r\n            <circle cx=\"22\" cy=\"16\" r=\"1.8\" fill=\"#C9A84C\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <span class=\"sai-sv-num\">02<\/span>\r\n      <\/div>\r\n      <h3 class=\"sai-sv-card-title\">AI Chatbot &amp; Virtual Assistant Development<\/h3>\r\n      <p class=\"sai-sv-card-desc\">Custom AI chatbots built for your business \u2014 not generic off-the-shelf bots. Assistants that understand your products, speak your language, and handle queries <strong>24\/7<\/strong>.<\/p>\r\n      <span class=\"sai-sv-micro-label\">Built with:<\/span>\r\n      <div class=\"sai-sv-pills\">\r\n        <span class=\"sai-sv-pill\">GPT-4<\/span>\r\n        <span class=\"sai-sv-pill\">Claude<\/span>\r\n        <span class=\"sai-sv-pill\">LangChain<\/span>\r\n        <span class=\"sai-sv-pill\">Custom Knowledge Bases<\/span>\r\n      <\/div>\r\n      <span class=\"sai-sv-micro-label sai-sv-pill-gap\">Use cases:<\/span>\r\n      <ul class=\"sai-sv-list\">\r\n        <li>Customer support &amp; lead qualification<\/li>\r\n        <li>Internal HR bots &amp; booking assistants<\/li>\r\n        <li>FAQ automation<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <!-- 03 \u2014 Featured -->\r\n    <div class=\"sai-sv-card sai-sv-card-featured\" data-sai-sv-scroll>\r\n      <div class=\"sai-sv-featured-badge\">Most Popular<\/div>\r\n      <div class=\"sai-sv-card-top\">\r\n        <div class=\"sai-sv-icon-wrap\">\r\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n            <path d=\"M6 16 L13 9 L20 16 L13 23 Z\" fill=\"#0A0A0A\" stroke=\"#0A0A0A\" stroke-width=\"1\"\/>\r\n            <path d=\"M18 10 L27 10 L27 22 L18 22\" stroke=\"#0A0A0A\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"\/>\r\n            <line x1=\"21\" y1=\"14\" x2=\"27\" y2=\"14\" stroke=\"#0A0A0A\" stroke-width=\"1.5\"\/>\r\n            <line x1=\"21\" y1=\"18\" x2=\"27\" y2=\"18\" stroke=\"#0A0A0A\" stroke-width=\"1.5\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <span class=\"sai-sv-num\" style=\"color:rgba(0,0,0,0.35)\">03<\/span>\r\n      <\/div>\r\n      <h3 class=\"sai-sv-card-title\" style=\"color:#0A0A0A;\">AI + n8n Integration<br><em style=\"color:#3a2000;\">Smart Automation<\/em><\/h3>\r\n      <p class=\"sai-sv-card-desc\" style=\"color:rgba(0,0,0,0.6);\">The next level \u2014 we combine n8n with AI to create systems that don't just <em>move<\/em> data, they <strong style=\"color:rgba(0,0,0,0.75);font-weight:500;\">think<\/strong>.<\/p>\r\n      <span class=\"sai-sv-micro-label\" style=\"color:#3a2000;\">Examples:<\/span>\r\n      <ul class=\"sai-sv-list sai-sv-list-dark\">\r\n        <li>Emails \u2192 AI summarises &amp; routes \u2192 smart reply drafts<\/li>\r\n        <li>Complaint form \u2192 AI sentiment \u2192 priority routing<\/li>\r\n        <li>New lead \u2192 AI scores \u2192 personalised email\/WhatsApp<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <!-- 04 -->\r\n    <div class=\"sai-sv-card\" data-sai-sv-scroll>\r\n      <div class=\"sai-sv-card-top\">\r\n        <div class=\"sai-sv-icon-wrap\">\r\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n            <rect x=\"5\" y=\"7\" width=\"22\" height=\"15\" rx=\"2\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <line x1=\"9\" y1=\"12\" x2=\"16\" y2=\"12\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <line x1=\"9\" y1=\"16\" x2=\"23\" y2=\"16\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <line x1=\"9\" y1=\"19.5\" x2=\"18\" y2=\"19.5\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <line x1=\"13.5\" y1=\"22\" x2=\"18.5\" y2=\"22\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <line x1=\"13.5\" y1=\"25\" x2=\"18.5\" y2=\"25\" stroke=\"#C9A84C\" stroke-width=\"1\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <span class=\"sai-sv-num\">04<\/span>\r\n      <\/div>\r\n      <h3 class=\"sai-sv-card-title\">Custom AI Application Development<\/h3>\r\n      <p class=\"sai-sv-card-desc\">Full-stack AI-powered web applications built from scratch. We handle everything: <strong>backend, frontend, AI integration, database design,<\/strong> and deployment.<\/p>\r\n      <span class=\"sai-sv-micro-label\">Examples:<\/span>\r\n      <div class=\"sai-sv-pills\">\r\n        <span class=\"sai-sv-pill\">Internal Tools<\/span>\r\n        <span class=\"sai-sv-pill\">SaaS Products<\/span>\r\n        <span class=\"sai-sv-pill\">AI Dashboards<\/span>\r\n        <span class=\"sai-sv-pill\">Document Processing<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- 05 -->\r\n    <div class=\"sai-sv-card\" data-sai-sv-scroll>\r\n      <div class=\"sai-sv-card-top\">\r\n        <div class=\"sai-sv-icon-wrap\">\r\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n            <polyline points=\"5,21 11,14 16,18 22,10 27,14\" stroke=\"#C9A84C\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n            <circle cx=\"5\"  cy=\"21\" r=\"2\" fill=\"#C9A84C\"\/>\r\n            <circle cx=\"16\" cy=\"18\" r=\"2\" fill=\"#C9A84C\"\/>\r\n            <circle cx=\"27\" cy=\"14\" r=\"2\" fill=\"#C9A84C\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <span class=\"sai-sv-num\">05<\/span>\r\n      <\/div>\r\n      <h3 class=\"sai-sv-card-title\">LLM Integration &amp; API Development<\/h3>\r\n      <p class=\"sai-sv-card-desc\">Already have a product? <strong>We add AI to it.<\/strong> We integrate OpenAI, Claude, Gemini, or open-source LLMs into your existing software through clean, production-ready APIs.<\/p>\r\n      <span class=\"sai-sv-micro-label\">Models we work with:<\/span>\r\n      <div class=\"sai-sv-pills\">\r\n        <span class=\"sai-sv-pill\">OpenAI<\/span>\r\n        <span class=\"sai-sv-pill\">Claude<\/span>\r\n        <span class=\"sai-sv-pill\">Gemini<\/span>\r\n        <span class=\"sai-sv-pill\">Open-Source LLMs<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- 06 -->\r\n    <div class=\"sai-sv-card\" data-sai-sv-scroll>\r\n      <div class=\"sai-sv-card-top\">\r\n        <div class=\"sai-sv-icon-wrap\">\r\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n            <circle cx=\"16\" cy=\"12\" r=\"5\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <path d=\"M8 27 C8 21.5 24 21.5 24 27\" stroke=\"#C9A84C\" stroke-width=\"1.5\" stroke-linecap=\"round\" fill=\"none\"\/>\r\n            <line x1=\"16\" y1=\"17\" x2=\"16\" y2=\"20\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <circle cx=\"23\" cy=\"7\" r=\"3\" stroke=\"#C9A84C\" stroke-width=\"1.2\" fill=\"none\"\/>\r\n            <line x1=\"23\" y1=\"5.5\" x2=\"23\" y2=\"8.5\" stroke=\"#C9A84C\" stroke-width=\"1.2\"\/>\r\n            <line x1=\"21.5\" y1=\"7\" x2=\"24.5\" y2=\"7\" stroke=\"#C9A84C\" stroke-width=\"1.2\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <span class=\"sai-sv-num\">06<\/span>\r\n      <\/div>\r\n      <h3 class=\"sai-sv-card-title\">AI Strategy &amp; Consulting<\/h3>\r\n      <p class=\"sai-sv-card-desc\">Not sure where AI fits in your business? We run discovery sessions, audit your workflows, identify <strong>high-ROI automation opportunities<\/strong>, and give you a clear action plan \u2014 no fluff.<\/p>\r\n      <ul class=\"sai-sv-list\">\r\n        <li>Workflow discovery &amp; audit<\/li>\r\n        <li>High-ROI automation mapping<\/li>\r\n        <li>Clear, actionable AI roadmap<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n  <\/div><!-- \/grid -->\r\n\r\n<\/div><!-- \/wrap -->\r\n\r\n<script>\r\n(function () {\r\n\r\n  \/* \u2500\u2500 SCROLL REVEAL \u2500\u2500 *\/\r\n  var revealEls = document.querySelectorAll('#saiSvWrap [data-sai-sv-scroll]');\r\n  if (!revealEls.length) return;\r\n\r\n  var revealObs = new IntersectionObserver(function (entries) {\r\n    entries.forEach(function (entry) {\r\n      if (entry.isIntersecting) {\r\n        entry.target.classList.add('sai-sv-visible');\r\n        revealObs.unobserve(entry.target);\r\n      }\r\n    });\r\n  }, { threshold: 0.12, rootMargin: '0px 0px -50px 0px' });\r\n\r\n  revealEls.forEach(function (el) { revealObs.observe(el); });\r\n\r\n\r\n  \/* \u2500\u2500 PARALLAX glow on mouse move \u2500\u2500 *\/\r\n  var wrap  = document.getElementById('saiSvWrap');\r\n  var glows = wrap.querySelectorAll('.sai-sv-bg-glow, .sai-sv-bg-glow-2');\r\n\r\n  wrap.addEventListener('mousemove', function (e) {\r\n    var r  = wrap.getBoundingClientRect();\r\n    var xP = ((e.clientX - r.left)  \/ r.width  - 0.5) * 22;\r\n    var yP = ((e.clientY - r.top)   \/ r.height - 0.5) * 22;\r\n    glows[0].style.transform = 'translate(' + xP + 'px,' + yP + 'px)';\r\n    glows[1].style.transform = 'translate(' + (-xP * 0.6) + 'px,' + (-yP * 0.6) + 'px)';\r\n  });\r\n  wrap.addEventListener('mouseleave', function () {\r\n    glows[0].style.transform = '';\r\n    glows[1].style.transform = '';\r\n  });\r\n\r\n\r\n  \/* \u2500\u2500 CARD 3-D TILT on hover \u2500\u2500 *\/\r\n  var cards = document.querySelectorAll('#saiSvGrid .sai-sv-card');\r\n  cards.forEach(function (card) {\r\n    card.addEventListener('mousemove', function (e) {\r\n      var r   = card.getBoundingClientRect();\r\n      var xC  = (e.clientX - r.left)  \/ r.width  - 0.5;\r\n      var yC  = (e.clientY - r.top)   \/ r.height - 0.5;\r\n      var tX  = (-yC * 6).toFixed(1);\r\n      var tY  = ( xC * 6).toFixed(1);\r\n      card.style.transform = 'translateY(0) perspective(700px) rotateX(' + tX + 'deg) rotateY(' + tY + 'deg)';\r\n    });\r\n    card.addEventListener('mouseleave', function () {\r\n      card.style.transform = '';\r\n    });\r\n  });\r\n\r\n\r\n  \/* \u2500\u2500 ICON SPIN on card enter \u2500\u2500 *\/\r\n  var iconObs = new IntersectionObserver(function (entries) {\r\n    entries.forEach(function (entry) {\r\n      if (entry.isIntersecting) {\r\n        var icon = entry.target.querySelector('.sai-sv-icon-wrap');\r\n        if (icon) {\r\n          icon.style.transition = 'transform .6s cubic-bezier(.34,1.56,.64,1)';\r\n          icon.style.transform  = 'rotate(360deg)';\r\n          setTimeout(function () { icon.style.transform = ''; }, 700);\r\n        }\r\n        iconObs.unobserve(entry.target);\r\n      }\r\n    });\r\n  }, { threshold: 0.5 });\r\n\r\n  cards.forEach(function (c) { iconObs.observe(c); });\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-69bd697 e-con e-atomic-element e-flexbox-base e-83d87d1 \" data-id=\"69bd697\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"69bd697\" id=\"3\">\n    \t\t<div class=\"elementor-element elementor-element-e1d9c0c elementor-widget elementor-widget-html\" data-id=\"e1d9c0c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     SHAWKY AI \u2014 PORTFOLIO SECTION (Section 4)\r\n     Elementor HTML Widget \u2014 drop into an HTML element\r\n     Matches Sections 2 & 3 design system exactly\r\n     Fonts loaded from earlier sections; add <link> only if standalone\r\n     ============================================================ -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\r\n\/* \u2500\u2500 TOKENS \u2500\u2500 *\/\r\n.sai-pt-wrap {\r\n  --sai-gold:        #C9A84C;\r\n  --sai-gold-light:  #E8C97A;\r\n  --sai-gold-dim:    #8A6A28;\r\n  --sai-gold-glow:   rgba(201,168,76,0.18);\r\n  --sai-gold-glow2:  rgba(201,168,76,0.07);\r\n  --sai-white:       #F5F0E8;\r\n  --sai-white-muted: rgba(245,240,232,0.55);\r\n  --sai-white-soft:  rgba(245,240,232,0.80);\r\n  --sai-border:      rgba(201,168,76,0.16);\r\n  --sai-border-hard: rgba(201,168,76,0.36);\r\n  --sai-card-bg:     rgba(12,12,12,0.95);\r\n  --ff-display:      'Cormorant Garamond', Georgia, serif;\r\n  --ff-body:         'DM Sans', sans-serif;\r\n  --ff-mono:         'Courier New', monospace;\r\n}\r\n\r\n\/* \u2500\u2500 OUTER WRAP \u2500\u2500 *\/\r\n.sai-pt-wrap {\r\n  position: relative;\r\n  width: 100%;\r\n  padding: 120px 5vw 130px;\r\n  box-sizing: border-box;\r\n  background: transparent;\r\n  overflow: hidden;\r\n}\r\n\r\n\/* \u2500\u2500 BACKGROUND GLOWS \u2500\u2500 *\/\r\n.sai-pt-bg-glow {\r\n  position: absolute;\r\n  bottom: -10%; right: -5%;\r\n  width: 750px; height: 750px;\r\n  background: radial-gradient(ellipse at center,\r\n    rgba(201,168,76,0.09) 0%,\r\n    rgba(201,168,76,0.03) 45%,\r\n    transparent 70%);\r\n  pointer-events: none; z-index: 0;\r\n  animation: sai-pt-breathe 8s ease-in-out infinite;\r\n}\r\n.sai-pt-bg-glow-2 {\r\n  position: absolute;\r\n  top: -5%; left: -6%;\r\n  width: 520px; height: 520px;\r\n  background: radial-gradient(ellipse at center,\r\n    rgba(201,168,76,0.06) 0%, transparent 65%);\r\n  pointer-events: none; z-index: 0;\r\n  animation: sai-pt-breathe 10s ease-in-out infinite reverse;\r\n}\r\n@keyframes sai-pt-breathe {\r\n  0%,100% { opacity:1; transform:scale(1); }\r\n  50%      { opacity:.45; transform:scale(1.1); }\r\n}\r\n\r\n\/* \u2500\u2500 HLINES + CORNERS \u2500\u2500 *\/\r\n.sai-pt-hline {\r\n  position: absolute; left:0; right:0; height:1px;\r\n  pointer-events:none; z-index:0;\r\n  background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.18) 30%, rgba(201,168,76,0.18) 70%, transparent 100%);\r\n}\r\n.sai-pt-hline-top    { top:0; }\r\n.sai-pt-hline-bottom { bottom:0; }\r\n\r\n.sai-pt-corner {\r\n  position:absolute; width:40px; height:40px;\r\n  pointer-events:none; z-index:0;\r\n}\r\n.sai-pt-corner::before,\r\n.sai-pt-corner::after {\r\n  content:''; position:absolute;\r\n  background:var(--sai-gold); opacity:0.5;\r\n}\r\n.sai-pt-corner::before { width:1px; height:100%; top:0; }\r\n.sai-pt-corner::after  { width:100%; height:1px; }\r\n.sai-pt-corner-tl { top:0; left:0; }\r\n.sai-pt-corner-tl::after  { top:0; left:0; }\r\n.sai-pt-corner-tl::before { left:0; }\r\n.sai-pt-corner-tr { top:0; right:0; }\r\n.sai-pt-corner-tr::after  { top:0; right:0; }\r\n.sai-pt-corner-tr::before { right:0; }\r\n.sai-pt-corner-bl { bottom:0; left:0; }\r\n.sai-pt-corner-bl::after  { bottom:0; left:0; }\r\n.sai-pt-corner-bl::before { left:0; bottom:0; top:auto; }\r\n.sai-pt-corner-br { bottom:0; right:0; }\r\n.sai-pt-corner-br::after  { bottom:0; right:0; }\r\n.sai-pt-corner-br::before { right:0; bottom:0; top:auto; }\r\n\r\n\/* \u2500\u2500 PARTICLES \u2500\u2500 *\/\r\n.sai-pt-particle {\r\n  position:absolute; border-radius:50%;\r\n  pointer-events:none; z-index:0;\r\n  animation: sai-pt-float linear infinite;\r\n  opacity:0;\r\n}\r\n.sai-pt-p1 { width:4px;height:4px; background:var(--sai-gold);       top:12%;left:6%;   animation-duration:11s; animation-delay:0s;   box-shadow:0 0 10px 3px var(--sai-gold-glow); }\r\n.sai-pt-p2 { width:3px;height:3px; background:var(--sai-gold-light);  top:60%;left:95%;  animation-duration:14s; animation-delay:-5s; }\r\n.sai-pt-p3 { width:2px;height:2px; background:var(--sai-gold);        top:35%;left:97%;  animation-duration:9s;  animation-delay:-3s; }\r\n.sai-pt-p4 { width:3px;height:3px; background:var(--sai-gold-light);  top:82%;left:8%;   animation-duration:12s; animation-delay:-7s; box-shadow:0 0 8px 2px var(--sai-gold-glow); }\r\n@keyframes sai-pt-float {\r\n  0%   { transform:translateY(0) translateX(0);      opacity:0; }\r\n  12%  { opacity:1; }\r\n  50%  { transform:translateY(-38px) translateX(14px); opacity:.7; }\r\n  88%  { opacity:1; }\r\n  100% { transform:translateY(0) translateX(0);      opacity:0; }\r\n}\r\n\r\n\/* \u2500\u2500 SECTION HEADER \u2500\u2500 *\/\r\n.sai-pt-header {\r\n  position:relative; z-index:2;\r\n  text-align:center;\r\n  max-width:760px;\r\n  margin:0 auto 72px;\r\n}\r\n\r\n.sai-pt-label {\r\n  display:inline-flex; align-items:center; gap:0.7rem;\r\n  margin-bottom:1.8rem;\r\n  opacity:0; transform:translateY(22px);\r\n  transition:opacity .7s ease, transform .7s ease;\r\n}\r\n.sai-pt-label.sai-pt-vis { opacity:1; transform:translateY(0); transition-delay:.1s; }\r\n.sai-pt-label-line {\r\n  width:32px; height:1px;\r\n  background:var(--sai-gold);\r\n}\r\n.sai-pt-label-text {\r\n  font-family:var(--ff-body);\r\n  font-size:0.7rem; font-weight:500;\r\n  letter-spacing:.22em; text-transform:uppercase;\r\n  color:var(--sai-gold);\r\n}\r\n\r\n.sai-pt-headline {\r\n  font-family:var(--ff-display);\r\n  font-size:clamp(2.4rem,4.5vw,4rem);\r\n  font-weight:700; line-height:1.08;\r\n  color:var(--sai-white);\r\n  margin:0 0 1.2rem;\r\n  opacity:0; transform:translateY(28px);\r\n  transition:opacity .8s ease, transform .8s ease;\r\n}\r\n.sai-pt-headline.sai-pt-vis { opacity:1; transform:translateY(0); transition-delay:.22s; }\r\n.sai-pt-headline-italic {\r\n  font-style:italic; color:var(--sai-gold);\r\n  position:relative; display:inline-block;\r\n}\r\n.sai-pt-headline-italic::after {\r\n  content:''; position:absolute;\r\n  bottom:2px; left:0; right:0; height:1.5px;\r\n  background:linear-gradient(90deg, var(--sai-gold), transparent);\r\n}\r\n\r\n.sai-pt-sub {\r\n  font-family:var(--ff-body);\r\n  font-size:clamp(.9rem,1.3vw,1rem);\r\n  font-weight:300; line-height:1.8;\r\n  color:var(--sai-white-muted);\r\n  margin:0 0 2rem;\r\n  opacity:0; transform:translateY(18px);\r\n  transition:opacity .8s ease, transform .8s ease;\r\n}\r\n.sai-pt-sub.sai-pt-vis { opacity:1; transform:translateY(0); transition-delay:.36s; }\r\n.sai-pt-sub strong { color:var(--sai-white-soft); font-weight:400; }\r\n\r\n.sai-pt-divider {\r\n  display:flex; align-items:center; justify-content:center; gap:14px;\r\n  opacity:0; transition:opacity .7s ease .5s;\r\n}\r\n.sai-pt-divider.sai-pt-vis { opacity:1; }\r\n.sai-pt-divider-line {\r\n  width:60px; height:1px;\r\n  background:linear-gradient(90deg, transparent, var(--sai-gold));\r\n}\r\n.sai-pt-divider-line:last-child {\r\n  background:linear-gradient(90deg, var(--sai-gold), transparent);\r\n}\r\n\r\n\/* \u2500\u2500 PROJECTS GRID \u2500\u2500 *\/\r\n.sai-pt-grid {\r\n  position:relative; z-index:2;\r\n  display:grid;\r\n  grid-template-columns:repeat(2,1fr);\r\n  gap:1px;\r\n  background:var(--sai-border);\r\n  border:1px solid var(--sai-border);\r\n  max-width:1260px;\r\n  margin:0 auto 1px;\r\n}\r\n\r\n\/* last row \u2014 project 7 centred (single col) *\/\r\n.sai-pt-grid-last {\r\n  position:relative; z-index:2;\r\n  max-width:1260px;\r\n  margin:1px auto 0;\r\n  background:var(--sai-border);\r\n  border:1px solid var(--sai-border);\r\n  border-top:none;\r\n  display:flex;\r\n  justify-content:center;\r\n}\r\n.sai-pt-grid-last .sai-pt-card {\r\n  width:50%;\r\n  border:none;\r\n}\r\n\r\n\/* \u2500\u2500 CARD \u2500\u2500 *\/\r\n.sai-pt-card {\r\n  background:var(--sai-card-bg);\r\n  padding:40px 34px 36px;\r\n  position:relative; overflow:hidden;\r\n  cursor:default;\r\n  opacity:0; transform:translateY(34px);\r\n  transition:opacity .7s ease, transform .7s ease, background .3s ease;\r\n  backdrop-filter:blur(6px);\r\n  -webkit-backdrop-filter:blur(6px);\r\n}\r\n.sai-pt-card.sai-pt-vis { opacity:1; transform:translateY(0); }\r\n\r\n.sai-pt-card:nth-child(1){ transition-delay:.10s; }\r\n.sai-pt-card:nth-child(2){ transition-delay:.22s; }\r\n.sai-pt-card:nth-child(3){ transition-delay:.34s; }\r\n.sai-pt-card:nth-child(4){ transition-delay:.46s; }\r\n.sai-pt-card:nth-child(5){ transition-delay:.58s; }\r\n.sai-pt-card:nth-child(6){ transition-delay:.70s; }\r\n\r\n\/* top reveal line *\/\r\n.sai-pt-card::before {\r\n  content:''; position:absolute;\r\n  top:0; left:0; height:2px; width:0;\r\n  background:linear-gradient(90deg, var(--sai-gold), transparent);\r\n  transition:width .45s ease;\r\n}\r\n.sai-pt-card:hover::before { width:100%; }\r\n\r\n\/* left bar *\/\r\n.sai-pt-card::after {\r\n  content:''; position:absolute;\r\n  left:0; top:0; bottom:0; width:2px;\r\n  background:linear-gradient(to bottom, var(--sai-gold), transparent);\r\n  opacity:0; transition:opacity .3s ease;\r\n}\r\n.sai-pt-card:hover::after  { opacity:1; }\r\n.sai-pt-card:hover { background:#111108; }\r\n\r\n\/* \u2500\u2500 CARD HEADER ROW \u2500\u2500 *\/\r\n.sai-pt-card-head {\r\n  display:flex; justify-content:space-between;\r\n  align-items:flex-start; margin-bottom:20px; gap:12px;\r\n}\r\n\r\n.sai-pt-icon-wrap {\r\n  width:52px; height:52px; flex-shrink:0;\r\n  background:rgba(201,168,76,0.08);\r\n  border:1px solid rgba(201,168,76,0.2);\r\n  border-radius:4px;\r\n  display:flex; align-items:center; justify-content:center;\r\n  transition:background .3s ease, border-color .3s ease, transform .35s ease;\r\n}\r\n.sai-pt-card:hover .sai-pt-icon-wrap {\r\n  background:rgba(201,168,76,0.14);\r\n  border-color:rgba(201,168,76,0.4);\r\n  transform:scale(1.08) rotate(-4deg);\r\n}\r\n\r\n.sai-pt-num {\r\n  font-family:var(--ff-mono);\r\n  font-size:12px; font-weight:700; letter-spacing:1px;\r\n  color:rgba(201,168,76,0.28); line-height:1; padding-top:4px;\r\n  transition:color .3s ease;\r\n}\r\n.sai-pt-card:hover .sai-pt-num { color:rgba(201,168,76,0.6); }\r\n\r\n\/* \u2500\u2500 CATEGORY BADGE \u2500\u2500 *\/\r\n.sai-pt-cat {\r\n  font-family:var(--ff-mono);\r\n  font-size:9px; font-weight:700;\r\n  letter-spacing:.15em; text-transform:uppercase;\r\n  color:var(--sai-gold);\r\n  background:rgba(201,168,76,0.07);\r\n  border:1px solid rgba(201,168,76,0.2);\r\n  padding:4px 10px; border-radius:2px;\r\n  display:inline-block; margin-bottom:10px;\r\n}\r\n\r\n\/* \u2500\u2500 TITLE \u2500\u2500 *\/\r\n.sai-pt-title {\r\n  font-family:var(--ff-display);\r\n  font-size:1.28rem; font-weight:700;\r\n  color:var(--sai-white);\r\n  margin:0 0 12px; line-height:1.28;\r\n}\r\n\r\n\/* \u2500\u2500 \"WHAT WE BUILT\" \u2500\u2500 *\/\r\n.sai-pt-built-label {\r\n  font-family:var(--ff-mono);\r\n  font-size:9px; font-weight:700;\r\n  letter-spacing:.18em; text-transform:uppercase;\r\n  color:var(--sai-gold-dim); margin-bottom:6px; display:block;\r\n}\r\n.sai-pt-built-text {\r\n  font-family:var(--ff-body);\r\n  font-size:0.82rem; font-weight:300; line-height:1.78;\r\n  color:var(--sai-white-muted); margin:0 0 18px;\r\n}\r\n.sai-pt-built-text strong { color:var(--sai-white-soft); font-weight:400; }\r\n\r\n\/* \u2500\u2500 TOOLS ROW \u2500\u2500 *\/\r\n.sai-pt-tools-label {\r\n  font-family:var(--ff-mono);\r\n  font-size:9px; font-weight:700;\r\n  letter-spacing:.18em; text-transform:uppercase;\r\n  color:var(--sai-gold-dim); margin-bottom:7px; display:block;\r\n}\r\n.sai-pt-pills {\r\n  display:flex; flex-wrap:wrap; gap:5px; margin-bottom:20px;\r\n}\r\n.sai-pt-pill {\r\n  font-family:var(--ff-mono);\r\n  font-size:9px; font-weight:700; letter-spacing:.05em;\r\n  color:var(--sai-gold);\r\n  background:rgba(201,168,76,0.07);\r\n  border:1px solid rgba(201,168,76,0.22);\r\n  padding:3px 9px; border-radius:2px;\r\n  transition:background .25s ease, border-color .25s ease;\r\n}\r\n.sai-pt-card:hover .sai-pt-pill {\r\n  background:rgba(201,168,76,0.12);\r\n  border-color:rgba(201,168,76,0.4);\r\n}\r\n\r\n\/* \u2500\u2500 RESULT STRIP \u2500\u2500 *\/\r\n.sai-pt-result {\r\n  display:flex; align-items:flex-start; gap:10px;\r\n  padding:12px 14px;\r\n  background:rgba(201,168,76,0.05);\r\n  border:1px solid rgba(201,168,76,0.14);\r\n  border-left:2px solid var(--sai-gold);\r\n  position:relative; overflow:hidden;\r\n  transition:background .3s ease, border-color .3s ease;\r\n}\r\n.sai-pt-card:hover .sai-pt-result {\r\n  background:rgba(201,168,76,0.09);\r\n  border-color:rgba(201,168,76,0.35);\r\n}\r\n.sai-pt-result-icon {\r\n  font-size:.9rem; flex-shrink:0; margin-top:1px;\r\n  filter:sepia(1) saturate(4) hue-rotate(5deg);\r\n}\r\n.sai-pt-result-text {\r\n  font-family:var(--ff-body);\r\n  font-size:0.8rem; font-weight:400; line-height:1.6;\r\n  color:var(--sai-white-soft);\r\n}\r\n.sai-pt-result-text strong {\r\n  color:var(--sai-gold); font-weight:500;\r\n}\r\n\r\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n@media (max-width:900px) {\r\n  .sai-pt-grid { grid-template-columns:1fr; }\r\n  .sai-pt-grid-last .sai-pt-card { width:100%; }\r\n  .sai-pt-wrap { padding:90px 5vw 100px; }\r\n}\r\n@media (max-width:560px) {\r\n  .sai-pt-wrap { padding:72px 6vw 80px; }\r\n  .sai-pt-card { padding:28px 18px 26px; }\r\n  .sai-pt-title { font-size:1.1rem; }\r\n  .sai-pt-divider-line { width:40px; }\r\n  .sai-pt-header { margin-bottom:48px; }\r\n}\r\n\r\n<\/style>\r\n\r\n<!-- \u2500\u2500 PORTFOLIO MARKUP \u2500\u2500 -->\r\n<div class=\"sai-pt-wrap\" id=\"saiPtWrap\">\r\n\r\n  <!-- BG decoration -->\r\n  <div class=\"sai-pt-bg-glow\"><\/div>\r\n  <div class=\"sai-pt-bg-glow-2\"><\/div>\r\n  <div class=\"sai-pt-hline sai-pt-hline-top\"><\/div>\r\n  <div class=\"sai-pt-hline sai-pt-hline-bottom\"><\/div>\r\n  <div class=\"sai-pt-corner sai-pt-corner-tl\"><\/div>\r\n  <div class=\"sai-pt-corner sai-pt-corner-tr\"><\/div>\r\n  <div class=\"sai-pt-corner sai-pt-corner-bl\"><\/div>\r\n  <div class=\"sai-pt-corner sai-pt-corner-br\"><\/div>\r\n  <div class=\"sai-pt-particle sai-pt-p1\"><\/div>\r\n  <div class=\"sai-pt-particle sai-pt-p2\"><\/div>\r\n  <div class=\"sai-pt-particle sai-pt-p3\"><\/div>\r\n  <div class=\"sai-pt-particle sai-pt-p4\"><\/div>\r\n\r\n  <!-- Header -->\r\n  <div class=\"sai-pt-header\">\r\n\r\n    <div class=\"sai-pt-label\" data-sai-pt-scroll>\r\n      <span class=\"sai-pt-label-line\"><\/span>\r\n      <span class=\"sai-pt-label-text\">What We've Built<\/span>\r\n      <span class=\"sai-pt-label-line\" style=\"background:linear-gradient(90deg,var(--sai-gold),transparent)\"><\/span>\r\n    <\/div>\r\n\r\n    <h2 class=\"sai-pt-headline\" data-sai-pt-scroll>\r\n      Real Projects.<br>\r\n      <span class=\"sai-pt-headline-italic\">Real Impact.<\/span>\r\n    <\/h2>\r\n\r\n    <p class=\"sai-pt-sub\" data-sai-pt-scroll>\r\n      A selection of automation and AI systems we've built for clients.\r\n      Every project below was built using <strong>n8n<\/strong>, <strong>AI models<\/strong>, or a combination of both.\r\n    <\/p>\r\n\r\n    <div class=\"sai-pt-divider\" data-sai-pt-scroll>\r\n      <span class=\"sai-pt-divider-line\"><\/span>\r\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n        <polygon points=\"12,2 14.9,9.1 22.5,9.1 16.6,13.8 18.8,21 12,16.9 5.2,21 7.4,13.8 1.5,9.1 9.1,9.1\" fill=\"#C9A84C\"\/>\r\n      <\/svg>\r\n      <span class=\"sai-pt-divider-line\"><\/span>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- Projects grid (3 rows: 2+2+2 \u2192 last row centred) -->\r\n  <div class=\"sai-pt-grid\" id=\"saiPtGrid\">\r\n\r\n    <!-- PROJECT 1 -->\r\n    <div class=\"sai-pt-card\" data-sai-pt-scroll>\r\n      <div class=\"sai-pt-card-head\">\r\n        <div class=\"sai-pt-icon-wrap\">\r\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n            <rect x=\"5\" y=\"8\" width=\"14\" height=\"18\" rx=\"2\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <circle cx=\"22\" cy=\"10\" r=\"6\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <path d=\"M20 10 L21.5 11.5 L24.5 8.5\" stroke=\"#C9A84C\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n            <line x1=\"8\" y1=\"14\" x2=\"16\" y2=\"14\" stroke=\"#C9A84C\" stroke-width=\"1.2\"\/>\r\n            <line x1=\"8\" y1=\"18\" x2=\"14\" y2=\"18\" stroke=\"#C9A84C\" stroke-width=\"1.2\"\/>\r\n            <line x1=\"8\" y1=\"22\" x2=\"16\" y2=\"22\" stroke=\"#C9A84C\" stroke-width=\"1.2\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <span class=\"sai-pt-num\">01<\/span>\r\n      <\/div>\r\n      <span class=\"sai-pt-cat\">n8n Automation \u00b7 CRM Integration<\/span>\r\n      <h3 class=\"sai-pt-title\">WhatsApp Lead Automation System<\/h3>\r\n      <span class=\"sai-pt-built-label\">What we built:<\/span>\r\n      <p class=\"sai-pt-built-text\">A fully automated lead management pipeline for a <strong>real estate company<\/strong>. WhatsApp message \u2192 n8n captures lead \u2192 adds to HubSpot \u2192 sends personalised welcome \u2192 notifies sales on Slack \u2192 schedules follow-up. All without a human touching it.<\/p>\r\n      <span class=\"sai-pt-tools-label\">Tools used:<\/span>\r\n      <div class=\"sai-pt-pills\">\r\n        <span class=\"sai-pt-pill\">n8n<\/span>\r\n        <span class=\"sai-pt-pill\">WhatsApp Business API<\/span>\r\n        <span class=\"sai-pt-pill\">HubSpot<\/span>\r\n        <span class=\"sai-pt-pill\">Slack<\/span>\r\n        <span class=\"sai-pt-pill\">Google Sheets<\/span>\r\n      <\/div>\r\n      <div class=\"sai-pt-result\">\r\n        <span class=\"sai-pt-result-icon\">\u26a1<\/span>\r\n        <span class=\"sai-pt-result-text\">Sales response time dropped from <strong>4 hours \u2192 under 2 minutes<\/strong>. Zero leads lost.<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- PROJECT 2 -->\r\n    <div class=\"sai-pt-card\" data-sai-pt-scroll>\r\n      <div class=\"sai-pt-card-head\">\r\n        <div class=\"sai-pt-icon-wrap\">\r\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n            <path d=\"M6 8 H26 V20 H18 L14 25 L14 20 H6 Z\" stroke=\"#C9A84C\" stroke-width=\"1.5\" fill=\"none\" stroke-linejoin=\"round\"\/>\r\n            <circle cx=\"11\" cy=\"14\" r=\"1.5\" fill=\"#C9A84C\"\/>\r\n            <circle cx=\"16\" cy=\"14\" r=\"1.5\" fill=\"#C9A84C\"\/>\r\n            <circle cx=\"21\" cy=\"14\" r=\"1.5\" fill=\"#C9A84C\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <span class=\"sai-pt-num\">02<\/span>\r\n      <\/div>\r\n      <span class=\"sai-pt-cat\">Conversational AI \u00b7 LLM Development<\/span>\r\n      <h3 class=\"sai-pt-title\">AI-Powered Customer Support Bot<\/h3>\r\n      <span class=\"sai-pt-built-label\">What we built:<\/span>\r\n      <p class=\"sai-pt-built-text\">A <strong>24\/7 Arabic & English<\/strong> support chatbot for an e-commerce brand. Trained on the client's product catalog, FAQs, and return policy \u2014 handles order queries, product questions, and complaint triage, escalating to a human only when needed.<\/p>\r\n      <span class=\"sai-pt-tools-label\">Tools used:<\/span>\r\n      <div class=\"sai-pt-pills\">\r\n        <span class=\"sai-pt-pill\">OpenAI GPT-4<\/span>\r\n        <span class=\"sai-pt-pill\">LangChain<\/span>\r\n        <span class=\"sai-pt-pill\">Custom Knowledge Base<\/span>\r\n        <span class=\"sai-pt-pill\">WhatsApp API<\/span>\r\n        <span class=\"sai-pt-pill\">n8n<\/span>\r\n      <\/div>\r\n      <div class=\"sai-pt-result\">\r\n        <span class=\"sai-pt-result-icon\">\ud83e\udd16<\/span>\r\n        <span class=\"sai-pt-result-text\"><strong>75% of support tickets<\/strong> handled automatically. Human agents freed for complex cases only.<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- PROJECT 3 -->\r\n    <div class=\"sai-pt-card\" data-sai-pt-scroll>\r\n      <div class=\"sai-pt-card-head\">\r\n        <div class=\"sai-pt-icon-wrap\">\r\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n            <rect x=\"7\" y=\"5\" width=\"18\" height=\"22\" rx=\"2\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <line x1=\"11\" y1=\"11\" x2=\"21\" y2=\"11\" stroke=\"#C9A84C\" stroke-width=\"1.2\"\/>\r\n            <line x1=\"11\" y1=\"15\" x2=\"21\" y2=\"15\" stroke=\"#C9A84C\" stroke-width=\"1.2\"\/>\r\n            <line x1=\"11\" y1=\"19\" x2=\"17\" y2=\"19\" stroke=\"#C9A84C\" stroke-width=\"1.2\"\/>\r\n            <path d=\"M18 21 L21 24 L26 18\" stroke=\"#C9A84C\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <span class=\"sai-pt-num\">03<\/span>\r\n      <\/div>\r\n      <span class=\"sai-pt-cat\">n8n Automation \u00b7 Business Operations<\/span>\r\n      <h3 class=\"sai-pt-title\">Automated Invoice &amp; Finance Workflow<\/h3>\r\n      <span class=\"sai-pt-built-label\">What we built:<\/span>\r\n      <p class=\"sai-pt-built-text\">End-to-end invoice automation for a services company. Project marked complete \u2192 n8n generates PDF invoice \u2192 emails client \u2192 logs payment in Sheets \u2192 <strong>follows up every 3 days<\/strong> if unpaid \u2192 final escalation alert to management.<\/p>\r\n      <span class=\"sai-pt-tools-label\">Tools used:<\/span>\r\n      <div class=\"sai-pt-pills\">\r\n        <span class=\"sai-pt-pill\">n8n<\/span>\r\n        <span class=\"sai-pt-pill\">Google Sheets<\/span>\r\n        <span class=\"sai-pt-pill\">Gmail<\/span>\r\n        <span class=\"sai-pt-pill\">PDF Generation<\/span>\r\n        <span class=\"sai-pt-pill\">Notion<\/span>\r\n      <\/div>\r\n      <div class=\"sai-pt-result\">\r\n        <span class=\"sai-pt-result-icon\">\ud83d\udcca<\/span>\r\n        <span class=\"sai-pt-result-text\">Finance team saved <strong>10+ hours\/week<\/strong>. Late payments reduced by <strong>40%<\/strong>.<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- PROJECT 4 -->\r\n    <div class=\"sai-pt-card\" data-sai-pt-scroll>\r\n      <div class=\"sai-pt-card-head\">\r\n        <div class=\"sai-pt-icon-wrap\">\r\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n            <path d=\"M8 4 H20 L27 11 V28 H8 Z\" stroke=\"#C9A84C\" stroke-width=\"1.5\" fill=\"none\" stroke-linejoin=\"round\"\/>\r\n            <path d=\"M20 4 V11 H27\" stroke=\"#C9A84C\" stroke-width=\"1.5\" fill=\"none\"\/>\r\n            <line x1=\"12\" y1=\"16\" x2=\"23\" y2=\"16\" stroke=\"#C9A84C\" stroke-width=\"1.2\"\/>\r\n            <line x1=\"12\" y1=\"20\" x2=\"20\" y2=\"20\" stroke=\"#C9A84C\" stroke-width=\"1.2\"\/>\r\n            <circle cx=\"10\" cy=\"24\" r=\"4\" stroke=\"#C9A84C\" stroke-width=\"1.2\" fill=\"none\"\/>\r\n            <line x1=\"10\" y1=\"22.5\" x2=\"10\" y2=\"25.5\" stroke=\"#C9A84C\" stroke-width=\"1.2\"\/>\r\n            <line x1=\"8.5\" y1=\"24\" x2=\"11.5\" y2=\"24\" stroke=\"#C9A84C\" stroke-width=\"1.2\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <span class=\"sai-pt-num\">04<\/span>\r\n      <\/div>\r\n      <span class=\"sai-pt-cat\">AI + n8n \u00b7 Document Processing<\/span>\r\n      <h3 class=\"sai-pt-title\">AI Document Summariser &amp; Router<\/h3>\r\n      <span class=\"sai-pt-built-label\">What we built:<\/span>\r\n      <p class=\"sai-pt-built-text\">An internal tool for a <strong>legal consultancy<\/strong>. Documents uploaded to Google Drive \u2192 n8n picks them up \u2192 sends to Claude AI for summarisation & classification \u2192 tagged by type (contract, NDA, compliance) \u2192 filed to correct folder with a summary note.<\/p>\r\n      <span class=\"sai-pt-tools-label\">Tools used:<\/span>\r\n      <div class=\"sai-pt-pills\">\r\n        <span class=\"sai-pt-pill\">n8n<\/span>\r\n        <span class=\"sai-pt-pill\">Anthropic Claude<\/span>\r\n        <span class=\"sai-pt-pill\">Google Drive<\/span>\r\n        <span class=\"sai-pt-pill\">Notion<\/span>\r\n        <span class=\"sai-pt-pill\">Gmail<\/span>\r\n      <\/div>\r\n      <div class=\"sai-pt-result\">\r\n        <span class=\"sai-pt-result-icon\">\u23f1<\/span>\r\n        <span class=\"sai-pt-result-text\">Document review prep cut from <strong>2 hours \u2192 8 minutes<\/strong> per document.<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- PROJECT 5 -->\r\n    <div class=\"sai-pt-card\" data-sai-pt-scroll>\r\n      <div class=\"sai-pt-card-head\">\r\n        <div class=\"sai-pt-icon-wrap\">\r\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n            <rect x=\"4\" y=\"10\" width=\"10\" height=\"10\" rx=\"5\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <rect x=\"18\" y=\"4\" width=\"10\" height=\"10\" rx=\"2\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <rect x=\"18\" y=\"18\" width=\"10\" height=\"10\" rx=\"2\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <line x1=\"14\" y1=\"13\" x2=\"18\" y2=\"9\" stroke=\"#C9A84C\" stroke-width=\"1.4\"\/>\r\n            <line x1=\"14\" y1=\"17\" x2=\"18\" y2=\"22\" stroke=\"#C9A84C\" stroke-width=\"1.4\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <span class=\"sai-pt-num\">05<\/span>\r\n      <\/div>\r\n      <span class=\"sai-pt-cat\">AI Content Generation \u00b7 n8n Automation<\/span>\r\n      <h3 class=\"sai-pt-title\">Social Media Content Automation Pipeline<\/h3>\r\n      <span class=\"sai-pt-built-label\">What we built:<\/span>\r\n      <p class=\"sai-pt-built-text\">Content automation for a <strong>digital marketing agency<\/strong>. Client provides a weekly topic list \u2192 n8n passes each topic to GPT-4 \u2192 generates captions, hooks, hashtags \u2192 formats by platform (Instagram, LinkedIn, X) \u2192 schedules posts automatically.<\/p>\r\n      <span class=\"sai-pt-tools-label\">Tools used:<\/span>\r\n      <div class=\"sai-pt-pills\">\r\n        <span class=\"sai-pt-pill\">n8n<\/span>\r\n        <span class=\"sai-pt-pill\">OpenAI GPT-4<\/span>\r\n        <span class=\"sai-pt-pill\">Airtable<\/span>\r\n        <span class=\"sai-pt-pill\">Buffer<\/span>\r\n        <span class=\"sai-pt-pill\">Google Sheets<\/span>\r\n      <\/div>\r\n      <div class=\"sai-pt-result\">\r\n        <span class=\"sai-pt-result-icon\">\ud83d\ude80<\/span>\r\n        <span class=\"sai-pt-result-text\">Agency produces <strong>5\u00d7 more content<\/strong> with the same team. Creation time reduced by <strong>80%<\/strong>.<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- PROJECT 6 -->\r\n    <div class=\"sai-pt-card\" data-sai-pt-scroll>\r\n      <div class=\"sai-pt-card-head\">\r\n        <div class=\"sai-pt-icon-wrap\">\r\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n            <circle cx=\"16\" cy=\"10\" r=\"4.5\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <path d=\"M8 26 C8 20.5 24 20.5 24 26\" stroke=\"#C9A84C\" stroke-width=\"1.5\" stroke-linecap=\"round\" fill=\"none\"\/>\r\n            <path d=\"M22 12 L27 12 M27 12 L25 10 M27 12 L25 14\" stroke=\"#C9A84C\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n            <path d=\"M5 17 L9 17 M5 17 L7 15 M5 17 L7 19\" stroke=\"#C9A84C\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <span class=\"sai-pt-num\">06<\/span>\r\n      <\/div>\r\n      <span class=\"sai-pt-cat\">Internal AI Tool \u00b7 Workflow Automation<\/span>\r\n      <h3 class=\"sai-pt-title\">Smart HR Onboarding Bot<\/h3>\r\n      <span class=\"sai-pt-built-label\">What we built:<\/span>\r\n      <p class=\"sai-pt-built-text\">An AI onboarding assistant for a <strong>mid-sized company<\/strong>. New hires chat with a bot that covers company policies, answers HR questions, collects documents, and automatically notifies IT, Finance, and the manager \u2014 all triggered through n8n.<\/p>\r\n      <span class=\"sai-pt-tools-label\">Tools used:<\/span>\r\n      <div class=\"sai-pt-pills\">\r\n        <span class=\"sai-pt-pill\">n8n<\/span>\r\n        <span class=\"sai-pt-pill\">OpenAI GPT-4<\/span>\r\n        <span class=\"sai-pt-pill\">Slack<\/span>\r\n        <span class=\"sai-pt-pill\">Google Forms<\/span>\r\n        <span class=\"sai-pt-pill\">Notion<\/span>\r\n        <span class=\"sai-pt-pill\">Gmail<\/span>\r\n      <\/div>\r\n      <div class=\"sai-pt-result\">\r\n        <span class=\"sai-pt-result-icon\">\ud83c\udfaf<\/span>\r\n        <span class=\"sai-pt-result-text\">HR onboarding workload reduced by <strong>60%<\/strong>. New hire satisfaction measurably improved.<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div><!-- \/main grid -->\r\n\r\n  <!-- PROJECT 7 \u2014 centred last row -->\r\n  <div class=\"sai-pt-grid-last\">\r\n    <div class=\"sai-pt-card\" data-sai-pt-scroll style=\"transition-delay:.82s\">\r\n      <div class=\"sai-pt-card-head\">\r\n        <div class=\"sai-pt-icon-wrap\">\r\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n            <rect x=\"4\" y=\"8\" width=\"24\" height=\"16\" rx=\"2\" stroke=\"#C9A84C\" stroke-width=\"1.5\"\/>\r\n            <line x1=\"4\" y1=\"13\" x2=\"28\" y2=\"13\" stroke=\"#C9A84C\" stroke-width=\"1.2\"\/>\r\n            <line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"24\" stroke=\"#C9A84C\" stroke-width=\"1.2\"\/>\r\n            <circle cx=\"7.5\" cy=\"10.5\" r=\"1\" fill=\"#C9A84C\"\/>\r\n            <circle cx=\"16\" cy=\"19\" r=\"3\" stroke=\"#C9A84C\" stroke-width=\"1.2\" fill=\"none\"\/>\r\n            <line x1=\"18.1\" y1=\"21.1\" x2=\"22\" y2=\"25\" stroke=\"#C9A84C\" stroke-width=\"1.4\" stroke-linecap=\"round\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <span class=\"sai-pt-num\">07<\/span>\r\n      <\/div>\r\n      <span class=\"sai-pt-cat\">n8n Automation \u00b7 Data Integration<\/span>\r\n      <h3 class=\"sai-pt-title\">E-commerce Order &amp; Inventory Sync<\/h3>\r\n      <span class=\"sai-pt-built-label\">What we built:<\/span>\r\n      <p class=\"sai-pt-built-text\">A <strong>real-time sync system<\/strong> for an online store. Every new Shopify order triggers n8n to update inventory in Google Sheets, send a customer confirmation, notify the warehouse team on WhatsApp, and log the order in a live tracking dashboard.<\/p>\r\n      <span class=\"sai-pt-tools-label\">Tools used:<\/span>\r\n      <div class=\"sai-pt-pills\">\r\n        <span class=\"sai-pt-pill\">n8n<\/span>\r\n        <span class=\"sai-pt-pill\">Shopify<\/span>\r\n        <span class=\"sai-pt-pill\">Google Sheets<\/span>\r\n        <span class=\"sai-pt-pill\">WhatsApp Business API<\/span>\r\n        <span class=\"sai-pt-pill\">Gmail<\/span>\r\n      <\/div>\r\n      <div class=\"sai-pt-result\">\r\n        <span class=\"sai-pt-result-icon\">\u2705<\/span>\r\n        <span class=\"sai-pt-result-text\">Order errors <strong>eliminated<\/strong>. Warehouse team always has real-time inventory data.<\/span>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div><!-- \/sai-pt-wrap -->\r\n\r\n<script>\r\n(function () {\r\n\r\n  \/* \u2500\u2500 SCROLL REVEAL \u2500\u2500 *\/\r\n  var els = document.querySelectorAll('#saiPtWrap [data-sai-pt-scroll]');\r\n  if (!els.length) return;\r\n\r\n  var revObs = new IntersectionObserver(function (entries) {\r\n    entries.forEach(function (e) {\r\n      if (e.isIntersecting) {\r\n        e.target.classList.add('sai-pt-vis');\r\n        revObs.unobserve(e.target);\r\n      }\r\n    });\r\n  }, { threshold: 0.12, rootMargin: '0px 0px -50px 0px' });\r\n\r\n  els.forEach(function (el) { revObs.observe(el); });\r\n\r\n\r\n  \/* \u2500\u2500 PARALLAX GLOW \u2500\u2500 *\/\r\n  var wrap  = document.getElementById('saiPtWrap');\r\n  var glows = wrap.querySelectorAll('.sai-pt-bg-glow, .sai-pt-bg-glow-2');\r\n\r\n  wrap.addEventListener('mousemove', function (e) {\r\n    var r  = wrap.getBoundingClientRect();\r\n    var xP = ((e.clientX - r.left) \/ r.width  - 0.5) * 22;\r\n    var yP = ((e.clientY - r.top)  \/ r.height - 0.5) * 22;\r\n    glows[0].style.transform = 'translate(' + xP + 'px,' + yP + 'px)';\r\n    glows[1].style.transform = 'translate(' + (-xP*.6) + 'px,' + (-yP*.6) + 'px)';\r\n  });\r\n  wrap.addEventListener('mouseleave', function () {\r\n    glows[0].style.transform = '';\r\n    glows[1].style.transform = '';\r\n  });\r\n\r\n\r\n  \/* \u2500\u2500 CARD 3-D TILT \u2500\u2500 *\/\r\n  var cards = document.querySelectorAll('#saiPtWrap .sai-pt-card');\r\n  cards.forEach(function (card) {\r\n    card.addEventListener('mousemove', function (e) {\r\n      var r  = card.getBoundingClientRect();\r\n      var xC = (e.clientX - r.left) \/ r.width  - 0.5;\r\n      var yC = (e.clientY - r.top)  \/ r.height - 0.5;\r\n      card.style.transform = 'translateY(0) perspective(700px) rotateX(' + (-yC*5).toFixed(1) + 'deg) rotateY(' + (xC*5).toFixed(1) + 'deg)';\r\n    });\r\n    card.addEventListener('mouseleave', function () {\r\n      card.style.transform = '';\r\n    });\r\n  });\r\n\r\n\r\n  \/* \u2500\u2500 ICON SPIN on first viewport enter \u2500\u2500 *\/\r\n  var iconObs = new IntersectionObserver(function (entries) {\r\n    entries.forEach(function (e) {\r\n      if (e.isIntersecting) {\r\n        var icon = e.target.querySelector('.sai-pt-icon-wrap');\r\n        if (icon) {\r\n          icon.style.transition = 'transform .65s cubic-bezier(.34,1.56,.64,1)';\r\n          icon.style.transform  = 'rotate(360deg)';\r\n          setTimeout(function () { icon.style.transform = ''; }, 750);\r\n        }\r\n        iconObs.unobserve(e.target);\r\n      }\r\n    });\r\n  }, { threshold: 0.5 });\r\n\r\n  cards.forEach(function (c) { iconObs.observe(c); });\r\n\r\n\r\n  \/* \u2500\u2500 RESULT STRIP shimmer on hover \u2500\u2500 *\/\r\n  cards.forEach(function (card) {\r\n    var result = card.querySelector('.sai-pt-result');\r\n    if (!result) return;\r\n    card.addEventListener('mouseenter', function () {\r\n      result.style.transition = 'background .3s ease, border-color .3s ease, transform .3s ease';\r\n      result.style.transform  = 'translateX(4px)';\r\n    });\r\n    card.addEventListener('mouseleave', function () {\r\n      result.style.transform = '';\r\n    });\r\n  });\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-9df16b8 e-con e-atomic-element e-flexbox-base e-80d7451 \" data-id=\"9df16b8\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9df16b8\" id=\"4\">\n    \t\t<div class=\"elementor-element elementor-element-40d2c9d elementor-widget elementor-widget-html\" data-id=\"40d2c9d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     SHAWKY AI \u2014 HOW WE WORK (Section 5)\r\n     Elementor HTML Widget \u2014 drop into an HTML element\r\n     Matches Sections 2\u20134 design system exactly\r\n     ============================================================ -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n\r\n<style>\r\n\r\n\/* \u2500\u2500 TOKENS \u2500\u2500 *\/\r\n.sai-hw-wrap {\r\n  --sai-gold:        #C9A84C;\r\n  --sai-gold-light:  #E8C97A;\r\n  --sai-gold-dim:    #8A6A28;\r\n  --sai-gold-glow:   rgba(201,168,76,0.18);\r\n  --sai-gold-glow2:  rgba(201,168,76,0.07);\r\n  --sai-white:       #F5F0E8;\r\n  --sai-white-muted: rgba(245,240,232,0.55);\r\n  --sai-white-soft:  rgba(245,240,232,0.80);\r\n  --sai-border:      rgba(201,168,76,0.16);\r\n  --sai-border-hard: rgba(201,168,76,0.36);\r\n  --sai-card-bg:     rgba(12,12,12,0.95);\r\n  --ff-display:      'Cormorant Garamond', Georgia, serif;\r\n  --ff-body:         'DM Sans', sans-serif;\r\n  --ff-mono:         'Courier New', monospace;\r\n}\r\n\r\n\/* \u2500\u2500 OUTER WRAP \u2500\u2500 *\/\r\n.sai-hw-wrap {\r\n  position: relative;\r\n  width: 100%;\r\n  padding: 120px 5vw 130px;\r\n  box-sizing: border-box;\r\n  background: transparent;\r\n  overflow: hidden;\r\n}\r\n\r\n\/* \u2500\u2500 BG GLOWS \u2500\u2500 *\/\r\n.sai-hw-bg-glow {\r\n  position: absolute;\r\n  top: 50%; left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  width: 900px; height: 600px;\r\n  background: radial-gradient(ellipse at center,\r\n    rgba(201,168,76,0.07) 0%,\r\n    rgba(201,168,76,0.02) 50%,\r\n    transparent 72%);\r\n  pointer-events: none; z-index: 0;\r\n  animation: sai-hw-breathe 9s ease-in-out infinite;\r\n}\r\n.sai-hw-bg-glow-2 {\r\n  position: absolute;\r\n  bottom: -8%; right: -4%;\r\n  width: 480px; height: 480px;\r\n  background: radial-gradient(ellipse at center,\r\n    rgba(201,168,76,0.06) 0%, transparent 65%);\r\n  pointer-events: none; z-index: 0;\r\n  animation: sai-hw-breathe 12s ease-in-out infinite reverse;\r\n}\r\n@keyframes sai-hw-breathe {\r\n  0%,100% { opacity:1; transform:translate(-50%,-50%) scale(1); }\r\n  50%      { opacity:.4; transform:translate(-50%,-50%) scale(1.1); }\r\n}\r\n\r\n\/* \u2500\u2500 HLINES + CORNERS \u2500\u2500 *\/\r\n.sai-hw-hline {\r\n  position: absolute; left:0; right:0; height:1px;\r\n  pointer-events:none; z-index:0;\r\n  background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.18) 30%, rgba(201,168,76,0.18) 70%, transparent 100%);\r\n}\r\n.sai-hw-hline-top    { top:0; }\r\n.sai-hw-hline-bottom { bottom:0; }\r\n\r\n.sai-hw-corner {\r\n  position:absolute; width:40px; height:40px;\r\n  pointer-events:none; z-index:0;\r\n}\r\n.sai-hw-corner::before,\r\n.sai-hw-corner::after {\r\n  content:''; position:absolute;\r\n  background:var(--sai-gold); opacity:0.5;\r\n}\r\n.sai-hw-corner::before { width:1px; height:100%; top:0; }\r\n.sai-hw-corner::after  { width:100%; height:1px; }\r\n.sai-hw-corner-tl { top:0; left:0; }\r\n.sai-hw-corner-tl::after  { top:0; left:0; }\r\n.sai-hw-corner-tl::before { left:0; }\r\n.sai-hw-corner-tr { top:0; right:0; }\r\n.sai-hw-corner-tr::after  { top:0; right:0; }\r\n.sai-hw-corner-tr::before { right:0; }\r\n.sai-hw-corner-bl { bottom:0; left:0; }\r\n.sai-hw-corner-bl::after  { bottom:0; left:0; }\r\n.sai-hw-corner-bl::before { left:0; bottom:0; top:auto; }\r\n.sai-hw-corner-br { bottom:0; right:0; }\r\n.sai-hw-corner-br::after  { bottom:0; right:0; }\r\n.sai-hw-corner-br::before { right:0; bottom:0; top:auto; }\r\n\r\n\/* \u2500\u2500 PARTICLES \u2500\u2500 *\/\r\n.sai-hw-particle {\r\n  position:absolute; border-radius:50%;\r\n  pointer-events:none; z-index:0;\r\n  animation: sai-hw-float linear infinite; opacity:0;\r\n}\r\n.sai-hw-p1 { width:4px;height:4px; background:var(--sai-gold);      top:18%;left:4%;  animation-duration:11s; animation-delay:0s;  box-shadow:0 0 10px 3px var(--sai-gold-glow); }\r\n.sai-hw-p2 { width:3px;height:3px; background:var(--sai-gold-light); top:72%;left:96%; animation-duration:14s; animation-delay:-5s; }\r\n.sai-hw-p3 { width:2px;height:2px; background:var(--sai-gold);       top:44%;left:98%; animation-duration:9s;  animation-delay:-3s; }\r\n.sai-hw-p4 { width:3px;height:3px; background:var(--sai-gold-light); top:85%;left:7%;  animation-duration:13s; animation-delay:-7s; box-shadow:0 0 8px 2px var(--sai-gold-glow); }\r\n@keyframes sai-hw-float {\r\n  0%   { transform:translateY(0) translateX(0);       opacity:0; }\r\n  12%  { opacity:1; }\r\n  50%  { transform:translateY(-36px) translateX(13px); opacity:.7; }\r\n  88%  { opacity:1; }\r\n  100% { transform:translateY(0) translateX(0);       opacity:0; }\r\n}\r\n\r\n\/* \u2500\u2500 SECTION HEADER \u2500\u2500 *\/\r\n.sai-hw-header {\r\n  position:relative; z-index:2;\r\n  text-align:center;\r\n  max-width:760px;\r\n  margin:0 auto 84px;\r\n}\r\n\r\n.sai-hw-label {\r\n  display:inline-flex; align-items:center; gap:0.7rem;\r\n  margin-bottom:1.8rem;\r\n  opacity:0; transform:translateY(22px);\r\n  transition:opacity .7s ease, transform .7s ease;\r\n}\r\n.sai-hw-label.sai-hw-vis { opacity:1; transform:translateY(0); transition-delay:.1s; }\r\n.sai-hw-label-line { width:32px; height:1px; background:var(--sai-gold); }\r\n.sai-hw-label-text {\r\n  font-family:var(--ff-body); font-size:.7rem; font-weight:500;\r\n  letter-spacing:.22em; text-transform:uppercase; color:var(--sai-gold);\r\n}\r\n\r\n.sai-hw-headline {\r\n  font-family:var(--ff-display);\r\n  font-size:clamp(2.2rem,4.2vw,3.8rem);\r\n  font-weight:700; line-height:1.1;\r\n  color:var(--sai-white); margin:0 0 1.4rem;\r\n  opacity:0; transform:translateY(28px);\r\n  transition:opacity .8s ease, transform .8s ease;\r\n}\r\n.sai-hw-headline.sai-hw-vis { opacity:1; transform:translateY(0); transition-delay:.22s; }\r\n.sai-hw-headline-italic {\r\n  font-style:italic; color:var(--sai-gold);\r\n  position:relative; display:inline-block;\r\n}\r\n.sai-hw-headline-italic::after {\r\n  content:''; position:absolute;\r\n  bottom:2px; left:0; right:0; height:1.5px;\r\n  background:linear-gradient(90deg, var(--sai-gold), transparent);\r\n}\r\n\r\n.sai-hw-divider {\r\n  display:flex; align-items:center; justify-content:center; gap:14px;\r\n  opacity:0; transition:opacity .7s ease .44s;\r\n}\r\n.sai-hw-divider.sai-hw-vis { opacity:1; }\r\n.sai-hw-divider-line {\r\n  width:60px; height:1px;\r\n  background:linear-gradient(90deg, transparent, var(--sai-gold));\r\n}\r\n.sai-hw-divider-line:last-child {\r\n  background:linear-gradient(90deg, var(--sai-gold), transparent);\r\n}\r\n\r\n\/* \u2500\u2500 TIMELINE CONTAINER \u2500\u2500 *\/\r\n.sai-hw-timeline {\r\n  position:relative; z-index:2;\r\n  max-width:900px;\r\n  margin:0 auto;\r\n  display:flex;\r\n  flex-direction:column;\r\n  gap:0;\r\n}\r\n\r\n\/* Vertical gold line running through all steps *\/\r\n.sai-hw-timeline::before {\r\n  content:'';\r\n  position:absolute;\r\n  left:35px; top:36px; bottom:36px;\r\n  width:1px;\r\n  background:linear-gradient(to bottom,\r\n    transparent 0%,\r\n    var(--sai-gold) 8%,\r\n    var(--sai-gold) 92%,\r\n    transparent 100%);\r\n  opacity:.25;\r\n  z-index:0;\r\n}\r\n\r\n\/* \u2500\u2500 STEP ROW \u2500\u2500 *\/\r\n.sai-hw-step {\r\n  display:flex;\r\n  align-items:flex-start;\r\n  gap:28px;\r\n  padding:0 0 0 0;\r\n  position:relative;\r\n  opacity:0; transform:translateX(-28px);\r\n  transition:opacity .7s ease, transform .7s ease;\r\n}\r\n.sai-hw-step.sai-hw-vis { opacity:1; transform:translateX(0); }\r\n.sai-hw-step:nth-child(1) { transition-delay:.10s; }\r\n.sai-hw-step:nth-child(2) { transition-delay:.22s; }\r\n.sai-hw-step:nth-child(3) { transition-delay:.34s; }\r\n.sai-hw-step:nth-child(4) { transition-delay:.46s; }\r\n.sai-hw-step:nth-child(5) { transition-delay:.58s; }\r\n\r\n\/* connector line between steps *\/\r\n.sai-hw-step:not(:last-child)::after {\r\n  content:'';\r\n  position:absolute;\r\n  left:35px; top:72px;\r\n  width:1px; height:calc(100% - 36px);\r\n  background:linear-gradient(to bottom, rgba(201,168,76,0.3), transparent);\r\n  z-index:0;\r\n}\r\n\r\n\/* \u2500\u2500 NODE (number circle) \u2500\u2500 *\/\r\n.sai-hw-node {\r\n  flex-shrink:0;\r\n  width:72px; height:72px;\r\n  border-radius:50%;\r\n  border:1px solid var(--sai-border-hard);\r\n  background:var(--sai-card-bg);\r\n  display:flex; align-items:center; justify-content:center;\r\n  position:relative; z-index:2;\r\n  transition:border-color .3s ease, background .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1);\r\n  backdrop-filter:blur(6px);\r\n  -webkit-backdrop-filter:blur(6px);\r\n}\r\n.sai-hw-step:hover .sai-hw-node {\r\n  border-color:var(--sai-gold);\r\n  background:rgba(201,168,76,0.06);\r\n  transform:scale(1.1) rotate(-6deg);\r\n}\r\n\r\n\/* Glow ring around node on hover *\/\r\n.sai-hw-node::before {\r\n  content:'';\r\n  position:absolute; inset:-6px;\r\n  border-radius:50%;\r\n  border:1px solid rgba(201,168,76,0);\r\n  transition:border-color .35s ease, box-shadow .35s ease;\r\n}\r\n.sai-hw-step:hover .sai-hw-node::before {\r\n  border-color:rgba(201,168,76,0.25);\r\n  box-shadow:0 0 18px 4px rgba(201,168,76,0.1);\r\n}\r\n\r\n.sai-hw-node-num {\r\n  font-family:var(--ff-mono);\r\n  font-size:.75rem; font-weight:700; letter-spacing:.1em;\r\n  color:rgba(201,168,76,0.5);\r\n  transition:color .3s ease;\r\n}\r\n.sai-hw-step:hover .sai-hw-node-num { color:var(--sai-gold); }\r\n\r\n\/* \u2500\u2500 STEP CARD \u2500\u2500 *\/\r\n.sai-hw-card {\r\n  flex:1;\r\n  background:var(--sai-card-bg);\r\n  border:1px solid var(--sai-border);\r\n  padding:30px 32px 28px;\r\n  position:relative; overflow:hidden;\r\n  margin-bottom:16px;\r\n  transition:background .3s ease, border-color .3s ease;\r\n  backdrop-filter:blur(6px);\r\n  -webkit-backdrop-filter:blur(6px);\r\n}\r\n\r\n\/* top gold reveal *\/\r\n.sai-hw-card::before {\r\n  content:''; position:absolute;\r\n  top:0; left:0; height:2px; width:0;\r\n  background:linear-gradient(90deg, var(--sai-gold), transparent);\r\n  transition:width .45s ease;\r\n}\r\n.sai-hw-step:hover .sai-hw-card::before { width:100%; }\r\n\r\n\/* left bar *\/\r\n.sai-hw-card::after {\r\n  content:''; position:absolute;\r\n  left:0; top:0; bottom:0; width:2px;\r\n  background:linear-gradient(to bottom, var(--sai-gold), transparent);\r\n  opacity:0; transition:opacity .3s ease;\r\n}\r\n.sai-hw-step:hover .sai-hw-card::after  { opacity:1; }\r\n.sai-hw-step:hover .sai-hw-card { background:#111108; border-color:var(--sai-border-hard); }\r\n\r\n\/* free badge *\/\r\n.sai-hw-badge {\r\n  display:inline-block;\r\n  font-family:var(--ff-mono);\r\n  font-size:8.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;\r\n  color:#0A0A0A; background:var(--sai-gold);\r\n  padding:3px 9px; border-radius:2px;\r\n  margin-left:10px; vertical-align:middle;\r\n  animation:sai-hw-badge-pulse 3s ease-in-out infinite;\r\n}\r\n@keyframes sai-hw-badge-pulse {\r\n  0%,100% { box-shadow:0 0 0 0 rgba(201,168,76,0); }\r\n  50%      { box-shadow:0 0 0 4px rgba(201,168,76,0.2); }\r\n}\r\n\r\n.sai-hw-step-title {\r\n  font-family:var(--ff-display);\r\n  font-size:1.35rem; font-weight:700;\r\n  color:var(--sai-white); line-height:1.25;\r\n  margin:0 0 10px;\r\n}\r\n\r\n.sai-hw-step-desc {\r\n  font-family:var(--ff-body);\r\n  font-size:.84rem; font-weight:300; line-height:1.8;\r\n  color:var(--sai-white-muted); margin:0;\r\n}\r\n.sai-hw-step-desc strong { color:var(--sai-white-soft); font-weight:400; }\r\n\r\n\/* \u2500\u2500 CTA strip at bottom \u2500\u2500 *\/\r\n.sai-hw-cta {\r\n  position:relative; z-index:2;\r\n  max-width:900px; margin:52px auto 0;\r\n  display:flex; align-items:center;\r\n  justify-content:space-between; gap:24px;\r\n  padding:28px 36px;\r\n  background:rgba(201,168,76,0.05);\r\n  border:1px solid var(--sai-border);\r\n  border-left:3px solid var(--sai-gold);\r\n  opacity:0; transform:translateY(22px);\r\n  transition:opacity .7s ease .7s, transform .7s ease .7s, background .3s ease, border-color .3s ease;\r\n  backdrop-filter:blur(6px);\r\n  -webkit-backdrop-filter:blur(6px);\r\n}\r\n.sai-hw-cta.sai-hw-vis { opacity:1; transform:translateY(0); }\r\n.sai-hw-cta:hover {\r\n  background:rgba(201,168,76,0.09);\r\n  border-color:var(--sai-border-hard);\r\n}\r\n\r\n.sai-hw-cta-text {\r\n  font-family:var(--ff-display);\r\n  font-size:clamp(1.1rem,2vw,1.5rem);\r\n  font-weight:600; line-height:1.3;\r\n  color:var(--sai-white);\r\n}\r\n.sai-hw-cta-text em { font-style:italic; color:var(--sai-gold); }\r\n\r\n.sai-hw-cta-note {\r\n  font-family:var(--ff-body);\r\n  font-size:.78rem; font-weight:300;\r\n  color:var(--sai-white-muted); margin-top:4px;\r\n}\r\n\r\n.sai-hw-cta-btn {\r\n  display:inline-flex; align-items:center; gap:8px;\r\n  font-family:var(--ff-mono);\r\n  font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;\r\n  color:#0A0A0A;\r\n  background:linear-gradient(135deg, #C9A84C, #E8C97A);\r\n  padding:13px 26px; border:none; border-radius:2px;\r\n  cursor:pointer; white-space:nowrap;\r\n  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;\r\n  text-decoration:none;\r\n}\r\n.sai-hw-cta-btn:hover {\r\n  transform:translateY(-2px);\r\n  box-shadow:0 8px 24px rgba(201,168,76,0.3);\r\n  filter:brightness(1.08);\r\n}\r\n.sai-hw-cta-btn:active { transform:translateY(0); }\r\n\r\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n@media (max-width:760px) {\r\n  .sai-hw-wrap { padding:80px 6vw 90px; }\r\n  .sai-hw-header { margin-bottom:56px; }\r\n  .sai-hw-timeline::before { left:28px; }\r\n  .sai-hw-step::after { left:28px !important; }\r\n  .sai-hw-node { width:58px; height:58px; }\r\n  .sai-hw-card { padding:22px 20px 20px; }\r\n  .sai-hw-cta {\r\n    flex-direction:column; align-items:flex-start;\r\n    padding:22px 22px;\r\n  }\r\n  .sai-hw-cta-btn { width:100%; justify-content:center; }\r\n  .sai-hw-step { gap:18px; }\r\n}\r\n@media (max-width:460px) {\r\n  .sai-hw-headline { font-size:clamp(1.8rem,7vw,2.4rem); }\r\n  .sai-hw-divider-line { width:36px; }\r\n}\r\n\r\n<\/style>\r\n\r\n<!-- \u2500\u2500 HOW WE WORK MARKUP \u2500\u2500 -->\r\n<div class=\"sai-hw-wrap\" id=\"saiHwWrap\">\r\n\r\n  <!-- BG decoration -->\r\n  <div class=\"sai-hw-bg-glow\"><\/div>\r\n  <div class=\"sai-hw-bg-glow-2\"><\/div>\r\n  <div class=\"sai-hw-hline sai-hw-hline-top\"><\/div>\r\n  <div class=\"sai-hw-hline sai-hw-hline-bottom\"><\/div>\r\n  <div class=\"sai-hw-corner sai-hw-corner-tl\"><\/div>\r\n  <div class=\"sai-hw-corner sai-hw-corner-tr\"><\/div>\r\n  <div class=\"sai-hw-corner sai-hw-corner-bl\"><\/div>\r\n  <div class=\"sai-hw-corner sai-hw-corner-br\"><\/div>\r\n  <div class=\"sai-hw-particle sai-hw-p1\"><\/div>\r\n  <div class=\"sai-hw-particle sai-hw-p2\"><\/div>\r\n  <div class=\"sai-hw-particle sai-hw-p3\"><\/div>\r\n  <div class=\"sai-hw-particle sai-hw-p4\"><\/div>\r\n\r\n  <!-- Header -->\r\n  <div class=\"sai-hw-header\">\r\n\r\n    <div class=\"sai-hw-label\" data-sai-hw-scroll>\r\n      <span class=\"sai-hw-label-line\"><\/span>\r\n      <span class=\"sai-hw-label-text\">Our Process<\/span>\r\n      <span class=\"sai-hw-label-line\" style=\"background:linear-gradient(90deg,var(--sai-gold),transparent)\"><\/span>\r\n    <\/div>\r\n\r\n    <h2 class=\"sai-hw-headline\" data-sai-hw-scroll>\r\n      From First Call to <span class=\"sai-hw-headline-italic\">Live System<\/span><br>\u2014 Here's How It Works\r\n    <\/h2>\r\n\r\n    <div class=\"sai-hw-divider\" data-sai-hw-scroll>\r\n      <span class=\"sai-hw-divider-line\"><\/span>\r\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n        <polygon points=\"12,2 14.9,9.1 22.5,9.1 16.6,13.8 18.8,21 12,16.9 5.2,21 7.4,13.8 1.5,9.1 9.1,9.1\" fill=\"#C9A84C\"\/>\r\n      <\/svg>\r\n      <span class=\"sai-hw-divider-line\"><\/span>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- Timeline -->\r\n  <div class=\"sai-hw-timeline\" id=\"saiHwTimeline\">\r\n\r\n    <!-- STEP 1 -->\r\n    <div class=\"sai-hw-step\" data-sai-hw-scroll>\r\n      <div class=\"sai-hw-node\">\r\n        <span class=\"sai-hw-node-num\">01<\/span>\r\n      <\/div>\r\n      <div class=\"sai-hw-card\">\r\n        <h3 class=\"sai-hw-step-title\">\r\n          Discovery Call\r\n          <span class=\"sai-hw-badge\">Free<\/span>\r\n        <\/h3>\r\n        <p class=\"sai-hw-step-desc\">\r\n          We start with a <strong>30\u201360 minute call<\/strong> to understand your business, your current tools, and the problem you want to solve. No pitch. Just listening.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- STEP 2 -->\r\n    <div class=\"sai-hw-step\" data-sai-hw-scroll>\r\n      <div class=\"sai-hw-node\">\r\n        <span class=\"sai-hw-node-num\">02<\/span>\r\n      <\/div>\r\n      <div class=\"sai-hw-card\">\r\n        <h3 class=\"sai-hw-step-title\">Proposal &amp; Scope<\/h3>\r\n        <p class=\"sai-hw-step-desc\">\r\n          We send you a clear proposal \u2014 <strong>what we'll build, how long it takes, what it costs<\/strong>. No hidden fees. No vague estimates. You know exactly what you're getting before we start.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- STEP 3 -->\r\n    <div class=\"sai-hw-step\" data-sai-hw-scroll>\r\n      <div class=\"sai-hw-node\">\r\n        <span class=\"sai-hw-node-num\">03<\/span>\r\n      <\/div>\r\n      <div class=\"sai-hw-card\">\r\n        <h3 class=\"sai-hw-step-title\">Build &amp; Test<\/h3>\r\n        <p class=\"sai-hw-step-desc\">\r\n          We build the automation or AI system, <strong>keep you updated weekly<\/strong>, and share a staging version for your feedback before anything goes live.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- STEP 4 -->\r\n    <div class=\"sai-hw-step\" data-sai-hw-scroll>\r\n      <div class=\"sai-hw-node\">\r\n        <span class=\"sai-hw-node-num\">04<\/span>\r\n      <\/div>\r\n      <div class=\"sai-hw-card\">\r\n        <h3 class=\"sai-hw-step-title\">Deploy &amp; Train<\/h3>\r\n        <p class=\"sai-hw-step-desc\">\r\n          We deploy the live system and <strong>walk you through how to use and manage it<\/strong>. You'll understand exactly what's running and why \u2014 no black boxes.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- STEP 5 -->\r\n    <div class=\"sai-hw-step\" data-sai-hw-scroll>\r\n      <div class=\"sai-hw-node\">\r\n        <span class=\"sai-hw-node-num\">05<\/span>\r\n      <\/div>\r\n      <div class=\"sai-hw-card\">\r\n        <h3 class=\"sai-hw-step-title\">Support &amp; Iterate<\/h3>\r\n        <p class=\"sai-hw-step-desc\">\r\n          We don't disappear after launch. We offer <strong>ongoing support, monitoring, and improvements<\/strong> as your business grows. Built to evolve with you.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div><!-- \/timeline -->\r\n\r\n  <!-- CTA strip -->\r\n  <div class=\"sai-hw-cta\" id=\"saiHwCta\" data-sai-hw-scroll>\r\n    <div>\r\n      <div class=\"sai-hw-cta-text\">Ready to start? <em>Step 1 is free.<\/em><\/div>\r\n      <div class=\"sai-hw-cta-note\">30\u201360 minutes. No commitment. No pitch.<\/div>\r\n    <\/div>\r\n    <a class=\"sai-hw-cta-btn\" href=\"#contact\">\r\n      Book a Discovery Call\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n        <path d=\"M3 8 H13 M9 4 L13 8 L9 12\" stroke=\"#0A0A0A\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n      <\/svg>\r\n    <\/a>\r\n  <\/div>\r\n\r\n<\/div><!-- \/sai-hw-wrap -->\r\n\r\n<script>\r\n(function () {\r\n\r\n  \/* \u2500\u2500 SCROLL REVEAL \u2500\u2500 *\/\r\n  var els = document.querySelectorAll('#saiHwWrap [data-sai-hw-scroll]');\r\n  if (!els.length) return;\r\n\r\n  var revObs = new IntersectionObserver(function (entries) {\r\n    entries.forEach(function (e) {\r\n      if (e.isIntersecting) {\r\n        e.target.classList.add('sai-hw-vis');\r\n        revObs.unobserve(e.target);\r\n      }\r\n    });\r\n  }, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });\r\n\r\n  els.forEach(function (el) { revObs.observe(el); });\r\n\r\n\r\n  \/* \u2500\u2500 PARALLAX GLOW \u2500\u2500 *\/\r\n  var wrap  = document.getElementById('saiHwWrap');\r\n  var glow1 = wrap.querySelector('.sai-hw-bg-glow');\r\n  var glow2 = wrap.querySelector('.sai-hw-bg-glow-2');\r\n\r\n  wrap.addEventListener('mousemove', function (e) {\r\n    var r  = wrap.getBoundingClientRect();\r\n    var xP = ((e.clientX - r.left) \/ r.width  - 0.5) * 18;\r\n    var yP = ((e.clientY - r.top)  \/ r.height - 0.5) * 18;\r\n    glow1.style.transform = 'translate(calc(-50% + ' + xP + 'px), calc(-50% + ' + yP + 'px))';\r\n    glow2.style.transform = 'translate(' + (-xP*.5) + 'px,' + (-yP*.5) + 'px)';\r\n  });\r\n  wrap.addEventListener('mouseleave', function () {\r\n    glow1.style.transform = '';\r\n    glow2.style.transform = '';\r\n  });\r\n\r\n\r\n  \/* \u2500\u2500 STEP NODE \u2014 pulse on enter \u2500\u2500 *\/\r\n  var steps = document.querySelectorAll('#saiHwTimeline .sai-hw-step');\r\n  var nodeObs = new IntersectionObserver(function (entries) {\r\n    entries.forEach(function (e) {\r\n      if (e.isIntersecting) {\r\n        var node = e.target.querySelector('.sai-hw-node');\r\n        if (node) {\r\n          node.style.transition = 'transform .55s cubic-bezier(.34,1.56,.64,1), border-color .3s ease, background .3s ease';\r\n          node.style.transform  = 'scale(1.18)';\r\n          setTimeout(function () { node.style.transform = ''; }, 600);\r\n        }\r\n        nodeObs.unobserve(e.target);\r\n      }\r\n    });\r\n  }, { threshold: 0.6 });\r\n\r\n  steps.forEach(function (s) { nodeObs.observe(s); });\r\n\r\n\r\n  \/* \u2500\u2500 CONNECTOR LINE animated draw on scroll \u2500\u2500 *\/\r\n  var lineObs = new IntersectionObserver(function (entries) {\r\n    entries.forEach(function (e) {\r\n      if (e.isIntersecting) {\r\n        var tl = document.querySelector('#saiHwTimeline');\r\n        if (tl) {\r\n          tl.style.setProperty('--line-opacity', '0.25');\r\n        }\r\n        lineObs.disconnect();\r\n      }\r\n    });\r\n  }, { threshold: 0.1 });\r\n  var tl = document.querySelector('#saiHwTimeline');\r\n  if (tl) lineObs.observe(tl);\r\n\r\n\r\n  \/* \u2500\u2500 CARD horizontal slide nudge on hover \u2500\u2500 *\/\r\n  steps.forEach(function (step) {\r\n    var card = step.querySelector('.sai-hw-card');\r\n    if (!card) return;\r\n    step.addEventListener('mouseenter', function () {\r\n      card.style.transition = 'background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1)';\r\n      card.style.transform  = 'translateX(6px)';\r\n    });\r\n    step.addEventListener('mouseleave', function () {\r\n      card.style.transform = '';\r\n    });\r\n  });\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-c28f1da e-con e-atomic-element e-flexbox-base e-b5c31c1 \" data-id=\"c28f1da\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"c28f1da\">\n    <div class=\"elementor-element elementor-element-c8a48c4 e-con e-atomic-element e-flexbox-base e-3b1e935 \" data-id=\"c8a48c4\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"c8a48c4\">\n    <div class=\"elementor-element elementor-element-29561fb e-flex e-con-boxed e-con e-parent\" data-id=\"29561fb\" data-element_type=\"container\" data-e-type=\"container\" id=\"f\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fdfe0de elementor-widget elementor-widget-shortcode\" data-id=\"fdfe0de\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f40-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"40\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F6#wpcf7-f40-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"40\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.6\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f40-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<p><label> Name<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" autocomplete=\"name\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span><br \/>\n<\/label>\n<\/p>\n<p><label> Phone<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"tel-320\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"tel\" name=\"tel-320\" \/><\/span><br \/>\n<\/label>\n<\/p>\n<p><label> Email<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" autocomplete=\"email\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span><br \/>\n<\/label>\n<\/p>\n<p><label> Subject<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-subject\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"your-subject\" \/><\/span><br \/>\n<\/label>\n<\/p>\n<p><label> Messege<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" name=\"your-message\"><\/textarea><\/span><br \/>\n<\/label>\n<\/p>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Send\" \/>\n<\/p><p style=\"display: none !important;\" class=\"akismet-fields-container\" data-prefix=\"_wpcf7_ak_\"><label>&#916;<textarea name=\"_wpcf7_ak_hp_textarea\" cols=\"45\" rows=\"8\" maxlength=\"100\"><\/textarea><\/label><input type=\"hidden\" id=\"ak_js_1\" name=\"_wpcf7_ak_js\" value=\"182\"\/><script>\ndocument.getElementById( \"ak_js_1\" ).setAttribute( \"value\", ( new Date() ).getTime() );\n<\/script>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-bdef426 e-con e-atomic-element e-flexbox-base e-173d08e \" data-id=\"bdef426\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"bdef426\">\n    \t\t<div class=\"elementor-element elementor-element-c2c1473 elementor-widget elementor-widget-image\" data-id=\"c2c1473\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"525\" height=\"350\" src=\"https:\/\/shawkyai.com\/wp-content\/uploads\/2026\/05\/portrait-of-a-handsome-asian-man-customer-service-operator-call-center-worker-talking-through-headset-with-customer-in-modern-office-free-photo.jpeg\" class=\"attachment-large size-large wp-image-25\" alt=\"\" srcset=\"https:\/\/shawkyai.com\/wp-content\/uploads\/2026\/05\/portrait-of-a-handsome-asian-man-customer-service-operator-call-center-worker-talking-through-headset-with-customer-in-modern-office-free-photo.jpeg 525w, https:\/\/shawkyai.com\/wp-content\/uploads\/2026\/05\/portrait-of-a-handsome-asian-man-customer-service-operator-call-center-worker-talking-through-headset-with-customer-in-modern-office-free-photo-300x200.jpeg 300w\" sizes=\"(max-width: 525px) 100vw, 525px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n<div class=\"elementor-element elementor-element-9e19460 e-con e-atomic-element e-flexbox-base e-d1062ce \" data-id=\"9e19460\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9e19460\">\n    <div class=\"elementor-element elementor-element-e1655e9 e-con e-atomic-element e-flexbox-base e-6abff3a \" data-id=\"e1655e9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"e1655e9\">\n    \t\t<div class=\"elementor-element elementor-element-6e5d9aa elementor-widget elementor-widget-image\" data-id=\"6e5d9aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"504\" height=\"495\" src=\"https:\/\/shawkyai.com\/wp-content\/uploads\/2026\/05\/Untitled_design__1_-removebg-preview.png\" class=\"attachment-large size-large wp-image-29\" alt=\"\" srcset=\"https:\/\/shawkyai.com\/wp-content\/uploads\/2026\/05\/Untitled_design__1_-removebg-preview.png 504w, https:\/\/shawkyai.com\/wp-content\/uploads\/2026\/05\/Untitled_design__1_-removebg-preview-300x295.png 300w\" sizes=\"(max-width: 504px) 100vw, 504px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-88631bf e-con e-atomic-element e-flexbox-base e-716f177 \" data-id=\"88631bf\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"88631bf\">\n    \t\t<div class=\"elementor-element elementor-element-23e0902 elementor-widget elementor-widget-text-editor\" data-id=\"23e0902\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><em>\u00a9 2026 shawky ai. All Rights Reserved<\/em><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-0573f83 e-con e-atomic-element e-flexbox-base e-b5c2f3d \" data-id=\"0573f83\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"0573f83\">\n    \n<\/div>\n\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Call Us Call Us Cairo-Based AI Agency &amp; Automation Studio We Build AI That Shawky AI specializes in intelligent automation, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shawkyai.com\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shawkyai.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shawkyai.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shawkyai.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shawkyai.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":52,"href":"https:\/\/shawkyai.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":78,"href":"https:\/\/shawkyai.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/78"}],"wp:attachment":[{"href":"https:\/\/shawkyai.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}