{"id":9,"date":"2026-05-23T11:48:19","date_gmt":"2026-05-23T11:48:19","guid":{"rendered":"https:\/\/ziondesignstudio.com\/?page_id=9"},"modified":"2026-05-23T12:46:39","modified_gmt":"2026-05-23T12:46:39","slug":"elementor-9","status":"publish","type":"page","link":"https:\/\/ziondesignstudio.com\/blog\/elementor-9\/","title":{"rendered":"Zion Studio"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Zion Design Studio \u2014 Websites for Local Businesses<\/title>\n\n <!-- Fonts -->\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=Syne:wght@400;600;700;800&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\" \/>\n\n <!-- AOS -->\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/aos\/2.3.4\/aos.css\" \/>\n\n <!-- Lottie Player -->\n <script src=\"https:\/\/unpkg.com\/@lottiefiles\/lottie-player@2.0.2\/dist\/lottie-player.js\"><\/script>\n\n <style>\n :root {\n --bg: #080810;\n --bg2: #0e0e1a;\n --bg3: #13131f;\n --purple: #7c3aed;\n --cyan: #06b6d4;\n --pink: #e879f9;\n --white: #f1f5f9;\n --muted: #64748b;\n --card: rgba(255,255,255,0.04);\n --border: rgba(255,255,255,0.08);\n --glow-p: 0 0 40px rgba(124,58,237,0.45);\n --glow-c: 0 0 40px rgba(6,182,212,0.45);\n --glow-pk: 0 0 40px rgba(232,121,249,0.45);\n }\n\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n html { scroll-behavior: smooth; }\n\n body {\n background: var(--bg);\n color: var(--white);\n font-family: 'Inter', sans-serif;\n overflow-x: hidden;\n }\n\n h1,h2,h3,h4 { font-family: 'Syne', sans-serif; }\n\n \/* \u2500\u2500\u2500 SCROLLBAR \u2500\u2500\u2500 *\/\n ::-webkit-scrollbar { width: 5px; }\n ::-webkit-scrollbar-track { background: var(--bg); }\n ::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 99px; }\n\n \/* \u2500\u2500\u2500 CURSOR GLOW \u2500\u2500\u2500 *\/\n .cursor-glow {\n position: fixed; width: 350px; height: 350px;\n border-radius: 50%; pointer-events: none; z-index: 0;\n background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 70%);\n transform: translate(-50%, -50%);\n transition: left .15s ease, top .15s ease;\n }\n\n \/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\n nav {\n position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n display: flex; align-items: center; justify-content: space-between;\n padding: 1.1rem 5%;\n background: rgba(8,8,16,0.65);\n backdrop-filter: blur(18px);\n border-bottom: 1px solid var(--border);\n transition: background .3s;\n }\n .nav-logo {\n font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.35rem;\n background: linear-gradient(90deg, var(--purple), var(--cyan));\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n text-decoration: none;\n }\n .nav-logo span { color: var(--pink); -webkit-text-fill-color: var(--pink); }\n .nav-links { display: flex; gap: 2rem; list-style: none; }\n .nav-links a {\n color: var(--muted); text-decoration: none; font-size: .9rem;\n transition: color .25s;\n }\n .nav-links a:hover { color: var(--white); }\n .nav-cta {\n background: linear-gradient(135deg, var(--purple), var(--cyan));\n color: #fff; text-decoration: none; padding: .55rem 1.4rem;\n border-radius: 99px; font-size: .88rem; font-weight: 600;\n box-shadow: var(--glow-p); transition: opacity .25s, transform .25s;\n }\n .nav-cta:hover { opacity: .88; transform: translateY(-1px); }\n\n \/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n #hero {\n position: relative; min-height: 100vh;\n display: flex; align-items: center;\n padding: 7rem 5% 4rem;\n overflow: hidden;\n }\n \/* Star canvas lives behind everything *\/\n #stars-canvas {\n position: absolute; inset: 0; z-index: 0;\n }\n .hero-inner {\n position: relative; z-index: 2;\n display: grid; grid-template-columns: 1fr 1fr;\n align-items: center; gap: 3rem; max-width: 1200px; margin: 0 auto; width: 100%;\n }\n .hero-badge {\n display: inline-flex; align-items: center; gap: .5rem;\n background: rgba(124,58,237,.15); border: 1px solid rgba(124,58,237,.35);\n color: #a78bfa; padding: .35rem 1rem; border-radius: 99px;\n font-size: .8rem; font-weight: 500; margin-bottom: 1.4rem;\n }\n .hero-badge::before { content: '\u25cf'; font-size: .55rem; color: #a78bfa; animation: pulse 2s infinite; }\n @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }\n\n .hero-title {\n font-size: clamp(2.4rem, 5vw, 4rem);\n line-height: 1.1; font-weight: 800; margin-bottom: 1.4rem;\n }\n .grad-text {\n background: linear-gradient(90deg, var(--purple), var(--cyan), var(--pink));\n background-size: 200%;\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n animation: shimmer 4s linear infinite;\n }\n @keyframes shimmer { 0%{background-position:0%} 100%{background-position:200%} }\n\n .hero-sub {\n color: var(--muted); font-size: 1.05rem; line-height: 1.7;\n max-width: 480px; margin-bottom: 2rem;\n }\n .hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }\n .btn-primary {\n background: linear-gradient(135deg, var(--purple), var(--cyan));\n color: #fff; padding: .8rem 2rem; border-radius: 99px;\n text-decoration: none; font-weight: 600; font-size: .95rem;\n box-shadow: var(--glow-p); transition: transform .25s, box-shadow .25s;\n display: inline-flex; align-items: center; gap: .5rem;\n }\n .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 60px rgba(124,58,237,.6); }\n .btn-outline {\n border: 1px solid var(--border); color: var(--white);\n padding: .8rem 2rem; border-radius: 99px;\n text-decoration: none; font-weight: 500; font-size: .95rem;\n transition: border-color .25s, background .25s;\n }\n .btn-outline:hover { border-color: var(--purple); background: rgba(124,58,237,.1); }\n\n .hero-stats {\n display: flex; gap: 2.5rem; margin-top: 3rem; flex-wrap: wrap;\n }\n .stat-item h3 {\n font-size: 2rem; font-weight: 800;\n background: linear-gradient(90deg, var(--cyan), var(--purple));\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n }\n .stat-item p { color: var(--muted); font-size: .82rem; margin-top: .2rem; }\n\n .hero-lottie {\n display: flex; justify-content: center; align-items: center;\n position: relative;\n }\n .hero-lottie::before {\n content: ''; position: absolute;\n width: 340px; height: 340px; border-radius: 50%;\n background: radial-gradient(circle, rgba(124,58,237,.25), transparent 70%);\n animation: breathe 4s ease-in-out infinite;\n }\n @keyframes breathe {\n 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)}\n }\n lottie-player { position: relative; z-index: 1; }\n\n \/* Floating orbs *\/\n .orb {\n position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 1;\n }\n .orb-1 { width: 300px; height: 300px; background: rgba(124,58,237,.2); top: 15%; right: 10%; animation: float 8s ease-in-out infinite; }\n .orb-2 { width: 200px; height: 200px; background: rgba(6,182,212,.15); bottom: 20%; left: 5%; animation: float 10s ease-in-out infinite reverse; }\n .orb-3 { width: 150px; height: 150px; background: rgba(232,121,249,.12); top: 60%; right: 25%; animation: float 7s ease-in-out infinite 2s; }\n @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-30px)} }\n\n \/* \u2500\u2500\u2500 SECTION COMMON \u2500\u2500\u2500 *\/\n section { padding: 7rem 5%; position: relative; }\n .section-tag {\n font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;\n color: var(--cyan); margin-bottom: .6rem; display: block;\n }\n .section-title {\n font-size: clamp(1.9rem, 3.5vw, 3rem); font-weight: 800;\n margin-bottom: 1rem; line-height: 1.15;\n }\n .section-sub {\n color: var(--muted); font-size: 1rem; line-height: 1.7; max-width: 560px;\n }\n .section-header { text-align: center; margin-bottom: 4rem; }\n .section-header .section-sub { margin: 0 auto; }\n\n \/* \u2500\u2500\u2500 MARQUEE \u2500\u2500\u2500 *\/\n .marquee-wrap {\n overflow: hidden; padding: 1.5rem 0;\n background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);\n }\n .marquee-track {\n display: flex; gap: 3rem; width: max-content;\n animation: marquee 25s linear infinite;\n }\n @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }\n .marquee-item {\n display: flex; align-items: center; gap: .6rem;\n color: var(--muted); font-size: .9rem; white-space: nowrap;\n }\n .marquee-item span { color: var(--cyan); }\n\n \/* \u2500\u2500\u2500 SERVICES \u2500\u2500\u2500 *\/\n #services { background: var(--bg2); }\n .services-grid {\n display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 1.5rem; max-width: 1200px; margin: 0 auto;\n }\n .service-card {\n background: var(--card); border: 1px solid var(--border);\n border-radius: 1.25rem; padding: 2rem;\n transition: transform .3s, border-color .3s, box-shadow .3s;\n cursor: default;\n }\n .service-card:hover {\n transform: translateY(-6px);\n border-color: var(--purple);\n box-shadow: var(--glow-p);\n }\n .service-icon {\n width: 52px; height: 52px; border-radius: .75rem;\n display: flex; align-items: center; justify-content: center;\n font-size: 1.4rem; margin-bottom: 1.2rem;\n }\n .icon-purple { background: rgba(124,58,237,.2); box-shadow: 0 0 20px rgba(124,58,237,.3); }\n .icon-cyan { background: rgba(6,182,212,.2); box-shadow: 0 0 20px rgba(6,182,212,.3); }\n .icon-pink { background: rgba(232,121,249,.2); box-shadow: 0 0 20px rgba(232,121,249,.3); }\n .icon-green { background: rgba(52,211,153,.2); box-shadow: 0 0 20px rgba(52,211,153,.3); }\n .icon-amber { background: rgba(251,191,36,.2); box-shadow: 0 0 20px rgba(251,191,36,.3); }\n .icon-red { background: rgba(248,113,113,.2); box-shadow: 0 0 20px rgba(248,113,113,.3); }\n\n .service-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .6rem; }\n .service-card p { color: var(--muted); font-size: .9rem; line-height: 1.6; }\n\n \/* \u2500\u2500\u2500 PROCESS \u2500\u2500\u2500 *\/\n #process { background: var(--bg); }\n .process-steps {\n display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 2rem; max-width: 1100px; margin: 0 auto;\n position: relative;\n }\n .process-steps::before {\n content: ''; position: absolute;\n top: 2rem; left: 0; right: 0; height: 1px;\n background: linear-gradient(90deg, transparent, var(--purple), var(--cyan), transparent);\n }\n .step {\n text-align: center; padding-top: 1rem; position: relative;\n }\n .step-num {\n width: 48px; height: 48px; border-radius: 50%;\n background: linear-gradient(135deg, var(--purple), var(--cyan));\n display: flex; align-items: center; justify-content: center;\n font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1rem;\n margin: 0 auto 1.2rem; box-shadow: var(--glow-p);\n }\n .step h3 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }\n .step p { color: var(--muted); font-size: .85rem; line-height: 1.6; }\n\n \/* \u2500\u2500\u2500 PRICING \u2500\u2500\u2500 *\/\n #pricing { background: var(--bg2); }\n .pricing-grid {\n display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));\n gap: 1.5rem; max-width: 1000px; margin: 0 auto;\n }\n .price-card {\n background: var(--card); border: 1px solid var(--border);\n border-radius: 1.5rem; padding: 2.2rem; transition: transform .3s;\n position: relative; overflow: hidden;\n }\n .price-card::before {\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;\n }\n .price-card.starter::before { background: var(--cyan); }\n .price-card.growth::before { background: linear-gradient(90deg, var(--purple), var(--pink)); }\n .price-card.pro::before { background: var(--pink); }\n .price-card.growth {\n border-color: var(--purple);\n box-shadow: var(--glow-p);\n transform: scale(1.04);\n }\n .price-card:hover { transform: translateY(-6px) scale(1.01); }\n .price-card.growth:hover { transform: translateY(-6px) scale(1.05); }\n\n .popular-badge {\n position: absolute; top: 1.2rem; right: 1.2rem;\n background: linear-gradient(135deg, var(--purple), var(--pink));\n padding: .3rem .85rem; border-radius: 99px;\n font-size: .72rem; font-weight: 700; color: #fff; letter-spacing: .05em;\n }\n .price-tier { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: .6rem; }\n .price-amount {\n font-family: 'Syne', sans-serif; font-size: 2.8rem; font-weight: 800; line-height: 1;\n }\n .price-amount sup { font-size: 1.2rem; vertical-align: super; }\n .price-amount sub { font-size: .9rem; color: var(--muted); }\n .price-desc { color: var(--muted); font-size: .85rem; margin: .8rem 0 1.5rem; line-height: 1.5; }\n .price-features { list-style: none; margin-bottom: 2rem; display: flex; flex-direction: column; gap: .7rem; }\n .price-features li {\n font-size: .88rem; display: flex; align-items: flex-start; gap: .6rem; color: #cbd5e1;\n }\n .price-features li::before { content: '\u2713'; color: var(--cyan); font-weight: 700; flex-shrink: 0; }\n .price-features li.off { color: var(--muted); }\n .price-features li.off::before { content: '\u2014'; color: var(--muted); }\n\n .btn-price {\n display: block; text-align: center; padding: .85rem;\n border-radius: 99px; font-weight: 600; font-size: .9rem;\n text-decoration: none; transition: all .25s;\n }\n .btn-price-fill {\n background: linear-gradient(135deg, var(--purple), var(--cyan));\n color: #fff; box-shadow: var(--glow-p);\n }\n .btn-price-fill:hover { opacity: .88; transform: translateY(-1px); }\n .btn-price-outline {\n border: 1px solid var(--border); color: var(--white);\n }\n .btn-price-outline:hover { border-color: var(--purple); background: rgba(124,58,237,.1); }\n\n \/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\n #testimonials { background: var(--bg); overflow: hidden; }\n .testi-grid {\n display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 1.5rem; max-width: 1100px; margin: 0 auto;\n }\n .testi-card {\n background: var(--card); border: 1px solid var(--border);\n border-radius: 1.25rem; padding: 1.8rem;\n transition: transform .3s, border-color .3s;\n }\n .testi-card:hover { transform: translateY(-4px); border-color: rgba(124,58,237,.4); }\n .testi-stars { color: #fbbf24; font-size: .85rem; letter-spacing: .1em; margin-bottom: 1rem; }\n .testi-text { color: #cbd5e1; font-size: .9rem; line-height: 1.7; margin-bottom: 1.4rem; font-style: italic; }\n .testi-author { display: flex; align-items: center; gap: .9rem; }\n .testi-avatar {\n width: 42px; height: 42px; border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-weight: 700; font-size: .9rem; flex-shrink: 0;\n }\n .av-1 { background: linear-gradient(135deg, var(--purple), var(--pink)); }\n .av-2 { background: linear-gradient(135deg, var(--cyan), var(--purple)); }\n .av-3 { background: linear-gradient(135deg, var(--pink), #f97316); }\n .testi-name { font-weight: 600; font-size: .9rem; }\n .testi-role { color: var(--muted); font-size: .8rem; }\n\n \/* \u2500\u2500\u2500 PROPOSAL \u2500\u2500\u2500 *\/\n #proposal {\n background: var(--bg2);\n }\n .proposal-inner {\n max-width: 820px; margin: 0 auto;\n background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(6,182,212,.08));\n border: 1px solid rgba(124,58,237,.3);\n border-radius: 2rem; padding: 3.5rem;\n text-align: center; position: relative; overflow: hidden;\n }\n .proposal-inner::before {\n content: ''; position: absolute; inset: 0;\n background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.15), transparent 60%);\n pointer-events: none;\n }\n .proposal-inner .section-title { margin-bottom: .8rem; }\n .proposal-inner p { color: var(--muted); font-size: 1rem; line-height: 1.7; margin-bottom: 2.5rem; }\n .proposal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: left; }\n .proposal-form .full { grid-column: 1\/-1; }\n .form-group { display: flex; flex-direction: column; gap: .45rem; }\n .form-group label { font-size: .82rem; font-weight: 500; color: #94a3b8; }\n .form-group input, .form-group select, .form-group textarea {\n background: rgba(255,255,255,.05); border: 1px solid var(--border);\n border-radius: .65rem; padding: .75rem 1rem;\n color: var(--white); font-size: .9rem; font-family: 'Inter', sans-serif;\n outline: none; transition: border-color .25s, box-shadow .25s;\n width: 100%;\n }\n .form-group input:focus, .form-group select:focus, .form-group textarea:focus {\n border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124,58,237,.2);\n }\n .form-group textarea { resize: vertical; min-height: 100px; }\n .form-group select option { background: var(--bg3); }\n .btn-submit {\n grid-column: 1\/-1; margin-top: .5rem;\n background: linear-gradient(135deg, var(--purple), var(--cyan));\n color: #fff; border: none; padding: 1rem; border-radius: 99px;\n font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700;\n cursor: pointer; box-shadow: var(--glow-p);\n transition: opacity .25s, transform .25s;\n }\n .btn-submit:hover { opacity: .88; transform: translateY(-2px); }\n\n \/* \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 *\/\n #contact { background: var(--bg); }\n .contact-inner {\n display: grid; grid-template-columns: 1fr 1fr;\n gap: 4rem; max-width: 1100px; margin: 0 auto; align-items: start;\n }\n .contact-info h2 { font-size: 2rem; font-weight: 800; margin-bottom: 1rem; }\n .contact-info p { color: var(--muted); font-size: .95rem; line-height: 1.7; margin-bottom: 2rem; }\n .contact-item {\n display: flex; align-items: center; gap: 1rem;\n padding: 1rem; border-radius: 1rem;\n background: var(--card); border: 1px solid var(--border);\n margin-bottom: .8rem;\n }\n .contact-icon {\n width: 40px; height: 40px; border-radius: .6rem;\n background: rgba(124,58,237,.2); display: flex; align-items: center;\n justify-content: center; font-size: 1.1rem; flex-shrink: 0;\n }\n .contact-item h4 { font-size: .82rem; color: var(--muted); font-weight: 500; }\n .contact-item p { color: var(--white); font-size: .9rem; margin: 0; }\n\n .contact-form { display: flex; flex-direction: column; gap: 1rem; }\n\n \/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\n footer {\n background: var(--bg2); border-top: 1px solid var(--border);\n padding: 4rem 5% 2rem;\n }\n .footer-grid {\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;\n gap: 3rem; max-width: 1200px; margin: 0 auto 3rem;\n }\n .footer-brand p { color: var(--muted); font-size: .88rem; line-height: 1.7; margin-top: .8rem; max-width: 260px; }\n .footer-col h4 { font-size: .9rem; font-weight: 700; margin-bottom: 1rem; }\n .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }\n .footer-col a { color: var(--muted); text-decoration: none; font-size: .88rem; transition: color .2s; }\n .footer-col a:hover { color: var(--cyan); }\n .footer-bottom {\n display: flex; justify-content: space-between; align-items: center;\n border-top: 1px solid var(--border); padding-top: 1.5rem;\n max-width: 1200px; margin: 0 auto;\n }\n .footer-bottom p { color: var(--muted); font-size: .82rem; }\n .socials { display: flex; gap: .8rem; }\n .social-btn {\n width: 36px; height: 36px; border-radius: .5rem;\n background: var(--card); border: 1px solid var(--border);\n display: flex; align-items: center; justify-content: center;\n font-size: .9rem; text-decoration: none; color: var(--muted);\n transition: all .25s;\n }\n .social-btn:hover { border-color: var(--purple); color: var(--purple); box-shadow: var(--glow-p); }\n\n \/* \u2500\u2500\u2500 NEON DIVIDER \u2500\u2500\u2500 *\/\n .neon-divider {\n height: 1px; max-width: 1200px; margin: 0 auto;\n background: linear-gradient(90deg, transparent, var(--purple), var(--cyan), transparent);\n }\n\n \/* \u2500\u2500\u2500 SUCCESS \u2500\u2500\u2500 *\/\n .form-success {\n display: none; text-align: center; padding: 2rem;\n color: var(--cyan); font-weight: 600; font-size: 1.1rem;\n }\n\n \/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n @media (max-width: 768px) {\n .hero-inner { grid-template-columns: 1fr; text-align: center; }\n .hero-lottie { order: -1; }\n .hero-btns { justify-content: center; }\n .hero-stats { justify-content: center; }\n .contact-inner { grid-template-columns: 1fr; }\n .proposal-form { grid-template-columns: 1fr; }\n .footer-grid { grid-template-columns: 1fr 1fr; }\n .footer-bottom { flex-direction: column; gap: 1rem; }\n .nav-links { display: none; }\n .process-steps::before { display: none; }\n }\n <\/style>\n<\/head>\n<body>\n\n<!-- Cursor glow -->\n<div class=\"cursor-glow\" id=\"cursorGlow\"><\/div>\n\n<!-- \u2500\u2500\u2500 NAV \u2500\u2500\u2500 -->\n<nav>\n <a href=\"#\" class=\"nav-logo\">Zion<span>.<\/span><\/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=\"#pricing\">Pricing<\/a><\/li>\n <li><a href=\"#testimonials\">Reviews<\/a><\/li>\n <li><a href=\"#contact\">Contact<\/a><\/li>\n <\/ul>\n <a href=\"#proposal\" class=\"nav-cta\">Get a Proposal<\/a>\n<\/nav>\n\n<!-- \u2500\u2500\u2500 HERO \u2500\u2500\u2500 -->\n<section id=\"hero\">\n <canvas id=\"stars-canvas\"><\/canvas>\n <div class=\"orb orb-1\"><\/div>\n <div class=\"orb orb-2\"><\/div>\n <div class=\"orb orb-3\"><\/div>\n\n <div class=\"hero-inner\">\n <div class=\"hero-text\">\n <span class=\"hero-badge\">Now accepting new clients \u2014 limited spots<\/span>\n <h1 class=\"hero-title\">\n We Build Websites <br\/>That Win <span class=\"grad-text\">Local Customers<\/span>\n <\/h1>\n <p class=\"hero-sub\">\n Zion Design Studio crafts stunning, fast, and conversion-focused websites for small businesses \u2014 so you spend less time on marketing and more time doing what you love.\n <\/p>\n <div class=\"hero-btns\">\n <a href=\"#proposal\" class=\"btn-primary\">\ud83d\ude80 Start Your Project<\/a>\n <a href=\"#services\" class=\"btn-outline\">See Our Work \u2193<\/a>\n <\/div>\n <div class=\"hero-stats\">\n <div class=\"stat-item\">\n <h3 class=\"counter\" data-target=\"48\">0<\/h3>\n <p>Sites Launched<\/p>\n <\/div>\n <div class=\"stat-item\">\n <h3 class=\"counter\" data-target=\"100\">0<\/h3>\n <p>Client Satisfaction %<\/p>\n <\/div>\n <div class=\"stat-item\">\n <h3 class=\"counter\" data-target=\"7\">0<\/h3>\n <p>Days Avg. Delivery<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"hero-lottie\" data-aos=\"zoom-in\" data-aos-delay=\"200\">\n <lottie-player\n src=\"https:\/\/assets4.lottiefiles.com\/packages\/lf20_fcfjwiyb.json\"\n background=\"transparent\"\n speed=\"1\"\n style=\"width:460px;height:460px;max-width:100%;\"\n loop\n autoplay>\n <\/lottie-player>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500\u2500 MARQUEE \u2500\u2500\u2500 -->\n<div class=\"marquee-wrap\">\n <div class=\"marquee-track\">\n <div class=\"marquee-item\"><span>\u2726<\/span> Restaurants & Caf\u00e9s<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Salons & Spas<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Retail Shops<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Law Offices<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Real Estate<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Contractors<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Fitness Studios<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Medical Clinics<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Auto Services<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Photographers<\/div>\n <!-- Duplicate for seamless loop -->\n <div class=\"marquee-item\"><span>\u2726<\/span> Restaurants & Caf\u00e9s<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Salons & Spas<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Retail Shops<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Law Offices<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Real Estate<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Contractors<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Fitness Studios<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Medical Clinics<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Auto Services<\/div>\n <div class=\"marquee-item\"><span>\u2726<\/span> Photographers<\/div>\n <\/div>\n<\/div>\n\n<!-- \u2500\u2500\u2500 SERVICES \u2500\u2500\u2500 -->\n<section id=\"services\">\n <div class=\"section-header\" data-aos=\"fade-up\">\n <span class=\"section-tag\">What We Offer<\/span>\n <h2 class=\"section-title\">Everything Your Business Needs Online<\/h2>\n <p class=\"section-sub\">From a simple brochure site to a full e-commerce store, we handle everything \u2014 design, copy, and launch.<\/p>\n <\/div>\n\n <div class=\"services-grid\">\n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"0\">\n <div class=\"service-icon icon-purple\">\ud83d\udda5\ufe0f<\/div>\n <h3>Website Design & Build<\/h3>\n <p>Custom-designed, mobile-first websites that look stunning on every device and load fast \u2014 built to convert visitors into paying customers.<\/p>\n <\/div>\n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"80\">\n <div class=\"service-icon icon-cyan\">\ud83d\udd0d<\/div>\n <h3>Local SEO Optimization<\/h3>\n <p>We optimize your site so Google puts you in front of nearby customers searching for exactly what you offer.<\/p>\n <\/div>\n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"160\">\n <div class=\"service-icon icon-pink\">\ud83d\uded2<\/div>\n <h3>E-Commerce Stores<\/h3>\n <p>Ready-to-sell online shops with secure checkout, product management, and integrations with your payment processor.<\/p>\n <\/div>\n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"0\">\n <div class=\"service-icon icon-green\">\ud83d\udcf1<\/div>\n <h3>Mobile-First Development<\/h3>\n <p>Over 70% of local searches happen on phones. Every site we build is flawless on mobile from day one.<\/p>\n <\/div>\n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"80\">\n <div class=\"service-icon icon-amber\">\ud83c\udfa8<\/div>\n <h3>Brand Identity & Logos<\/h3>\n <p>Need a logo or brand kit? We create cohesive visual identities that make your business memorable and professional.<\/p>\n <\/div>\n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"160\">\n <div class=\"service-icon icon-red\">\ud83d\udd27<\/div>\n <h3>Maintenance & Support<\/h3>\n <p>Monthly care plans that keep your site secure, updated, and performing \u2014 so you never have to worry about it again.<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500\u2500 PROCESS \u2500\u2500\u2500 -->\n<section id=\"process\">\n <div class=\"section-header\" data-aos=\"fade-up\">\n <span class=\"section-tag\">How It Works<\/span>\n <h2 class=\"section-title\">From Idea to Live Site in Days<\/h2>\n <p class=\"section-sub\">Our streamlined process gets you online fast \u2014 without the back-and-forth that drags most projects out for months.<\/p>\n <\/div>\n\n <div class=\"process-steps\">\n <div class=\"step\" data-aos=\"fade-up\" data-aos-delay=\"0\">\n <div class=\"step-num\">01<\/div>\n <h3>Discovery Call<\/h3>\n <p>We learn about your business, goals, and the customers you want to reach in a free 30-min call.<\/p>\n <\/div>\n <div class=\"step\" data-aos=\"fade-up\" data-aos-delay=\"80\">\n <div class=\"step-num\">02<\/div>\n <h3>Proposal & Plan<\/h3>\n <p>You receive a clear scope, timeline, and fixed price \u2014 no surprises, no hourly guessing.<\/p>\n <\/div>\n <div class=\"step\" data-aos=\"fade-up\" data-aos-delay=\"160\">\n <div class=\"step-num\">03<\/div>\n <h3>Design & Build<\/h3>\n <p>We design your site and share previews for your feedback before writing a single line of code.<\/p>\n <\/div>\n <div class=\"step\" data-aos=\"fade-up\" data-aos-delay=\"240\">\n <div class=\"step-num\">04<\/div>\n <h3>Launch & Grow<\/h3>\n <p>We publish your site, set up analytics, and hand you full ownership \u2014 with ongoing support if you need it.<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500\u2500 PRICING \u2500\u2500\u2500 -->\n<section id=\"pricing\">\n <div class=\"section-header\" data-aos=\"fade-up\">\n <span class=\"section-tag\">Transparent Pricing<\/span>\n <h2 class=\"section-title\">Simple, Fixed-Price Packages<\/h2>\n <p class=\"section-sub\">No hidden fees, no retainers, no surprise invoices. Pick the plan that fits your business right now.<\/p>\n <\/div>\n\n <div class=\"pricing-grid\">\n <!-- Starter -->\n <div class=\"price-card starter\" data-aos=\"fade-up\" data-aos-delay=\"0\">\n <p class=\"price-tier\">Starter<\/p>\n <div class=\"price-amount\"><sup>$<\/sup>799<sub> one-time<\/sub><\/div>\n <p class=\"price-desc\">Perfect for brand-new businesses that just need a clean, professional presence online.<\/p>\n <ul class=\"price-features\">\n <li>Up to 5 pages<\/li>\n <li>Mobile-responsive design<\/li>\n <li>Contact form + Google Maps<\/li>\n <li>Basic on-page SEO<\/li>\n <li>1 round of revisions<\/li>\n <li class=\"off\">E-Commerce<\/li>\n <li class=\"off\">Monthly maintenance<\/li>\n <\/ul>\n <a href=\"#proposal\" class=\"btn-price btn-price-outline\">Get Started<\/a>\n <\/div>\n\n <!-- Growth (featured) -->\n <div class=\"price-card growth\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n <span class=\"popular-badge\">\u26a1 Most Popular<\/span>\n <p class=\"price-tier\">Growth<\/p>\n <div class=\"price-amount\"><sup>$<\/sup>1,499<sub> one-time<\/sub><\/div>\n <p class=\"price-desc\">The full package for established small businesses ready to dominate local search.<\/p>\n <ul class=\"price-features\">\n <li>Up to 10 pages<\/li>\n <li>Custom animations & effects<\/li>\n <li>Full local SEO setup<\/li>\n <li>Google Business integration<\/li>\n <li>3 rounds of revisions<\/li>\n <li>Blog \/ News section<\/li>\n <li class=\"off\">E-Commerce store<\/li>\n <\/ul>\n <a href=\"#proposal\" class=\"btn-price btn-price-fill\">Get Started<\/a>\n <\/div>\n\n <!-- Pro -->\n <div class=\"price-card pro\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n <p class=\"price-tier\">Pro Store<\/p>\n <div class=\"price-amount\"><sup>$<\/sup>2,899<sub> one-time<\/sub><\/div>\n <p class=\"price-desc\">For businesses ready to sell online \u2014 a complete e-commerce experience, built to convert.<\/p>\n <ul class=\"price-features\">\n <li>Unlimited pages<\/li>\n <li>Full e-commerce store<\/li>\n <li>Secure payment gateway<\/li>\n <li>Inventory management<\/li>\n <li>Full SEO + speed audit<\/li>\n <li>Unlimited revisions<\/li>\n <li>60 days post-launch support<\/li>\n <\/ul>\n <a href=\"#proposal\" class=\"btn-price btn-price-outline\">Get Started<\/a>\n <\/div>\n <\/div>\n\n <p style=\"text-align:center;margin-top:2.5rem;color:var(--muted);font-size:.88rem;\">\n Need monthly maintenance? Add our <strong style=\"color:var(--cyan)\">Care Plan from $79\/mo<\/strong> \u2014 updates, backups, and priority support.\n <\/p>\n<\/section>\n\n<!-- \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 -->\n<section id=\"testimonials\">\n <div class=\"section-header\" data-aos=\"fade-up\">\n <span class=\"section-tag\">Client Love<\/span>\n <h2 class=\"section-title\">Real Results for Real Businesses<\/h2>\n <p class=\"section-sub\">Don't take our word for it \u2014 hear from local business owners whose sites we've built.<\/p>\n <\/div>\n\n <div class=\"testi-grid\">\n <div class=\"testi-card\" data-aos=\"fade-up\" data-aos-delay=\"0\">\n <div class=\"testi-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <p class=\"testi-text\">\"I was nervous about spending money on a website, but within 3 weeks of launch I had 12 new client bookings directly from the site. Zion Design Studio completely over-delivered.\"<\/p>\n <div class=\"testi-author\">\n <div class=\"testi-avatar av-1\">MR<\/div>\n <div>\n <p class=\"testi-name\">Maria Rodriguez<\/p>\n <p class=\"testi-role\">Owner, Bloom Hair Salon \u2014 Austin, TX<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"testi-card\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n <div class=\"testi-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <p class=\"testi-text\">\"They finished my restaurant website in 6 days flat. The online menu and reservation form work perfectly. My Google reviews have gone up because customers can actually find us now.\"<\/p>\n <div class=\"testi-author\">\n <div class=\"testi-avatar av-2\">JK<\/div>\n <div>\n <p class=\"testi-name\">James Kim<\/p>\n <p class=\"testi-role\">Owner, Seoul Garden Restaurant \u2014 Portland, OR<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"testi-card\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n <div class=\"testi-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <p class=\"testi-text\">\"As a plumber, I thought a fancy website was a luxury. Zion showed me it's an investment. I'm getting 8\u201310 calls a week from the site now. Best money I've ever spent on marketing.\"<\/p>\n <div class=\"testi-author\">\n <div class=\"testi-avatar av-3\">DT<\/div>\n <div>\n <p class=\"testi-name\">Dave Thompson<\/p>\n <p class=\"testi-role\">Owner, Thompson's Plumbing \u2014 Denver, CO<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500\u2500 PROPOSAL \u2500\u2500\u2500 -->\n<section id=\"proposal\">\n <div class=\"proposal-inner\" data-aos=\"fade-up\">\n <span class=\"section-tag\" style=\"display:block;text-align:center;\">Start Your Project<\/span>\n <h2 class=\"section-title\">Request a Free Proposal<\/h2>\n <p>Tell us about your business and what you need. We'll send a custom proposal within 24 hours \u2014 completely free, with zero obligation.<\/p>\n\n <form class=\"proposal-form\" id=\"proposalForm\" onsubmit=\"handleForm(event,'proposalSuccess')\">\n <div class=\"form-group\">\n <label>Your Name *<\/label>\n <input type=\"text\" placeholder=\"Jane Smith\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Business Name *<\/label>\n <input type=\"text\" placeholder=\"Smith's Bakery\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Email Address *<\/label>\n <input type=\"email\" placeholder=\"jane@smithsbakery.com\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Phone Number<\/label>\n <input type=\"tel\" placeholder=\"(555) 123-4567\" \/>\n <\/div>\n <div class=\"form-group full\">\n <label>What type of business do you run? *<\/label>\n <select required>\n <option value=\"\" disabled selected>Select your industry<\/option>\n <option>Restaurant \/ Food & Beverage<\/option>\n <option>Salon \/ Beauty \/ Spa<\/option>\n <option>Retail \/ Boutique<\/option>\n <option>Health \/ Medical<\/option>\n <option>Legal \/ Financial Services<\/option>\n <option>Contractor \/ Trades<\/option>\n <option>Real Estate<\/option>\n <option>Fitness \/ Wellness<\/option>\n <option>Photography \/ Creative<\/option>\n <option>Other<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group full\">\n <label>Which package interests you?<\/label>\n <select>\n <option>Starter \u2014 $799<\/option>\n <option>Growth \u2014 $1,499 (Most Popular)<\/option>\n <option>Pro Store \u2014 $2,899<\/option>\n <option>Not sure yet \u2014 let me know what I need<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group full\">\n <label>Tell us about your project<\/label>\n <textarea placeholder=\"Describe your business, your goals, and what you'd like your website to do for you...\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn-submit\">\ud83d\ude80 Send My Free Proposal Request<\/button>\n <\/form>\n <div class=\"form-success\" id=\"proposalSuccess\">\n \u2705 Proposal request received! We'll be in touch within 24 hours.\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 -->\n<section id=\"contact\">\n <div class=\"contact-inner\">\n <div class=\"contact-info\" data-aos=\"fade-right\">\n <span class=\"section-tag\">Get in Touch<\/span>\n <h2>Let's Talk About Your Business<\/h2>\n <p>Have questions before committing? That's totally fine. Drop us a message or reach out directly \u2014 we respond within a few hours during business days.<\/p>\n\n <div class=\"contact-item\">\n <div class=\"contact-icon\">\ud83d\udce7<\/div>\n <div>\n <h4>Email Us<\/h4>\n <p>hello@ziondesignstudio.com<\/p>\n <\/div>\n <\/div>\n <div class=\"contact-item\">\n <div class=\"contact-icon\">\ud83d\udcde<\/div>\n <div>\n <h4>Call or Text<\/h4>\n <p>(555) 900-ZION<\/p>\n <\/div>\n <\/div>\n <div class=\"contact-item\">\n <div class=\"contact-icon\">\ud83d\udd50<\/div>\n <div>\n <h4>Office Hours<\/h4>\n <p>Mon\u2013Fri, 9am\u20136pm (CST)<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <form class=\"contact-form\" id=\"contactForm\" onsubmit=\"handleForm(event,'contactSuccess')\" data-aos=\"fade-left\">\n <div class=\"form-group\">\n <label>Your Name *<\/label>\n <input type=\"text\" placeholder=\"John Doe\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Email *<\/label>\n <input type=\"email\" placeholder=\"john@yourbusiness.com\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Subject<\/label>\n <input type=\"text\" placeholder=\"Quick question about pricing\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Message *<\/label>\n <textarea required placeholder=\"Ask us anything...\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn-submit\" style=\"margin-top:.5rem\">Send Message \u2192<\/button>\n <div class=\"form-success\" id=\"contactSuccess\">\n \u2705 Message sent! We'll reply within a few hours.\n <\/div>\n <\/form>\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 -->\n<footer>\n <div class=\"footer-grid\">\n <div class=\"footer-brand\">\n <a href=\"#\" class=\"nav-logo\" style=\"font-size:1.6rem;\">Zion<span>.<\/span><\/a>\n <p>Helping local businesses across the country get found online, grow their reputation, and serve more customers \u2014 one beautiful website at a time.<\/p>\n <div class=\"socials\" style=\"margin-top:1.2rem;\">\n <a href=\"#\" class=\"social-btn\">\ud835\udd4f<\/a>\n <a href=\"#\" class=\"social-btn\">in<\/a>\n <a href=\"#\" class=\"social-btn\">ig<\/a>\n <a href=\"#\" class=\"social-btn\">fb<\/a>\n <\/div>\n <\/div>\n <div class=\"footer-col\">\n <h4>Services<\/h4>\n <ul>\n <li><a href=\"#services\">Website Design<\/a><\/li>\n <li><a href=\"#services\">Local SEO<\/a><\/li>\n <li><a href=\"#services\">E-Commerce<\/a><\/li>\n <li><a href=\"#services\">Brand Identity<\/a><\/li>\n <li><a href=\"#services\">Maintenance<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"footer-col\">\n <h4>Company<\/h4>\n <ul>\n <li><a href=\"#process\">Our Process<\/a><\/li>\n <li><a href=\"#pricing\">Pricing<\/a><\/li>\n <li><a href=\"#testimonials\">Case Studies<\/a><\/li>\n <li><a href=\"#contact\">Contact<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"footer-col\">\n <h4>Industries<\/h4>\n <ul>\n <li><a href=\"#proposal\">Restaurants<\/a><\/li>\n <li><a href=\"#proposal\">Salons & Spas<\/a><\/li>\n <li><a href=\"#proposal\">Contractors<\/a><\/li>\n <li><a href=\"#proposal\">Medical Offices<\/a><\/li>\n <li><a href=\"#proposal\">Retail Shops<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"neon-divider\"><\/div>\n <div class=\"footer-bottom\">\n <p>\u00a9 2026 Zion Design Studio. All rights reserved.<\/p>\n <p>Privacy Policy \u00b7 Terms of Service<\/p>\n <\/div>\n<\/footer>\n\n<!-- AOS JS -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/aos\/2.3.4\/aos.js\"><\/script>\n\n<script>\n \/\/ \u2500\u2500\u2500 AOS INIT \u2500\u2500\u2500\n AOS.init({ duration: 650, once: true, easing: 'ease-out-cubic', offset: 60 });\n\n \/\/ \u2500\u2500\u2500 CURSOR GLOW \u2500\u2500\u2500\n const glow = document.getElementById('cursorGlow');\n document.addEventListener('mousemove', e => {\n glow.style.left = e.clientX + 'px';\n glow.style.top = e.clientY + 'px';\n });\n\n \/\/ \u2500\u2500\u2500 STAR CANVAS \u2500\u2500\u2500\n const canvas = document.getElementById('stars-canvas');\n const ctx = canvas.getContext('2d');\n let stars = [];\n\n function resizeCanvas() {\n canvas.width = canvas.offsetWidth;\n canvas.height = canvas.offsetHeight;\n }\n function createStars(n) {\n stars = [];\n for (let i = 0; i < n; i++) {\n stars.push({\n x: Math.random() * canvas.width,\n y: Math.random() * canvas.height,\n r: Math.random() * 1.5 + 0.2,\n a: Math.random(),\n speed: Math.random() * 0.4 + 0.1\n });\n }\n }\n function drawStars() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n stars.forEach(s => {\n s.a += s.speed * 0.008;\n const alpha = (Math.sin(s.a) + 1) \/ 2;\n ctx.beginPath();\n ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);\n ctx.fillStyle = `rgba(148,163,184,${alpha * 0.7})`;\n ctx.fill();\n });\n requestAnimationFrame(drawStars);\n }\n resizeCanvas();\n createStars(180);\n drawStars();\n window.addEventListener('resize', () => { resizeCanvas(); createStars(180); });\n\n \/\/ \u2500\u2500\u2500 PARALLAX \u2500\u2500\u2500\n window.addEventListener('scroll', () => {\n const scrollY = window.scrollY;\n document.querySelectorAll('.orb').forEach((orb, i) => {\n const speed = [0.08, 0.05, 0.12][i] || 0.06;\n orb.style.transform = `translateY(${scrollY * speed}px)`;\n });\n });\n\n \/\/ \u2500\u2500\u2500 COUNTER ANIMATION \u2500\u2500\u2500\n const counters = document.querySelectorAll('.counter');\n const counterObs = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (!entry.isIntersecting) return;\n const el = entry.target;\n const target = parseInt(el.dataset.target);\n let current = 0;\n const step = target \/ 60;\n const interval = setInterval(() => {\n current += step;\n if (current >= target) { current = target; clearInterval(interval); }\n el.textContent = Math.floor(current) + (el.dataset.target === '100' ? '%' : '+');\n }, 25);\n counterObs.unobserve(el);\n });\n }, { threshold: 0.5 });\n counters.forEach(c => counterObs.observe(c));\n\n \/\/ \u2500\u2500\u2500 FORM HANDLING \u2500\u2500\u2500\n function handleForm(e, successId) {\n e.preventDefault();\n const form = e.target;\n const btn = form.querySelector('button[type=\"submit\"]');\n btn.textContent = 'Sending\u2026';\n btn.disabled = true;\n setTimeout(() => {\n form.style.display = 'none';\n document.getElementById(successId).style.display = 'block';\n }, 1200);\n }\n\n \/\/ \u2500\u2500\u2500 SMOOTH NAV ACTIVE \u2500\u2500\u2500\n const sections = document.querySelectorAll('section[id]');\n const navLinks = document.querySelectorAll('.nav-links a');\n const navObs = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n navLinks.forEach(a => a.style.color = '');\n const active = document.querySelector(`.nav-links a[href=\"#${entry.target.id}\"]`);\n if (active) active.style.color = '#a78bfa';\n }\n });\n }, { threshold: 0.4 });\n sections.forEach(s => navObs.observe(s));\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Zion Design Studio \u2014 Websites for Local Businesses Zion. Services Process Pricing Reviews Contact Get a Proposal Now accepting new clients \u2014 limited spots We Build Websites That Win Local Customers Zion Design Studio crafts stunning, fast, and conversion-focused websites for small businesses \u2014 so you spend less time on marketing and more time doing […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-with-title","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ziondesignstudio.com\/blog\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ziondesignstudio.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ziondesignstudio.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ziondesignstudio.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ziondesignstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":5,"href":"https:\/\/ziondesignstudio.com\/blog\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/ziondesignstudio.com\/blog\/wp-json\/wp\/v2\/pages\/9\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/ziondesignstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}