{"id":13,"date":"2026-04-14T13:06:43","date_gmt":"2026-04-14T13:06:43","guid":{"rendered":"https:\/\/muddev.co.za\/test-space\/?page_id=13"},"modified":"2026-04-14T13:09:12","modified_gmt":"2026-04-14T13:09:12","slug":"sample-2","status":"publish","type":"page","link":"https:\/\/muddev.co.za\/test-space\/sample-2\/","title":{"rendered":"Sample 2"},"content":{"rendered":"\n<!--\n  ALURO HOMEPAGE v2 \u2014 Gutenberg Custom HTML Block\n  Full recreation with all animations + interactions\n  Paste into a single Custom HTML block on Full Width \/ Unboxed Kadence page\n-->\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=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&#038;family=Instrument+Serif:ital@0;1&#038;display=swap\" rel=\"stylesheet\">\n\n<!-- GSAP -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/ScrollTrigger.min.js\"><\/script>\n\n<!-- Lenis -->\n<script src=\"https:\/\/unpkg.com\/lenis@1.2.3\/dist\/lenis.min.js\"><\/script>\n\n<style>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   BASE\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.al *{margin:0;padding:0;box-sizing:border-box}\n.al{\n  --bg:#0e0e10;--bg2:#141417;--bg3:#1a1a1f;\n  --text:#e8e6e1;--muted:rgba(232,230,225,0.4);--line:rgba(232,230,225,0.07);\n  --serif:'Instrument Serif',serif;--sans:'DM Sans',sans-serif;\n  --ease:cubic-bezier(0.16,1,0.3,1);--radius:12px;\n  font-family:var(--sans);color:var(--text);background:var(--bg);\n  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5;\n}\n.al a{color:inherit;text-decoration:none}\n.al img{max-width:100%;height:auto;display:block}\n.al ul{list-style:none}\n.al .serif{font-family:var(--serif);font-style:italic;font-weight:400}\n\n.al-container{max-width:1200px;margin:0 auto;padding:0 2rem;width:100%}\n.al-section{position:relative;z-index:1;padding:5rem 0}\n.al-body{font-size:0.9rem;line-height:1.7;color:var(--muted)}\n\n\/* \u2500\u2500 Background Grid \u2500\u2500 *\/\n.al-grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;display:flex;justify-content:center}\n.al-grid-bg-inner{max-width:1200px;width:100%;display:flex;justify-content:space-between;padding:0 2rem}\n.al-grid-line{width:1px;height:100%;background:var(--line)}\n\n\/* \u2500\u2500 Section Divider \u2500\u2500 *\/\n.al-divider{width:100%;height:1px;background:var(--line);position:relative}\n.al-divider::before,.al-divider::after{\n  content:'';width:6px;height:6px;border-radius:50%;\n  border:1px solid rgba(232,230,225,0.15);background:var(--bg);\n  position:absolute;top:-3px;\n}\n.al-divider::before{left:calc(50% - 16px)}\n.al-divider::after{left:calc(50% + 10px)}\n\n\/* \u2500\u2500 Headings \u2500\u2500 *\/\n.al-section-heading{text-align:center;margin-bottom:3rem}\n.al-section-heading h2{\n  font-family:var(--sans);font-size:clamp(2rem,4.5vw,3.2rem);\n  font-weight:500;line-height:1.15;letter-spacing:-0.02em;\n}\n.al-h-clip{overflow:hidden;display:inline-block;padding-bottom:0.05em}\n.al-h-inner{display:block;transform:translateY(110%);will-change:transform}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   BUTTONS (with slide-up BG)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.al-btn{\n  font-family:var(--sans);font-size:0.85rem;font-weight:500;\n  padding:14px 28px;border-radius:6px;cursor:pointer;\n  display:inline-flex;align-items:center;justify-content:center;gap:8px;\n  border:1px solid var(--line);background:transparent;color:var(--text);\n  text-decoration:none;position:relative;overflow:hidden;\n  transition:color 0.4s var(--ease),border-color 0.4s var(--ease);\n  z-index:1;\n}\n.al-btn-bg{\n  position:absolute;inset:0;background:var(--text);\n  transform:translateY(100%);transition:transform 0.45s var(--ease);\n  z-index:-1;border-radius:5px;\n}\n.al-btn:hover{color:var(--bg);border-color:var(--text)}\n.al-btn:hover .al-btn-bg{transform:translateY(0)}\n.al-btn--fill{background:var(--text);color:var(--bg);border-color:var(--text)}\n.al-btn--fill .al-btn-bg{background:var(--bg);transform:translateY(100%)}\n.al-btn--fill:hover{color:var(--text)}\n.al-btn--fill:hover .al-btn-bg{transform:translateY(0)}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   NAVIGATION\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.al-nav{\n  position:fixed;top:0;left:0;right:0;z-index:100;\n  padding:1.2rem 0;transition:background 0.4s ease,backdrop-filter 0.4s ease;\n}\n.al-nav.scrolled{background:rgba(14,14,16,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}\n.al-nav-inner{display:flex;align-items:center;justify-content:space-between}\n.al-nav-logo{width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--bg3)}\n.al-nav-logo img{width:100%;height:100%;object-fit:cover;object-position:top}\n.al-nav-links{display:flex;gap:2rem;align-items:center}\n.al-nav-link{\n  font-size:0.85rem;font-weight:400;color:var(--muted);\n  position:relative;overflow:hidden;display:inline-block;\n}\n.al-nav-link-text{\n  display:block;transition:transform 0.4s var(--ease);\n  position:relative;\n}\n.al-nav-link-text::after{\n  content:attr(data-text);position:absolute;top:100%;left:0;\n  color:var(--text);font-weight:500;\n}\n.al-nav-link:hover .al-nav-link-text{transform:translateY(-100%)}\n.al-nav-contact .al-btn{padding:10px 20px;font-size:0.8rem}\n.al-nav-toggle{\n  display:none;width:32px;height:32px;align-items:center;justify-content:center;\n  cursor:pointer;background:none;border:1px solid var(--line);border-radius:6px;\n  color:var(--text);font-size:1rem;\n}\n.al-mobile-menu{\n  display:none;position:fixed;inset:0;background:var(--bg);z-index:99;\n  flex-direction:column;align-items:center;justify-content:center;gap:2rem;\n}\n.al-mobile-menu.open{display:flex}\n.al-mobile-menu a{font-size:1.5rem;font-weight:500;color:var(--text)}\n.al-mobile-close{position:absolute;top:1.2rem;right:2rem;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   HERO\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.al-hero{\n  min-height:100vh;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;position:relative;\n  overflow:hidden;padding-top:5rem;\n}\n.al-hero-avatar{position:relative;width:160px;height:200px;margin-bottom:2rem;opacity:0;perspective:800px}\n.al-hero-avatar img{\n  width:140px;height:180px;object-fit:cover;object-position:top;\n  border-radius:100px;position:absolute;top:50%;left:50%;\n  border:2px solid var(--line);will-change:transform;\n  transition:box-shadow 0.4s ease;\n}\n.al-hero-avatar img:nth-child(1){opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(0.92)}\n.al-hero-avatar img:nth-child(2){opacity:0;transform:translate(-50%,-50%) rotate(5deg) scale(0.96)}\n.al-hero-avatar img:nth-child(3){opacity:0;transform:translate(-50%,-50%) rotate(0deg)}\n.al-hero-avatar:hover img:nth-child(3){box-shadow:0 20px 60px rgba(0,0,0,0.4)}\n\n\/* Marquee *\/\n.al-marquee-wrap{width:100%;overflow:hidden;position:relative;margin-bottom:2rem;opacity:0}\n.al-marquee-track{display:flex;width:max-content;animation:marquee 30s linear infinite}\n.al-marquee-item{\n  font-family:var(--sans);font-size:clamp(4rem,12vw,10rem);font-weight:700;\n  letter-spacing:-0.04em;white-space:nowrap;padding:0 1rem;\n  color:var(--text);opacity:0.08;line-height:1;text-transform:uppercase;\n}\n@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-33.333%)}}\n.al-marquee-shadow{position:absolute;top:0;width:15%;height:100%;z-index:2;pointer-events:none}\n.al-marquee-shadow.left{left:0;background:linear-gradient(to right,var(--bg),transparent)}\n.al-marquee-shadow.right{right:0;background:linear-gradient(to left,var(--bg),transparent)}\n\n.al-hero-tagline{\n  font-size:clamp(0.6rem,1.2vw,0.75rem);font-weight:500;\n  letter-spacing:0.2em;text-transform:uppercase;\n  color:var(--muted);text-align:center;opacity:0;transform:translateY(10px);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   LOGO MARQUEE\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.al-logos{padding:2.5rem 0}\n.al-logos-track{display:flex;width:max-content;animation:logosScroll 25s linear infinite}\n.al-logo-item{\n  display:flex;align-items:center;justify-content:center;padding:0 2.5rem;\n  height:42px;opacity:0.3;color:var(--muted);font-family:var(--sans);\n  font-size:1.1rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;\n  white-space:nowrap;\n}\n@keyframes logosScroll{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   SERVICES\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.al-services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}\n.al-service-card{\n  background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);\n  padding:2.5rem 2rem;position:relative;overflow:hidden;\n  opacity:0;transform:translateY(30px);\n  transition:background 0.4s ease,border-color 0.4s ease;\n}\n.al-service-card:hover{background:var(--bg3);border-color:rgba(232,230,225,0.12)}\n.al-service-card-num{\n  position:absolute;bottom:-0.3rem;right:1rem;font-size:7rem;font-weight:800;\n  color:rgba(232,230,225,0.025);line-height:1;pointer-events:none;\n  transition:color 0.4s ease;\n}\n.al-service-card:hover .al-service-card-num{color:rgba(232,230,225,0.04)}\n.al-service-icon{\n  width:44px;height:44px;border:1px solid var(--line);border-radius:10px;\n  display:flex;align-items:center;justify-content:center;\n  margin-bottom:1.5rem;color:var(--text);font-size:1.1rem;\n  position:relative;\n}\n.al-service-icon::after{\n  content:'';position:absolute;bottom:-12px;left:0;right:0;\n  height:1px;background:var(--line);\n}\n.al-service-title{font-size:1.05rem;font-weight:500;margin-bottom:1rem;margin-top:0.5rem}\n.al-service-desc{font-size:0.85rem;line-height:1.7;color:var(--muted)}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   WORK SLIDER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.al-work-wrap{position:relative;overflow:hidden;opacity:0;filter:blur(12px)}\n.al-work-track{display:flex;gap:1.5rem;transition:transform 0.7s var(--ease)}\n.al-work-card{\n  min-width:calc(50% - 0.75rem);border-radius:var(--radius);overflow:hidden;\n  background:var(--bg2);border:1px solid var(--line);flex-shrink:0;\n  transition:border-color 0.4s ease;\n}\n.al-work-card:hover{border-color:rgba(232,230,225,0.15)}\n.al-work-img{width:100%;aspect-ratio:16\/10;background:var(--bg3);overflow:hidden}\n.al-work-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s var(--ease)}\n.al-work-card:hover .al-work-img img{transform:scale(1.05)}\n.al-work-content{padding:1.5rem}\n.al-work-tags{display:flex;gap:0.5rem;margin-bottom:0.75rem}\n.al-work-tag{\n  font-size:0.7rem;padding:4px 10px;border:1px solid var(--line);\n  border-radius:100px;color:var(--muted);\n}\n.al-work-title{font-size:1rem;font-weight:600;margin-bottom:0.35rem}\n.al-work-desc{font-size:0.8rem;color:var(--muted);line-height:1.5}\n.al-slider-controls{display:flex;justify-content:center;gap:0.75rem;margin-top:2rem}\n.al-slider-btn{\n  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);\n  background:transparent;color:var(--text);display:flex;align-items:center;\n  justify-content:center;cursor:pointer;font-size:1.1rem;\n  transition:all 0.3s ease;position:relative;overflow:hidden;\n}\n.al-slider-btn:hover{background:var(--text);color:var(--bg)}\n.al-slider-shadow{position:absolute;top:0;width:60px;height:100%;z-index:2;pointer-events:none}\n.al-slider-shadow.left{left:0;background:linear-gradient(to right,var(--bg),transparent)}\n.al-slider-shadow.right{right:0;background:linear-gradient(to left,var(--bg),transparent)}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   PRICING\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.al-pricing-wrap{opacity:0;filter:blur(12px)}\n.al-pricing-tabs{\n  display:flex;justify-content:center;margin-bottom:2.5rem;gap:0;\n  background:var(--bg2);border-radius:8px;padding:4px;width:fit-content;\n  margin-left:auto;margin-right:auto;border:1px solid var(--line);\n}\n.al-pricing-tab{\n  padding:10px 24px;font-size:0.85rem;font-weight:500;border-radius:6px;\n  cursor:pointer;transition:all 0.3s ease;color:var(--muted);\n  background:transparent;border:none;font-family:var(--sans);\n}\n.al-pricing-tab.active{background:var(--text);color:var(--bg)}\n.al-pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;position:relative}\n.al-plans-bg{\n  position:absolute;inset:-20px;\n  background:radial-gradient(ellipse 50% 40% at 50% 50%,rgba(232,230,225,0.02),transparent);\n  pointer-events:none;z-index:0;\n}\n.al-plan-card{\n  background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);\n  padding:2.5rem 2rem;display:flex;flex-direction:column;position:relative;overflow:hidden;\n  z-index:1;\n}\n.al-plan-badge{\n  font-size:0.6rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;\n  padding:4px 10px;border-radius:100px;background:rgba(232,230,225,0.08);\n  color:var(--muted);display:inline-block;width:fit-content;margin-top:0.5rem;\n}\n.al-plan-name{font-size:1.1rem;font-weight:600;margin-bottom:0.3rem}\n.al-plan-tagline{font-size:0.85rem;color:var(--muted)}\n.al-plan-price{font-size:2.5rem;font-weight:600;margin:1.5rem 0 0.25rem;letter-spacing:-0.02em;transition:opacity 0.3s ease}\n.al-plan-price-note{font-size:0.8rem;color:var(--muted);margin-bottom:1.5rem}\n.al-plan-features{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}\n.al-plan-features-label{\n  font-size:0.65rem;font-weight:600;letter-spacing:0.12em;\n  text-transform:uppercase;color:var(--muted);margin-bottom:1rem;\n}\n.al-plan-feature{display:flex;align-items:center;gap:10px;padding:0.5rem 0;font-size:0.85rem;color:var(--text)}\n.al-plan-check{\n  width:16px;height:16px;border-radius:50%;background:rgba(232,230,225,0.06);\n  display:flex;align-items:center;justify-content:center;font-size:0.55rem;flex-shrink:0;\n}\n.al-plan-gradient{\n  position:absolute;bottom:0;left:0;right:0;height:120px;\n  background:linear-gradient(to top,var(--bg2),transparent);\n  pointer-events:none;border-radius:0 0 var(--radius) var(--radius);\n}\n.al-plan-gradient.sm{height:60px;background:linear-gradient(to top,rgba(20,20,23,0.4),transparent)}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   TESTIMONIALS\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.al-testimonials-wrap{position:relative;overflow:hidden;opacity:0;filter:blur(12px)}\n.al-testimonials-track{display:flex;gap:1.5rem;transition:transform 0.7s var(--ease)}\n.al-testimonial-card{\n  min-width:calc(50% - 0.75rem);flex-shrink:0;background:var(--bg2);\n  border:1px solid var(--line);border-radius:var(--radius);padding:2rem;\n  display:flex;flex-direction:column;justify-content:space-between;\n  min-height:240px;position:relative;overflow:hidden;\n}\n.al-testimonial-card::after{\n  content:'';position:absolute;inset:0;\n  background:linear-gradient(135deg,rgba(232,230,225,0.01),transparent 60%);\n  pointer-events:none;\n}\n.al-testimonial-quote{font-size:0.95rem;line-height:1.7;color:var(--text);margin-bottom:1.5rem;position:relative;z-index:1}\n.al-testimonial-quotemark{\n  position:absolute;top:0.5rem;right:1.2rem;font-size:6rem;\n  font-family:var(--serif);color:rgba(232,230,225,0.035);line-height:1;z-index:0;\n}\n.al-testimonial-author{display:flex;align-items:center;gap:12px;position:relative;z-index:1}\n.al-testimonial-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--bg3)}\n.al-testimonial-avatar img{width:100%;height:100%;object-fit:cover}\n.al-testimonial-name{font-size:0.85rem;font-weight:500}\n.al-testimonial-role{font-size:0.75rem;color:var(--muted)}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   FAQ\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.al-faq-wrap{max-width:700px;margin:0 auto;opacity:0;filter:blur(12px)}\n.al-faq-item{border-bottom:1px solid var(--line);overflow:hidden}\n.al-faq-trigger{\n  width:100%;display:flex;align-items:center;justify-content:space-between;\n  padding:1.5rem 0;background:none;border:none;color:var(--text);\n  font-family:var(--sans);font-size:0.95rem;font-weight:500;\n  cursor:pointer;text-align:left;gap:1rem;\n}\n.al-faq-icon{\n  width:28px;height:28px;border-radius:6px;border:1px solid var(--line);\n  display:flex;align-items:center;justify-content:center;flex-shrink:0;\n  position:relative;transition:background 0.3s ease,border-color 0.3s ease;\n}\n.al-faq-icon::before,.al-faq-icon::after{content:'';position:absolute;background:var(--text);transition:transform 0.3s ease,background 0.3s ease}\n.al-faq-icon::before{width:10px;height:1px}\n.al-faq-icon::after{width:1px;height:10px}\n.al-faq-item.open .al-faq-icon{background:var(--text);border-color:var(--text)}\n.al-faq-item.open .al-faq-icon::before{background:var(--bg)}\n.al-faq-item.open .al-faq-icon::after{background:var(--bg);transform:rotate(90deg)}\n.al-faq-answer{max-height:0;overflow:hidden;transition:max-height 0.5s var(--ease)}\n.al-faq-answer-inner{padding-bottom:1.5rem;font-size:0.85rem;line-height:1.7;color:var(--muted)}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CTA\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.al-cta-section{text-align:center;padding:6rem 2rem;position:relative;overflow:hidden}\n.al-cta-section h2{\n  font-family:var(--sans);font-size:clamp(2rem,5vw,3.5rem);\n  font-weight:500;margin-bottom:1rem;letter-spacing:-0.02em;\n}\n.al-cta-section .al-body{margin-bottom:2rem;max-width:480px;margin-left:auto;margin-right:auto}\n.al-cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}\n.al-cta-content{opacity:0;filter:blur(12px)}\n.al-cta-overlay{\n  position:absolute;inset:0;pointer-events:none;\n  background:radial-gradient(ellipse 60% 40% at 50% 40%,rgba(232,230,225,0.025),transparent 70%);\n}\n.al-cta-overlay.second{\n  background:radial-gradient(ellipse 40% 30% at 50% 50%,rgba(232,230,225,0.015),transparent);\n}\n.al-cta-overlay.third{\n  background:radial-gradient(ellipse 80% 50% at 50% 60%,rgba(232,230,225,0.01),transparent);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   PROGRESSIVE BLUR (before footer)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.al-prog-blur{\n  position:relative;height:80px;z-index:2;pointer-events:none;\n  background:linear-gradient(to bottom,transparent,var(--bg2));\n}\n.al-prog-blur::before{\n  content:'';position:absolute;inset:0;\n  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);\n  mask-image:linear-gradient(to bottom,transparent,black);\n  -webkit-mask-image:linear-gradient(to bottom,transparent,black);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   FOOTER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.al-footer{\n  position:relative;z-index:1;padding:4rem 0 2rem;\n  background:var(--bg2);border-top:1px solid var(--line);overflow:hidden;\n}\n.al-footer-glow{\n  position:absolute;top:-100px;left:50%;transform:translateX(-50%);\n  width:600px;height:300px;\n  background:radial-gradient(ellipse,rgba(232,230,225,0.02),transparent 70%);\n  pointer-events:none;\n}\n.al-footer-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3rem;padding-bottom:3rem}\n.al-footer-brand{display:flex;flex-direction:column;gap:1rem}\n.al-footer-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--bg3)}\n.al-footer-avatar img{width:100%;height:100%;object-fit:cover;object-position:top}\n.al-footer-bio{font-size:0.8rem;color:var(--muted);line-height:1.6;max-width:260px}\n.al-footer-socials{display:flex;gap:0.5rem;margin-top:0.5rem}\n.al-footer-social{\n  width:36px;height:36px;border-radius:8px;border:1px solid var(--line);\n  display:flex;align-items:center;justify-content:center;font-size:0.8rem;\n  color:var(--muted);transition:all 0.3s ease;position:relative;overflow:hidden;\n}\n.al-footer-social:hover{background:var(--text);color:var(--bg);border-color:var(--text)}\n.al-footer-col-title{\n  font-size:0.65rem;font-weight:600;letter-spacing:0.12em;\n  text-transform:uppercase;color:var(--text);margin-bottom:1rem;\n}\n.al-footer-links{display:flex;flex-direction:column;gap:0.6rem}\n.al-footer-link{\n  font-size:0.85rem;color:var(--muted);transition:color 0.3s ease;\n  display:inline-block;position:relative;\n}\n.al-footer-link::after{\n  content:'';position:absolute;bottom:-1px;left:0;width:100%;height:1px;\n  background:var(--text);transform:scaleX(0);transform-origin:left;\n  transition:transform 0.4s var(--ease);\n}\n.al-footer-link:hover{color:var(--text)}\n.al-footer-link:hover::after{transform:scaleX(1)}\n.al-footer-bottom{\n  border-top:1px solid var(--line);padding-top:1.5rem;\n  display:flex;justify-content:space-between;align-items:center;\n}\n.al-footer-copy{font-size:0.75rem;color:var(--muted)}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CONTACT POPUP\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.al-popup-overlay{\n  position:fixed;inset:0;background:rgba(0,0,0,0.6);\n  backdrop-filter:blur(8px);z-index:200;display:none;\n  align-items:center;justify-content:center;padding:2rem;\n}\n.al-popup-overlay.open{display:flex}\n.al-popup{\n  background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);\n  padding:2.5rem;max-width:560px;width:100%;position:relative;\n  max-height:90vh;overflow-y:auto;\n  animation:popupIn 0.4s var(--ease);\n}\n@keyframes popupIn{from{opacity:0;transform:translateY(20px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}\n.al-popup-close{\n  position:absolute;top:1rem;right:1rem;width:32px;height:32px;\n  border-radius:6px;border:1px solid var(--line);background:transparent;\n  color:var(--text);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;font-size:1rem;transition:background 0.3s ease;\n}\n.al-popup-close:hover{background:var(--bg3)}\n.al-form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}\n.al-form-group{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}\n.al-form-label{font-size:0.65rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}\n.al-form-input,.al-form-textarea,.al-form-select{\n  font-family:var(--sans);font-size:0.85rem;padding:12px 14px;\n  border-radius:8px;border:1px solid var(--line);background:var(--bg);\n  color:var(--text);outline:none;transition:border-color 0.3s ease;\n}\n.al-form-input:focus,.al-form-textarea:focus,.al-form-select:focus{border-color:rgba(232,230,225,0.25)}\n.al-form-textarea{resize:vertical;min-height:100px}\n.al-form-budget{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem}\n.al-form-budget-option{\n  padding:8px 16px;border-radius:100px;border:1px solid var(--line);\n  background:transparent;color:var(--muted);font-family:var(--sans);\n  font-size:0.8rem;cursor:pointer;transition:all 0.3s ease;\n}\n.al-form-budget-option:hover,.al-form-budget-option.selected{\n  background:var(--text);color:var(--bg);border-color:var(--text);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   RESPONSIVE\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media(max-width:1024px){\n  .al-work-card{min-width:calc(60% - 0.75rem)}\n  .al-testimonial-card{min-width:calc(70% - 0.75rem)}\n}\n@media(max-width:768px){\n  .al-nav-links{display:none}.al-nav-toggle{display:flex}\n  .al-services-grid{grid-template-columns:1fr}\n  .al-pricing-grid{grid-template-columns:1fr}\n  .al-work-card{min-width:calc(85% - 0.75rem)}\n  .al-testimonial-card{min-width:calc(85% - 0.75rem)}\n  .al-footer-top{grid-template-columns:1fr;gap:2rem}\n  .al-footer-bottom{flex-direction:column;gap:0.75rem;text-align:center}\n  .al-form-row{grid-template-columns:1fr}\n  .al-section{padding:3.5rem 0}\n  .al-hero-avatar{width:120px;height:160px}\n  .al-hero-avatar img{width:110px;height:145px}\n}\n@media(max-width:480px){\n  .al-cta-btns{flex-direction:column}\n  .al-cta-btns .al-btn{width:100%}\n  .al-headline{font-size:clamp(2.4rem,11vw,3.5rem)}\n}\n@media(prefers-reduced-motion:reduce){\n  .al *,.al *::before,.al *::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}\n  .al-marquee-track,.al-logos-track{animation:none!important}\n  .al-hero-avatar,.al-marquee-wrap,.al-hero-tagline,.al-service-card,\n  .al-work-wrap,.al-pricing-wrap,.al-testimonials-wrap,.al-faq-wrap,.al-cta-content{\n    opacity:1!important;transform:none!important;filter:none!important;\n  }\n  .al-hero-avatar img{opacity:1!important}\n  .al-h-inner{transform:none!important}\n}\n<\/style>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     HTML\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"al\">\n<div class=\"al-grid-bg\"><div class=\"al-grid-bg-inner\"><div class=\"al-grid-line\"><\/div><div class=\"al-grid-line\"><\/div><\/div><\/div>\n\n<!-- NAV -->\n<nav class=\"al-nav\" id=\"al-nav\"><div class=\"al-container\"><div class=\"al-nav-inner\">\n  <a href=\"#\" class=\"al-nav-logo\"><img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/68f617da1d06c09a4e6e6886\/68fa1ec116ca06f1e8ca661b_Man%20in%20Blue%20Suit%20(1).avif\" alt=\"Logo\"><\/a>\n  <div class=\"al-nav-links\">\n    <a href=\"#al-services\" class=\"al-nav-link\"><span class=\"al-nav-link-text\" data-text=\"Services\">Services<\/span><\/a>\n    <a href=\"#al-work\" class=\"al-nav-link\"><span class=\"al-nav-link-text\" data-text=\"Work\">Work<\/span><\/a>\n    <a href=\"#al-pricing\" class=\"al-nav-link\"><span class=\"al-nav-link-text\" data-text=\"Pricing\">Pricing<\/span><\/a>\n    <a href=\"#al-faq\" class=\"al-nav-link\"><span class=\"al-nav-link-text\" data-text=\"FAQ\">FAQ<\/span><\/a>\n    <div class=\"al-nav-contact\"><a href=\"#\" class=\"al-btn\" id=\"al-contact-open\">Contact<span class=\"al-btn-bg\"><\/span><\/a><\/div>\n  <\/div>\n  <button class=\"al-nav-toggle\" id=\"al-menu-toggle\">&#9776;<\/button>\n<\/div><\/div><\/nav>\n\n<!-- MOBILE MENU -->\n<div class=\"al-mobile-menu\" id=\"al-mobile-menu\">\n  <button class=\"al-mobile-close\" id=\"al-menu-close\">&times;<\/button>\n  <a href=\"#al-services\">Services<\/a><a href=\"#al-work\">Work<\/a>\n  <a href=\"#al-pricing\">Pricing<\/a><a href=\"#al-faq\">FAQ<\/a>\n  <a href=\"#\" class=\"al-btn al-btn--fill al-contact-trigger\">Contact<span class=\"al-btn-bg\"><\/span><\/a>\n<\/div>\n\n<!-- HERO -->\n<section class=\"al-hero al-section\">\n  <div class=\"al-hero-avatar\" id=\"al-hero-avatar\">\n    <img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/68f617da1d06c09a4e6e6886\/68fa1ec116ca06f1e8ca661b_Man%20in%20Blue%20Suit%20(1).avif\" alt=\"Avatar\">\n    <img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/68f617da1d06c09a4e6e6886\/68fa1ec116ca06f1e8ca661b_Man%20in%20Blue%20Suit%20(1).avif\" alt=\"Avatar\">\n    <img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/68f617da1d06c09a4e6e6886\/68fa1ec116ca06f1e8ca661b_Man%20in%20Blue%20Suit%20(1).avif\" alt=\"Avatar\">\n  <\/div>\n  <div class=\"al-marquee-wrap\" id=\"al-marquee\">\n    <div class=\"al-marquee-shadow left\"><\/div>\n    <div class=\"al-marquee-track\">\n      <span class=\"al-marquee-item\">ALURO\u00ae<\/span><span class=\"al-marquee-item\">ALURO\u00ae<\/span><span class=\"al-marquee-item\">ALURO\u00ae<\/span>\n      <span class=\"al-marquee-item\">ALURO\u00ae<\/span><span class=\"al-marquee-item\">ALURO\u00ae<\/span><span class=\"al-marquee-item\">ALURO\u00ae<\/span>\n      <span class=\"al-marquee-item\">ALURO\u00ae<\/span><span class=\"al-marquee-item\">ALURO\u00ae<\/span><span class=\"al-marquee-item\">ALURO\u00ae<\/span>\n    <\/div>\n    <div class=\"al-marquee-shadow right\"><\/div>\n  <\/div>\n  <div class=\"al-hero-tagline\" id=\"al-tagline\">Designing Quiet, Confident Digital Experiences<\/div>\n<\/section>\n<div class=\"al-container\"><div class=\"al-divider\"><\/div><\/div>\n\n<!-- LOGOS -->\n<section class=\"al-logos al-section\" style=\"padding:2rem 0\">\n  <div class=\"al-marquee-wrap\" style=\"opacity:1\">\n    <div class=\"al-marquee-shadow left\"><\/div>\n    <div class=\"al-logos-track\">\n      <span class=\"al-logo-item\">Spotify<\/span><span class=\"al-logo-item\">Airbnb<\/span><span class=\"al-logo-item\">Notion<\/span><span class=\"al-logo-item\">Stripe<\/span><span class=\"al-logo-item\">Figma<\/span>\n      <span class=\"al-logo-item\">Spotify<\/span><span class=\"al-logo-item\">Airbnb<\/span><span class=\"al-logo-item\">Notion<\/span><span class=\"al-logo-item\">Stripe<\/span><span class=\"al-logo-item\">Figma<\/span>\n      <span class=\"al-logo-item\">Spotify<\/span><span class=\"al-logo-item\">Airbnb<\/span><span class=\"al-logo-item\">Notion<\/span><span class=\"al-logo-item\">Stripe<\/span><span class=\"al-logo-item\">Figma<\/span>\n      <span class=\"al-logo-item\">Spotify<\/span><span class=\"al-logo-item\">Airbnb<\/span><span class=\"al-logo-item\">Notion<\/span><span class=\"al-logo-item\">Stripe<\/span><span class=\"al-logo-item\">Figma<\/span>\n    <\/div>\n    <div class=\"al-marquee-shadow right\"><\/div>\n  <\/div>\n<\/section>\n<div class=\"al-container\"><div class=\"al-divider\"><\/div><\/div>\n\n<!-- SERVICES -->\n<section class=\"al-section\" id=\"al-services\"><div class=\"al-container\">\n  <div class=\"al-section-heading\"><h2><span class=\"al-h-clip\"><span class=\"al-h-inner\">What I can <span class=\"serif\">help<\/span> with.<\/span><\/span><\/h2><\/div>\n  <div class=\"al-services-grid\">\n    <div class=\"al-service-card\"><div class=\"al-service-card-num\">01<\/div><div class=\"al-service-icon\">&#9998;<\/div><div class=\"al-service-title\">Website Design<\/div><div class=\"al-service-desc\">I design modern, minimal websites that balance beauty with usability. Each layout is built to tell a story, guide visitors naturally, and feel effortless to navigate.<\/div><\/div>\n    <div class=\"al-service-card\"><div class=\"al-service-card-num\">02<\/div><div class=\"al-service-icon\">&#9783;<\/div><div class=\"al-service-title\">UI\/UX Design<\/div><div class=\"al-service-desc\">Great design starts with understanding. I map out user journeys, define key moments, and shape interfaces that feel intuitive from the first click.<\/div><\/div>\n    <div class=\"al-service-card\"><div class=\"al-service-card-num\">03<\/div><div class=\"al-service-icon\">&#9672;<\/div><div class=\"al-service-title\">Visual Direction<\/div><div class=\"al-service-desc\">A brand is more than a logo. I craft cohesive visual systems built around colour, typography, and tone, giving brands a clear and consistent identity.<\/div><\/div>\n    <div class=\"al-service-card\"><div class=\"al-service-card-num\">04<\/div><div class=\"al-service-icon\">&#10148;<\/div><div class=\"al-service-title\">Motion &amp; Interaction<\/div><div class=\"al-service-desc\">Movement brings design to life. I use motion to guide attention, create flow, and add rhythm to static layouts. Subtle transitions and scroll-based animations that engage.<\/div><\/div>\n  <\/div>\n<\/div><\/section>\n<div class=\"al-container\"><div class=\"al-divider\"><\/div><\/div>\n\n<!-- WORK -->\n<section class=\"al-section\" id=\"al-work\"><div class=\"al-container\">\n  <div class=\"al-section-heading\"><h2><span class=\"al-h-clip\"><span class=\"al-h-inner\">Things <span class=\"serif\">I&#8217;ve Designed.<\/span><\/span><\/span><\/h2><\/div>\n  <div class=\"al-work-wrap\" id=\"al-work-slider\">\n    <div class=\"al-slider-shadow left\"><\/div>\n    <div class=\"al-work-track\" id=\"al-work-track\">\n      <div class=\"al-work-card\"><div class=\"al-work-img\"><img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/68f617da1d06c09a4e6e68a4\/68fcc6d4d8d21ba32f422488_MacBook%20Pro%2016%20(1)%20(1).avif\" alt=\"Auralis\" loading=\"lazy\"><\/div><div class=\"al-work-content\"><div class=\"al-work-tags\"><span class=\"al-work-tag\">Landing Page<\/span><span class=\"al-work-tag\">Brand Experience<\/span><\/div><div class=\"al-work-title\">Auralis<\/div><div class=\"al-work-desc\">Product landing page for a sound design startup blending tech and emotion.<\/div><\/div><\/div>\n      <div class=\"al-work-card\"><div class=\"al-work-img\"><img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/68f617da1d06c09a4e6e68a4\/68f7d9a110ca4da6b10689d7_Studio%20Display.avif\" alt=\"Lumina Studio\" loading=\"lazy\"><\/div><div class=\"al-work-content\"><div class=\"al-work-tags\"><span class=\"al-work-tag\">Web Design<\/span><span class=\"al-work-tag\">UI\/UX<\/span><\/div><div class=\"al-work-title\">Lumina Studio<\/div><div class=\"al-work-desc\">A creative agency website built around motion and minimalism.<\/div><\/div><\/div>\n      <div class=\"al-work-card\"><div class=\"al-work-img\"><img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/68f617da1d06c09a4e6e68a4\/68f7db2560c6fa6f5ddeebe2_iPhone%2016%20Pro.avif\" alt=\"Moden Interiors\" loading=\"lazy\"><\/div><div class=\"al-work-content\"><div class=\"al-work-tags\"><span class=\"al-work-tag\">E-commerce<\/span><span class=\"al-work-tag\">UI Design<\/span><\/div><div class=\"al-work-title\">Moden Interiors<\/div><div class=\"al-work-desc\">Clean and tactile interface for a boutique interior design brand.<\/div><\/div><\/div>\n      <div class=\"al-work-card\"><div class=\"al-work-img\"><img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/68f617da1d06c09a4e6e68a4\/68f7db90606a5341c86d9278_Studio%20Display%20(1).avif\" alt=\"Nexora\" loading=\"lazy\"><\/div><div class=\"al-work-content\"><div class=\"al-work-tags\"><span class=\"al-work-tag\">Portfolio<\/span><span class=\"al-work-tag\">Interactions<\/span><\/div><div class=\"al-work-title\">Nexora<\/div><div class=\"al-work-desc\">Futuristic portfolio for a motion designer, powered by smooth transitions.<\/div><\/div><\/div>\n      <div class=\"al-work-card\"><div class=\"al-work-img\"><img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/68f617da1d06c09a4e6e68a4\/68f7dbf9e5019802742d02e4_MacBook%20Pro%2016%20(2).avif\" alt=\"Verse\" loading=\"lazy\"><\/div><div class=\"al-work-content\"><div class=\"al-work-tags\"><span class=\"al-work-tag\">UI\/UX<\/span><span class=\"al-work-tag\">Dashboard<\/span><\/div><div class=\"al-work-title\">Verse<\/div><div class=\"al-work-desc\">Dashboard concept designed for clarity and calm data storytelling.<\/div><\/div><\/div>\n      <div class=\"al-work-card\"><div class=\"al-work-img\"><img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/68f617da1d06c09a4e6e68a4\/68f7dc762211a4e399a1a3a3_Samsung%20Galaxy%20Book%204%20Ultra.avif\" alt=\"Solen\" loading=\"lazy\"><\/div><div class=\"al-work-content\"><div class=\"al-work-tags\"><span class=\"al-work-tag\">Portfolio<\/span><span class=\"al-work-tag\">Visual Design<\/span><\/div><div class=\"al-work-title\">Solen<\/div><div class=\"al-work-desc\">Personal brand site for a lifestyle photographer with cinematic visual focus.<\/div><\/div><\/div>\n    <\/div>\n    <div class=\"al-slider-shadow right\"><\/div>\n  <\/div>\n  <div class=\"al-slider-controls\"><button class=\"al-slider-btn\" id=\"al-work-prev\">&#8592;<\/button><button class=\"al-slider-btn\" id=\"al-work-next\">&#8594;<\/button><\/div>\n<\/div><\/section>\n<div class=\"al-container\"><div class=\"al-divider\"><\/div><\/div>\n\n<!-- PRICING -->\n<section class=\"al-section\" id=\"al-pricing\"><div class=\"al-container\">\n  <div class=\"al-section-heading\"><h2><span class=\"al-h-clip\"><span class=\"al-h-inner\">Two ways to <span class=\"serif\">begin.<\/span><\/span><\/span><\/h2><\/div>\n  <div class=\"al-pricing-wrap\" id=\"al-pricing-wrap\">\n    <div class=\"al-pricing-tabs\"><button class=\"al-pricing-tab active\" data-period=\"monthly\">Monthly<\/button><button class=\"al-pricing-tab\" data-period=\"yearly\">Yearly<\/button><\/div>\n    <div class=\"al-pricing-grid\">\n      <div class=\"al-plans-bg\"><\/div>\n      <div class=\"al-plan-card\">\n        <div class=\"al-plan-name\">Essential<\/div><div class=\"al-plan-tagline\">Simple, focused, effective.<\/div>\n        <div class=\"al-plan-badge\">best value<\/div>\n        <div class=\"al-plan-price\" data-monthly=\"$950\" data-yearly=\"$750\">$950<\/div>\n        <div class=\"al-plan-price-note\">Perfect for personal sites and small teams.<\/div>\n        <a href=\"#\" class=\"al-btn al-btn--fill al-contact-trigger\" style=\"width:100%\">Start with Essential<span class=\"al-btn-bg\"><\/span><\/a>\n        <div class=\"al-plan-features\"><div class=\"al-plan-features-label\">You&#8217;ll get<\/div>\n          <div class=\"al-plan-feature\"><span class=\"al-plan-check\">&#10003;<\/span> Custom one-page website design<\/div>\n          <div class=\"al-plan-feature\"><span class=\"al-plan-check\">&#10003;<\/span> Fully responsive layout<\/div>\n          <div class=\"al-plan-feature\"><span class=\"al-plan-check\">&#10003;<\/span> Light animations &amp; interactions<\/div>\n          <div class=\"al-plan-feature\"><span class=\"al-plan-check\">&#10003;<\/span> CMS setup (optional)<\/div>\n          <div class=\"al-plan-feature\"><span class=\"al-plan-check\">&#10003;<\/span> SEO-ready structure<\/div>\n        <\/div>\n        <div class=\"al-plan-gradient\"><\/div><div class=\"al-plan-gradient sm\"><\/div>\n      <\/div>\n      <div class=\"al-plan-card\">\n        <div class=\"al-plan-name\">Elevate<\/div><div class=\"al-plan-tagline\">For stories that deserve motion.<\/div>\n        <div class=\"al-plan-price\" data-monthly=\"$1,950\" data-yearly=\"$1,750\">$1,950<\/div>\n        <div class=\"al-plan-price-note\">Best for growing businesses and creative studios.<\/div>\n        <a href=\"#\" class=\"al-btn al-btn--fill al-contact-trigger\" style=\"width:100%\">Start with Elevate<span class=\"al-btn-bg\"><\/span><\/a>\n        <div class=\"al-plan-features\"><div class=\"al-plan-features-label\">You&#8217;ll get<\/div>\n          <div class=\"al-plan-feature\"><span class=\"al-plan-check\">&#10003;<\/span> Multi-page website (up to 5 pages)<\/div>\n          <div class=\"al-plan-feature\"><span class=\"al-plan-check\">&#10003;<\/span> Custom UI\/UX design<\/div>\n          <div class=\"al-plan-feature\"><span class=\"al-plan-check\">&#10003;<\/span> Advanced GSAP animations<\/div>\n          <div class=\"al-plan-feature\"><span class=\"al-plan-check\">&#10003;<\/span> CMS &amp; dynamic collections<\/div>\n          <div class=\"al-plan-feature\"><span class=\"al-plan-check\">&#10003;<\/span> Launch support &amp; training<\/div>\n        <\/div>\n        <div class=\"al-plan-gradient\"><\/div><div class=\"al-plan-gradient sm\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div><\/section>\n<div class=\"al-container\"><div class=\"al-divider\"><\/div><\/div>\n\n<!-- TESTIMONIALS -->\n<section class=\"al-section\" id=\"al-testimonials\"><div class=\"al-container\">\n  <div class=\"al-section-heading\"><h2><span class=\"al-h-clip\"><span class=\"al-h-inner\"><span class=\"serif\">Collaboration<\/span>, in their words.<\/span><\/span><\/h2><\/div>\n  <div class=\"al-testimonials-wrap\" id=\"al-test-slider\">\n    <div class=\"al-slider-shadow left\"><\/div>\n    <div class=\"al-testimonials-track\" id=\"al-test-track\">\n      <div class=\"al-testimonial-card\"><div class=\"al-testimonial-quotemark\">&ldquo;<\/div><div class=\"al-testimonial-quote\">Aluro brought our brand to life with a design that feels effortless. Every detail, from layout to motion, just fits who we are.<\/div><div class=\"al-testimonial-author\"><div class=\"al-testimonial-avatar\"><img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/68f617da1d06c09a4e6e6886\/68fa62a7c3b48ea777cda008_Professional%20Portrait.webp\" alt=\"Daniel M.\" loading=\"lazy\"><\/div><div><div class=\"al-testimonial-name\">Daniel M.<\/div><div class=\"al-testimonial-role\">Creative Director<\/div><\/div><\/div><\/div>\n      <div class=\"al-testimonial-card\"><div class=\"al-testimonial-quotemark\">&ldquo;<\/div><div class=\"al-testimonial-quote\">Working with Aluro was refreshing. Clear communication, beautiful design, and a deep understanding of what makes a website feel alive.<\/div><div class=\"al-testimonial-author\"><div class=\"al-testimonial-avatar\"><img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/68f617da1d06c09a4e6e6886\/68fa63f5ea9262d0a293d9a2_Professional%20Portrait%20(1).webp\" alt=\"Lila R.\" loading=\"lazy\"><\/div><div><div class=\"al-testimonial-name\">Lila R.<\/div><div class=\"al-testimonial-role\">CEO<\/div><\/div><\/div><\/div>\n      <div class=\"al-testimonial-card\"><div class=\"al-testimonial-quotemark\">&ldquo;<\/div><div class=\"al-testimonial-quote\">The project felt more like collaboration than outsourcing. The design captured the exact emotion we wanted our users to feel.<\/div><div class=\"al-testimonial-author\"><div class=\"al-testimonial-avatar\"><img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/68f617da1d06c09a4e6e6886\/68fa64389e475f063d5aecc9_Professional%20Portrait%20(2).webp\" alt=\"Noah B.\" loading=\"lazy\"><\/div><div><div class=\"al-testimonial-name\">Noah B.<\/div><div class=\"al-testimonial-role\">Product Lead<\/div><\/div><\/div><\/div>\n      <div class=\"al-testimonial-card\"><div class=\"al-testimonial-quotemark\">&ldquo;<\/div><div class=\"al-testimonial-quote\">Every part of the site feels intentional. Nothing overdone, nothing missing. Clean, fast, and visually stunning.<\/div><div class=\"al-testimonial-author\"><div class=\"al-testimonial-avatar\"><img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/68f617da1d06c09a4e6e6886\/68fa6487e966b3640604a0d5_Professional%20Portrait%20(3).webp\" alt=\"Sofia T.\" loading=\"lazy\"><\/div><div><div class=\"al-testimonial-name\">Sofia T.<\/div><div class=\"al-testimonial-role\">Marketing Manager<\/div><\/div><\/div><\/div>\n      <div class=\"al-testimonial-card\"><div class=\"al-testimonial-quotemark\">&ldquo;<\/div><div class=\"al-testimonial-quote\">Aluro translated a loose idea into a full visual experience. It&#8217;s rare to find someone who gets both the aesthetic and the strategy.<\/div><div class=\"al-testimonial-author\"><div class=\"al-testimonial-avatar\"><img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/68f617da1d06c09a4e6e6886\/68fa6487dadd2e8f50211fdf_Confident%20Man%20in%20Suit.webp\" alt=\"Julian P.\" loading=\"lazy\"><\/div><div><div class=\"al-testimonial-name\">Julian P.<\/div><div class=\"al-testimonial-role\">Co-founder<\/div><\/div><\/div><\/div>\n      <div class=\"al-testimonial-card\"><div class=\"al-testimonial-quotemark\">&ldquo;<\/div><div class=\"al-testimonial-quote\">From day one, the communication, structure, and execution were flawless. The end result feels premium and uniquely ours.<\/div><div class=\"al-testimonial-author\"><div class=\"al-testimonial-avatar\"><img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/68f617da1d06c09a4e6e6886\/68fa6487836002a019c6f04b_Professional%20Portrait%20(4).webp\" alt=\"Elise K.\" loading=\"lazy\"><\/div><div><div class=\"al-testimonial-name\">Elise K.<\/div><div class=\"al-testimonial-role\">Studio Owner<\/div><\/div><\/div><\/div>\n    <\/div>\n    <div class=\"al-slider-shadow right\"><\/div>\n  <\/div>\n  <div class=\"al-slider-controls\"><button class=\"al-slider-btn\" id=\"al-test-prev\">&#8592;<\/button><button class=\"al-slider-btn\" id=\"al-test-next\">&#8594;<\/button><\/div>\n<\/div><\/section>\n<div class=\"al-container\"><div class=\"al-divider\"><\/div><\/div>\n\n<!-- FAQ -->\n<section class=\"al-section\" id=\"al-faq\"><div class=\"al-container\">\n  <div class=\"al-section-heading\"><h2><span class=\"al-h-clip\"><span class=\"al-h-inner\">Questions, <span class=\"serif\">answered.<\/span><\/span><\/span><\/h2><\/div>\n  <div class=\"al-faq-wrap\" id=\"al-faq-wrap\">\n    <div class=\"al-faq-item\"><button class=\"al-faq-trigger\"><span>What is Aluro?<\/span><span class=\"al-faq-icon\"><\/span><\/button><div class=\"al-faq-answer\"><div class=\"al-faq-answer-inner\">Aluro is a portfolio template built for creative professionals who want a clean, minimal, and impactful online presence. It features smooth interactions, dark aesthetics, and a layout that highlights your work beautifully.<\/div><\/div><\/div>\n    <div class=\"al-faq-item\"><button class=\"al-faq-trigger\"><span>Who is this template for?<\/span><span class=\"al-faq-icon\"><\/span><\/button><div class=\"al-faq-answer\"><div class=\"al-faq-answer-inner\">Ideal for UI\/UX designers, freelancers, and creatives who want to quickly launch a stylish personal portfolio without starting from scratch. Perfect for a sleek one-page layout that focuses on visuals, storytelling, and personality.<\/div><\/div><\/div>\n    <div class=\"al-faq-item\"><button class=\"al-faq-trigger\"><span>Can I replace the images and animations?<\/span><span class=\"al-faq-icon\"><\/span><\/button><div class=\"al-faq-answer\"><div class=\"al-faq-answer-inner\">Absolutely. The template is built to be fully customisable. You can swap every image, update animations, and adjust layout styles directly without any complex tooling.<\/div><\/div><\/div>\n    <div class=\"al-faq-item\"><button class=\"al-faq-trigger\"><span>Can you help me customise this?<\/span><span class=\"al-faq-icon\"><\/span><\/button><div class=\"al-faq-answer\"><div class=\"al-faq-answer-inner\">Of course. If you&#8217;d like to take it further \u2014 redesign sections, add CMS features, or create custom animations \u2014 just get in touch through the contact form.<\/div><\/div><\/div>\n    <div class=\"al-faq-item\"><button class=\"al-faq-trigger\"><span>Is it optimised for performance?<\/span><span class=\"al-faq-icon\"><\/span><\/button><div class=\"al-faq-answer\"><div class=\"al-faq-answer-inner\">Yes. Every section is optimised for performance, accessibility, and smooth responsiveness across all devices. It&#8217;s clean, fast, and easy to maintain.<\/div><\/div><\/div>\n  <\/div>\n<\/div><\/section>\n<div class=\"al-container\"><div class=\"al-divider\"><\/div><\/div>\n\n<!-- CTA -->\n<section class=\"al-section al-cta-section\">\n  <div class=\"al-cta-overlay\"><\/div><div class=\"al-cta-overlay second\"><\/div><div class=\"al-cta-overlay third\"><\/div>\n  <div class=\"al-container\"><div class=\"al-cta-content\" id=\"al-cta-content\">\n    <h2>Your story, <span class=\"serif\">well designed.<\/span><\/h2>\n    <p class=\"al-body\">Every brand has a story worth telling \u2014 let&#8217;s design yours with intention and style.<\/p>\n    <div class=\"al-cta-btns\">\n      <a href=\"#\" class=\"al-btn al-btn--fill al-contact-trigger\">Let&#8217;s Collaborate<span class=\"al-btn-bg\"><\/span><\/a>\n      <a href=\"#al-work\" class=\"al-btn\">View Portfolio<span class=\"al-btn-bg\"><\/span><\/a>\n    <\/div>\n  <\/div><\/div>\n<\/section>\n\n<!-- PROGRESSIVE BLUR -->\n<div class=\"al-prog-blur\"><\/div>\n\n<!-- FOOTER -->\n<footer class=\"al-footer\">\n  <div class=\"al-footer-glow\"><\/div>\n  <div class=\"al-container\">\n    <div class=\"al-footer-top\">\n      <div class=\"al-footer-brand\">\n        <div class=\"al-footer-avatar\"><img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/68f617da1d06c09a4e6e6886\/68fa1ec116ca06f1e8ca661b_Man%20in%20Blue%20Suit%20(1).avif\" alt=\"Avatar\"><\/div>\n        <div class=\"al-footer-bio\">Every project starts with a story. I turn those stories into digital experiences that feel effortless and expressive.<\/div>\n        <div class=\"al-footer-socials\"><a href=\"#\" class=\"al-footer-social\">IG<\/a><a href=\"#\" class=\"al-footer-social\">DR<\/a><a href=\"#\" class=\"al-footer-social\">LI<\/a><a href=\"#\" class=\"al-footer-social\">X<\/a><\/div>\n      <\/div>\n      <div><div class=\"al-footer-col-title\">Company<\/div><div class=\"al-footer-links\">\n        <a href=\"#al-services\" class=\"al-footer-link\">Services<\/a><a href=\"#al-work\" class=\"al-footer-link\">Case Studies<\/a>\n        <a href=\"#al-testimonials\" class=\"al-footer-link\">Testimonials<\/a><a href=\"#al-pricing\" class=\"al-footer-link\">Pricing<\/a>\n        <a href=\"#al-faq\" class=\"al-footer-link\">FAQ<\/a><a href=\"#\" class=\"al-footer-link al-contact-trigger\">Contact<\/a>\n      <\/div><\/div>\n      <div><div class=\"al-footer-col-title\">Template<\/div><div class=\"al-footer-links\">\n        <a href=\"#\" class=\"al-footer-link\">Style Guide<\/a><a href=\"#\" class=\"al-footer-link\">Licenses<\/a><a href=\"#\" class=\"al-footer-link\">Changelog<\/a>\n      <\/div><\/div>\n    <\/div>\n    <div class=\"al-footer-bottom\">\n      <div class=\"al-footer-copy\">Aluro. All rights reserved. &copy; 2025<\/div>\n      <div class=\"al-footer-copy\">Made with Gutenberg &amp; Kadence<\/div>\n    <\/div>\n  <\/div>\n<\/footer>\n\n<!-- CONTACT POPUP -->\n<div class=\"al-popup-overlay\" id=\"al-popup\"><div class=\"al-popup\">\n  <button class=\"al-popup-close\" id=\"al-popup-close\">&times;<\/button>\n  <div style=\"margin-bottom:2rem\"><h2 style=\"font-size:1.5rem;font-family:var(--sans);font-weight:500\">Get in touch<\/h2><\/div>\n  <form id=\"al-contact-form\">\n    <div class=\"al-form-row\">\n      <div class=\"al-form-group\"><label class=\"al-form-label\">Name<\/label><input class=\"al-form-input\" type=\"text\" placeholder=\"John Doe\" required><\/div>\n      <div class=\"al-form-group\"><label class=\"al-form-label\">Email<\/label><input class=\"al-form-input\" type=\"email\" placeholder=\"Email\" required><\/div>\n    <\/div>\n    <div class=\"al-form-group\"><label class=\"al-form-label\">Subject<\/label><select class=\"al-form-select\"><option value=\"\">Type of project<\/option><option>Website Design<\/option><option>UI\/UX Design<\/option><option>Visual Direction<\/option><option>Other<\/option><\/select><\/div>\n    <div class=\"al-form-group\"><label class=\"al-form-label\">Message<\/label><textarea class=\"al-form-textarea\" placeholder=\"Tell us about your project\"><\/textarea><\/div>\n    <div class=\"al-form-group\"><label class=\"al-form-label\">Budget<\/label>\n      <div class=\"al-form-budget\"><button type=\"button\" class=\"al-form-budget-option\">$2,000<\/button><button type=\"button\" class=\"al-form-budget-option\">$2k\u2013$5k<\/button><button type=\"button\" class=\"al-form-budget-option\">$5k\u2013$10k<\/button><button type=\"button\" class=\"al-form-budget-option\">$10,000+<\/button><button type=\"button\" class=\"al-form-budget-option\">Not Sure<\/button><\/div>\n    <\/div>\n    <button type=\"submit\" class=\"al-btn al-btn--fill\" style=\"width:100%\">Send Inquiry<span class=\"al-btn-bg\"><\/span><\/button>\n  <\/form>\n<\/div><\/div>\n<\/div>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     JAVASCRIPT\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script>\n(function(){\n  'use strict';\n\n  \/\/ \u2500\u2500 LENIS \u2500\u2500\n  var lenis=new Lenis({lerp:0.1,wheelMultiplier:0.6,smoothTouch:false});\n  function raf(t){lenis.raf(t);requestAnimationFrame(raf)}\n  requestAnimationFrame(raf);\n\n  \/\/ \u2500\u2500 GSAP \u2500\u2500\n  gsap.registerPlugin(ScrollTrigger);\n  lenis.on('scroll',ScrollTrigger.update);\n  gsap.ticker.add(function(t){lenis.raf(t*1000)});\n  gsap.ticker.lagSmoothing(0);\n\n  \/\/ \u2500\u2500 NAV SCROLL \u2500\u2500\n  var nav=document.getElementById('al-nav');\n  window.addEventListener('scroll',function(){nav.classList.toggle('scrolled',window.scrollY>50)});\n\n  \/\/ \u2500\u2500 MOBILE MENU \u2500\u2500\n  var mt=document.getElementById('al-menu-toggle'),mm=document.getElementById('al-mobile-menu'),mc=document.getElementById('al-menu-close');\n  if(mt){\n    mt.addEventListener('click',function(){mm.classList.add('open');lenis.stop()});\n    mc.addEventListener('click',function(){mm.classList.remove('open');lenis.start()});\n    mm.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){mm.classList.remove('open');lenis.start()})});\n  }\n\n  \/\/ \u2500\u2500 CONTACT POPUP \u2500\u2500\n  var popup=document.getElementById('al-popup');\n  document.querySelectorAll('.al-contact-trigger,#al-contact-open').forEach(function(el){\n    el.addEventListener('click',function(e){e.preventDefault();popup.classList.add('open');lenis.stop()});\n  });\n  document.getElementById('al-popup-close').addEventListener('click',function(){popup.classList.remove('open');lenis.start()});\n  popup.addEventListener('click',function(e){if(e.target===popup){popup.classList.remove('open');lenis.start()}});\n\n  \/\/ Budget btns\n  document.querySelectorAll('.al-form-budget-option').forEach(function(b){\n    b.addEventListener('click',function(){document.querySelectorAll('.al-form-budget-option').forEach(function(x){x.classList.remove('selected')});b.classList.add('selected')});\n  });\n\n  \/\/ \u2500\u2500 SLIDER \u2500\u2500\n  function createSlider(trackId,prevId,nextId,autoplay){\n    var track=document.getElementById(trackId),prev=document.getElementById(prevId),next=document.getElementById(nextId);\n    if(!track||!prev||!next)return;\n    var idx=0,cards=track.children;\n    function cw(){return cards[0].offsetWidth+24}\n    function mx(){return Math.max(0,cards.length-Math.floor(track.parentElement.offsetWidth\/cw()))}\n    function go(){track.style.transform='translateX('+(-idx*cw())+'px)'}\n    next.addEventListener('click',function(){idx=Math.min(idx+1,mx());go()});\n    prev.addEventListener('click',function(){idx=Math.max(idx-1,0);go()});\n    if(autoplay){setInterval(function(){idx=idx>=mx()?0:idx+1;go()},4000)}\n  }\n  createSlider('al-work-track','al-work-prev','al-work-next',true);\n  createSlider('al-test-track','al-test-prev','al-test-next',true);\n\n  \/\/ \u2500\u2500 PRICING TABS \u2500\u2500\n  document.querySelectorAll('.al-pricing-tab').forEach(function(tab){\n    tab.addEventListener('click',function(){\n      document.querySelectorAll('.al-pricing-tab').forEach(function(t){t.classList.remove('active')});\n      tab.classList.add('active');\n      var p=tab.getAttribute('data-period');\n      document.querySelectorAll('.al-plan-price').forEach(function(el){\n        el.style.opacity=0;\n        setTimeout(function(){el.textContent=el.getAttribute('data-'+p);el.style.opacity=1},200);\n      });\n    });\n  });\n\n  \/\/ \u2500\u2500 FAQ \u2500\u2500\n  document.querySelectorAll('.al-faq-trigger').forEach(function(trig){\n    trig.addEventListener('click',function(){\n      var item=trig.parentElement,ans=item.querySelector('.al-faq-answer'),open=item.classList.contains('open');\n      document.querySelectorAll('.al-faq-item').forEach(function(fi){fi.classList.remove('open');fi.querySelector('.al-faq-answer').style.maxHeight='0'});\n      if(!open){item.classList.add('open');ans.style.maxHeight=ans.scrollHeight+'px'}\n    });\n  });\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ GSAP ANIMATIONS\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n  \/\/ Hero entrance timeline\n  var heroTL=gsap.timeline({delay:0.2});\n\n  heroTL\n    .to('#al-hero-avatar',{opacity:1,duration:0.6,ease:'power2.out'})\n    .to('#al-hero-avatar img:nth-child(1)',{opacity:0.15,x:'-50%',y:'-50%',rotation:-6,scale:0.95,duration:0.8,ease:'power3.out'},'-=0.3')\n    .to('#al-hero-avatar img:nth-child(2)',{opacity:0.35,x:'-50%',y:'-50%',rotation:3,scale:0.97,duration:0.8,ease:'power3.out'},'-=0.6')\n    .to('#al-hero-avatar img:nth-child(3)',{opacity:1,x:'-50%',y:'-50%',rotation:0,scale:1,duration:0.8,ease:'power3.out'},'-=0.6')\n    .to('#al-marquee',{opacity:1,duration:1,ease:'power2.out'},'-=0.4')\n    .to('#al-tagline',{opacity:1,y:0,duration:0.8,ease:'power3.out'},'-=0.5');\n\n  \/\/ \u2500\u2500 HERO MOUSE-FOLLOW PARALLAX \u2500\u2500\n  var heroSection=document.querySelector('.al-hero');\n  var avatarWrap=document.getElementById('al-hero-avatar');\n  var avatarImgs=avatarWrap?avatarWrap.querySelectorAll('img'):[];\n  var mouseTarget={x:0,y:0};\n  var mouseCurrent={x:0,y:0};\n  var heroActive=true;\n\n  \/\/ Depth config: [translateX multiplier, translateY multiplier, rotation multiplier]\n  var depths=[\n    {tx:25,ty:15,rot:8},    \/\/ back image \u2014 moves most\n    {tx:15,ty:10,rot:5},    \/\/ middle image\n    {tx:8,ty:5,rot:2}       \/\/ front image \u2014 moves least (anchored feel)\n  ];\n\n  if(heroSection){\n    heroSection.addEventListener('mousemove',function(e){\n      var rect=heroSection.getBoundingClientRect();\n      \/\/ Normalize to -1 to 1 from center\n      mouseTarget.x=(e.clientX-rect.left)\/rect.width*2-1;\n      mouseTarget.y=(e.clientY-rect.top)\/rect.height*2-1;\n    });\n\n    heroSection.addEventListener('mouseleave',function(){\n      mouseTarget.x=0;\n      mouseTarget.y=0;\n    });\n\n    \/\/ Smooth lerp animation loop\n    function animateParallax(){\n      if(!heroActive)return;\n      \/\/ Lerp toward target\n      mouseCurrent.x+=(mouseTarget.x-mouseCurrent.x)*0.08;\n      mouseCurrent.y+=(mouseTarget.y-mouseCurrent.y)*0.08;\n\n      avatarImgs.forEach(function(img,i){\n        var d=depths[i]||depths[2];\n        var baseRotations=[-6,3,0];\n        var baseScales=[0.95,0.97,1];\n        var baseOpacities=[0.15,0.35,1];\n\n        var tx=mouseCurrent.x*d.tx;\n        var ty=mouseCurrent.y*d.ty;\n        var rot=baseRotations[i]+mouseCurrent.x*d.rot;\n        var sc=baseScales[i];\n\n        \/\/ Only apply if entrance animation is done (opacity > 0)\n        if(parseFloat(getComputedStyle(img).opacity)>0.05){\n          img.style.transform='translate(calc(-50% + '+tx+'px), calc(-50% + '+ty+'px)) rotate('+rot+'deg) scale('+sc+')';\n        }\n      });\n\n      requestAnimationFrame(animateParallax);\n    }\n    \/\/ Start after entrance animation completes\n    setTimeout(animateParallax,1800);\n\n    \/\/ Pause when scrolled away for performance\n    var heroObs=new IntersectionObserver(function(entries){\n      heroActive=entries[0].isIntersecting;\n      if(heroActive)animateParallax();\n    },{threshold:0.1});\n    heroObs.observe(heroSection);\n  }\n\n  \/\/ Heading reveals\n  document.querySelectorAll('.al-h-inner').forEach(function(el){\n    gsap.to(el,{\n      y:0,duration:1,ease:'power4.out',\n      scrollTrigger:{trigger:el.closest('.al-section-heading'),start:'top 85%'}\n    });\n  });\n\n  \/\/ Service cards\n  gsap.to('.al-service-card',{opacity:1,y:0,duration:0.7,stagger:0.1,ease:'power3.out',scrollTrigger:{trigger:'.al-services-grid',start:'top 80%'}});\n\n  \/\/ Blur-in sections\n  ['#al-work-slider','#al-pricing-wrap','#al-test-slider','#al-faq-wrap','#al-cta-content'].forEach(function(sel){\n    gsap.to(sel,{opacity:1,filter:'blur(0px)',duration:1,ease:'power2.out',scrollTrigger:{trigger:sel,start:'top 80%'}});\n  });\n\n  \/\/ Footer links stagger\n  gsap.from('.al-footer-link',{opacity:0,y:10,duration:0.4,stagger:0.05,ease:'power2.out',scrollTrigger:{trigger:'.al-footer',start:'top 90%'}});\n\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Services Work Pricing FAQ Contact &#9776; &times; ServicesWork PricingFAQ Contact ALURO\u00aeALURO\u00aeALURO\u00ae ALURO\u00aeALURO\u00aeALURO\u00ae ALURO\u00aeALURO\u00aeALURO\u00ae Designing Quiet, Confident Digital Experiences SpotifyAirbnbNotionStripeFigma SpotifyAirbnbNotionStripeFigma SpotifyAirbnbNotionStripeFigma SpotifyAirbnbNotionStripeFigma What I can help with. 01 &#9998; Website Design I design modern, minimal websites that balance beauty with usability. Each layout is built to tell a story, guide visitors naturally, and feel effortless&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":true,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/muddev.co.za\/test-space\/wp-json\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/muddev.co.za\/test-space\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/muddev.co.za\/test-space\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/muddev.co.za\/test-space\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/muddev.co.za\/test-space\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":3,"href":"https:\/\/muddev.co.za\/test-space\/wp-json\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/muddev.co.za\/test-space\/wp-json\/wp\/v2\/pages\/13\/revisions\/16"}],"wp:attachment":[{"href":"https:\/\/muddev.co.za\/test-space\/wp-json\/wp\/v2\/media?parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}