{"id":17,"date":"2026-05-26T06:49:23","date_gmt":"2026-05-26T06:49:23","guid":{"rendered":"https:\/\/dms4us.com\/?page_id=17"},"modified":"2026-05-26T06:54:41","modified_gmt":"2026-05-26T06:54:41","slug":"elementor-17","status":"publish","type":"page","link":"https:\/\/dms4us.com\/?page_id=17","title":{"rendered":"Elementor #17"},"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\nAeon \u2014 Venture Past Our Sky<\/title>\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=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap\" rel=\"stylesheet\" \/>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<script src=\"https:\/\/unpkg.com\/react@18.3.1\/umd\/react.development.js\" integrity=\"sha384-hD6\/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu\/6onKUg4lLsHAs9EBPT82L\" crossorigin=\"anonymous\"><\/script>\n<script src=\"https:\/\/unpkg.com\/react-dom@18.3.1\/umd\/react-dom.development.js\" integrity=\"sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm\" crossorigin=\"anonymous\"><\/script>\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone@7.29.0\/babel.min.js\" integrity=\"sha384-m08KidiNqLdpJqLq95G\/LEi8Qvjl\/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y\" crossorigin=\"anonymous\"><\/script>\n<script src=\"https:\/\/unpkg.com\/framer-motion@11.11.17\/dist\/framer-motion.js\"><\/script>\n<script>window.Motion = window.FramerMotion;<\/script>\n<script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n heading: [\"'Instrument Serif'\", \"serif\"],\n body: [\"'Barlow'\", \"sans-serif\"],\n },\n borderRadius: {\n DEFAULT: \"9999px\",\n },\n },\n },\n };\n<\/script>\n<style>\n *, *::before, *::after { box-sizing: border-box; }\n html, body { margin: 0; padding: 0; background: #000; color: #fff; }\n #root { background: #000; }\n\n .liquid-glass {\n background: rgba(255,255,255,0.01);\n background-blend-mode: luminosity;\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n border: none;\n box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);\n position: relative;\n overflow: hidden;\n }\n .liquid-glass::before {\n content: \"\";\n position: absolute; inset: 0;\n border-radius: inherit;\n padding: 1.4px;\n background: linear-gradient(180deg,\n rgba(255,255,255,0.45) 0%,\n rgba(255,255,255,0.15) 20%,\n rgba(255,255,255,0) 40%,\n rgba(255,255,255,0) 60%,\n rgba(255,255,255,0.15) 80%,\n rgba(255,255,255,0.45) 100%);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n pointer-events: none;\n }\n\n .liquid-glass-strong {\n background: rgba(255,255,255,0.01);\n background-blend-mode: luminosity;\n backdrop-filter: blur(50px);\n -webkit-backdrop-filter: blur(50px);\n border: none;\n box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15);\n position: relative;\n overflow: hidden;\n }\n .liquid-glass-strong::before {\n content: \"\";\n position: absolute; inset: 0;\n border-radius: inherit;\n padding: 1.4px;\n background: linear-gradient(180deg,\n rgba(255,255,255,0.5) 0%,\n rgba(255,255,255,0.2) 20%,\n rgba(255,255,255,0) 40%,\n rgba(255,255,255,0) 60%,\n rgba(255,255,255,0.2) 80%,\n rgba(255,255,255,0.5) 100%);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n pointer-events: none;\n }\n\n \/* Suppress Framer Motion list key warnings *\/\n .fm-suppress {}\n<\/style>\n<\/head>\n<body>\n<div id=\"root\"><\/div>\n\n<script type=\"text\/babel\">\nconst { useRef, useEffect, useState, useCallback } = React;\nconst { motion, useInView } = window.Motion;\n\n\/\/ Suppress benign Framer Motion warnings\nconst origError = console.error;\nconsole.error = (...args) => {\n if (typeof args[0] === 'string' && args[0].includes('key')) return;\n origError(...args);\n};\n\n\/\/ \u2500\u2500\u2500 FadingVideo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction FadingVideo({ src, className, style }) {\n const videoRef = useRef(null);\n const rafRef = useRef(null);\n const fadingOutRef = useRef(false);\n const FADE_MS = 500;\n const FADE_OUT_LEAD = 0.55;\n\n const fadeTo = useCallback((video, target, duration) => {\n if (rafRef.current) cancelAnimationFrame(rafRef.current);\n const start = performance.now();\n const startOpacity = parseFloat(video.style.opacity) || 0;\n function step(now) {\n const elapsed = now - start;\n const progress = Math.min(elapsed \/ duration, 1);\n video.style.opacity = startOpacity + (target - startOpacity) * progress;\n if (progress < 1) {\n rafRef.current = requestAnimationFrame(step);\n } else {\n video.style.opacity = target;\n rafRef.current = null;\n }\n }\n rafRef.current = requestAnimationFrame(step);\n }, []);\n\n useEffect(() => {\n const video = videoRef.current;\n if (!video) return;\n video.style.opacity = '0';\n\n function onLoadedData() {\n video.style.opacity = '0';\n video.play().catch(() => {});\n fadeTo(video, 1, FADE_MS);\n }\n function onTimeUpdate() {\n if (!fadingOutRef.current && video.duration && video.duration - video.currentTime <= FADE_OUT_LEAD && video.duration - video.currentTime > 0) {\n fadingOutRef.current = true;\n fadeTo(video, 0, FADE_MS);\n }\n }\n function onEnded() {\n video.style.opacity = '0';\n setTimeout(() => {\n video.currentTime = 0;\n video.play().catch(() => {});\n fadingOutRef.current = false;\n fadeTo(video, 1, FADE_MS);\n }, 100);\n }\n\n video.addEventListener('loadeddata', onLoadedData);\n video.addEventListener('timeupdate', onTimeUpdate);\n video.addEventListener('ended', onEnded);\n\n return () => {\n if (rafRef.current) cancelAnimationFrame(rafRef.current);\n video.removeEventListener('loadeddata', onLoadedData);\n video.removeEventListener('timeupdate', onTimeUpdate);\n video.removeEventListener('ended', onEnded);\n };\n }, [fadeTo]);\n\n return (\n <video\n ref={videoRef}\n src={src}\n autoPlay\n muted\n playsInline\n preload=\"auto\"\n className={className}\n style={{ ...style, opacity: 0 }}\n \/>\n );\n}\n\n\/\/ \u2500\u2500\u2500 Icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction ArrowUpRight({ size = 24 }) {\n return (\n <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <path d=\"M7 17L17 7\" \/><path d=\"M7 7h10v10\" \/>\n <\/svg>\n );\n}\nfunction PlayIcon({ size = 24 }) {\n return (\n <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <polygon points=\"6 4 20 12 6 20 6 4\" \/>\n <\/svg>\n );\n}\n\n\/\/ \u2500\u2500\u2500 BlurText \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction BlurText({ text, className }) {\n const ref = useRef(null);\n const isInView = useInView(ref, { amount: 0.1, once: true });\n const words = text.split(' ');\n\n return (\n <p ref={ref} style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', rowGap: '0.1em' }} className={className}>\n {words.map((word, i) => (\n <motion.span\n key={i}\n initial={{ filter: 'blur(10px)', opacity: 0, y: 50 }}\n animate={isInView ? {\n filter: ['blur(10px)', 'blur(5px)', 'blur(0px)'],\n opacity: [0, 0.5, 1],\n y: [50, -5, 0],\n } : {}}\n transition={{\n duration: 0.7,\n times: [0, 0.5, 1],\n ease: 'easeOut',\n delay: (i * 100) \/ 1000,\n }}\n style={{ display: 'inline-block', marginRight: '0.28em' }}\n >\n {word}\n <\/motion.span>\n ))}\n <\/p>\n );\n}\n\n\/\/ \u2500\u2500\u2500 Navbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction Navbar() {\n return (\n <nav style={{ position: 'fixed', top: '1rem', left: 0, right: 0, zIndex: 50, paddingLeft: '2rem', paddingRight: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>\n {\/* Logo *\/}\n <div className=\"liquid-glass\" style={{ width: 48, height: 48, borderRadius: '9999px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>\n <span style={{ fontFamily: \"'Instrument Serif', serif\", fontStyle: 'italic', color: '#fff', fontSize: '1.25rem' }}>a<\/span>\n <\/div>\n\n {\/* Center nav \u2014 desktop only *\/}\n <div className=\"liquid-glass\" style={{ borderRadius: '9999px', padding: '0.375rem 0.375rem', display: 'flex', alignItems: 'center', gap: '0', display: 'none' }} id=\"desktop-nav\">\n {['Home','Voyages','Worlds','Innovation','Plan Launch'].map(link => (\n <a key={link} href=\"#\" style={{ fontFamily: \"'Barlow', sans-serif\", fontWeight: 500, fontSize: '0.875rem', color: 'rgba(255,255,255,0.9)', padding: '0.5rem 0.75rem', textDecoration: 'none', whiteSpace: 'nowrap' }}>{link}<\/a>\n ))}\n <button style={{ background: '#fff', color: '#000', borderRadius: '9999px', padding: '0.5rem 1rem', fontSize: '0.875rem', fontWeight: 500, fontFamily: \"'Barlow', sans-serif\", border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '0.25rem', whiteSpace: 'nowrap', marginLeft: '0.25rem' }}>\n Claim a Spot <ArrowUpRight size={16} \/>\n <\/button>\n <\/div>\n\n {\/* Spacer *\/}\n <div style={{ width: 48, height: 48, flexShrink: 0 }} \/>\n\n <style>{`\n @media (min-width: 1024px) {\n #desktop-nav { display: flex !important; }\n }\n `}<\/style>\n <\/nav>\n );\n}\n\n\/\/ \u2500\u2500\u2500 Hero Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction HeroSection() {\n const fadeIn = (delay) => ({\n initial: { filter: 'blur(10px)', opacity: 0, y: 20 },\n animate: { filter: 'blur(0px)', opacity: 1, y: 0 },\n transition: { duration: 0.7, ease: 'easeOut', delay },\n });\n\n return (\n <section style={{ position: 'relative', minHeight: '100vh', background: '#000', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>\n {\/* Background video *\/}\n <FadingVideo\n src=\"https:\/\/d8j0ntlcm91z4.cloudfront.net\/user_38xzZboKViGWJOttwIXH07lWA1P\/hf_20260418_080021_d598092b-c4c2-4e53-8e46-94cf9064cd50.mp4\"\n className=\"absolute left-1\/2 top-0 -translate-x-1\/2 object-cover object-top\"\n style={{ width: '120%', height: '120%', zIndex: 0 }}\n \/>\n\n {\/* Z-10 layer *\/}\n <div style={{ position: 'relative', zIndex: 10, display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>\n <Navbar \/>\n\n {\/* Hero content *\/}\n <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', paddingTop: '6rem', paddingLeft: '1rem', paddingRight: '1rem', textAlign: 'center' }}>\n\n {\/* Badge *\/}\n <motion.div {...fadeIn(0.4)} className=\"liquid-glass\" style={{ borderRadius: '9999px', padding: '0.25rem 0.5rem', display: 'inline-flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1.5rem' }}>\n <span style={{ background: '#fff', color: '#000', borderRadius: '9999px', padding: '0.25rem 0.75rem', fontSize: '0.75rem', fontWeight: 600, fontFamily: \"'Barlow', sans-serif\", lineHeight: 1.4 }}>New<\/span>\n <span style={{ fontSize: '0.875rem', color: 'rgba(255,255,255,0.9)', fontFamily: \"'Barlow', sans-serif\", paddingRight: '0.75rem' }}>Maiden Crewed Voyage to Mars Arrives 2026<\/span>\n <\/motion.div>\n\n {\/* Headline *\/}\n <BlurText\n text=\"Venture Past Our Sky Across the Universe\"\n className=\"font-heading text-white max-w-2xl\"\n style={{ fontSize: 'clamp(3rem,8vw,5.5rem)', fontStyle: 'italic', lineHeight: 0.8, letterSpacing: '-4px', justifyContent: 'center', marginBottom: '1rem' }}\n \/>\n <style>{`\n .blur-headline {\n font-family: 'Instrument Serif', serif;\n font-style: italic;\n font-size: clamp(3rem, 8vw, 5.5rem);\n line-height: 0.8;\n letter-spacing: -4px;\n color: #fff;\n max-width: 42rem;\n }\n `}<\/style>\n\n {\/* Subheading *\/}\n <motion.p {...fadeIn(0.8)} style={{ marginTop: '1rem', fontSize: 'clamp(0.875rem,2vw,1rem)', color: '#fff', maxWidth: '42rem', fontFamily: \"'Barlow', sans-serif\", fontWeight: 300, lineHeight: 1.4 }}>\n Discover the universe in ways once unimaginable. Our pioneering vessels and breakthrough engineering bring deep-space exploration within reach\u2014secure and extraordinary.\n <\/motion.p>\n\n {\/* CTAs *\/}\n <motion.div {...fadeIn(1.1)} style={{ display: 'flex', alignItems: 'center', gap: '1.5rem', marginTop: '1.5rem', flexWrap: 'wrap', justifyContent: 'center' }}>\n <button className=\"liquid-glass-strong\" style={{ borderRadius: '9999px', padding: '0.625rem 1.25rem', fontSize: '0.875rem', fontWeight: 500, color: '#fff', fontFamily: \"'Barlow', sans-serif\", cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '0.375rem', border: 'none', background: 'transparent' }}>\n Start Your Voyage <ArrowUpRight size={20} \/>\n <\/button>\n <button style={{ background: 'none', border: 'none', color: '#fff', fontFamily: \"'Barlow', sans-serif\", fontSize: '0.875rem', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '0.375rem' }}>\n View Liftoff <PlayIcon size={16} \/>\n <\/button>\n <\/motion.div>\n\n {\/* Stats *\/}\n <motion.div {...fadeIn(1.3)} style={{ display: 'flex', alignItems: 'stretch', gap: '1rem', marginTop: '2rem', flexWrap: 'wrap', justifyContent: 'center' }}>\n {[\n {\n icon: (\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/>\n <\/svg>\n ),\n value: '34.5 Min',\n label: 'Average Videos Watch Time',\n },\n {\n icon: (\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"\/>\n <path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/>\n <\/svg>\n ),\n value: '2.8B+',\n label: 'Users Across the Globe',\n },\n ].map((stat, i) => (\n <div key={i} className=\"liquid-glass\" style={{ padding: '1.25rem', width: 220, borderRadius: '1.25rem', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: '0.75rem' }}>\n <div>{stat.icon}<\/div>\n <div>\n <div style={{ fontFamily: \"'Instrument Serif', serif\", fontStyle: 'italic', color: '#fff', fontSize: '2.25rem', letterSpacing: '-1px', lineHeight: 1 }}>{stat.value}<\/div>\n <div style={{ fontSize: '0.75rem', color: '#fff', fontFamily: \"'Barlow', sans-serif\", fontWeight: 300, marginTop: '0.5rem' }}>{stat.label}<\/div>\n <\/div>\n <\/div>\n ))}\n <\/motion.div>\n <\/div>\n\n {\/* Partners *\/}\n <motion.div {...fadeIn(1.4)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem', paddingBottom: '2rem', paddingTop: '1rem' }}>\n <div className=\"liquid-glass\" style={{ borderRadius: '9999px', padding: '0.25rem 0.875rem', fontSize: '0.75rem', fontWeight: 500, color: '#fff', fontFamily: \"'Barlow', sans-serif\" }}>\n Collaborating with top aerospace pioneers globally\n <\/div>\n <div style={{ display: 'flex', gap: 'clamp(3rem,6vw,4rem)', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center' }}>\n {['Aeon','Vela','Apex','Orbit','Zeno'].map(name => (\n <span key={name} style={{ fontFamily: \"'Instrument Serif', serif\", fontStyle: 'italic', color: '#fff', fontSize: 'clamp(1.5rem,3vw,1.875rem)', letterSpacing: '-0.5px' }}>{name}<\/span>\n ))}\n <\/div>\n <\/motion.div>\n <\/div>\n <\/section>\n );\n}\n\n\/\/ \u2500\u2500\u2500 Capabilities Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction CapabilitiesSection() {\n const cards = [\n {\n iconPath: \"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21H5Zm1-4h12l-3.75-5-3 4L9 13l-3 4Z\",\n tags: ['Natural Context','Photo Realism','Infinite Settings','Eco-Vibe'],\n title: 'AI Scenery',\n body: 'AI analyzes your product to create indistinguishable natural environments \u2014 from Icelandic cliffs to misty forests.',\n },\n {\n iconPath: \"M4 6.47 5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.89-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4Z\",\n tags: ['Scale Fast','Visual Consistency','Time Saver','Ready to Post'],\n title: 'Batch Production',\n body: 'Style your entire product line in minutes. Create a unified visual identity for catalogues and social media without weeks of retouching.',\n },\n {\n iconPath: \"M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1Zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7Z\",\n tags: ['Ray Tracing','Physical Shadows','Studio Quality','Sunlight Sync'],\n title: 'Smart Lighting',\n body: 'Automatic lighting and material adjustment. Achieve flawless integration with realistic shadows and sunlight.',\n },\n ];\n\n return (\n <section style={{ position: 'relative', minHeight: '100vh', background: '#000', overflow: 'hidden' }}>\n <FadingVideo\n src=\"https:\/\/d8j0ntlcm91z4.cloudfront.net\/user_38xzZboKViGWJOttwIXH07lWA1P\/hf_20260418_094631_d30ab262-45ee-4b7d-99f3-5d5848c8ef13.mp4\"\n className=\"absolute inset-0 w-full h-full object-cover\"\n style={{ zIndex: 0 }}\n \/>\n\n <div style={{ position: 'relative', zIndex: 10, padding: 'clamp(1.5rem,5vw,2.5rem) clamp(1.5rem,5vw,5rem)', paddingTop: '6rem', display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>\n {\/* Header *\/}\n <div style={{ marginBottom: 'auto' }}>\n <p style={{ fontSize: '0.875rem', fontFamily: \"'Barlow', sans-serif\", color: 'rgba(255,255,255,0.8)', marginBottom: '1.5rem', letterSpacing: '0.05em' }}>\/\/ Capabilities<\/p>\n <h2 style={{ fontFamily: \"'Instrument Serif', serif\", fontStyle: 'italic', color: '#fff', fontSize: 'clamp(3.5rem,8vw,6rem)', lineHeight: 0.9, letterSpacing: '-3px', margin: 0 }}>\n Production<br \/>evolved\n <\/h2>\n <\/div>\n\n {\/* Cards *\/}\n <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '1.5rem', marginTop: '4rem' }}>\n {cards.map((card, i) => (\n <div key={i} className=\"liquid-glass\" style={{ borderRadius: '1.25rem', padding: '1.5rem', minHeight: 360, display: 'flex', flexDirection: 'column' }}>\n {\/* Top row *\/}\n <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: '1rem' }}>\n {\/* Icon *\/}\n <div className=\"liquid-glass\" style={{ width: 44, height: 44, borderRadius: '0.75rem', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n <path d={card.iconPath} \/>\n <\/svg>\n <\/div>\n {\/* Tags *\/}\n <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-end', gap: '0.375rem', maxWidth: '70%' }}>\n {card.tags.map(tag => (\n <span key={tag} className=\"liquid-glass\" style={{ borderRadius: '9999px', padding: '0.25rem 0.75rem', fontSize: 11, color: 'rgba(255,255,255,0.9)', fontFamily: \"'Barlow', sans-serif\", whiteSpace: 'nowrap' }}>{tag}<\/span>\n ))}\n <\/div>\n <\/div>\n\n {\/* Spacer *\/}\n <div style={{ flex: 1 }} \/>\n\n {\/* Bottom *\/}\n <div style={{ marginTop: '1.5rem' }}>\n <h3 style={{ fontFamily: \"'Instrument Serif', serif\", fontStyle: 'italic', color: '#fff', fontSize: 'clamp(1.75rem,3vw,2.25rem)', letterSpacing: '-1px', lineHeight: 1, margin: 0 }}>{card.title}<\/h3>\n <p style={{ marginTop: '0.75rem', fontSize: '0.875rem', color: 'rgba(255,255,255,0.9)', fontFamily: \"'Barlow', sans-serif\", fontWeight: 300, lineHeight: 1.4, maxWidth: '32ch' }}>{card.body}<\/p>\n <\/div>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n );\n}\n\n\/\/ \u2500\u2500\u2500 App \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction App() {\n return (\n <div style={{ background: '#000' }}>\n <HeroSection \/>\n <CapabilitiesSection \/>\n <\/div>\n );\n}\n\nReactDOM.createRoot(document.getElementById('root')).render(<App \/>);\n<\/script>\n<\/body>\n<\/html>\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>Aeon \u2014 Venture Past Our Sky<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-17","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dms4us.com\/index.php?rest_route=\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dms4us.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dms4us.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dms4us.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dms4us.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17"}],"version-history":[{"count":4,"href":"https:\/\/dms4us.com\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/dms4us.com\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/dms4us.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}