{"id":36,"date":"2023-09-05T08:24:38","date_gmt":"2023-09-05T08:24:38","guid":{"rendered":"https:\/\/siteflare.net\/?page_id=36"},"modified":"2026-04-13T00:33:30","modified_gmt":"2026-04-13T00:33:30","slug":"index","status":"publish","type":"page","link":"https:\/\/siteflare.net\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nSiteFlare \u2014 Software that ships. Design that sparks.<\/title>\n<meta name=\"description\" content=\"A one-studio software partner building web, mobile, and AI products for startups and SMEs.\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n<style>\n\n\n\/* =======================================================\n SITEFLARE \u2014 ONE-PAGE SITE\n Design system: Ember #FF4D1F, Obsidian, Space Grotesk, Inter\n ======================================================= *\/\n\n:root {\n --ember: #FF4D1F;\n --ember-deep: #E03A0E;\n --ember-glow: #FFB800;\n\n \/* dark theme (default) *\/\n --bg: #0A0A0A;\n --bg-2: #121212;\n --bg-3: #1A1A1A;\n --text: #FFFFFF;\n --text-dim: #9A9A9A;\n --text-muted: #5A5A5A;\n --border: rgba(255, 255, 255, 0.08);\n --border-strong: rgba(255, 255, 255, 0.18);\n --glow: rgba(255, 77, 31, 0.35);\n --card: rgba(255, 255, 255, 0.03);\n --card-hover: rgba(255, 255, 255, 0.06);\n}\n\n* { margin: 0; padding: 0; box-sizing: border-box; }\n\nhtml { scroll-behavior: smooth; }\n\nbody {\n font-family: 'Inter', -apple-system, sans-serif;\n background: var(--bg);\n color: var(--text);\n line-height: 1.6;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n transition: background 0.5s ease, color 0.5s ease;\n}\n\nbody.no-scroll { overflow: hidden; }\n\na { color: inherit; text-decoration: none; }\nbutton { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }\nimg { max-width: 100%; display: block; }\n\n::selection { background: var(--ember); color: #fff; }\n\n\/* ------- Typography ------- *\/\nh1, h2, h3, h4 {\n font-family: 'Space Grotesk', sans-serif;\n font-weight: 600;\n letter-spacing: -0.025em;\n line-height: 1.05;\n color: var(--text);\n}\n.mono { font-family: 'JetBrains Mono', monospace; }\n\n.ember { color: var(--ember); }\n\n.eyebrow {\n font-family: 'Space Grotesk', sans-serif;\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--ember);\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n.eyebrow::before {\n content: \"\";\n display: inline-block;\n width: 28px;\n height: 1.5px;\n background: var(--ember);\n}\n\n.container {\n max-width: 1320px;\n margin: 0 auto;\n padding: 0 32px;\n}\n@media (max-width: 768px) {\n .container { padding: 0 20px; }\n}\n\n#spark {\n min-height: 100vh;\n padding: 100px 0;\n}\n\/* =======================================================\n INTRO OVERLAY\n ======================================================= *\/\n.intro {\n position: fixed;\n inset: 0;\n z-index: 10000;\n background: #0A0A0A;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform 0.9s cubic-bezier(0.77, 0, 0.18, 1);\n}\n.intro.done { transform: translateY(-100%); }\n.intro.gone { display: none; }\n\n.intro-content {\n display: flex;\n align-items: center;\n gap: 22px;\n}\n.intro-flame {\n width: 64px;\n height: 64px;\n color: var(--ember);\n opacity: 0;\n transform: scale(0.6);\n animation: introFlame 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s forwards;\n filter: drop-shadow(0 0 40px rgba(255, 77, 31, 0.55));\n}\n.intro-word {\n font-family: 'Space Grotesk', sans-serif;\n font-weight: 600;\n font-size: 44px;\n letter-spacing: -0.035em;\n color: #fff;\n opacity: 0;\n transform: translateX(-12px);\n animation: introWord 0.55s ease 0.45s forwards;\n}\n.intro-word span { color: var(--ember); }\n\n@keyframes introFlame {\n to { opacity: 1; transform: scale(1); }\n}\n@keyframes introWord {\n to { opacity: 1; transform: translateX(0); }\n}\n\n.intro-skip {\n position: fixed;\n bottom: 32px;\n right: 32px;\n color: #666;\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n cursor: pointer;\n opacity: 0;\n animation: fadeIn 0.5s ease 1s forwards;\n}\n@keyframes fadeIn { to { opacity: 1; } }\n\n\/* =======================================================\n CURSOR GLOW (desktop only)\n ======================================================= *\/\n.cursor-glow {\n position: fixed;\n width: 500px;\n height: 500px;\n border-radius: 50%;\n background: radial-gradient(circle, var(--glow) 0%, transparent 60%);\n pointer-events: none;\n transform: translate(-50%, -50%);\n z-index: 1;\n opacity: 0;\n transition: opacity 0.4s ease;\n mix-blend-mode: screen;\n}\nbody.cursor-active .cursor-glow { opacity: 0.6; }\n@media (hover: none) { .cursor-glow { display: none; } }\n\n\/* =======================================================\n NAVIGATION\n ======================================================= *\/\n.nav {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 100;\n padding: 20px 0;\n transition: all 0.3s ease;\n}\n.nav.scrolled {\n padding: 14px 0;\n background: rgba(10, 10, 10, 0.85);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n border-bottom: 1px solid var(--border);\n}\n\n\/* Update these specific classes in your <style> tag *\/\n\n.nav-inner {\n display: flex; \/* Change from grid to flex for easier alignment *\/\n align-items: center;\n justify-content: space-between; \n gap: 20px;\n}\n\n.nav-links {\n display: flex;\n justify-content: center;\n align-items: center; \/* Ensures text baselines match *\/\n gap: 36px;\n list-style: none;\n margin: 0; \/* Remove any default margins *\/\n padding: 0;\n flex: 1; \/* Takes up the middle space to keep items centered *\/\n}\n\n.nav-logo, .nav-right {\n display: flex;\n align-items: center; \/* Vertical centering for the end caps *\/\n flex-shrink: 0; \/* Prevents the logo\/button from squishing *\/\n}\n\n.nav-links {\n display: flex;\n justify-content: center;\n gap: 36px;\n list-style: none;\n}\n\n.nav-logo {\n display: flex;\n align-items: center;\n gap: 8px;\n font-family: 'Space Grotesk', sans-serif;\n font-weight: 700;\n font-size: 19px;\n letter-spacing: -0.03em;\n}\n.nav-logo svg { width: 24px; height: 24px; color: var(--ember); }\n.nav-logo span.ember { color: var(--ember); }\n.nav-word { display: inline-flex; }\n\n.nav-links {\n display: flex;\n gap: 36px;\n list-style: none;\n}\n.nav-links a {\n font-family: 'Space Grotesk', sans-serif;\n font-size: 14px;\n font-weight: 500;\n color: var(--text-dim);\n transition: color 0.25s ease;\n position: relative;\n}\n.nav-links a:hover { color: white; }\n.nav-links a::after {\n content: \"\";\n position: absolute;\n bottom: -6px;\n left: 0;\n width: 0;\n height: 1.5px;\n background: var(--ember);\n transition: width 0.3s ease;\n}\n.nav-links a:hover::after { width: 100%; }\n\n.nav-right {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n\n.btn {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 12px 22px;\n font-family: 'Space Grotesk', sans-serif;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 0.02em;\n border-radius: 999px;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n cursor: pointer;\n white-space: nowrap;\n}\n.btn-primary {\n background: var(--ember);\n color: #fff;\n border: 1px solid var(--ember);\n}\n.btn-primary:hover {\n background: var(--ember-deep);\n transform: translateY(-2px);\n box-shadow: 0 10px 30px -10px var(--glow);\n}\n.btn-ghost {\n background: transparent;\n color: var(--text);\n border: 1px solid var(--border-strong);\n}\n.btn-ghost:hover {\n border-color: var(--ember);\n color: var(--ember);\n}\n.btn i { font-size: 11px; transition: transform 0.3s ease; }\n.btn:hover i { transform: translateX(3px); }\n\n.nav-burger { display: none; }\n\n@media (max-width: 900px) {\n .nav-links, .nav .btn-primary { display: none; }\n .nav-burger {\n display: grid;\n place-items: center;\n width: 40px;\n height: 40px;\n border: 1px solid var(--border-strong);\n border-radius: 50%;\n font-size: 16px;\n }\n}\n\n\/* Mobile fullscreen menu *\/\n.mobile-menu {\n position: fixed;\n inset: 0;\n background: var(--bg);\n z-index: 99;\n padding: 100px 24px 32px;\n display: flex;\n flex-direction: column;\n transform: translateY(-100%);\n transition: transform 0.5s cubic-bezier(0.77, 0, 0.18, 1);\n overflow-y: auto;\n}\n.mobile-menu.open { transform: translateY(0); }\n\n.mm-list {\n display: flex;\n flex-direction: column;\n border-top: 1px solid var(--border);\n}\n.mm-item {\n display: flex;\n align-items: baseline;\n gap: 18px;\n padding: 22px 4px;\n border-bottom: 1px solid var(--border);\n font-family: 'Space Grotesk', sans-serif;\n font-size: 22px;\n font-weight: 500;\n color: var(--text);\n letter-spacing: -0.01em;\n transition: color 0.25s ease, padding-left 0.3s ease;\n}\n.mm-item:hover, .mm-item:active {\n color: var(--ember);\n padding-left: 12px;\n}\n.mm-item .mm-num {\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n font-weight: 500;\n color: var(--text-muted);\n letter-spacing: 0.15em;\n min-width: 24px;\n transition: color 0.25s ease;\n}\n.mm-item:hover .mm-num { color: var(--ember); }\n\n.mm-foot {\n margin-top: auto;\n padding-top: 36px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n.mm-foot .btn { align-self: flex-start; }\n.mm-email {\n padding-top: 24px;\n border-top: 1px solid var(--border);\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n color: var(--text-muted);\n letter-spacing: 0.15em;\n text-transform: uppercase;\n}\n.mm-email a {\n display: block;\n color: var(--ember);\n font-size: 14px;\n letter-spacing: 0;\n text-transform: none;\n margin-top: 6px;\n font-family: 'Inter', sans-serif;\n}\n\n\/* =======================================================\n HERO\n ======================================================= *\/\n.hero {\n min-height: 100vh;\n padding: 140px 0 80px;\n display: flex;\n align-items: center;\n position: relative;\n overflow: hidden;\n}\n\n.hero-grid {\n display: grid;\n grid-template-columns: 1.3fr 1fr;\n gap: 60px;\n align-items: center;\n position: relative;\n z-index: 2;\n}\n\n.hero-eyebrow { margin-bottom: 28px; }\n\n.hero h1 {\n font-size: clamp(38px, 5.5vw, 76px);\n font-weight: 600;\n line-height: 1;\n letter-spacing: -0.035em;\n margin-bottom: 32px;\n}\n.hero h1 .word {\n display: inline-block;\n opacity: 0;\n transform: translateY(40px);\n animation: heroWord 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;\n}\n.hero h1 .word.ember-word { color: var(--ember); }\n@keyframes heroWord {\n to { opacity: 1; transform: translateY(0); }\n}\n\n.hero-sub {\n font-size: clamp(16px, 1.4vw, 19px);\n color: var(--text-dim);\n max-width: 560px;\n margin-bottom: 44px;\n line-height: 1.65;\n opacity: 0;\n animation: fadeUp 0.8s ease 1.2s forwards;\n}\n@keyframes fadeUp {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.hero-ctas {\n display: flex;\n gap: 16px;\n flex-wrap: wrap;\n opacity: 0;\n animation: fadeUp 0.8s ease 1.4s forwards;\n}\n\n.hero-meta {\n position: absolute;\n bottom: 40px;\n left: 0;\n right: 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 32px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n color: var(--text-muted);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n opacity: 0;\n animation: fadeUp 0.8s ease 1.8s forwards;\n}\n.hero-meta .dot {\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--ember);\n margin-right: 8px;\n animation: pulse 2s ease-in-out infinite;\n}\n@keyframes pulse {\n 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--glow); }\n 50% { opacity: 0.7; box-shadow: 0 0 0 8px transparent; }\n}\n\n\/* Hero visual \u2014 the big flame with particles *\/\n.hero-visual {\n position: relative;\n height: 500px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.hero-flame {\n width: 280px;\n height: 280px;\n color: var(--ember);\n filter: drop-shadow(0 0 80px var(--glow));\n animation: float 6s ease-in-out infinite;\n opacity: 0;\n transform: scale(0.8);\n animation: heroFlameIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 1s forwards, float 6s ease-in-out 2.2s infinite;\n}\n@keyframes heroFlameIn {\n to { opacity: 1; transform: scale(1); }\n}\n@keyframes float {\n 0%, 100% { transform: translateY(0) scale(1); }\n 50% { transform: translateY(-15px) scale(1.02); }\n}\n\n.hero-rings {\n position: absolute;\n inset: 0;\n display: grid;\n place-items: center;\n pointer-events: none;\n}\n.hero-rings::before, .hero-rings::after {\n content: \"\";\n position: absolute;\n border: 1px solid var(--border-strong);\n border-radius: 50%;\n}\n.hero-rings::before {\n width: 380px;\n height: 380px;\n animation: spin 40s linear infinite;\n border-top-color: var(--ember);\n}\n.hero-rings::after {\n width: 480px;\n height: 480px;\n animation: spin 60s linear infinite reverse;\n border-left-color: var(--ember);\n}\n@keyframes spin { to { transform: rotate(360deg); } }\n\n.hero-bg-grid {\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(var(--border) 1px, transparent 1px),\n linear-gradient(90deg, var(--border) 1px, transparent 1px);\n background-size: 60px 60px;\n mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);\n -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);\n opacity: 0.6;\n z-index: 0;\n}\n\n@media (max-width: 900px) {\n .hero { padding: 120px 0 60px; }\n .hero-grid { grid-template-columns: 1fr; gap: 40px; }\n .hero-visual { height: 340px; order: -1; }\n .hero-flame { width: 180px; height: 180px; }\n .hero-rings::before { width: 260px; height: 260px; }\n .hero-rings::after { width: 330px; height: 330px; }\n .hero-meta { display: none; }\n}\n\n\/* =======================================================\n SECTION BASE\n ======================================================= *\/\n.section {\n padding: 140px 0;\n position: relative;\n z-index: 2;\n}\n@media (max-width: 768px) {\n .section { padding: 90px 0; }\n}\n\n.section-head {\n max-width: 780px;\n margin-bottom: 80px;\n}\n.section-head h2 {\n font-size: clamp(32px, 4vw, 54px);\n font-weight: 600;\n margin-top: 20px;\n line-height: 1.02;\n}\n.section-head p {\n font-size: 17px;\n color: var(--text-dim);\n margin-top: 24px;\n max-width: 640px;\n line-height: 1.65;\n}\n\n\/* Reveal on scroll *\/\n.reveal {\n opacity: 0;\n transform: translateY(40px);\n transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n.reveal.in { opacity: 1; transform: translateY(0); }\n.reveal-delay-1 { transition-delay: 0.1s; }\n.reveal-delay-2 { transition-delay: 0.2s; }\n.reveal-delay-3 { transition-delay: 0.3s; }\n\n\/* =======================================================\n SERVICES \u2014 editorial 2-col list\n ======================================================= *\/\n.services { background: var(--bg); }\n\n.services-list {\n display: grid;\n grid-template-columns: 1fr 1fr;\n border-top: 1px solid var(--border);\n}\n.service {\n padding: 36px 32px;\n border-bottom: 1px solid var(--border);\n display: grid;\n grid-template-columns: 56px 1fr;\n gap: 24px;\n align-items: start;\n position: relative;\n transition: background 0.35s ease, padding 0.35s ease;\n cursor: default;\n overflow: hidden;\n}\n.service:nth-child(odd) { border-right: 1px solid var(--border); }\n.service::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 2px;\n background: var(--ember);\n transform: scaleY(0);\n transform-origin: top;\n transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n.service:hover { background: var(--card); padding-left: 40px; }\n.service:hover::before { transform: scaleY(1); }\n.service:hover .service-icon-wrap {\n color: var(--ember);\n border-color: var(--ember);\n}\n.service:hover .service-title { color: var(--ember); }\n\n.service-icon-wrap {\n width: 52px;\n height: 52px;\n border: 1px solid var(--border-strong);\n border-radius: 6px;\n display: grid;\n place-items: center;\n font-size: 19px;\n color: var(--text-dim);\n transition: all 0.35s ease;\n}\n.service-num {\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n color: var(--text-muted);\n letter-spacing: 0.18em;\n text-transform: uppercase;\n margin-bottom: 10px;\n}\n.service-title {\n font-family: 'Space Grotesk', sans-serif;\n font-size: 21px;\n font-weight: 600;\n letter-spacing: -0.015em;\n margin-bottom: 10px;\n transition: color 0.3s ease;\n color: var(--text);\n}\n.service p {\n font-size: 14px;\n color: var(--text-dim);\n line-height: 1.6;\n max-width: 380px;\n}\n\n@media (max-width: 900px) {\n .services-list { grid-template-columns: 1fr; }\n .service { padding: 28px 20px; border-right: none !important; }\n .service:hover { padding-left: 32px; }\n}\n\n\/* =======================================================\n PROCESS \u2014 compact head-only on desktop\n ======================================================= *\/\n.process {\n background: var(--bg);\n position: relative;\n overflow: hidden;\n}\n.process .section-head {\n text-align: center;\n margin-left: auto;\n margin-right: auto;\n margin-bottom: 0;\n}\n.process .section-head .eyebrow { justify-content: center; }\n.process .section-head p { margin-left: auto; margin-right: auto; }\n\n\/* Mobile stages \u2014 only shown on mobile *\/\n\n\n\n .process-stages-mobile {\n display: flex;\n flex-direction: column;\n gap: 16px;\n margin-top: 60px;\n }\n .stage-card {\n padding: 26px 22px;\n border: 1px solid var(--border);\n border-radius: 4px;\n position: relative;\n overflow: hidden;\n }\n .stage-card::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 2px;\n background: var(--ember);\n }\n .stage-card .stage-num {\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n color: var(--ember);\n letter-spacing: 0.18em;\n text-transform: uppercase;\n margin-bottom: 10px;\n }\n .stage-card h3 {\n font-family: 'Space Grotesk', sans-serif;\n font-size: 22px;\n font-weight: 600;\n margin-bottom: 8px;\n letter-spacing: -0.015em;\n }\n .stage-card p {\n color: var(--text-dim);\n font-size: 14px;\n line-height: 1.6;\n }\n\n\n\/* =======================================================\n DEMO \u2014 Interactive Laptop Dashboard\n ======================================================= *\/\n.demo {\n background: var(--bg-2);\n border-top: 1px solid var(--border);\n border-bottom: 1px solid var(--border);\n}\n.demo-inner {\n display: grid;\n grid-template-columns: 1fr 1.1fr;\n gap: 60px;\n align-items: center;\n}\n@media (max-width: 1000px) {\n .demo-inner { grid-template-columns: 1fr; }\n}\n\n.demo-text h2 { font-size: clamp(34px, 4vw, 56px); }\n.demo-text .eyebrow { margin-bottom: 20px; }\n.demo-text p {\n font-size: 16px;\n color: var(--text-dim);\n margin-top: 24px;\n max-width: 500px;\n line-height: 1.65;\n}\n.demo-list {\n margin-top: 32px;\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 14px;\n}\n.demo-list li {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 14px;\n color: var(--text-dim);\n font-family: 'JetBrains Mono', monospace;\n}\n.demo-list li i { color: var(--ember); font-size: 10px; }\n\n\/* Laptop \u2014 hidden on mobile *\/\n.laptop-wrap {\n padding: 20px 0;\n}\n.laptop {\n position: relative;\n}\n\n.laptop-screen {\n background: #1a1a1a;\n border-radius: 18px 18px 4px 4px;\n padding: 14px 14px 20px;\n border: 2px solid #2a2a2a;\n box-shadow:\n 0 40px 80px -20px rgba(0,0,0,0.6),\n 0 0 0 1px rgba(255,255,255,0.03),\n inset 0 0 0 1px rgba(255,255,255,0.04);\n position: relative;\n}\n.laptop-camera {\n position: absolute;\n top: 6px;\n left: 50%;\n transform: translateX(-50%);\n width: 4px;\n height: 4px;\n background: #444;\n border-radius: 50%;\n}\n.laptop-display {\n background: #0A0A0A;\n border-radius: 4px;\n aspect-ratio: 16 \/ 10;\n overflow: hidden;\n position: relative;\n}\n.laptop-base {\n height: 16px;\n background: linear-gradient(to bottom, #2a2a2a 0%, #1a1a1a 50%, #0f0f0f 100%);\n border-radius: 0 0 20px 20px;\n margin: 0 -20px;\n position: relative;\n}\n.laptop-base::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 80px;\n height: 4px;\n background: #0a0a0a;\n border-radius: 0 0 6px 6px;\n}\n\n\/* Dashboard inside screen *\/\n.dash {\n display: grid;\n grid-template-columns: 120px 1fr;\n height: 100%;\n font-family: 'Inter', sans-serif;\n background: #0A0A0A;\n color: #fff;\n font-size: 10px;\n}\n.dash-side {\n background: #050505;\n border-right: 1px solid #1a1a1a;\n padding: 14px 10px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.dash-logo {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px 14px;\n border-bottom: 1px solid #1a1a1a;\n margin-bottom: 10px;\n}\n.dash-logo svg { width: 14px; height: 14px; color: var(--ember); }\n.dash-logo span {\n font-family: 'Space Grotesk', sans-serif;\n font-weight: 700;\n font-size: 11px;\n letter-spacing: -0.02em;\n}\n.dash-logo .e { color: var(--ember); }\n\n.dash-nav-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 10px;\n border-radius: 4px;\n font-size: 10px;\n color: #888;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.dash-nav-item:hover { background: #111; color: #fff; }\n.dash-nav-item.active { background: rgba(255, 77, 31, 0.12); color: var(--ember); }\n.dash-nav-item i { font-size: 10px; width: 12px; }\n\n.dash-side-foot {\n margin-top: auto;\n padding: 8px;\n border-top: 1px solid #1a1a1a;\n font-size: 8px;\n color: #444;\n text-align: center;\n font-family: 'JetBrains Mono', monospace;\n letter-spacing: 0.1em;\n}\n\n.dash-main {\n padding: 14px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.dash-top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-bottom: 10px;\n border-bottom: 1px solid #1a1a1a;\n}\n.dash-top h4 {\n font-family: 'Space Grotesk', sans-serif;\n font-size: 12px;\n font-weight: 600;\n color: #fff;\n}\n.dash-top .pill {\n font-size: 8px;\n padding: 3px 8px;\n background: rgba(255, 77, 31, 0.12);\n color: var(--ember);\n border-radius: 999px;\n font-family: 'JetBrains Mono', monospace;\n}\n\n.dash-view { display: none; flex-direction: column; gap: 10px; flex: 1; }\n.dash-view.active { display: flex; animation: dashFade 0.4s ease; }\n@keyframes dashFade {\n from { opacity: 0; transform: translateY(6px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.dash-stats {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 6px;\n}\n.dash-stat {\n background: #0f0f0f;\n border: 1px solid #1a1a1a;\n border-radius: 4px;\n padding: 8px;\n}\n.dash-stat .lbl {\n font-size: 7px;\n color: #666;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n margin-bottom: 4px;\n font-family: 'JetBrains Mono', monospace;\n}\n.dash-stat .val {\n font-family: 'Space Grotesk', sans-serif;\n font-size: 14px;\n font-weight: 700;\n color: #fff;\n}\n.dash-stat .delta { font-size: 8px; color: #4ade80; margin-left: 4px; }\n.dash-stat .delta.down { color: #f87171; }\n\n.dash-chart {\n flex: 1;\n background: #0f0f0f;\n border: 1px solid #1a1a1a;\n border-radius: 4px;\n padding: 10px;\n display: flex;\n flex-direction: column;\n min-height: 90px;\n}\n.dash-chart .title {\n font-size: 8px;\n color: #888;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n margin-bottom: 6px;\n font-family: 'JetBrains Mono', monospace;\n}\n.dash-chart svg { width: 100%; flex: 1; }\n\n.dash-tasks { list-style: none; display: flex; flex-direction: column; gap: 4px; flex: 1; overflow: hidden; }\n.dash-task {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 8px;\n background: #0f0f0f;\n border: 1px solid #1a1a1a;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.2s ease;\n font-size: 9px;\n}\n.dash-task:hover { border-color: #2a2a2a; }\n.dash-task .check {\n width: 11px;\n height: 11px;\n border: 1px solid #444;\n border-radius: 2px;\n display: grid;\n place-items: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n.dash-task.done .check {\n background: var(--ember);\n border-color: var(--ember);\n}\n.dash-task.done .check::after {\n content: \"\u2713\";\n color: #fff;\n font-size: 8px;\n font-weight: bold;\n}\n.dash-task.done .label { text-decoration: line-through; color: #555; }\n.dash-task .label { color: #ccc; flex: 1; }\n.dash-task .tag {\n font-size: 7px;\n padding: 2px 6px;\n background: #1a1a1a;\n color: var(--ember);\n border-radius: 999px;\n font-family: 'JetBrains Mono', monospace;\n}\n\n\/* =======================================================\n CLIENTS\n ======================================================= *\/\n.clients {\n padding: 80px 0;\n background: var(--bg);\n border-top: 1px solid var(--border);\n overflow: hidden;\n}\n.clients-label {\n text-align: center;\n font-family: 'Space Grotesk', sans-serif;\n font-size: 12px;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--text-dim);\n margin-bottom: 40px;\n}\n.marquee {\n display: flex;\n overflow: hidden;\n mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);\n -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);\n}\n.marquee-track {\n display: flex;\n gap: 80px;\n animation: marquee 40s linear infinite;\n flex-shrink: 0;\n padding-right: 80px;\n \/* Add these two lines *\/\n align-items: center; \n justify-content: center;\n}\n@keyframes marquee {\n to { transform: translateX(-50%); }\n}\n.marquee:hover .marquee-track { animation-play-state: paused; }\n\n.client-logo {\n height: 100%!important;\n width: 160px;\n max-width:160px;\n max-height:100%!important;\n object-fit: contain;\n object-position: center;\n \/\/filter: grayscale(100%) brightness(1.8) contrast(1.1);\n opacity: 0.55;\n transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;\n flex-shrink: 0;\n border-radius:10%!important;\n}\n\n.client-logo {\n height: 100%!important;\n width: 160px;\n max-width:160px;\n max-height:100%!important;\n object-fit: contain;\n object-position: center;\n \/\/ filter: grayscale(100%) brightness(1.8) contrast(1.1);\n opacity: 0.55;\n transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;\n flex-shrink: 0;\n \/* Remove any default display: block if it interferes *\/\n display: inline-block; \n background: white!important;\n padding:10px;\n border-radius:10%!important;\n}\n\n.client-placeholder {\n height: 48px; \/* Slightly shorter than the img height to look balanced *\/\n padding: 0 28px;\n display: inline-grid; \/* Changed from grid to inline-grid *\/\n place-items: center;\n font-family: 'Space Grotesk', sans-serif;\n font-size: 22px;\n font-weight: 600;\n letter-spacing: -0.01em;\n color: var(--text-dim);\n border: 1px dashed var(--border-strong);\n border-radius: 999px;\n white-space: nowrap;\n transition: all 0.3s ease;\n flex-shrink: 0;\n \/* Ensures it behaves well inside the flex track *\/\n align-self: center; \n}\n\n.client-logo:hover {\n filter: grayscale(0%);\n opacity: 1;\n}\n\n.client-placeholder {\n height: 48px;\n padding: 0 28px;\n display: grid;\n place-items: center;\n font-family: 'Space Grotesk', sans-serif;\n font-size: 22px;\n font-weight: 600;\n letter-spacing: -0.01em;\n color: var(--text-dim);\n border: 1px dashed var(--border-strong);\n border-radius: 999px;\n white-space: nowrap;\n transition: all 0.3s ease;\n flex-shrink: 0;\n}\n.client-placeholder:hover {\n color: var(--ember);\n border-color: var(--ember);\n}\n\n\/* =======================================================\n CONTACT\n ======================================================= *\/\n.contact {\n padding: 160px 0;\n position: relative;\n overflow: hidden;\n text-align: center;\n}\n.contact::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 700px;\n height: 700px;\n background: radial-gradient(circle, var(--glow) 0%, transparent 60%);\n opacity: 0.4;\n pointer-events: none;\n}\n@media (max-width: 768px) { .contact { padding: 100px 0; } }\n\n.contact-inner {\n position: relative;\n z-index: 2;\n max-width: 860px;\n margin: 0 auto;\n}\n.contact .eyebrow { margin-bottom: 24px; }\n.contact h2 {\n font-size: clamp(38px, 5.5vw, 72px);\n font-weight: 600;\n line-height: 1.02;\n margin-bottom: 32px;\n}\n.contact h2 .ember { color: var(--ember); }\n.contact p {\n font-size: 18px;\n color: var(--text-dim);\n max-width: 580px;\n margin: 0 auto 48px;\n line-height: 1.65;\n}\n.contact-ctas {\n display: flex;\n gap: 16px;\n justify-content: center;\n flex-wrap: wrap;\n}\n.contact-ctas .btn { padding: 16px 30px; font-size: 14px; }\n.contact-email {\n margin-top: 56px;\n padding-top: 40px;\n border-top: 1px solid var(--border);\n font-family: 'JetBrains Mono', monospace;\n font-size: 13px;\n color: var(--text-muted);\n letter-spacing: 0.1em;\n}\n.contact-email a {\n color: var(--ember);\n font-size: 15px;\n letter-spacing: 0;\n margin-left: 8px;\n transition: opacity 0.25s ease;\n}\n.contact-email a:hover { opacity: 0.75; }\n\n\/* =======================================================\n FOOTER\n ======================================================= *\/\n.footer {\n padding: 40px 0;\n border-top: 1px solid var(--border);\n background: var(--bg);\n}\n.footer-inner {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 20px;\n flex-wrap: wrap;\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n color: var(--text-muted);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n}\n.footer-logo {\n display: flex;\n align-items: center;\n gap: 8px;\n font-family: 'Space Grotesk', sans-serif;\n font-weight: 700;\n font-size: 14px;\n color: var(--text);\n letter-spacing: -0.02em;\n text-transform: none;\n}\n.footer-logo svg { width: 16px; height: 16px; color: var(--ember); }\n.footer-logo span.e { color: var(--ember); }\n.footer-socials { display: flex; gap: 14px; }\n.footer-socials a {\n width: 32px;\n height: 32px;\n border: 1px solid var(--border);\n border-radius: 50%;\n display: grid;\n place-items: center;\n font-size: 11px;\n color: var(--text-dim);\n transition: all 0.3s ease;\n}\n.footer-socials a:hover {\n border-color: var(--ember);\n color: var(--ember)!important;\n transform: translateY(-2px);\n}\n\na:hover{\n color: var(--ember)!important;\n}\n\n\na.btn:hover{\n color: white!important;\n}\n\n.nav-burger,\n.nav-burger:hover\n{border:none!important;background:transparent;};\n<\/style>\n<\/head>\n<body>\n\n<!-- ============ SVG SYMBOL ============ -->\n<svg width=\"0\" height=\"0\" style=\"position:absolute\">\n <defs>\n <symbol id=\"flame\" viewBox=\"0 0 32 32\">\n <path d=\"M 15.685547 1 C 15.706547 1.2 15.716797 1.3996094 15.716797 1.5996094 C 15.716797 7.1776094 7 10.921469 7 17.855469 C 7 20.866469 9.4856719 22.881438 11.513672 24.648438 C 15.375672 27.470437 16.142578 28.73425 16.142578 29.65625 C 16.142578 30.26725 16 30.678 16 31 C 16.768 29.989 16.857187 29.074266 16.867188 28.197266 C 16.867188 26.408266 15.609391 24.788078 14.275391 22.955078 C 13.326391 21.610078 11.769531 20.377859 11.769531 18.755859 C 11.769531 14.288859 18 11.344797 18 6.4667969 C 18 3.6217969 15.983547 1.144 15.685547 1 z M 19.375 9 L 19.615234 9.4335938 C 19.756234 9.7445938 19.820312 10.087844 19.820312 10.464844 C 19.820312 13.157844 16.337547 17.169953 16.185547 17.501953 C 16.054547 17.811953 16 18.145078 16 18.455078 C 16 19.674078 16.911219 21.003906 17.074219 21.003906 C 17.216219 21.003906 20.484031 17.656078 20.582031 15.705078 C 20.962031 16.414078 21.125 17.068656 21.125 17.722656 C 21.125 20.205656 18.605469 23.574219 18.605469 23.574219 C 18.605469 24.272219 20.527141 26.777344 20.744141 26.777344 C 20.809141 26.777344 20.885453 26.700766 20.939453 26.634766 C 23.229453 24.262766 25 21.502953 25 18.376953 C 25 17.899953 24.956141 17.400625 24.869141 16.890625 C 24.141141 12.867625 20.374 9.388 19.375 9 z\" fill=\"currentColor\"\/>\n <\/symbol>\n <\/defs>\n<\/svg>\n\n<!-- ============ INTRO OVERLAY ============ -->\n<div class=\"intro\" id=\"intro\">\n <div class=\"intro-content\">\n <svg class=\"intro-flame\"><use href=\"#flame\"\/><\/svg>\n <div class=\"intro-word\">Site<span>Flare<\/span><\/div>\n <\/div>\n <div class=\"intro-skip\">CLICK TO SKIP<\/div>\n<\/div>\n\n<!-- ============ CURSOR GLOW ============ -->\n<div class=\"cursor-glow\" id=\"cursorGlow\"><\/div>\n\n<!-- ============ NAV ============ -->\n<nav class=\"nav\" id=\"nav\">\n <div class=\"container nav-inner\">\n <a href=\"#top\" class=\"nav-logo\">\n <svg><use href=\"#flame\"\/><\/svg>\n <span class=\"nav-word\">Site<span class=\"ember\">Flare<\/span><\/span>\n <\/a>\n <ul class=\"nav-links\">\n <li><a href=\"#services\">Services<\/a><\/li>\n <li><a href=\"#process\">Process<\/a><\/li>\n <li><a href=\"#demo\">Demo<\/a><\/li>\n <li><a href=\"#clients\">Clients<\/a><\/li>\n <li><a href=\"#contact\">Contact<\/a><\/li>\n <\/ul>\n <div class=\"nav-right\">\n <a href=\"mailto:hadidghaily@siteflare.net\" class=\"btn btn-primary\">\n Start a project <i class=\"fa-solid fa-arrow-right\"><\/i>\n <\/a>\n <button class=\"nav-burger\" id=\"navBurger\" aria-label=\"Menu\">\n <i class=\"fa-solid fa-bars\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n<\/nav>\n\n<!-- ============ MOBILE MENU ============ -->\n<div class=\"mobile-menu\" id=\"mobileMenu\">\n <div class=\"mm-list\">\n <a href=\"#services\" class=\"mm-item mm-link\"><span class=\"mm-num\">01<\/span> Services<\/a>\n <a href=\"#process\" class=\"mm-item mm-link\"><span class=\"mm-num\">02<\/span> Process<\/a>\n <a href=\"#demo\" class=\"mm-item mm-link\"><span class=\"mm-num\">03<\/span> Demo<\/a>\n <a href=\"#clients\" class=\"mm-item mm-link\"><span class=\"mm-num\">04<\/span> Clients<\/a>\n <a href=\"#contact\" class=\"mm-item mm-link\"><span class=\"mm-num\">05<\/span> Contact<\/a>\n <\/div>\n <div class=\"mm-foot\">\n <a href=\"mailto:hadidghaily@siteflare.net\" class=\"btn btn-primary mm-link\">\n Start a project <i class=\"fa-solid fa-arrow-right\"><\/i>\n <\/a>\n <div class=\"mm-email\">\n Email\n <a href=\"mailto:hadidghaily@siteflare.net\">hadidghaily@siteflare.net<\/a>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- ============ HERO ============ -->\n<section class=\"hero\" id=\"top\">\n <div class=\"hero-bg-grid\"><\/div>\n <div class=\"container hero-grid\">\n <div>\n <div class=\"eyebrow hero-eyebrow\">Beirut \u00b7 Software Studio<\/div>\n <h1 id=\"heroTitle\">\n <span class=\"word\" style=\"animation-delay: 0.2s\">Software<\/span>\n <span class=\"word\" style=\"animation-delay: 0.35s\">that<\/span>\n <span class=\"word ember-word\" style=\"animation-delay: 0.5s\">ships.<\/span><br>\n <span class=\"word\" style=\"animation-delay: 0.7s\">Design<\/span>\n <span class=\"word\" style=\"animation-delay: 0.85s\">that<\/span>\n <span class=\"word ember-word\" style=\"animation-delay: 1.0s\">sparks.<\/span>\n <\/h1>\n <p class=\"hero-sub\">\n One studio. Every layer of your stack. We build e-commerce, web, mobile, and AI systems for founders who need to move now \u2014 and stick around long after the launch.\n <\/p>\n <div class=\"hero-ctas\">\n <a href=\"mailto:hadidghaily@siteflare.net\" class=\"btn btn-primary\">\n Start a project <i class=\"fa-solid fa-arrow-right\"><\/i>\n <\/a>\n <a href=\"#process\" class=\"btn btn-ghost\">\n See how we work <i class=\"fa-solid fa-arrow-down\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <div class=\"hero-visual\">\n <div class=\"hero-rings\"><\/div>\n <svg class=\"hero-flame\"><use href=\"#flame\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"hero-meta\">\n <span><span class=\"dot\"><\/span>AVAILABLE FOR NEW PROJECTS \u2014 2026<\/span>\n <span>SCROLL \u2193<\/span>\n <\/div>\n<\/section>\n\n<!-- ============ SERVICES ============ -->\n<section class=\"section services\" id=\"services\">\n <div class=\"container\">\n <div class=\"section-head reveal\">\n <div class=\"eyebrow\">01 \/ What we do<\/div>\n <h2>Every layer of your product, <span class=\"ember\">handled.<\/span><\/h2>\n <p>From the first wireframe to the last deployment, SiteFlare covers the whole stack \u2014 so you get one partner, one invoice, one throat to choke. No handoffs, no finger-pointing.<\/p>\n <\/div>\n\n <div class=\"services-list reveal\">\n <div class=\"service\">\n <div class=\"service-icon-wrap\"><i class=\"fa-solid fa-mobile-screen-button\"><\/i><\/div>\n <div>\n <div class=\"service-num\">01 \/ Mobile<\/div>\n <h3 class=\"service-title\">Mobile Apps<\/h3>\n <p>Native-feeling iOS & Android apps that don't drain batteries or patience.<\/p>\n <\/div>\n <\/div>\n <div class=\"service\">\n <div class=\"service-icon-wrap\"><i class=\"fa-solid fa-database\"><\/i><\/div>\n <div>\n <div class=\"service-num\">02 \/ Systems<\/div>\n <h3 class=\"service-title\">Information Systems<\/h3>\n <p>ERPs, CRMs, inventory \u2014 the quiet backbones that keep operations moving.<\/p>\n <\/div>\n <\/div>\n <div class=\"service\">\n <div class=\"service-icon-wrap\"><i class=\"fa-solid fa-heart-pulse\"><\/i><\/div>\n <div>\n <div class=\"service-num\">03 \/ HealthTech<\/div>\n <h3 class=\"service-title\">HealthTech Systems<\/h3>\n <p>EMRs and clinical tools built for workflows that can't afford friction.<\/p>\n <\/div>\n <\/div>\n <div class=\"service\">\n <div class=\"service-icon-wrap\"><i class=\"fa-solid fa-brain\"><\/i><\/div>\n <div>\n <div class=\"service-num\">04 \/ AI<\/div>\n <h3 class=\"service-title\">AI Solutions<\/h3>\n <p>LLM features, RAG pipelines, and custom models wired into products that actually ship.<\/p>\n <\/div>\n <\/div>\n <div class=\"service\">\n <div class=\"service-icon-wrap\"><i class=\"fa-solid fa-comments\"><\/i><\/div>\n <div>\n <div class=\"service-num\">05 \/ Chat<\/div>\n <h3 class=\"service-title\">Chatbots<\/h3>\n <p>Support, sales, and ops bots that sound like humans and know your data.<\/p>\n <\/div>\n <\/div>\n <div class=\"service\">\n <div class=\"service-icon-wrap\"><i class=\"fa-solid fa-gears\"><\/i><\/div>\n <div>\n <div class=\"service-num\">06 \/ Automation<\/div>\n <h3 class=\"service-title\">Task Automation<\/h3>\n <p>Kill the copy-paste work. Scripts, integrations, and workflows that give you hours back.<\/p>\n <\/div>\n <\/div>\n <div class=\"service\">\n <div class=\"service-icon-wrap\"><i class=\"fa-solid fa-briefcase\"><\/i><\/div>\n <div>\n <div class=\"service-num\">07 \/ Web<\/div>\n <h3 class=\"service-title\">Business Websites<\/h3>\n <p>Fast, sharp marketing sites that load in a blink and convert like they mean it.<\/p>\n <\/div>\n <\/div>\n <div class=\"service\">\n <div class=\"service-icon-wrap\"><i class=\"fa-solid fa-cart-shopping\"><\/i><\/div>\n <div>\n <div class=\"service-num\">08 \/ Commerce<\/div>\n <h3 class=\"service-title\">E-commerce<\/h3>\n <p>Stores engineered for the checkout, not just the hero. Built to scale with you.<\/p>\n <\/div>\n <\/div>\n <div class=\"service\">\n <div class=\"service-icon-wrap\"><i class=\"fa-solid fa-house\"><\/i><\/div>\n <div>\n <div class=\"service-num\">09 \/ Real Estate<\/div>\n <h3 class=\"service-title\">Real Estate Platforms<\/h3>\n <p>Listings, maps, agent tools \u2014 the whole kit for brokers who outgrew spreadsheets.<\/p>\n <\/div>\n <\/div>\n <div class=\"service\">\n <div class=\"service-icon-wrap\"><i class=\"fa-solid fa-calendar-check\"><\/i><\/div>\n <div>\n <div class=\"service-num\">10 \/ Booking<\/div>\n <h3 class=\"service-title\">Booking & Rentals<\/h3>\n <p>Availability, payments, calendars, reminders \u2014 wired together so nothing slips.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============ PROCESS ============ -->\n<section class=\"section process\" id=\"process\">\n <div class=\"container\">\n <div class=\"section-head reveal\">\n <div class=\"eyebrow\">02 \/ How we work<\/div>\n <h2>Plan. Build. Launch. <span class=\"ember\">Stay.<\/span><\/h2>\n <p>Most studios vanish the minute the invoice clears. We don't. From first sketch to 2am bug fix, SiteFlare is in the trenches with you \u2014 for as long as the project lives.<\/p>\n <\/div>\n\n <div class=\"process-stages-mobile\">\n <div class=\"stage-card\">\n <div class=\"stage-num\">01 \/ Plan<\/div>\n <h3>Discovery & scope<\/h3>\n <p>Architecture mapped before a single line of code. You'll know what's being built, what it costs, and when it lands.<\/p>\n <\/div>\n <div class=\"stage-card\">\n <div class=\"stage-num\">02 \/ Build<\/div>\n <h3>In the trenches<\/h3>\n <p>Pixel-clean frontends, battle-tested backends, and tight feedback loops. Work-in-progress every week \u2014 no black boxes.<\/p>\n <\/div>\n <div class=\"stage-card\">\n <div class=\"stage-num\">03 \/ Launch<\/div>\n <h3>Deploy day<\/h3>\n <p>Not a finish line \u2014 the real start. We handle releases, monitor first traffic, and make sure the rollout lands clean.<\/p>\n <\/div>\n <div class=\"stage-card\">\n <div class=\"stage-num\">04 \/ Stay<\/div>\n <h3>Sunday-night ready<\/h3>\n <p>Bugs don't respect business hours. Neither do we. Long after launch, we're still the ones fielding the message.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============ DEMO ============ -->\n<section class=\"section demo\" id=\"demo\">\n <div class=\"container\">\n <div class=\"demo-inner\">\n <div class=\"demo-text reveal\">\n <div class=\"eyebrow\">03 \/ Live demo<\/div>\n <h2>Touch the thing <br>we just <span class=\"ember\">built.<\/span><\/h2>\n <p>This isn't a screenshot. It's a working piece of a SiteFlare-built admin dashboard \u2014 the same kind of system we ship for health clinics, logistics teams, and booking platforms. Click around.<\/p>\n <ul class=\"demo-list\">\n <li><i class=\"fa-solid fa-circle\"><\/i> Click the sidebar to switch views<\/li>\n <li><i class=\"fa-solid fa-circle\"><\/i> Tick tasks \u2014 state is real, not faked<\/li>\n <li><i class=\"fa-solid fa-circle\"><\/i> Built with the same tools we'd use on yours<\/li>\n <\/ul>\n <\/div>\n\n <div class=\"laptop-wrap reveal\">\n <div class=\"laptop\">\n <div class=\"laptop-screen\">\n <div class=\"laptop-camera\"><\/div>\n <div class=\"laptop-display\">\n <div class=\"dash\">\n <aside class=\"dash-side\">\n <div class=\"dash-logo\">\n <svg><use href=\"#flame\"\/><\/svg>\n <span>Site<span class=\"e\">Flare<\/span><\/span>\n <\/div>\n <div class=\"dash-nav-item active\" data-view=\"overview\"><i class=\"fa-solid fa-chart-line\"><\/i> Overview<\/div>\n <div class=\"dash-nav-item\" data-view=\"analytics\"><i class=\"fa-solid fa-chart-column\"><\/i> Analytics<\/div>\n <div class=\"dash-nav-item\" data-view=\"tasks\"><i class=\"fa-solid fa-list-check\"><\/i> Tasks<\/div>\n <div class=\"dash-side-foot\">DEMO \/ v1.0<\/div>\n <\/aside>\n <main class=\"dash-main\">\n <div class=\"dash-top\">\n <h4 id=\"dashTitle\">Overview<\/h4>\n <div class=\"pill\">\u25cf LIVE<\/div>\n <\/div>\n\n <div class=\"dash-view active\" data-view=\"overview\">\n <div class=\"dash-stats\">\n <div class=\"dash-stat\"><div class=\"lbl\">Revenue<\/div><div class=\"val\">$42k<span class=\"delta\">+12%<\/span><\/div><\/div>\n <div class=\"dash-stat\"><div class=\"lbl\">Users<\/div><div class=\"val\">1,284<span class=\"delta\">+8%<\/span><\/div><\/div>\n <div class=\"dash-stat\"><div class=\"lbl\">Conv.<\/div><div class=\"val\">3.4%<span class=\"delta down\">-0.2%<\/span><\/div><\/div>\n <\/div>\n <div class=\"dash-chart\">\n <div class=\"title\">Last 30 Days<\/div>\n <svg viewBox=\"0 0 300 80\" preserveAspectRatio=\"none\">\n <defs>\n <linearGradient id=\"g1\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stop-color=\"#FF4D1F\" stop-opacity=\"0.4\"\/>\n <stop offset=\"100%\" stop-color=\"#FF4D1F\" stop-opacity=\"0\"\/>\n <\/linearGradient>\n <\/defs>\n <path d=\"M0,60 L20,55 L40,58 L60,45 L80,50 L100,35 L120,40 L140,28 L160,32 L180,20 L200,26 L220,15 L240,22 L260,12 L280,18 L300,8\" stroke=\"#FF4D1F\" stroke-width=\"1.5\" fill=\"none\"\/>\n <path d=\"M0,60 L20,55 L40,58 L60,45 L80,50 L100,35 L120,40 L140,28 L160,32 L180,20 L200,26 L220,15 L240,22 L260,12 L280,18 L300,8 L300,80 L0,80 Z\" fill=\"url(#g1)\"\/>\n <\/svg>\n <\/div>\n <\/div>\n\n <div class=\"dash-view\" data-view=\"analytics\">\n <div class=\"dash-chart\" style=\"flex: 1;\">\n <div class=\"title\">Weekly Sessions<\/div>\n <svg viewBox=\"0 0 300 120\" preserveAspectRatio=\"none\">\n <g fill=\"#FF4D1F\">\n <rect x=\"10\" y=\"60\" width=\"28\" height=\"60\" opacity=\"0.7\"\/>\n <rect x=\"50\" y=\"40\" width=\"28\" height=\"80\" opacity=\"0.8\"\/>\n <rect x=\"90\" y=\"55\" width=\"28\" height=\"65\" opacity=\"0.7\"\/>\n <rect x=\"130\" y=\"20\" width=\"28\" height=\"100\" opacity=\"1\"\/>\n <rect x=\"170\" y=\"35\" width=\"28\" height=\"85\" opacity=\"0.85\"\/>\n <rect x=\"210\" y=\"50\" width=\"28\" height=\"70\" opacity=\"0.75\"\/>\n <rect x=\"250\" y=\"30\" width=\"28\" height=\"90\" opacity=\"0.9\"\/>\n <\/g>\n <g fill=\"#555\" font-family=\"monospace\" font-size=\"7\">\n <text x=\"24\" y=\"118\" text-anchor=\"middle\">M<\/text>\n <text x=\"64\" y=\"118\" text-anchor=\"middle\">T<\/text>\n <text x=\"104\" y=\"118\" text-anchor=\"middle\">W<\/text>\n <text x=\"144\" y=\"118\" text-anchor=\"middle\">T<\/text>\n <text x=\"184\" y=\"118\" text-anchor=\"middle\">F<\/text>\n <text x=\"224\" y=\"118\" text-anchor=\"middle\">S<\/text>\n <text x=\"264\" y=\"118\" text-anchor=\"middle\">S<\/text>\n <\/g>\n <\/svg>\n <\/div>\n <\/div>\n\n <div class=\"dash-view\" data-view=\"tasks\">\n <ul class=\"dash-tasks\" id=\"dashTasks\">\n <li class=\"dash-task done\"><div class=\"check\"><\/div><span class=\"label\">Ship auth flow<\/span><span class=\"tag\">DONE<\/span><\/li>\n <li class=\"dash-task done\"><div class=\"check\"><\/div><span class=\"label\">API rate limiting<\/span><span class=\"tag\">DONE<\/span><\/li>\n <li class=\"dash-task\"><div class=\"check\"><\/div><span class=\"label\">Dashboard refactor<\/span><span class=\"tag\">DEV<\/span><\/li>\n <li class=\"dash-task\"><div class=\"check\"><\/div><span class=\"label\">Stripe webhooks<\/span><span class=\"tag\">DEV<\/span><\/li>\n <li class=\"dash-task\"><div class=\"check\"><\/div><span class=\"label\">E2E tests<\/span><span class=\"tag\">QA<\/span><\/li>\n <\/ul>\n <\/div>\n <\/main>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"laptop-base\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============ CLIENTS ============ -->\n<section class=\"clients\" id=\"clients\">\n <div class=\"container\">\n <div class=\"clients-label\">Trusted by teams shipping real products<\/div>\n <\/div>\n <div class=\"marquee\">\n <div class=\"marquee-track\" id=\"marqueeTrack\"><\/div>\n <\/div>\n<\/section>\n\n<!-- ============ CONTACT ============ -->\n<section class=\"contact\" id=\"contact\">\n <div class=\"container contact-inner\">\n <div class=\"eyebrow reveal\">04 \/ Let's build<\/div>\n <h2 class=\"reveal\">Got a thing that <br>needs to <span class=\"ember\">burn bright?<\/span><\/h2>\n <p class=\"reveal\">Tell us about it. A one-line idea, a half-built project, a mess you inherited \u2014 doesn't matter. We'll reply within a day with a straight answer.<\/p>\n <div class=\"contact-ctas reveal\">\n <a href=\"mailto:hadidghaily@siteflare.net?subject=New%20project%20inquiry\" class=\"btn btn-primary\">\n Start a project <i class=\"fa-solid fa-arrow-right\"><\/i>\n <\/a>\n <a href=\"mailto:hadidghaily@siteflare.net?subject=Quick%20question\" class=\"btn btn-ghost\">\n Just say hi <i class=\"fa-solid fa-hand-peace\"><\/i>\n <\/a>\n <\/div>\n <div class=\"contact-email reveal\">\n OR WRITE US AT <a href=\"mailto:hadidghaily@siteflare.net\">hadidghaily@siteflare.net<\/a>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============ FOOTER ============ -->\n<footer class=\"footer\">\n <div class=\"container footer-inner\">\n <a href=\"#top\" class=\"footer-logo\">\n <svg><use href=\"#flame\"\/><\/svg>\n <span class=\"nav-word\">Site<span class=\"e\">Flare<\/span><\/span>\n <\/a>\n <div>\u00a9 2026 SITEFLARE \u00b7 BEIRUT, LEBANON<\/div>\n <div class=\"footer-socials\">\n <a href=\"mailto:hadidghaily@siteflare.net\" aria-label=\"Email\"><i class=\"fa-solid fa-envelope\"><\/i><\/a>\n <a href=\"#\" aria-label=\"LinkedIn\"><i class=\"fa-brands fa-linkedin-in\"><\/i><\/a>\n <a href=\"#\" aria-label=\"Github\"><i class=\"fa-brands fa-github\"><\/i><\/a>\n <a href=\"#\" aria-label=\"Instagram\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\n <\/div>\n <\/div>\n<\/footer>\n\n<script>\n\n\/* =======================================================\n CONFIG \u2014 edit these\n ======================================================= *\/\n\n\/\/ Client logos \u2014 drop image URLs here. They'll auto-render in the marquee.\n\/\/ If the array is empty, placeholder pills show instead.\nconst CLIENTS = [\n { name: 'Client 01', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/0.png' },\n { name: 'Client 02', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/full-logo-black-red-1024x346-1.png' },\n { name: 'Client 03', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/download-18-scaled.png' },\n { name: 'Client 04', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/mec-cuplogo-sizes-05-1536x1536-1.webp' },\n { name: 'Client 05', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/Asset-3-e1683535563316.webp' },\n { name: 'Fapco', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/fapco-logo-png-05-1024x816-1.png' },\n { name: 'Wii Telecom', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/wii-telecom-logo-verical-horizontal-1-Photoroom-1.png' },\n { name: 'Client 09', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/cropped-HeaderLogo.png' },\n { name: 'Client 11', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/Asset-2side-1536x781-1.png' },\n { name: 'Gulf Stationery', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/stationery-gulf-scl-14-2048x1784-1.png' },\n { name: 'Client 13', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/Sans-titre.png' },\n { name: 'Client 14', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/Sans-titre-1.png' },\n { name: 'Rebornit', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/Rebornit-7-1024x1024-1-e1718634339669-300x61-1.png' },\n { name: 'R2Z', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/R2Z-Icon.png' },\n { name: 'OA', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/OA_Logo1_b.png' },\n { name: 'Client 18', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/image00026.png' },\n { name: 'Client 19', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/hero-img.png' },\n { name: 'Client 21', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/cropped-logo.png' }, \n { name: 'Client 22', logo: 'https:\/\/siteflare.net\/wp-content\/uploads\/2026\/04\/438690794_1075549856886104_2397843351087127393_n.jpg'},\n \n];\n\n\/\/ If CLIENTS is empty, these pill placeholders show instead so the section never looks broken.\nconst CLIENT_PLACEHOLDERS = [\n 'Your Logo Here', 'Your Logo Here', 'Your Logo Here',\n 'Your Logo Here', 'Your Logo Here', 'Your Logo Here',\n];\n\n\/* =======================================================\n INTRO\n ======================================================= *\/\n(function intro() {\n const intro = document.getElementById('intro');\n const skip = intro.querySelector('.intro-skip');\n document.body.classList.add('no-scroll');\n\n const finish = () => {\n intro.classList.add('done');\n document.body.classList.remove('no-scroll');\n setTimeout(() => intro.classList.add('gone'), 1200);\n };\n\n const auto = setTimeout(finish, 1800);\n const skipFn = () => { clearTimeout(auto); finish(); };\n intro.addEventListener('click', skipFn);\n skip.addEventListener('click', skipFn);\n})();\n\n\/* =======================================================\n NAV SCROLL STATE\n ======================================================= *\/\n(function navScroll() {\n const nav = document.getElementById('nav');\n const onScroll = () => nav.classList.toggle('scrolled', window.scrollY > 30);\n window.addEventListener('scroll', onScroll, { passive: true });\n onScroll();\n})();\n\n\/* =======================================================\n MOBILE MENU\n ======================================================= *\/\n(function mobileMenu() {\n const burger = document.getElementById('navBurger');\n const menu = document.getElementById('mobileMenu');\n const links = menu.querySelectorAll('.mm-link');\n const toggle = () => {\n menu.classList.toggle('open');\n burger.querySelector('i').className = menu.classList.contains('open') ? 'fa-solid fa-xmark' : 'fa-solid fa-bars';\n };\n burger.addEventListener('click', toggle);\n links.forEach(l => l.addEventListener('click', () => menu.classList.contains('open') && toggle()));\n})();\n\n\/* =======================================================\n CURSOR GLOW (desktop only)\n ======================================================= *\/\n(function cursor() {\n if (matchMedia('(hover: none)').matches) return;\n const glow = document.getElementById('cursorGlow');\n document.addEventListener('mouseenter', () => document.body.classList.add('cursor-active'));\n document.addEventListener('mouseleave', () => document.body.classList.remove('cursor-active'));\n document.addEventListener('mousemove', (e) => {\n glow.style.left = e.clientX + 'px';\n glow.style.top = e.clientY + 'px';\n });\n})();\n\n\/* =======================================================\n REVEAL ON SCROLL\n ======================================================= *\/\n(function reveal() {\n const items = document.querySelectorAll('.reveal');\n const io = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n e.target.classList.add('in');\n io.unobserve(e.target);\n }\n });\n }, { threshold: 0.12, rootMargin: '0px 0px -80px 0px' });\n items.forEach(i => io.observe(i));\n})();\n\n\/* =======================================================\n DASHBOARD INTERACTIVITY\n ======================================================= *\/\n(function dashboard() {\n const navs = document.querySelectorAll('.dash-nav-item');\n const views = document.querySelectorAll('.dash-view');\n const title = document.getElementById('dashTitle');\n const titles = { overview: 'Overview', analytics: 'Analytics', tasks: 'Tasks' };\n\n navs.forEach(n => n.addEventListener('click', () => {\n const v = n.dataset.view;\n navs.forEach(x => x.classList.toggle('active', x === n));\n views.forEach(x => x.classList.toggle('active', x.dataset.view === v));\n title.textContent = titles[v];\n }));\n\n \/\/ Task toggle\n document.querySelectorAll('.dash-task').forEach(t => {\n t.addEventListener('click', () => t.classList.toggle('done'));\n });\n})();\n\n\/* =======================================================\n CLIENTS MARQUEE \u2014 renders from CLIENTS array\n ======================================================= *\/\n(function clients() {\n const track = document.getElementById('marqueeTrack');\n const build = (items) => items.map(i => {\n if (typeof i === 'string') {\n return `<div class=\"client-placeholder\">${i}<\/div>`;\n }\n return `<img decoding=\"async\" class=\"client-logo\" src=\"${i.logo}\" alt=\"${i.name}\">`;\n }).join('');\n\n const source = CLIENTS.length > 0 ? CLIENTS : CLIENT_PLACEHOLDERS;\n \/\/ Double content for seamless loop\n track.innerHTML = build(source) + build(source);\n})();\n\n\/* =======================================================\n SMOOTH ANCHOR OFFSET\n ======================================================= *\/\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(a => {\n a.addEventListener('click', (e) => {\n const id = a.getAttribute('href');\n if (id.length > 1) {\n const el = document.querySelector(id);\n if (el) {\n e.preventDefault();\n window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });\n }\n }\n });\n});\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SiteFlare \u2014 Software that ships. Design that sparks. SiteFlare CLICK TO SKIP SiteFlare Services Process Demo Clients Contact Start a project 01 Services 02 Process 03 Demo 04 Clients 05 Contact Start a project Email hadidghaily@siteflare.net Beirut \u00b7 Software Studio Software that ships. Design that sparks. One studio. Every layer of your stack. We build e-commerce, web, mobile, and AI systems for founders who need to move now \u2014 and stick around long after the launch. Start a project See how we work AVAILABLE FOR NEW PROJECTS \u2014 2026 SCROLL \u2193 01 \/ What we do Every layer of your product, handled. From the first wireframe to the last deployment, SiteFlare covers the whole stack \u2014 so you get one partner, one invoice, one throat to choke. No handoffs, no finger-pointing. 01 \/ Mobile Mobile Apps Native-feeling iOS & Android apps that don’t drain batteries or patience. 02 \/ Systems Information Systems ERPs, CRMs, inventory \u2014 the quiet backbones that keep operations moving. 03 \/ HealthTech HealthTech Systems EMRs and clinical tools built for workflows that can’t afford friction. 04 \/ AI AI Solutions LLM features, RAG pipelines, and custom models wired into products that actually ship. 05 \/ Chat Chatbots Support, sales, and ops bots that sound like humans and know your data. 06 \/ Automation Task Automation Kill the copy-paste work. Scripts, integrations, and workflows that give you hours back. 07 \/ Web Business Websites Fast, sharp marketing sites that load in a blink and convert like they mean it. 08 \/ Commerce E-commerce Stores engineered for the checkout, not just the hero. Built to scale with you. 09 \/ Real Estate Real Estate Platforms Listings, maps, agent tools \u2014 the whole kit for brokers who outgrew spreadsheets. 10 \/ Booking Booking & Rentals Availability, payments, calendars, reminders \u2014 wired together so nothing slips. 02 \/ How we work Plan. Build. Launch. Stay. Most studios vanish the minute the invoice clears. We don’t. From first sketch to 2am bug fix, SiteFlare is in the trenches with you \u2014 for as long as the project lives. 01 \/ Plan Discovery & scope Architecture mapped before a single line of code. You’ll know what’s being built, what it costs, and when it lands. 02 \/ Build In the trenches Pixel-clean frontends, battle-tested backends, and tight feedback loops. Work-in-progress every week \u2014 no black boxes. 03 \/ Launch Deploy day Not a finish line \u2014 the real start. We handle releases, monitor first traffic, and make sure the rollout lands clean. 04 \/ Stay Sunday-night ready Bugs don’t respect business hours. Neither do we. Long after launch, we’re still the ones fielding the message. 03 \/ Live demo Touch the thing we just built. This isn’t a screenshot. It’s a working piece of a SiteFlare-built admin dashboard \u2014 the same kind of system we ship for health clinics, logistics teams, and booking platforms. Click around. Click the sidebar to switch views Tick tasks \u2014 state is real, not faked Built with the same tools we’d use on yours SiteFlare Overview Analytics Tasks DEMO \/ v1.0 Overview \u25cf LIVE Revenue$42k+12% Users1,284+8% Conv.3.4%-0.2% Last 30 Days Weekly Sessions M T W T F S S Ship auth flowDONE API rate limitingDONE Dashboard refactorDEV Stripe webhooksDEV E2E testsQA Trusted by teams shipping real products 04 \/ Let’s build Got a thing that needs to burn bright? Tell us about it. A one-line idea, a half-built project, a mess you inherited \u2014 doesn’t matter. We’ll reply within a day with a straight answer. Start a project Just say hi OR WRITE US AT hadidghaily@siteflare.net SiteFlare \u00a9 2026 SITEFLARE \u00b7 BEIRUT, LEBANON<\/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":"default","site-content-layout":"","ast-site-content-layout":"default","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-36","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/siteflare.net\/index.php?rest_route=\/wp\/v2\/pages\/36","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siteflare.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/siteflare.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/siteflare.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/siteflare.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=36"}],"version-history":[{"count":245,"href":"https:\/\/siteflare.net\/index.php?rest_route=\/wp\/v2\/pages\/36\/revisions"}],"predecessor-version":[{"id":909,"href":"https:\/\/siteflare.net\/index.php?rest_route=\/wp\/v2\/pages\/36\/revisions\/909"}],"wp:attachment":[{"href":"https:\/\/siteflare.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}