AXION.CNC \u2014 Engineered for Precision<\/title>\r\n\r\n<meta\r\n name=\"description\"\r\n content=\"AXION.CNC \u2014 precision CNC machining technology engineered for performance, control and reliability.\"\r\n>\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap\"\r\n rel=\"stylesheet\"\r\n>\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n RESET\r\n========================================================= *\/\r\n\r\n*,\r\n*::before,\r\n*::after {\r\n box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n width: 100%;\r\n margin: 0;\r\n padding: 0;\r\n scroll-behavior: auto;\r\n}\r\n\r\nbody {\r\n width: 100%;\r\n min-width: 100%;\r\n margin: 0;\r\n padding: 0;\r\n\r\n overflow-x: hidden;\r\n\r\n background: #08090b;\r\n color: #f3f4ef;\r\n\r\n font-family: \"DM Sans\", sans-serif;\r\n}\r\n\r\nimg {\r\n max-width: 100%;\r\n display: block;\r\n}\r\n\r\nbutton,\r\ninput,\r\ntextarea,\r\nselect {\r\n font: inherit;\r\n}\r\n\r\nbutton {\r\n cursor: pointer;\r\n}\r\n\r\na {\r\n color: inherit;\r\n text-decoration: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n VARIABLES\r\n========================================================= *\/\r\n\r\n:root {\r\n\r\n --black: #08090b;\r\n --charcoal: #111317;\r\n --charcoal-2: #171a1f;\r\n\r\n --white: #f3f4ef;\r\n --muted: #969ba3;\r\n\r\n --lime: #b7ff3c;\r\n\r\n --border: rgba(255,255,255,.10);\r\n\r\n --max-width: 1240px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n GLOBAL\r\n========================================================= *\/\r\n\r\n.container {\r\n\r\n width: min(\r\n calc(100% - 48px),\r\n var(--max-width)\r\n );\r\n\r\n margin-inline: auto;\r\n}\r\n\r\n.section {\r\n\r\n position: relative;\r\n\r\n width: 100%;\r\n min-height: 100vh;\r\n\r\n overflow: hidden;\r\n}\r\n\r\n.section-inner {\r\n\r\n width: min(\r\n calc(100% - 48px),\r\n var(--max-width)\r\n );\r\n\r\n margin-inline: auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n NAVIGATION\r\n========================================================= *\/\r\n\r\n.site-nav {\r\n\r\n position: fixed;\r\n\r\n top: 0;\r\n left: 0;\r\n\r\n width: 100%;\r\n height: 82px;\r\n\r\n z-index: 1000;\r\n\r\n display: flex;\r\n align-items: center;\r\n\r\n border-bottom: 1px solid rgba(255,255,255,.08);\r\n\r\n background:\r\n linear-gradient(\r\n to bottom,\r\n rgba(8,9,11,.88),\r\n rgba(8,9,11,.28)\r\n );\r\n\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n}\r\n\r\n.nav-inner {\r\n\r\n width: min(\r\n calc(100% - 48px),\r\n 1400px\r\n );\r\n\r\n margin-inline: auto;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n\r\n.logo {\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: 22px;\r\n font-weight: 700;\r\n\r\n letter-spacing: -.04em;\r\n}\r\n\r\n.logo span {\r\n color: var(--lime);\r\n}\r\n\r\n.nav-links {\r\n\r\n display: flex;\r\n align-items: center;\r\n gap: 34px;\r\n\r\n color: rgba(243,244,239,.70);\r\n\r\n font-size: 13px;\r\n font-weight: 500;\r\n}\r\n\r\n.nav-links a {\r\n\r\n position: relative;\r\n\r\n transition: color .25s ease;\r\n}\r\n\r\n.nav-links a::after {\r\n\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n left: 0;\r\n bottom: -7px;\r\n\r\n width: 0;\r\n height: 1px;\r\n\r\n background: var(--lime);\r\n\r\n transition: width .25s ease;\r\n}\r\n\r\n.nav-links a:hover {\r\n color: var(--white);\r\n}\r\n\r\n.nav-links a:hover::after {\r\n width: 100%;\r\n}\r\n\r\n.nav-quote {\r\n\r\n padding: 12px 18px;\r\n\r\n border: 1px solid rgba(183,255,60,.5);\r\n\r\n color: var(--lime);\r\n\r\n font-size: 12px;\r\n\r\n letter-spacing: .08em;\r\n text-transform: uppercase;\r\n\r\n transition:\r\n background .25s ease,\r\n color .25s ease;\r\n}\r\n\r\n.nav-quote:hover {\r\n\r\n background: var(--lime);\r\n color: #08090b;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CINEMATIC JOURNEY\r\n========================================================= *\/\r\n\r\n.cinematic-journey {\r\n\r\n position: relative;\r\n\r\n width: 100%;\r\n\r\n \/*\r\n Six viewport heights of cinematic travel.\r\n *\/\r\n height: 600vh;\r\n\r\n background: #030507;\r\n}\r\n\r\n.scene-sticky {\r\n\r\n position: sticky;\r\n\r\n top: 0;\r\n\r\n width: 100%;\r\n height: 100vh;\r\n\r\n overflow: hidden;\r\n\r\n perspective: 1200px;\r\n\r\n background:\r\n radial-gradient(\r\n ellipse at center,\r\n #182327 0%,\r\n #091114 42%,\r\n #030506 100%\r\n );\r\n}\r\n\r\n.scene {\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n width: 100%;\r\n height: 100%;\r\n\r\n transform-style: preserve-3d;\r\n\r\n will-change: transform;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n ATMOSPHERE\r\n========================================================= *\/\r\n\r\n.atmosphere {\r\n\r\n position: absolute;\r\n\r\n inset: -20%;\r\n\r\n pointer-events: none;\r\n\r\n background:\r\n\r\n radial-gradient(\r\n ellipse at 50% 48%,\r\n rgba(107,157,142,.12),\r\n transparent 35%\r\n ),\r\n\r\n radial-gradient(\r\n ellipse at 25% 30%,\r\n rgba(183,255,60,.035),\r\n transparent 30%\r\n ),\r\n\r\n linear-gradient(\r\n 180deg,\r\n rgba(2,8,9,.05),\r\n rgba(0,0,0,.55)\r\n );\r\n\r\n z-index: 40;\r\n}\r\n\r\n.vignette {\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n z-index: 80;\r\n\r\n pointer-events: none;\r\n\r\n background:\r\n\r\n radial-gradient(\r\n ellipse at center,\r\n transparent 38%,\r\n rgba(0,0,0,.24) 70%,\r\n rgba(0,0,0,.80) 100%\r\n );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n LIGHT BEAMS\r\n========================================================= *\/\r\n\r\n.light-beam {\r\n\r\n position: absolute;\r\n\r\n top: -20%;\r\n\r\n width: 10vw;\r\n height: 150%;\r\n\r\n opacity: .06;\r\n\r\n filter: blur(12px);\r\n\r\n transform: rotate(17deg);\r\n\r\n background: linear-gradient(\r\n 90deg,\r\n transparent,\r\n rgba(220,255,244,.55),\r\n transparent\r\n );\r\n\r\n pointer-events: none;\r\n}\r\n\r\n.beam-one {\r\n left: 15%;\r\n}\r\n\r\n.beam-two {\r\n left: 45%;\r\n opacity: .035;\r\n}\r\n\r\n.beam-three {\r\n right: 12%;\r\n opacity: .025;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n DEPTH PLATES\r\n========================================================= *\/\r\n\r\n.plate {\r\n\r\n position: absolute;\r\n\r\n left: -10%;\r\n top: -10%;\r\n\r\n width: 120%;\r\n height: 120%;\r\n\r\n transform-style: preserve-3d;\r\n\r\n pointer-events: none;\r\n\r\n will-change: transform, opacity;\r\n\r\n opacity: .96;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n BACKGROUND PLATES\r\n========================================================= *\/\r\n\r\n.plate-bg {\r\n\r\n background:\r\n\r\n radial-gradient(\r\n ellipse at 50% 55%,\r\n rgba(42,86,79,.34),\r\n transparent 38%\r\n ),\r\n\r\n linear-gradient(\r\n 180deg,\r\n #081214 0%,\r\n #061012 45%,\r\n #020506 100%\r\n );\r\n}\r\n\r\n.plate-haze {\r\n\r\n background:\r\n\r\n radial-gradient(\r\n ellipse at 50% 50%,\r\n rgba(132,186,168,.12),\r\n transparent 30%\r\n );\r\n\r\n filter: blur(10px);\r\n}\r\n\r\n.plate-distance {\r\n\r\n background:\r\n\r\n radial-gradient(\r\n ellipse at 70% 40%,\r\n rgba(91,144,128,.13),\r\n transparent 25%\r\n );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CORAL ARCH\r\n========================================================= *\/\r\n\r\n.coral-arch {\r\n\r\n position: absolute;\r\n\r\n left: 50%;\r\n top: 50%;\r\n\r\n width: 54vw;\r\n height: 62vh;\r\n\r\n min-width: 420px;\r\n min-height: 380px;\r\n\r\n transform:\r\n translate(-50%, -42%)\r\n rotateX(8deg);\r\n\r\n border-radius:\r\n 48% 48% 8% 8% \/\r\n 70% 70% 12% 12%;\r\n\r\n background:\r\n\r\n radial-gradient(\r\n ellipse at 50% 95%,\r\n rgba(199,102,76,.72),\r\n transparent 23%\r\n ),\r\n\r\n radial-gradient(\r\n ellipse at 20% 55%,\r\n rgba(104,73,62,.85),\r\n transparent 24%\r\n ),\r\n\r\n radial-gradient(\r\n ellipse at 80% 48%,\r\n rgba(153,87,68,.80),\r\n transparent 25%\r\n ),\r\n\r\n linear-gradient(\r\n 90deg,\r\n #3a2825,\r\n #755047 20%,\r\n #2d2525 48%,\r\n #8d5748 78%,\r\n #302322\r\n );\r\n\r\n box-shadow:\r\n\r\n 0 0 80px rgba(155,82,63,.10),\r\n\r\n inset 0 0 60px rgba(0,0,0,.55);\r\n\r\n clip-path: polygon(\r\n\r\n 0% 100%,\r\n 0% 38%,\r\n\r\n 7% 28%,\r\n 14% 20%,\r\n 24% 13%,\r\n 35% 7%,\r\n\r\n 50% 4%,\r\n\r\n 65% 7%,\r\n 76% 13%,\r\n 86% 21%,\r\n 94% 31%,\r\n\r\n 100% 42%,\r\n 100% 100%,\r\n\r\n 73% 100%,\r\n 71% 55%,\r\n 66% 44%,\r\n 58% 37%,\r\n 50% 35%,\r\n 42% 37%,\r\n 34% 44%,\r\n 29% 56%,\r\n 27% 100%\r\n );\r\n}\r\n\r\n.coral-arch::before,\r\n.coral-arch::after {\r\n\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n border-radius: 50%;\r\n\r\n filter: blur(1px);\r\n\r\n opacity: .65;\r\n}\r\n\r\n.coral-arch::before {\r\n\r\n width: 22%;\r\n height: 12%;\r\n\r\n left: 8%;\r\n top: 30%;\r\n\r\n background:\r\n radial-gradient(\r\n circle,\r\n rgba(221,132,101,.8),\r\n transparent 70%\r\n );\r\n}\r\n\r\n.coral-arch::after {\r\n\r\n width: 26%;\r\n height: 15%;\r\n\r\n right: 5%;\r\n top: 28%;\r\n\r\n background:\r\n radial-gradient(\r\n circle,\r\n rgba(218,117,91,.7),\r\n transparent 70%\r\n );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CORAL DETAILS\r\n========================================================= *\/\r\n\r\n.coral-branch {\r\n\r\n position: absolute;\r\n\r\n width: 9px;\r\n\r\n background: linear-gradient(\r\n 180deg,\r\n #986050,\r\n #4a302c\r\n );\r\n\r\n border-radius: 100px;\r\n\r\n transform-origin: bottom;\r\n}\r\n\r\n.coral-branch::before,\r\n.coral-branch::after {\r\n\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n width: 8px;\r\n height: 8px;\r\n\r\n border-radius: 50%;\r\n\r\n background: #9e6251;\r\n}\r\n\r\n.coral-branch::before {\r\n top: 20%;\r\n left: -4px;\r\n}\r\n\r\n.coral-branch::after {\r\n top: 50%;\r\n right: -4px;\r\n}\r\n\r\n.branch-a {\r\n\r\n height: 180px;\r\n\r\n left: 14%;\r\n bottom: 8%;\r\n\r\n transform: rotate(-18deg);\r\n}\r\n\r\n.branch-b {\r\n\r\n height: 140px;\r\n\r\n right: 12%;\r\n bottom: 12%;\r\n\r\n transform: rotate(21deg);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n KELP\r\n========================================================= *\/\r\n\r\n.kelp {\r\n\r\n position: absolute;\r\n\r\n bottom: -15%;\r\n\r\n width: 100px;\r\n height: 115%;\r\n\r\n transform-origin: bottom center;\r\n\r\n opacity: .94;\r\n}\r\n\r\n.kelp::before {\r\n\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n left: 45%;\r\n\r\n bottom: 0;\r\n\r\n width: 15px;\r\n height: 100%;\r\n\r\n border-radius: 100%;\r\n\r\n background:\r\n\r\n linear-gradient(\r\n 90deg,\r\n #071d18,\r\n #164439 48%,\r\n #061510\r\n );\r\n\r\n transform:\r\n rotate(-8deg);\r\n\r\n filter: blur(.5px);\r\n}\r\n\r\n.kelp::after {\r\n\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n left: 4%;\r\n\r\n bottom: 22%;\r\n\r\n width: 100%;\r\n height: 75%;\r\n\r\n border-radius: 50%;\r\n\r\n background:\r\n\r\n repeating-linear-gradient(\r\n 175deg,\r\n transparent 0 36px,\r\n rgba(29,79,67,.85) 38px 48px,\r\n transparent 50px 74px\r\n );\r\n\r\n transform: rotate(-7deg);\r\n\r\n opacity: .8;\r\n}\r\n\r\n.kelp-left {\r\n\r\n left: -4%;\r\n\r\n transform:\r\n rotate(-9deg)\r\n scale(1.35);\r\n}\r\n\r\n.kelp-left-two {\r\n\r\n left: 12%;\r\n\r\n transform:\r\n rotate(10deg)\r\n scale(.9);\r\n}\r\n\r\n.kelp-right {\r\n\r\n right: -5%;\r\n\r\n transform:\r\n rotate(11deg)\r\n scale(1.5);\r\n}\r\n\r\n.kelp-right-two {\r\n\r\n right: 16%;\r\n\r\n transform:\r\n rotate(-7deg)\r\n scale(.85);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n SMALL FLOATING ELEMENTS\r\n========================================================= *\/\r\n\r\n.sea-shape {\r\n\r\n position: absolute;\r\n\r\n border-radius: 50%;\r\n\r\n background:\r\n radial-gradient(\r\n circle,\r\n rgba(130,180,165,.13),\r\n transparent 68%\r\n );\r\n\r\n filter: blur(2px);\r\n}\r\n\r\n.shape-1 {\r\n width: 120px;\r\n height: 120px;\r\n left: 17%;\r\n top: 27%;\r\n}\r\n\r\n.shape-2 {\r\n width: 70px;\r\n height: 70px;\r\n right: 23%;\r\n top: 18%;\r\n}\r\n\r\n.shape-3 {\r\n width: 160px;\r\n height: 160px;\r\n right: 5%;\r\n bottom: 14%;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CINEMATIC TEXT\r\n========================================================= *\/\r\n\r\n.journey-copy {\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n z-index: 70;\r\n\r\n pointer-events: none;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n justify-content: center;\r\n\r\n text-align: center;\r\n\r\n padding: 100px 24px;\r\n}\r\n\r\n.copy-inner {\r\n\r\n width: min(100%, 1000px);\r\n\r\n transition:\r\n opacity .2s linear,\r\n transform .2s linear;\r\n}\r\n\r\n.eyebrow {\r\n\r\n margin-bottom: 22px;\r\n\r\n color: var(--lime);\r\n\r\n font-size: 11px;\r\n font-weight: 600;\r\n\r\n letter-spacing: .24em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.hero-title {\r\n\r\n margin: 0;\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: clamp(\r\n 52px,\r\n 9vw,\r\n 148px\r\n );\r\n\r\n line-height: .84;\r\n\r\n letter-spacing: -.075em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.hero-title span {\r\n display: block;\r\n}\r\n\r\n.hero-title .outline {\r\n\r\n color: transparent;\r\n\r\n -webkit-text-stroke:\r\n 1px rgba(243,244,239,.55);\r\n}\r\n\r\n.hero-sub {\r\n\r\n max-width: 530px;\r\n\r\n margin: 30px auto 0;\r\n\r\n color: rgba(243,244,239,.64);\r\n\r\n font-size: 15px;\r\n\r\n line-height: 1.7;\r\n}\r\n\r\n.scroll-indicator {\r\n\r\n position: absolute;\r\n\r\n bottom: 34px;\r\n left: 50%;\r\n\r\n transform: translateX(-50%);\r\n\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n\r\n gap: 10px;\r\n\r\n color: rgba(243,244,239,.5);\r\n\r\n font-size: 9px;\r\n\r\n letter-spacing: .22em;\r\n}\r\n\r\n.scroll-line {\r\n\r\n width: 1px;\r\n height: 45px;\r\n\r\n overflow: hidden;\r\n\r\n background: rgba(255,255,255,.14);\r\n\r\n position: relative;\r\n}\r\n\r\n.scroll-line::after {\r\n\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n left: 0;\r\n top: -100%;\r\n\r\n width: 100%;\r\n height: 100%;\r\n\r\n background: var(--lime);\r\n\r\n animation: scrollLine 1.8s infinite;\r\n}\r\n\r\n@keyframes scrollLine {\r\n\r\n 0% {\r\n top: -100%;\r\n }\r\n\r\n 60% {\r\n top: 100%;\r\n }\r\n\r\n 100% {\r\n top: 100%;\r\n }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n JOURNEY HUD\r\n========================================================= *\/\r\n\r\n.depth-hud {\r\n\r\n position: absolute;\r\n\r\n left: 28px;\r\n bottom: 28px;\r\n\r\n z-index: 90;\r\n\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n\r\n color: rgba(255,255,255,.45);\r\n\r\n font-size: 9px;\r\n\r\n letter-spacing: .16em;\r\n}\r\n\r\n.hud-line {\r\n\r\n width: 70px;\r\n height: 1px;\r\n\r\n background: rgba(255,255,255,.18);\r\n\r\n position: relative;\r\n}\r\n\r\n.hud-progress {\r\n\r\n position: absolute;\r\n\r\n left: 0;\r\n top: 0;\r\n\r\n height: 100%;\r\n\r\n width: 0;\r\n\r\n background: var(--lime);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CNC MAIN CONTENT\r\n========================================================= *\/\r\n\r\n.cnc-content {\r\n\r\n position: relative;\r\n\r\n width: 100%;\r\n\r\n background: var(--black);\r\n\r\n overflow: hidden;\r\n}\r\n\r\n.cnc-content::before {\r\n\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n pointer-events: none;\r\n\r\n background:\r\n\r\n radial-gradient(\r\n ellipse at 70% 0%,\r\n rgba(183,255,60,.035),\r\n transparent 30%\r\n );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n INTRO\r\n========================================================= *\/\r\n\r\n.intro-section {\r\n\r\n min-height: 90vh;\r\n\r\n display: flex;\r\n align-items: center;\r\n\r\n border-top: 1px solid var(--border);\r\n}\r\n\r\n.intro-grid {\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n 1.4fr .8fr;\r\n\r\n gap: 80px;\r\n\r\n align-items: end;\r\n}\r\n\r\n.section-kicker {\r\n\r\n color: var(--lime);\r\n\r\n font-size: 11px;\r\n\r\n letter-spacing: .2em;\r\n\r\n text-transform: uppercase;\r\n\r\n margin-bottom: 22px;\r\n}\r\n\r\n.intro-title {\r\n\r\n margin: 0;\r\n\r\n max-width: 900px;\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: clamp(\r\n 46px,\r\n 7vw,\r\n 100px\r\n );\r\n\r\n line-height: .9;\r\n\r\n letter-spacing: -.065em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.intro-title span {\r\n color: var(--muted);\r\n}\r\n\r\n.intro-copy {\r\n\r\n color: var(--muted);\r\n\r\n font-size: 15px;\r\n\r\n line-height: 1.8;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n STATS\r\n========================================================= *\/\r\n\r\n.stats {\r\n\r\n border-top: 1px solid var(--border);\r\n border-bottom: 1px solid var(--border);\r\n}\r\n\r\n.stats-grid {\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n repeat(4, 1fr);\r\n}\r\n\r\n.stat {\r\n\r\n padding: 42px 28px;\r\n\r\n border-right: 1px solid var(--border);\r\n}\r\n\r\n.stat:first-child {\r\n padding-left: 0;\r\n}\r\n\r\n.stat:last-child {\r\n border-right: none;\r\n}\r\n\r\n.stat-number {\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: clamp(\r\n 34px,\r\n 4vw,\r\n 58px\r\n );\r\n\r\n letter-spacing: -.06em;\r\n}\r\n\r\n.stat-label {\r\n\r\n margin-top: 9px;\r\n\r\n color: var(--muted);\r\n\r\n font-size: 12px;\r\n\r\n text-transform: uppercase;\r\n\r\n letter-spacing: .12em;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n MACHINE SHOWCASE\r\n========================================================= *\/\r\n\r\n.machines-section {\r\n\r\n padding: 150px 0;\r\n\r\n background:\r\n linear-gradient(\r\n 180deg,\r\n #08090b,\r\n #0d1013\r\n );\r\n}\r\n\r\n.section-heading {\r\n\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: end;\r\n\r\n margin-bottom: 60px;\r\n}\r\n\r\n.section-heading h2 {\r\n\r\n margin: 0;\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: clamp(\r\n 42px,\r\n 6vw,\r\n 82px\r\n );\r\n\r\n line-height: .9;\r\n\r\n letter-spacing: -.06em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.section-heading p {\r\n\r\n max-width: 350px;\r\n\r\n margin: 0;\r\n\r\n color: v;\r\n\r\n font-size: 14px;\r\n\r\n line-height: 1.7;\r\n}\r\n\r\n.machine-grid {\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n repeat(3, 1fr);\r\n\r\n gap: 18px;\r\n}\r\n\r\n.machine {\r\n\r\n position: relative;\r\n\r\n min-height: 540px;\r\n\r\n padding: 26px;\r\n\r\n overflow: hidden;\r\n\r\n background: #111419;\r\n\r\n border: 1px solid var(--border);\r\n\r\n transition:\r\n transform .5s cubic-bezier(.2,.7,.2,1),\r\n border-color .4s ease;\r\n}\r\n\r\n.machine:hover {\r\n\r\n transform: translateY(-8px);\r\n\r\n border-color:\r\n rgba(183,255,60,.35);\r\n}\r\n\r\n.machine-image {\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n background-size: cover;\r\n background-position: center;\r\n\r\n opacity: .72;\r\n\r\n transition:\r\n transform .8s cubic-bezier(.2,.7,.2,1),\r\n opacity .5s ease;\r\n}\r\n\r\n.machine:hover .machine-image {\r\n\r\n transform: scale(1.06);\r\n\r\n opacity: .9;\r\n}\r\n\r\n.machine-image::after {\r\n\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n background:\r\n linear-gradient(\r\n 180deg,\r\n rgba(0,0,0,.10),\r\n rgba(0,0,0,.88)\r\n );\r\n}\r\n\r\n.machine-one .machine-image {\r\n\r\n background-image:\r\n url(https:\/\/www.rcoeng.com\/hs-fs\/hubfs\/Closeup-of-modern-CNC-machine.jpg?width=1200&height=800&name=Closeup-of-modern-CNC-machine.jpg);\r\n}\r\n\r\n.machine-two .machine-image {\r\n\r\n background-image:\r\n url(\"https:\/\/images.unsplash.com\/photo-1537462715879-360eeb61a0ad?auto=format&fit=crop&w=1400&q=85\");\r\n}\r\n\r\n.machine-three .machine-image {\r\n\r\n background-image:\r\n url(\"https:\/\/images.unsplash.com\/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=1400&q=85\");\r\n}\r\n\r\n.machine-content {\r\n\r\n position: absolute;\r\n\r\n left: 26px;\r\n right: 26px;\r\n bottom: 26px;\r\n\r\n z-index: 2;\r\n}\r\n\r\n.machine-tag {\r\n\r\n display: inline-block;\r\n\r\n margin-bottom: 16px;\r\n\r\n color: var(--lime);\r\n\r\n font-size: 10px;\r\n\r\n letter-spacing: .15em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.machine h3 {\r\n\r\n margin: 0;\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: 34px;\r\n\r\n letter-spacing: -.05em;\r\n}\r\n\r\n.machine p {\r\n\r\n margin: 12px 0 22px;\r\n\r\n max-width: 350px;\r\n\r\n color: rgba(255,255,255,.62);\r\n\r\n font-size: 13px;\r\n\r\n line-height: 1.6;\r\n}\r\n\r\n.machine-link {\r\n\r\n display: inline-flex;\r\n align-items: center;\r\n\r\n gap: 10px;\r\n\r\n color: var(--white);\r\n\r\n font-size: 11px;\r\n\r\n letter-spacing: .12em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.machine-link span {\r\n\r\n color: var(--lime);\r\n\r\n transition: transform .25s ease;\r\n}\r\n\r\n.machine:hover .machine-link span {\r\n transform: translateX(5px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n TECHNOLOGY\r\n========================================================= *\/\r\n\r\n.technology-section {\r\n\r\n padding: 150px 0;\r\n\r\n background: #f0f1ed;\r\n\r\n color: #0b0d0e;\r\n}\r\n\r\n.tech-grid {\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n .8fr 1.2fr;\r\n\r\n gap: 100px;\r\n}\r\n\r\n.tech-title {\r\n\r\n margin: 0;\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: clamp(\r\n 48px,\r\n 6vw,\r\n 88px\r\n );\r\n\r\n line-height: .9;\r\n\r\n letter-spacing: -.07em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.tech-title span {\r\n opacity: .4;\r\n}\r\n\r\n.tech-copy {\r\n\r\n margin-top: 28px;\r\n\r\n color: #61666a;\r\n\r\n font-size: 14px;\r\n\r\n line-height: 1.8;\r\n}\r\n\r\n.tech-table {\r\n\r\n border-top: 1px solid rgba(0,0,0,.18);\r\n}\r\n\r\n.tech-row {\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n 1fr 1fr;\r\n\r\n padding: 24px 0;\r\n\r\n border-bottom: 1px solid rgba(0,0,0,.14);\r\n\r\n font-size: 13px;\r\n}\r\n\r\n.tech-row div:first-child {\r\n\r\n color: #777b7d;\r\n\r\n text-transform: uppercase;\r\n\r\n letter-spacing: .1em;\r\n}\r\n\r\n.tech-row div:last-child {\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-weight: 600;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n APPLICATIONS\r\n========================================================= *\/\r\n\r\n.applications {\r\n\r\n padding: 150px 0;\r\n}\r\n\r\n.application-grid {\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n repeat(2, 1fr);\r\n\r\n border-top: 1px solid var(--border);\r\n}\r\n\r\n.application {\r\n\r\n min-height: 250px;\r\n\r\n padding: 35px;\r\n\r\n border-right: 1px solid var(--border);\r\n border-bottom: 1px solid var(--border);\r\n\r\n transition:\r\n background .35s ease;\r\n}\r\n\r\n.application:nth-child(even) {\r\n border-right: none;\r\n}\r\n\r\n.application:hover {\r\n\r\n background:\r\n rgba(183,255,60,.025);\r\n}\r\n\r\n.application-number {\r\n\r\n color: var(--lime);\r\n\r\n font-size: 11px;\r\n\r\n letter-spacing: .15em;\r\n}\r\n\r\n.application h3 {\r\n\r\n margin: 50px 0 12px;\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: 28px;\r\n\r\n letter-spacing: -.04em;\r\n}\r\n\r\n.application p {\r\n\r\n margin: 0;\r\n\r\n max-width: 400px;\r\n\r\n color: var(--muted);\r\n\r\n font-size: 13px;\r\n\r\n line-height: 1.7;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CTA\r\n========================================================= *\/\r\n\r\n.cta-section {\r\n\r\n min-height: 80vh;\r\n\r\n display: flex;\r\n align-items: center;\r\n\r\n border-top: 1px solid var(--border);\r\n\r\n background:\r\n\r\n radial-gradient(\r\n circle at 70% 50%,\r\n rgba(183,255,60,.07),\r\n transparent 28%\r\n ),\r\n\r\n #08090b;\r\n}\r\n\r\n.cta-content {\r\n\r\n width: 100%;\r\n\r\n text-align: center;\r\n}\r\n\r\n.cta-title {\r\n\r\n margin: 0;\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: clamp(\r\n 60px,\r\n 10vw,\r\n 150px\r\n );\r\n\r\n line-height: .8;\r\n\r\n letter-spacing: -.08em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.cta-title span {\r\n\r\n display: block;\r\n\r\n color: transparent;\r\n\r\n -webkit-text-stroke:\r\n 1px rgba(243,244,239,.45);\r\n}\r\n\r\n.cta-button {\r\n\r\n display: inline-flex;\r\n\r\n margin-top: 48px;\r\n\r\n padding: 18px 30px;\r\n\r\n background: var(--lime);\r\n\r\n color: #08090b;\r\n\r\n font-size: 11px;\r\n font-weight: 700;\r\n\r\n letter-spacing: .15em;\r\n\r\n text-transform: uppercase;\r\n\r\n transition:\r\n transform .25s ease,\r\n box-shadow .25s ease;\r\n}\r\n\r\n.cta-button:hover {\r\n\r\n transform: translateY(-4px);\r\n\r\n box-shadow:\r\n 0 14px 50px rgba(183,255,60,.18);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n FOOTER\r\n========================================================= *\/\r\n\r\nfooter {\r\n\r\n padding: 35px 0;\r\n\r\n border-top: 1px solid var(--border);\r\n\r\n color: var(--muted);\r\n\r\n font-size: 11px;\r\n}\r\n\r\n.footer-inner {\r\n\r\n display: flex;\r\n\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.footer-logo {\r\n\r\n color: var(--white);\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: 18px;\r\n font-weight: 700;\r\n}\r\n\r\n.footer-logo span {\r\n color: var(--lime);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n REVEAL\r\n========================================================= *\/\r\n\r\n.reveal {\r\n\r\n opacity: 0;\r\n\r\n transform: translateY(35px);\r\n\r\n transition:\r\n opacity .9s ease,\r\n transform .9s cubic-bezier(.2,.7,.2,1);\r\n}\r\n\r\n.reveal.visible {\r\n\r\n opacity: 1;\r\n\r\n transform: translateY(0);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n RESPONSIVE\r\n========================================================= *\/\r\n\r\n@media (max-width: 1000px) {\r\n\r\n .nav-links {\r\n display: none;\r\n }\r\n\r\n .intro-grid,\r\n .tech-grid {\r\n\r\n grid-template-columns: 1fr;\r\n\r\n gap: 45px;\r\n }\r\n\r\n .machine-grid {\r\n\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .machine {\r\n min-height: 480px;\r\n }\r\n\r\n .stats-grid {\r\n\r\n grid-template-columns:\r\n repeat(2, 1fr);\r\n }\r\n\r\n .stat {\r\n\r\n border-bottom: 1px solid var(--border);\r\n }\r\n}\r\n\r\n\r\n@media (max-width: 700px) {\r\n\r\n .container,\r\n .section-inner {\r\n\r\n width: calc(100% - 32px);\r\n }\r\n\r\n .nav-inner {\r\n width: calc(100% - 32px);\r\n }\r\n\r\n .site-nav {\r\n height: 70px;\r\n }\r\n\r\n .nav-quote {\r\n padding: 10px 13px;\r\n }\r\n\r\n .hero-title {\r\n\r\n font-size:\r\n clamp(46px, 15vw, 80px);\r\n }\r\n\r\n .hero-sub {\r\n\r\n font-size: 13px;\r\n\r\n max-width: 330px;\r\n }\r\n\r\n .coral-arch {\r\n\r\n width: 100vw;\r\n height: 58vh;\r\n\r\n min-width: 0;\r\n }\r\n\r\n .kelp {\r\n\r\n width: 70px;\r\n }\r\n\r\n .kelp-right,\r\n .kelp-left {\r\n\r\n transform:\r\n rotate(8deg)\r\n scale(1.1);\r\n }\r\n\r\n .stats-grid {\r\n\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .stat,\r\n .stat:first-child {\r\n\r\n padding: 28px 0;\r\n\r\n border-right: none;\r\n }\r\n\r\n .section-heading {\r\n\r\n display: block;\r\n }\r\n\r\n .section-heading p {\r\n\r\n margin-top: 25px;\r\n }\r\n\r\n .applications {\r\n\r\n padding: 100px 0;\r\n }\r\n\r\n .application-grid {\r\n\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .application,\r\n .application:nth-child(even) {\r\n\r\n border-right: none;\r\n }\r\n\r\n .technology-section,\r\n .machines-section {\r\n\r\n padding: 100px 0;\r\n }\r\n\r\n .tech-row {\r\n\r\n grid-template-columns: 1fr;\r\n\r\n gap: 10px;\r\n }\r\n\r\n .footer-inner {\r\n\r\n flex-direction: column;\r\n\r\n align-items: flex-start;\r\n\r\n gap: 15px;\r\n }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n html {\r\n scroll-behavior: auto;\r\n }\r\n\r\n *,\r\n *::before,\r\n *::after {\r\n\r\n animation-duration: .001ms !important;\r\n animation-iteration-count: 1 !important;\r\n\r\n transition-duration: .001ms !important;\r\n }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n\r\n\r\n<header class=\"site-nav\">\r\n\r\n <div class=\"nav-inner\">\r\n\r\n <a href=\"#\" class=\"logo\">\r\n AXION<span>.CNC<\/span>\r\n <\/a>\r\n\r\n <nav class=\"nav-links\">\r\n\r\n <a href=\"#machines\">Machines<\/a>\r\n <a href=\"#technology\">Technology<\/a>\r\n <a href=\"#applications\">Applications<\/a>\r\n\r\n <\/nav>\r\n\r\n <a href=\"#quote\" class=\"nav-quote\">\r\n Request a Quote\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n<\/header>\r\n\r\n\r\n\r\n\r\n<section class=\"cinematic-journey\" id=\"journey\">\r\n\r\n <div class=\"scene-sticky\">\r\n\r\n <div class=\"scene\" id=\"scene\">\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate plate-bg\"\r\n data-depth=\"-3600\"\r\n data-scale=\"1\"\r\n ><\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate plate-distance\"\r\n data-depth=\"-3250\"\r\n data-scale=\"1\"\r\n >\r\n\r\n <div class=\"sea-shape shape-1\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate plate-distance\"\r\n data-depth=\"-2900\"\r\n data-scale=\"1.05\"\r\n >\r\n\r\n <div class=\"sea-shape shape-2\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate\"\r\n data-depth=\"-2550\"\r\n data-scale=\"1.08\"\r\n >\r\n\r\n <div class=\"coral-arch\">\r\n\r\n <div class=\"coral-branch branch-a\"><\/div>\r\n <div class=\"coral-branch branch-b\"><\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate plate-haze\"\r\n data-depth=\"-2150\"\r\n ><\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate\"\r\n data-depth=\"-1800\"\r\n >\r\n\r\n <div class=\"kelp kelp-right-two\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate\"\r\n data-depth=\"-1450\"\r\n >\r\n\r\n <div class=\"kelp kelp-left-two\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate\"\r\n data-depth=\"-1100\"\r\n >\r\n\r\n <div class=\"sea-shape shape-3\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate\"\r\n data-depth=\"-750\"\r\n >\r\n\r\n <div class=\"kelp kelp-right\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate\"\r\n data-depth=\"-390\"\r\n >\r\n\r\n <div class=\"kelp kelp-left\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate\"\r\n data-depth=\"0\"\r\n >\r\n\r\n <div class=\"kelp kelp-left\"><\/div>\r\n <div class=\"kelp kelp-right\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"atmosphere\"><\/div>\r\n\r\n <div class=\"light-beam beam-one\"><\/div>\r\n <div class=\"light-beam beam-two\"><\/div>\r\n <div class=\"light-beam beam-three\"><\/div>\r\n\r\n <div class=\"vignette\"><\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"journey-copy\">\r\n\r\n <div\r\n class=\"copy-inner\"\r\n id=\"heroCopy\"\r\n >\r\n\r\n <div class=\"eyebrow\">\r\n Advanced CNC Manufacturing\r\n <\/div>\r\n\r\n <h1 class=\"hero-title\">\r\n\r\n <span>Engineered<\/span>\r\n\r\n <span class=\"outline\">\r\n For Precision.\r\n <\/span>\r\n\r\n <span>Built To Perform.<\/span>\r\n\r\n <\/h1>\r\n\r\n <p class=\"hero-sub\">\r\n\r\n Precision machining technology designed around\r\n control, repeatability and performance.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"depth-hud\">\r\n\r\n <span>DEPTH<\/span>\r\n\r\n <div class=\"hud-line\">\r\n <div\r\n class=\"hud-progress\"\r\n id=\"hudProgress\"\r\n ><\/div>\r\n <\/div>\r\n\r\n <span id=\"depthValue\">\r\n 00%\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"scroll-indicator\">\r\n\r\n <span>SCROLL TO ENTER<\/span>\r\n\r\n <div class=\"scroll-line\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n\r\n<main class=\"cnc-content\">\r\n\r\n\r\n \r\n\r\n <section class=\"section intro-section\">\r\n\r\n <div class=\"section-inner\">\r\n\r\n <div class=\"intro-grid reveal\">\r\n\r\n <div>\r\n\r\n <div class=\"section-kicker\">\r\n AXION.CNC \/ Precision Systems\r\n <\/div>\r\n\r\n <h2 class=\"intro-title\">\r\n\r\n Precision isn't\r\n <span>a specification.<\/span>\r\n\r\n It's a system.\r\n\r\n <\/h2>\r\n\r\n <\/div>\r\n\r\n <p class=\"intro-copy\">\r\n\r\n AXION.CNC develops advanced machining systems\r\n for manufacturers who demand predictable results,\r\n repeatable processes and uncompromising control.\r\n\r\n <br><br>\r\n\r\n From complex components to high-volume production,\r\n every machine is engineered around one objective:\r\n\r\n <strong>\r\n making precision repeatable.\r\n <\/strong>\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n\r\n \r\n\r\n <section class=\"stats\">\r\n\r\n <div class=\"section-inner\">\r\n\r\n <div class=\"stats-grid\">\r\n\r\n <div class=\"stat reveal\">\r\n\r\n <div class=\"stat-number\">\r\n \u00b10.005\r\n <\/div>\r\n\r\n <div class=\"stat-label\">\r\n Precision capability\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"stat reveal\">\r\n\r\n <div class=\"stat-number\">\r\n 15+\r\n <\/div>\r\n\r\n <div class=\"stat-label\">\r\n Years engineering\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"stat reveal\">\r\n\r\n <div class=\"stat-number\">\r\n 500+\r\n <\/div>\r\n\r\n <div class=\"stat-label\">\r\n Machines delivered\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"stat reveal\">\r\n\r\n <div class=\"stat-number\">\r\n 24\/7\r\n <\/div>\r\n\r\n <div class=\"stat-label\">\r\n Production ready\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n\r\n \r\n\r\n <section\r\n class=\"machines-section\"\r\n id=\"machines\"\r\n >\r\n\r\n <div class=\"section-inner\">\r\n\r\n <div class=\"section-heading reveal\">\r\n\r\n <div>\r\n\r\n <div class=\"section-kicker\">\r\n Machine Systems\r\n <\/div>\r\n\r\n <h2>\r\n Built<br>\r\n Different.\r\n <\/h2>\r\n\r\n <\/div>\r\n\r\n <p>\r\n\r\n High-performance machining platforms\r\n engineered for demanding production\r\n environments.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"machine-grid\">\r\n\r\n\r\n \r\n\r\n <article class=\"machine machine-one reveal\">\r\n\r\n <div class=\"machine-image\"><\/div>\r\n\r\n <div class=\"machine-content\">\r\n\r\n <div class=\"machine-tag\">\r\n Vertical Machining\r\n <\/div>\r\n\r\n <h3>\r\n VX-850 VMC\r\n <\/h3>\r\n\r\n <p>\r\n High-speed vertical machining platform\r\n engineered for rigid cutting and\r\n repeatable production.\r\n <\/p>\r\n\r\n <a\r\n href=\"#quote\"\r\n class=\"machine-link\"\r\n >\r\n Explore Machine\r\n <span>\u2192<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article class=\"machine machine-two reveal\">\r\n\r\n <div class=\"machine-image\"><\/div>\r\n\r\n <div class=\"machine-content\">\r\n\r\n <div class=\"machine-tag\">\r\n Turning Centre\r\n <\/div>\r\n\r\n <h3>\r\n TX-500 PRO\r\n <\/h3>\r\n\r\n <p>\r\n Compact turning technology combining\r\n rigidity, speed and precise tool control.\r\n <\/p>\r\n\r\n <a\r\n href=\"#quote\"\r\n class=\"machine-link\"\r\n >\r\n Explore Machine\r\n <span>\u2192<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article class=\"machine machine-three reveal\">\r\n\r\n <div class=\"machine-image\"><\/div>\r\n\r\n <div class=\"machine-content\">\r\n\r\n <div class=\"machine-tag\">\r\n 5-Axis Platform\r\n <\/div>\r\n\r\n <h3>\r\n AX-5 ULTRA\r\n <\/h3>\r\n\r\n <p>\r\n Multi-axis machining architecture\r\n built for complex geometries and\r\n advanced component production.\r\n <\/p>\r\n\r\n <a\r\n href=\"#quote\"\r\n class=\"machine-link\"\r\n >\r\n Explore Machine\r\n <span>\u2192<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n\r\n \r\n\r\n <section\r\n class=\"technology-section\"\r\n id=\"technology\"\r\n >\r\n\r\n <div class=\"section-inner\">\r\n\r\n <div class=\"tech-grid reveal\">\r\n\r\n <div>\r\n\r\n <div class=\"section-kicker\">\r\n Engineering \/ Technology\r\n <\/div>\r\n\r\n <h2 class=\"tech-title\">\r\n\r\n Control\r\n <span>at every<\/span>\r\n level.\r\n\r\n <\/h2>\r\n\r\n <p class=\"tech-copy\">\r\n\r\n Every AXION system is developed around\r\n mechanical rigidity, thermal stability,\r\n intelligent control and predictable\r\n machine behaviour.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"tech-table\">\r\n\r\n <div class=\"tech-row\">\r\n\r\n <div>Spindle<\/div>\r\n\r\n <div>\r\n High-speed precision spindle\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"tech-row\">\r\n\r\n <div>Structure<\/div>\r\n\r\n <div>\r\n Heavy-duty rigid construction\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"tech-row\">\r\n\r\n <div>Control<\/div>\r\n\r\n <div>\r\n Advanced CNC control architecture\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"tech-row\">\r\n\r\n <div>Accuracy<\/div>\r\n\r\n <div>\r\n Precision positioning system\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"tech-row\">\r\n\r\n <div>Automation<\/div>\r\n\r\n <div>\r\n Production-ready integration\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n\r\n \r\n\r\n <section\r\n class=\"applications\"\r\n id=\"applications\"\r\n >\r\n\r\n <div class=\"section-inner\">\r\n\r\n <div class=\"section-heading reveal\">\r\n\r\n <div>\r\n\r\n <div class=\"section-kicker\">\r\n Applications\r\n <\/div>\r\n\r\n <h2>\r\n Made For<br>\r\n Complexity.\r\n <\/h2>\r\n\r\n <\/div>\r\n\r\n <p>\r\n\r\n From individual precision components\r\n to demanding production environments.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"application-grid\">\r\n\r\n\r\n <article class=\"application reveal\">\r\n\r\n <div class=\"application-number\">\r\n 01 \/ AUTOMOTIVE\r\n <\/div>\r\n\r\n <h3>\r\n Automotive Components\r\n <\/h3>\r\n\r\n <p>\r\n Precision components requiring\r\n repeatability, consistency and\r\n production efficiency.\r\n <\/p>\r\n\r\n <\/article>\r\n\r\n\r\n <article class=\"application reveal\">\r\n\r\n <div class=\"application-number\">\r\n 02 \/ AEROSPACE\r\n <\/div>\r\n\r\n <h3>\r\n Aerospace\r\n <\/h3>\r\n\r\n <p>\r\n Complex geometries and demanding\r\n machining requirements.\r\n <\/p>\r\n\r\n <\/article>\r\n\r\n\r\n <article class=\"application reveal\">\r\n\r\n <div class=\"application-number\">\r\n 03 \/ ENGINEERING\r\n <\/div>\r\n\r\n <h3>\r\n General Engineering\r\n <\/h3>\r\n\r\n <p>\r\n Flexible machining solutions for\r\n specialised components and production.\r\n <\/p>\r\n\r\n <\/article>\r\n\r\n\r\n <article class=\"application reveal\">\r\n\r\n <div class=\"application-number\">\r\n 04 \/ TOOLING\r\n <\/div>\r\n\r\n <h3>\r\n Tool & Die\r\n <\/h3>\r\n\r\n <p>\r\n Accurate machining for moulds,\r\n dies and advanced tooling applications.\r\n <\/p>\r\n\r\n <\/article>\r\n\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n\r\n \r\n\r\n <section\r\n class=\"cta-section\"\r\n id=\"quote\"\r\n >\r\n\r\n <div class=\"section-inner\">\r\n\r\n <div class=\"cta-content reveal\">\r\n\r\n <div class=\"section-kicker\">\r\n Start A Conversation\r\n <\/div>\r\n\r\n <h2 class=\"cta-title\">\r\n\r\n Let's Build\r\n\r\n <span>Precision.<\/span>\r\n\r\n <\/h2>\r\n\r\n <a\r\n href=\"mailto:sales@axioncnc.example\"\r\n class=\"cta-button\"\r\n >\r\n Request A Quote \u2192\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n\r\n<\/main>\r\n\r\n\r\n\r\n\r\n<footer>\r\n\r\n <div class=\"container\">\r\n\r\n <div class=\"footer-inner\">\r\n\r\n <div class=\"footer-logo\">\r\n AXION<span>.CNC<\/span>\r\n <\/div>\r\n\r\n <div>\r\n Engineered for Precision. Built to Perform.\r\n <\/div>\r\n\r\n <div>\r\n \u00a9 2026 AXION CNC\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/footer>\r\n\r\n\r\n<script>\r\n\r\n\/* =========================================================\r\n CINEMATIC CAMERA ENGINE\r\n========================================================= *\/\r\n\r\n(() => {\r\n\r\n const journey =\r\n document.querySelector(\".cinematic-journey\");\r\n\r\n const scene =\r\n document.querySelector(\"#scene\");\r\n\r\n const plates =\r\n [...document.querySelectorAll(\".plate\")];\r\n\r\n const heroCopy =\r\n document.querySelector(\"#heroCopy\");\r\n\r\n const hudProgress =\r\n document.querySelector(\"#hudProgress\");\r\n\r\n const depthValue =\r\n document.querySelector(\"#depthValue\");\r\n\r\n\r\n if (!journey || !scene || !plates.length) {\r\n return;\r\n }\r\n\r\n\r\n \/* -------------------------------------------------------\r\n STATE\r\n ------------------------------------------------------- *\/\r\n\r\n let targetProgress = 0;\r\n\r\n let progress = 0;\r\n\r\n let targetCameraX = 0;\r\n let targetCameraY = 0;\r\n\r\n let cameraX = 0;\r\n let cameraY = 0;\r\n\r\n let pointerActive = false;\r\n\r\n const reducedMotion =\r\n window.matchMedia(\r\n \"(prefers-reduced-motion: reduce)\"\r\n ).matches;\r\n\r\n\r\n \/* -------------------------------------------------------\r\n DEPTH SETTINGS\r\n ------------------------------------------------------- *\/\r\n\r\n const START_Z = 0;\r\n\r\n \/*\r\n The camera travels through the full depth\r\n of the environment.\r\n *\/\r\n\r\n const END_Z = 3700;\r\n\r\n\r\n \/* -------------------------------------------------------\r\n CLAMP\r\n ------------------------------------------------------- *\/\r\n\r\n function clamp(value, min, max) {\r\n\r\n return Math.max(\r\n min,\r\n Math.min(max, value)\r\n );\r\n\r\n }\r\n\r\n\r\n \/* -------------------------------------------------------\r\n SMOOTH STEP\r\n ------------------------------------------------------- *\/\r\n\r\n function smoothstep(t) {\r\n\r\n t = clamp(t, 0, 1);\r\n\r\n return (\r\n t * t *\r\n (3 - 2 * t)\r\n );\r\n\r\n }\r\n\r\n\r\n \/* -------------------------------------------------------\r\n SCROLL TARGET\r\n ------------------------------------------------------- *\/\r\n\r\n function updateScrollTarget() {\r\n\r\n const rect =\r\n journey.getBoundingClientRect();\r\n\r\n const scrollable =\r\n journey.offsetHeight -\r\n window.innerHeight;\r\n\r\n if (scrollable <= 0) {\r\n targetProgress = 0;\r\n return;\r\n }\r\n\r\n const traveled =\r\n -rect.top;\r\n\r\n targetProgress =\r\n clamp(\r\n traveled \/ scrollable,\r\n 0,\r\n 1\r\n );\r\n\r\n }\r\n\r\n\r\n \/* -------------------------------------------------------\r\n POINTER CAMERA\r\n ------------------------------------------------------- *\/\r\n\r\n window.addEventListener(\r\n \"pointermove\",\r\n (event) => {\r\n\r\n if (reducedMotion) {\r\n return;\r\n }\r\n\r\n const x =\r\n event.clientX \/\r\n window.innerWidth;\r\n\r\n const y =\r\n event.clientY \/\r\n window.innerHeight;\r\n\r\n \/*\r\n Camera offset only.\r\n Individual objects are NOT\r\n independently controlled.\r\n *\/\r\n\r\n targetCameraX =\r\n (x - .5) * -26;\r\n\r\n targetCameraY =\r\n (y - .5) * 18;\r\n\r\n pointerActive = true;\r\n\r\n },\r\n {\r\n passive: true\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n \"pointerleave\",\r\n () => {\r\n\r\n targetCameraX = 0;\r\n targetCameraY = 0;\r\n\r\n pointerActive = false;\r\n\r\n }\r\n );\r\n\r\n\r\n \/* -------------------------------------------------------\r\n PLATE DEPTH\r\n ------------------------------------------------------- *\/\r\n\r\n function renderPlate(\r\n plate,\r\n cameraZ,\r\n index\r\n ) {\r\n\r\n const plateDepth =\r\n parseFloat(\r\n plate.dataset.depth || \"0\"\r\n );\r\n\r\n \/*\r\n Relative distance from camera.\r\n *\/\r\n\r\n const relative =\r\n plateDepth + cameraZ;\r\n\r\n \/*\r\n Convert distance into\r\n perspective scale.\r\n\r\n Near plates become huge and\r\n leave the viewport quickly.\r\n *\/\r\n\r\n const distance =\r\n Math.abs(relative);\r\n\r\n const perspectiveScale =\r\n clamp(\r\n 1 +\r\n (cameraZ \/ 2500) *\r\n (1 + index * .025),\r\n .72,\r\n 3.5\r\n );\r\n\r\n\r\n \/*\r\n Plates that have already been\r\n passed by the camera fade out.\r\n *\/\r\n\r\n let opacity = 1;\r\n\r\n if (relative > 500) {\r\n\r\n opacity =\r\n clamp(\r\n 1 -\r\n (relative - 500) \/ 650,\r\n 0,\r\n 1\r\n );\r\n\r\n }\r\n\r\n\r\n \/*\r\n Deep layers become slightly\r\n more visible as we approach.\r\n *\/\r\n\r\n if (relative < -2200) {\r\n\r\n opacity =\r\n clamp(\r\n .25 +\r\n (relative + 2200) \/ 2200,\r\n .25,\r\n 1\r\n );\r\n\r\n }\r\n\r\n\r\n const translateX =\r\n cameraX *\r\n (1 + index * .015);\r\n\r\n const translateY =\r\n cameraY *\r\n (1 + index * .01);\r\n\r\n\r\n plate.style.transform = `\r\n\r\n translate3d(\r\n ${translateX}px,\r\n ${translateY}px,\r\n ${relative}px\r\n )\r\n\r\n scale(\r\n ${perspectiveScale}\r\n )\r\n\r\n `;\r\n\r\n plate.style.opacity = opacity;\r\n\r\n }\r\n\r\n\r\n \/* -------------------------------------------------------\r\n HERO TEXT\r\n ------------------------------------------------------- *\/\r\n\r\n function renderCopy(p) {\r\n\r\n \/*\r\n Hero text slowly leaves as\r\n camera begins travelling.\r\n *\/\r\n\r\n let opacity = 1;\r\n\r\n let y = 0;\r\n\r\n if (p < .18) {\r\n\r\n opacity = 1;\r\n\r\n y = 0;\r\n\r\n } else if (p < .36) {\r\n\r\n const t =\r\n (p - .18) \/ .18;\r\n\r\n opacity =\r\n 1 - smoothstep(t);\r\n\r\n y =\r\n -70 * smoothstep(t);\r\n\r\n } else {\r\n\r\n opacity = 0;\r\n y = -100;\r\n\r\n }\r\n\r\n heroCopy.style.opacity = opacity;\r\n\r\n heroCopy.style.transform =\r\n `translate3d(0, ${y}px, 0)`;\r\n\r\n }\r\n\r\n\r\n \/* -------------------------------------------------------\r\n CAMERA RENDER\r\n ------------------------------------------------------- *\/\r\n\r\n function render() {\r\n\r\n \/*\r\n Smoothly follow scroll target.\r\n *\/\r\n\r\n progress +=\r\n (targetProgress - progress) *\r\n (\r\n reducedMotion\r\n ? .16\r\n : .075\r\n );\r\n\r\n\r\n \/*\r\n Smooth pointer camera.\r\n *\/\r\n\r\n cameraX +=\r\n (targetCameraX - cameraX) *\r\n .055;\r\n\r\n cameraY +=\r\n (targetCameraY - cameraY) *\r\n .055;\r\n\r\n\r\n \/*\r\n Convert progress to camera Z.\r\n *\/\r\n\r\n const easedProgress =\r\n smoothstep(progress);\r\n\r\n const cameraZ =\r\n START_Z +\r\n (\r\n END_Z *\r\n easedProgress\r\n );\r\n\r\n\r\n \/*\r\n Render every depth plate.\r\n *\/\r\n\r\n plates.forEach(\r\n (plate, index) => {\r\n\r\n renderPlate(\r\n plate,\r\n cameraZ,\r\n index\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n \/*\r\n Slight global camera rotation.\r\n *\/\r\n\r\n scene.style.transform = `\r\n\r\n rotateX(${cameraY * .025}deg)\r\n\r\n rotateY(${cameraX * .025}deg)\r\n\r\n `;\r\n\r\n\r\n \/*\r\n Hero copy.\r\n *\/\r\n\r\n renderCopy(progress);\r\n\r\n\r\n \/*\r\n HUD.\r\n *\/\r\n\r\n const percentage =\r\n Math.round(\r\n progress * 100\r\n );\r\n\r\n hudProgress.style.width =\r\n percentage + \"%\";\r\n\r\n depthValue.textContent =\r\n String(percentage)\r\n .padStart(2, \"0\") +\r\n \"%\";\r\n\r\n\r\n requestAnimationFrame(render);\r\n\r\n }\r\n\r\n\r\n \/* -------------------------------------------------------\r\n EVENTS\r\n ------------------------------------------------------- *\/\r\n\r\n window.addEventListener(\r\n \"scroll\",\r\n updateScrollTarget,\r\n {\r\n passive: true\r\n }\r\n );\r\n\r\n window.addEventListener(\r\n \"resize\",\r\n updateScrollTarget\r\n );\r\n\r\n\r\n \/*\r\n Initial calculation.\r\n *\/\r\n\r\n updateScrollTarget();\r\n\r\n requestAnimationFrame(render);\r\n\r\n\r\n})();\r\n\r\n\r\n\/* =========================================================\r\n REVEAL ON SCROLL\r\n========================================================= *\/\r\n\r\n(() => {\r\n\r\n const elements =\r\n document.querySelectorAll(\r\n \".reveal\"\r\n );\r\n\r\n if (!elements.length) {\r\n return;\r\n }\r\n\r\n\r\n const observer =\r\n new IntersectionObserver(\r\n (entries) => {\r\n\r\n entries.forEach(\r\n (entry) => {\r\n\r\n if (\r\n entry.isIntersecting\r\n ) {\r\n\r\n entry.target.classList.add(\r\n \"visible\"\r\n );\r\n\r\n observer.unobserve(\r\n entry.target\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n threshold: .12\r\n }\r\n );\r\n\r\n\r\n elements.forEach(\r\n element => observer.observe(element)\r\n );\r\n\r\n})();\r\n\r\n\r\n\/* =========================================================\r\n SMOOTH ANCHOR NAVIGATION\r\n========================================================= *\/\r\n\r\ndocument\r\n .querySelectorAll(\r\n 'a[href^=\"#\"]'\r\n )\r\n .forEach(\r\n link => {\r\n\r\n link.addEventListener(\r\n \"click\",\r\n (event) => {\r\n\r\n const targetId =\r\n link.getAttribute(\"href\");\r\n\r\n if (\r\n !targetId ||\r\n targetId === \"#\"\r\n ) {\r\n return;\r\n }\r\n\r\n const target =\r\n document.querySelector(\r\n targetId\r\n );\r\n\r\n if (!target) {\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n\r\n target.scrollIntoView({\r\n behavior: \"smooth\"\r\n });\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n\/* =========================================================\r\n MOBILE TOUCH OPTIMIZATION\r\n========================================================= *\/\r\n\r\nif (\r\n window.matchMedia(\r\n \"(pointer: coarse)\"\r\n ).matches\r\n) {\r\n\r\n document.body.classList.add(\r\n \"touch-device\"\r\n );\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AXION.CNC \u2014 Engineered for Precision AXION.CNC Machines Technology Applications Request a Quote Advanced CNC Manufacturing Engineered For Precision. Built To […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15"}],"version-history":[{"count":4,"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":20,"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions\/20"}],"wp:attachment":[{"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\r\nAXION.CNC \u2014 Engineered for Precision<\/title>\r\n\r\n<meta\r\n name=\"description\"\r\n content=\"AXION.CNC \u2014 precision CNC machining technology engineered for performance, control and reliability.\"\r\n>\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap\"\r\n rel=\"stylesheet\"\r\n>\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n RESET\r\n========================================================= *\/\r\n\r\n*,\r\n*::before,\r\n*::after {\r\n box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n width: 100%;\r\n margin: 0;\r\n padding: 0;\r\n scroll-behavior: auto;\r\n}\r\n\r\nbody {\r\n width: 100%;\r\n min-width: 100%;\r\n margin: 0;\r\n padding: 0;\r\n\r\n overflow-x: hidden;\r\n\r\n background: #08090b;\r\n color: #f3f4ef;\r\n\r\n font-family: \"DM Sans\", sans-serif;\r\n}\r\n\r\nimg {\r\n max-width: 100%;\r\n display: block;\r\n}\r\n\r\nbutton,\r\ninput,\r\ntextarea,\r\nselect {\r\n font: inherit;\r\n}\r\n\r\nbutton {\r\n cursor: pointer;\r\n}\r\n\r\na {\r\n color: inherit;\r\n text-decoration: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n VARIABLES\r\n========================================================= *\/\r\n\r\n:root {\r\n\r\n --black: #08090b;\r\n --charcoal: #111317;\r\n --charcoal-2: #171a1f;\r\n\r\n --white: #f3f4ef;\r\n --muted: #969ba3;\r\n\r\n --lime: #b7ff3c;\r\n\r\n --border: rgba(255,255,255,.10);\r\n\r\n --max-width: 1240px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n GLOBAL\r\n========================================================= *\/\r\n\r\n.container {\r\n\r\n width: min(\r\n calc(100% - 48px),\r\n var(--max-width)\r\n );\r\n\r\n margin-inline: auto;\r\n}\r\n\r\n.section {\r\n\r\n position: relative;\r\n\r\n width: 100%;\r\n min-height: 100vh;\r\n\r\n overflow: hidden;\r\n}\r\n\r\n.section-inner {\r\n\r\n width: min(\r\n calc(100% - 48px),\r\n var(--max-width)\r\n );\r\n\r\n margin-inline: auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n NAVIGATION\r\n========================================================= *\/\r\n\r\n.site-nav {\r\n\r\n position: fixed;\r\n\r\n top: 0;\r\n left: 0;\r\n\r\n width: 100%;\r\n height: 82px;\r\n\r\n z-index: 1000;\r\n\r\n display: flex;\r\n align-items: center;\r\n\r\n border-bottom: 1px solid rgba(255,255,255,.08);\r\n\r\n background:\r\n linear-gradient(\r\n to bottom,\r\n rgba(8,9,11,.88),\r\n rgba(8,9,11,.28)\r\n );\r\n\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n}\r\n\r\n.nav-inner {\r\n\r\n width: min(\r\n calc(100% - 48px),\r\n 1400px\r\n );\r\n\r\n margin-inline: auto;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n\r\n.logo {\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: 22px;\r\n font-weight: 700;\r\n\r\n letter-spacing: -.04em;\r\n}\r\n\r\n.logo span {\r\n color: var(--lime);\r\n}\r\n\r\n.nav-links {\r\n\r\n display: flex;\r\n align-items: center;\r\n gap: 34px;\r\n\r\n color: rgba(243,244,239,.70);\r\n\r\n font-size: 13px;\r\n font-weight: 500;\r\n}\r\n\r\n.nav-links a {\r\n\r\n position: relative;\r\n\r\n transition: color .25s ease;\r\n}\r\n\r\n.nav-links a::after {\r\n\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n left: 0;\r\n bottom: -7px;\r\n\r\n width: 0;\r\n height: 1px;\r\n\r\n background: var(--lime);\r\n\r\n transition: width .25s ease;\r\n}\r\n\r\n.nav-links a:hover {\r\n color: var(--white);\r\n}\r\n\r\n.nav-links a:hover::after {\r\n width: 100%;\r\n}\r\n\r\n.nav-quote {\r\n\r\n padding: 12px 18px;\r\n\r\n border: 1px solid rgba(183,255,60,.5);\r\n\r\n color: var(--lime);\r\n\r\n font-size: 12px;\r\n\r\n letter-spacing: .08em;\r\n text-transform: uppercase;\r\n\r\n transition:\r\n background .25s ease,\r\n color .25s ease;\r\n}\r\n\r\n.nav-quote:hover {\r\n\r\n background: var(--lime);\r\n color: #08090b;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CINEMATIC JOURNEY\r\n========================================================= *\/\r\n\r\n.cinematic-journey {\r\n\r\n position: relative;\r\n\r\n width: 100%;\r\n\r\n \/*\r\n Six viewport heights of cinematic travel.\r\n *\/\r\n height: 600vh;\r\n\r\n background: #030507;\r\n}\r\n\r\n.scene-sticky {\r\n\r\n position: sticky;\r\n\r\n top: 0;\r\n\r\n width: 100%;\r\n height: 100vh;\r\n\r\n overflow: hidden;\r\n\r\n perspective: 1200px;\r\n\r\n background:\r\n radial-gradient(\r\n ellipse at center,\r\n #182327 0%,\r\n #091114 42%,\r\n #030506 100%\r\n );\r\n}\r\n\r\n.scene {\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n width: 100%;\r\n height: 100%;\r\n\r\n transform-style: preserve-3d;\r\n\r\n will-change: transform;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n ATMOSPHERE\r\n========================================================= *\/\r\n\r\n.atmosphere {\r\n\r\n position: absolute;\r\n\r\n inset: -20%;\r\n\r\n pointer-events: none;\r\n\r\n background:\r\n\r\n radial-gradient(\r\n ellipse at 50% 48%,\r\n rgba(107,157,142,.12),\r\n transparent 35%\r\n ),\r\n\r\n radial-gradient(\r\n ellipse at 25% 30%,\r\n rgba(183,255,60,.035),\r\n transparent 30%\r\n ),\r\n\r\n linear-gradient(\r\n 180deg,\r\n rgba(2,8,9,.05),\r\n rgba(0,0,0,.55)\r\n );\r\n\r\n z-index: 40;\r\n}\r\n\r\n.vignette {\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n z-index: 80;\r\n\r\n pointer-events: none;\r\n\r\n background:\r\n\r\n radial-gradient(\r\n ellipse at center,\r\n transparent 38%,\r\n rgba(0,0,0,.24) 70%,\r\n rgba(0,0,0,.80) 100%\r\n );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n LIGHT BEAMS\r\n========================================================= *\/\r\n\r\n.light-beam {\r\n\r\n position: absolute;\r\n\r\n top: -20%;\r\n\r\n width: 10vw;\r\n height: 150%;\r\n\r\n opacity: .06;\r\n\r\n filter: blur(12px);\r\n\r\n transform: rotate(17deg);\r\n\r\n background: linear-gradient(\r\n 90deg,\r\n transparent,\r\n rgba(220,255,244,.55),\r\n transparent\r\n );\r\n\r\n pointer-events: none;\r\n}\r\n\r\n.beam-one {\r\n left: 15%;\r\n}\r\n\r\n.beam-two {\r\n left: 45%;\r\n opacity: .035;\r\n}\r\n\r\n.beam-three {\r\n right: 12%;\r\n opacity: .025;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n DEPTH PLATES\r\n========================================================= *\/\r\n\r\n.plate {\r\n\r\n position: absolute;\r\n\r\n left: -10%;\r\n top: -10%;\r\n\r\n width: 120%;\r\n height: 120%;\r\n\r\n transform-style: preserve-3d;\r\n\r\n pointer-events: none;\r\n\r\n will-change: transform, opacity;\r\n\r\n opacity: .96;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n BACKGROUND PLATES\r\n========================================================= *\/\r\n\r\n.plate-bg {\r\n\r\n background:\r\n\r\n radial-gradient(\r\n ellipse at 50% 55%,\r\n rgba(42,86,79,.34),\r\n transparent 38%\r\n ),\r\n\r\n linear-gradient(\r\n 180deg,\r\n #081214 0%,\r\n #061012 45%,\r\n #020506 100%\r\n );\r\n}\r\n\r\n.plate-haze {\r\n\r\n background:\r\n\r\n radial-gradient(\r\n ellipse at 50% 50%,\r\n rgba(132,186,168,.12),\r\n transparent 30%\r\n );\r\n\r\n filter: blur(10px);\r\n}\r\n\r\n.plate-distance {\r\n\r\n background:\r\n\r\n radial-gradient(\r\n ellipse at 70% 40%,\r\n rgba(91,144,128,.13),\r\n transparent 25%\r\n );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CORAL ARCH\r\n========================================================= *\/\r\n\r\n.coral-arch {\r\n\r\n position: absolute;\r\n\r\n left: 50%;\r\n top: 50%;\r\n\r\n width: 54vw;\r\n height: 62vh;\r\n\r\n min-width: 420px;\r\n min-height: 380px;\r\n\r\n transform:\r\n translate(-50%, -42%)\r\n rotateX(8deg);\r\n\r\n border-radius:\r\n 48% 48% 8% 8% \/\r\n 70% 70% 12% 12%;\r\n\r\n background:\r\n\r\n radial-gradient(\r\n ellipse at 50% 95%,\r\n rgba(199,102,76,.72),\r\n transparent 23%\r\n ),\r\n\r\n radial-gradient(\r\n ellipse at 20% 55%,\r\n rgba(104,73,62,.85),\r\n transparent 24%\r\n ),\r\n\r\n radial-gradient(\r\n ellipse at 80% 48%,\r\n rgba(153,87,68,.80),\r\n transparent 25%\r\n ),\r\n\r\n linear-gradient(\r\n 90deg,\r\n #3a2825,\r\n #755047 20%,\r\n #2d2525 48%,\r\n #8d5748 78%,\r\n #302322\r\n );\r\n\r\n box-shadow:\r\n\r\n 0 0 80px rgba(155,82,63,.10),\r\n\r\n inset 0 0 60px rgba(0,0,0,.55);\r\n\r\n clip-path: polygon(\r\n\r\n 0% 100%,\r\n 0% 38%,\r\n\r\n 7% 28%,\r\n 14% 20%,\r\n 24% 13%,\r\n 35% 7%,\r\n\r\n 50% 4%,\r\n\r\n 65% 7%,\r\n 76% 13%,\r\n 86% 21%,\r\n 94% 31%,\r\n\r\n 100% 42%,\r\n 100% 100%,\r\n\r\n 73% 100%,\r\n 71% 55%,\r\n 66% 44%,\r\n 58% 37%,\r\n 50% 35%,\r\n 42% 37%,\r\n 34% 44%,\r\n 29% 56%,\r\n 27% 100%\r\n );\r\n}\r\n\r\n.coral-arch::before,\r\n.coral-arch::after {\r\n\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n border-radius: 50%;\r\n\r\n filter: blur(1px);\r\n\r\n opacity: .65;\r\n}\r\n\r\n.coral-arch::before {\r\n\r\n width: 22%;\r\n height: 12%;\r\n\r\n left: 8%;\r\n top: 30%;\r\n\r\n background:\r\n radial-gradient(\r\n circle,\r\n rgba(221,132,101,.8),\r\n transparent 70%\r\n );\r\n}\r\n\r\n.coral-arch::after {\r\n\r\n width: 26%;\r\n height: 15%;\r\n\r\n right: 5%;\r\n top: 28%;\r\n\r\n background:\r\n radial-gradient(\r\n circle,\r\n rgba(218,117,91,.7),\r\n transparent 70%\r\n );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CORAL DETAILS\r\n========================================================= *\/\r\n\r\n.coral-branch {\r\n\r\n position: absolute;\r\n\r\n width: 9px;\r\n\r\n background: linear-gradient(\r\n 180deg,\r\n #986050,\r\n #4a302c\r\n );\r\n\r\n border-radius: 100px;\r\n\r\n transform-origin: bottom;\r\n}\r\n\r\n.coral-branch::before,\r\n.coral-branch::after {\r\n\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n width: 8px;\r\n height: 8px;\r\n\r\n border-radius: 50%;\r\n\r\n background: #9e6251;\r\n}\r\n\r\n.coral-branch::before {\r\n top: 20%;\r\n left: -4px;\r\n}\r\n\r\n.coral-branch::after {\r\n top: 50%;\r\n right: -4px;\r\n}\r\n\r\n.branch-a {\r\n\r\n height: 180px;\r\n\r\n left: 14%;\r\n bottom: 8%;\r\n\r\n transform: rotate(-18deg);\r\n}\r\n\r\n.branch-b {\r\n\r\n height: 140px;\r\n\r\n right: 12%;\r\n bottom: 12%;\r\n\r\n transform: rotate(21deg);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n KELP\r\n========================================================= *\/\r\n\r\n.kelp {\r\n\r\n position: absolute;\r\n\r\n bottom: -15%;\r\n\r\n width: 100px;\r\n height: 115%;\r\n\r\n transform-origin: bottom center;\r\n\r\n opacity: .94;\r\n}\r\n\r\n.kelp::before {\r\n\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n left: 45%;\r\n\r\n bottom: 0;\r\n\r\n width: 15px;\r\n height: 100%;\r\n\r\n border-radius: 100%;\r\n\r\n background:\r\n\r\n linear-gradient(\r\n 90deg,\r\n #071d18,\r\n #164439 48%,\r\n #061510\r\n );\r\n\r\n transform:\r\n rotate(-8deg);\r\n\r\n filter: blur(.5px);\r\n}\r\n\r\n.kelp::after {\r\n\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n left: 4%;\r\n\r\n bottom: 22%;\r\n\r\n width: 100%;\r\n height: 75%;\r\n\r\n border-radius: 50%;\r\n\r\n background:\r\n\r\n repeating-linear-gradient(\r\n 175deg,\r\n transparent 0 36px,\r\n rgba(29,79,67,.85) 38px 48px,\r\n transparent 50px 74px\r\n );\r\n\r\n transform: rotate(-7deg);\r\n\r\n opacity: .8;\r\n}\r\n\r\n.kelp-left {\r\n\r\n left: -4%;\r\n\r\n transform:\r\n rotate(-9deg)\r\n scale(1.35);\r\n}\r\n\r\n.kelp-left-two {\r\n\r\n left: 12%;\r\n\r\n transform:\r\n rotate(10deg)\r\n scale(.9);\r\n}\r\n\r\n.kelp-right {\r\n\r\n right: -5%;\r\n\r\n transform:\r\n rotate(11deg)\r\n scale(1.5);\r\n}\r\n\r\n.kelp-right-two {\r\n\r\n right: 16%;\r\n\r\n transform:\r\n rotate(-7deg)\r\n scale(.85);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n SMALL FLOATING ELEMENTS\r\n========================================================= *\/\r\n\r\n.sea-shape {\r\n\r\n position: absolute;\r\n\r\n border-radius: 50%;\r\n\r\n background:\r\n radial-gradient(\r\n circle,\r\n rgba(130,180,165,.13),\r\n transparent 68%\r\n );\r\n\r\n filter: blur(2px);\r\n}\r\n\r\n.shape-1 {\r\n width: 120px;\r\n height: 120px;\r\n left: 17%;\r\n top: 27%;\r\n}\r\n\r\n.shape-2 {\r\n width: 70px;\r\n height: 70px;\r\n right: 23%;\r\n top: 18%;\r\n}\r\n\r\n.shape-3 {\r\n width: 160px;\r\n height: 160px;\r\n right: 5%;\r\n bottom: 14%;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CINEMATIC TEXT\r\n========================================================= *\/\r\n\r\n.journey-copy {\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n z-index: 70;\r\n\r\n pointer-events: none;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n justify-content: center;\r\n\r\n text-align: center;\r\n\r\n padding: 100px 24px;\r\n}\r\n\r\n.copy-inner {\r\n\r\n width: min(100%, 1000px);\r\n\r\n transition:\r\n opacity .2s linear,\r\n transform .2s linear;\r\n}\r\n\r\n.eyebrow {\r\n\r\n margin-bottom: 22px;\r\n\r\n color: var(--lime);\r\n\r\n font-size: 11px;\r\n font-weight: 600;\r\n\r\n letter-spacing: .24em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.hero-title {\r\n\r\n margin: 0;\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: clamp(\r\n 52px,\r\n 9vw,\r\n 148px\r\n );\r\n\r\n line-height: .84;\r\n\r\n letter-spacing: -.075em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.hero-title span {\r\n display: block;\r\n}\r\n\r\n.hero-title .outline {\r\n\r\n color: transparent;\r\n\r\n -webkit-text-stroke:\r\n 1px rgba(243,244,239,.55);\r\n}\r\n\r\n.hero-sub {\r\n\r\n max-width: 530px;\r\n\r\n margin: 30px auto 0;\r\n\r\n color: rgba(243,244,239,.64);\r\n\r\n font-size: 15px;\r\n\r\n line-height: 1.7;\r\n}\r\n\r\n.scroll-indicator {\r\n\r\n position: absolute;\r\n\r\n bottom: 34px;\r\n left: 50%;\r\n\r\n transform: translateX(-50%);\r\n\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n\r\n gap: 10px;\r\n\r\n color: rgba(243,244,239,.5);\r\n\r\n font-size: 9px;\r\n\r\n letter-spacing: .22em;\r\n}\r\n\r\n.scroll-line {\r\n\r\n width: 1px;\r\n height: 45px;\r\n\r\n overflow: hidden;\r\n\r\n background: rgba(255,255,255,.14);\r\n\r\n position: relative;\r\n}\r\n\r\n.scroll-line::after {\r\n\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n left: 0;\r\n top: -100%;\r\n\r\n width: 100%;\r\n height: 100%;\r\n\r\n background: var(--lime);\r\n\r\n animation: scrollLine 1.8s infinite;\r\n}\r\n\r\n@keyframes scrollLine {\r\n\r\n 0% {\r\n top: -100%;\r\n }\r\n\r\n 60% {\r\n top: 100%;\r\n }\r\n\r\n 100% {\r\n top: 100%;\r\n }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n JOURNEY HUD\r\n========================================================= *\/\r\n\r\n.depth-hud {\r\n\r\n position: absolute;\r\n\r\n left: 28px;\r\n bottom: 28px;\r\n\r\n z-index: 90;\r\n\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n\r\n color: rgba(255,255,255,.45);\r\n\r\n font-size: 9px;\r\n\r\n letter-spacing: .16em;\r\n}\r\n\r\n.hud-line {\r\n\r\n width: 70px;\r\n height: 1px;\r\n\r\n background: rgba(255,255,255,.18);\r\n\r\n position: relative;\r\n}\r\n\r\n.hud-progress {\r\n\r\n position: absolute;\r\n\r\n left: 0;\r\n top: 0;\r\n\r\n height: 100%;\r\n\r\n width: 0;\r\n\r\n background: var(--lime);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CNC MAIN CONTENT\r\n========================================================= *\/\r\n\r\n.cnc-content {\r\n\r\n position: relative;\r\n\r\n width: 100%;\r\n\r\n background: var(--black);\r\n\r\n overflow: hidden;\r\n}\r\n\r\n.cnc-content::before {\r\n\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n pointer-events: none;\r\n\r\n background:\r\n\r\n radial-gradient(\r\n ellipse at 70% 0%,\r\n rgba(183,255,60,.035),\r\n transparent 30%\r\n );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n INTRO\r\n========================================================= *\/\r\n\r\n.intro-section {\r\n\r\n min-height: 90vh;\r\n\r\n display: flex;\r\n align-items: center;\r\n\r\n border-top: 1px solid var(--border);\r\n}\r\n\r\n.intro-grid {\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n 1.4fr .8fr;\r\n\r\n gap: 80px;\r\n\r\n align-items: end;\r\n}\r\n\r\n.section-kicker {\r\n\r\n color: var(--lime);\r\n\r\n font-size: 11px;\r\n\r\n letter-spacing: .2em;\r\n\r\n text-transform: uppercase;\r\n\r\n margin-bottom: 22px;\r\n}\r\n\r\n.intro-title {\r\n\r\n margin: 0;\r\n\r\n max-width: 900px;\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: clamp(\r\n 46px,\r\n 7vw,\r\n 100px\r\n );\r\n\r\n line-height: .9;\r\n\r\n letter-spacing: -.065em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.intro-title span {\r\n color: var(--muted);\r\n}\r\n\r\n.intro-copy {\r\n\r\n color: var(--muted);\r\n\r\n font-size: 15px;\r\n\r\n line-height: 1.8;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n STATS\r\n========================================================= *\/\r\n\r\n.stats {\r\n\r\n border-top: 1px solid var(--border);\r\n border-bottom: 1px solid var(--border);\r\n}\r\n\r\n.stats-grid {\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n repeat(4, 1fr);\r\n}\r\n\r\n.stat {\r\n\r\n padding: 42px 28px;\r\n\r\n border-right: 1px solid var(--border);\r\n}\r\n\r\n.stat:first-child {\r\n padding-left: 0;\r\n}\r\n\r\n.stat:last-child {\r\n border-right: none;\r\n}\r\n\r\n.stat-number {\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: clamp(\r\n 34px,\r\n 4vw,\r\n 58px\r\n );\r\n\r\n letter-spacing: -.06em;\r\n}\r\n\r\n.stat-label {\r\n\r\n margin-top: 9px;\r\n\r\n color: var(--muted);\r\n\r\n font-size: 12px;\r\n\r\n text-transform: uppercase;\r\n\r\n letter-spacing: .12em;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n MACHINE SHOWCASE\r\n========================================================= *\/\r\n\r\n.machines-section {\r\n\r\n padding: 150px 0;\r\n\r\n background:\r\n linear-gradient(\r\n 180deg,\r\n #08090b,\r\n #0d1013\r\n );\r\n}\r\n\r\n.section-heading {\r\n\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: end;\r\n\r\n margin-bottom: 60px;\r\n}\r\n\r\n.section-heading h2 {\r\n\r\n margin: 0;\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: clamp(\r\n 42px,\r\n 6vw,\r\n 82px\r\n );\r\n\r\n line-height: .9;\r\n\r\n letter-spacing: -.06em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.section-heading p {\r\n\r\n max-width: 350px;\r\n\r\n margin: 0;\r\n\r\n color: v;\r\n\r\n font-size: 14px;\r\n\r\n line-height: 1.7;\r\n}\r\n\r\n.machine-grid {\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n repeat(3, 1fr);\r\n\r\n gap: 18px;\r\n}\r\n\r\n.machine {\r\n\r\n position: relative;\r\n\r\n min-height: 540px;\r\n\r\n padding: 26px;\r\n\r\n overflow: hidden;\r\n\r\n background: #111419;\r\n\r\n border: 1px solid var(--border);\r\n\r\n transition:\r\n transform .5s cubic-bezier(.2,.7,.2,1),\r\n border-color .4s ease;\r\n}\r\n\r\n.machine:hover {\r\n\r\n transform: translateY(-8px);\r\n\r\n border-color:\r\n rgba(183,255,60,.35);\r\n}\r\n\r\n.machine-image {\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n background-size: cover;\r\n background-position: center;\r\n\r\n opacity: .72;\r\n\r\n transition:\r\n transform .8s cubic-bezier(.2,.7,.2,1),\r\n opacity .5s ease;\r\n}\r\n\r\n.machine:hover .machine-image {\r\n\r\n transform: scale(1.06);\r\n\r\n opacity: .9;\r\n}\r\n\r\n.machine-image::after {\r\n\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n background:\r\n linear-gradient(\r\n 180deg,\r\n rgba(0,0,0,.10),\r\n rgba(0,0,0,.88)\r\n );\r\n}\r\n\r\n.machine-one .machine-image {\r\n\r\n background-image:\r\n url(https:\/\/www.rcoeng.com\/hs-fs\/hubfs\/Closeup-of-modern-CNC-machine.jpg?width=1200&height=800&name=Closeup-of-modern-CNC-machine.jpg);\r\n}\r\n\r\n.machine-two .machine-image {\r\n\r\n background-image:\r\n url(\"https:\/\/images.unsplash.com\/photo-1537462715879-360eeb61a0ad?auto=format&fit=crop&w=1400&q=85\");\r\n}\r\n\r\n.machine-three .machine-image {\r\n\r\n background-image:\r\n url(\"https:\/\/images.unsplash.com\/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=1400&q=85\");\r\n}\r\n\r\n.machine-content {\r\n\r\n position: absolute;\r\n\r\n left: 26px;\r\n right: 26px;\r\n bottom: 26px;\r\n\r\n z-index: 2;\r\n}\r\n\r\n.machine-tag {\r\n\r\n display: inline-block;\r\n\r\n margin-bottom: 16px;\r\n\r\n color: var(--lime);\r\n\r\n font-size: 10px;\r\n\r\n letter-spacing: .15em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.machine h3 {\r\n\r\n margin: 0;\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: 34px;\r\n\r\n letter-spacing: -.05em;\r\n}\r\n\r\n.machine p {\r\n\r\n margin: 12px 0 22px;\r\n\r\n max-width: 350px;\r\n\r\n color: rgba(255,255,255,.62);\r\n\r\n font-size: 13px;\r\n\r\n line-height: 1.6;\r\n}\r\n\r\n.machine-link {\r\n\r\n display: inline-flex;\r\n align-items: center;\r\n\r\n gap: 10px;\r\n\r\n color: var(--white);\r\n\r\n font-size: 11px;\r\n\r\n letter-spacing: .12em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.machine-link span {\r\n\r\n color: var(--lime);\r\n\r\n transition: transform .25s ease;\r\n}\r\n\r\n.machine:hover .machine-link span {\r\n transform: translateX(5px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n TECHNOLOGY\r\n========================================================= *\/\r\n\r\n.technology-section {\r\n\r\n padding: 150px 0;\r\n\r\n background: #f0f1ed;\r\n\r\n color: #0b0d0e;\r\n}\r\n\r\n.tech-grid {\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n .8fr 1.2fr;\r\n\r\n gap: 100px;\r\n}\r\n\r\n.tech-title {\r\n\r\n margin: 0;\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: clamp(\r\n 48px,\r\n 6vw,\r\n 88px\r\n );\r\n\r\n line-height: .9;\r\n\r\n letter-spacing: -.07em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.tech-title span {\r\n opacity: .4;\r\n}\r\n\r\n.tech-copy {\r\n\r\n margin-top: 28px;\r\n\r\n color: #61666a;\r\n\r\n font-size: 14px;\r\n\r\n line-height: 1.8;\r\n}\r\n\r\n.tech-table {\r\n\r\n border-top: 1px solid rgba(0,0,0,.18);\r\n}\r\n\r\n.tech-row {\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n 1fr 1fr;\r\n\r\n padding: 24px 0;\r\n\r\n border-bottom: 1px solid rgba(0,0,0,.14);\r\n\r\n font-size: 13px;\r\n}\r\n\r\n.tech-row div:first-child {\r\n\r\n color: #777b7d;\r\n\r\n text-transform: uppercase;\r\n\r\n letter-spacing: .1em;\r\n}\r\n\r\n.tech-row div:last-child {\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-weight: 600;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n APPLICATIONS\r\n========================================================= *\/\r\n\r\n.applications {\r\n\r\n padding: 150px 0;\r\n}\r\n\r\n.application-grid {\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n repeat(2, 1fr);\r\n\r\n border-top: 1px solid var(--border);\r\n}\r\n\r\n.application {\r\n\r\n min-height: 250px;\r\n\r\n padding: 35px;\r\n\r\n border-right: 1px solid var(--border);\r\n border-bottom: 1px solid var(--border);\r\n\r\n transition:\r\n background .35s ease;\r\n}\r\n\r\n.application:nth-child(even) {\r\n border-right: none;\r\n}\r\n\r\n.application:hover {\r\n\r\n background:\r\n rgba(183,255,60,.025);\r\n}\r\n\r\n.application-number {\r\n\r\n color: var(--lime);\r\n\r\n font-size: 11px;\r\n\r\n letter-spacing: .15em;\r\n}\r\n\r\n.application h3 {\r\n\r\n margin: 50px 0 12px;\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: 28px;\r\n\r\n letter-spacing: -.04em;\r\n}\r\n\r\n.application p {\r\n\r\n margin: 0;\r\n\r\n max-width: 400px;\r\n\r\n color: var(--muted);\r\n\r\n font-size: 13px;\r\n\r\n line-height: 1.7;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CTA\r\n========================================================= *\/\r\n\r\n.cta-section {\r\n\r\n min-height: 80vh;\r\n\r\n display: flex;\r\n align-items: center;\r\n\r\n border-top: 1px solid var(--border);\r\n\r\n background:\r\n\r\n radial-gradient(\r\n circle at 70% 50%,\r\n rgba(183,255,60,.07),\r\n transparent 28%\r\n ),\r\n\r\n #08090b;\r\n}\r\n\r\n.cta-content {\r\n\r\n width: 100%;\r\n\r\n text-align: center;\r\n}\r\n\r\n.cta-title {\r\n\r\n margin: 0;\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: clamp(\r\n 60px,\r\n 10vw,\r\n 150px\r\n );\r\n\r\n line-height: .8;\r\n\r\n letter-spacing: -.08em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.cta-title span {\r\n\r\n display: block;\r\n\r\n color: transparent;\r\n\r\n -webkit-text-stroke:\r\n 1px rgba(243,244,239,.45);\r\n}\r\n\r\n.cta-button {\r\n\r\n display: inline-flex;\r\n\r\n margin-top: 48px;\r\n\r\n padding: 18px 30px;\r\n\r\n background: var(--lime);\r\n\r\n color: #08090b;\r\n\r\n font-size: 11px;\r\n font-weight: 700;\r\n\r\n letter-spacing: .15em;\r\n\r\n text-transform: uppercase;\r\n\r\n transition:\r\n transform .25s ease,\r\n box-shadow .25s ease;\r\n}\r\n\r\n.cta-button:hover {\r\n\r\n transform: translateY(-4px);\r\n\r\n box-shadow:\r\n 0 14px 50px rgba(183,255,60,.18);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n FOOTER\r\n========================================================= *\/\r\n\r\nfooter {\r\n\r\n padding: 35px 0;\r\n\r\n border-top: 1px solid var(--border);\r\n\r\n color: var(--muted);\r\n\r\n font-size: 11px;\r\n}\r\n\r\n.footer-inner {\r\n\r\n display: flex;\r\n\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.footer-logo {\r\n\r\n color: var(--white);\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n\r\n font-size: 18px;\r\n font-weight: 700;\r\n}\r\n\r\n.footer-logo span {\r\n color: var(--lime);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n REVEAL\r\n========================================================= *\/\r\n\r\n.reveal {\r\n\r\n opacity: 0;\r\n\r\n transform: translateY(35px);\r\n\r\n transition:\r\n opacity .9s ease,\r\n transform .9s cubic-bezier(.2,.7,.2,1);\r\n}\r\n\r\n.reveal.visible {\r\n\r\n opacity: 1;\r\n\r\n transform: translateY(0);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n RESPONSIVE\r\n========================================================= *\/\r\n\r\n@media (max-width: 1000px) {\r\n\r\n .nav-links {\r\n display: none;\r\n }\r\n\r\n .intro-grid,\r\n .tech-grid {\r\n\r\n grid-template-columns: 1fr;\r\n\r\n gap: 45px;\r\n }\r\n\r\n .machine-grid {\r\n\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .machine {\r\n min-height: 480px;\r\n }\r\n\r\n .stats-grid {\r\n\r\n grid-template-columns:\r\n repeat(2, 1fr);\r\n }\r\n\r\n .stat {\r\n\r\n border-bottom: 1px solid var(--border);\r\n }\r\n}\r\n\r\n\r\n@media (max-width: 700px) {\r\n\r\n .container,\r\n .section-inner {\r\n\r\n width: calc(100% - 32px);\r\n }\r\n\r\n .nav-inner {\r\n width: calc(100% - 32px);\r\n }\r\n\r\n .site-nav {\r\n height: 70px;\r\n }\r\n\r\n .nav-quote {\r\n padding: 10px 13px;\r\n }\r\n\r\n .hero-title {\r\n\r\n font-size:\r\n clamp(46px, 15vw, 80px);\r\n }\r\n\r\n .hero-sub {\r\n\r\n font-size: 13px;\r\n\r\n max-width: 330px;\r\n }\r\n\r\n .coral-arch {\r\n\r\n width: 100vw;\r\n height: 58vh;\r\n\r\n min-width: 0;\r\n }\r\n\r\n .kelp {\r\n\r\n width: 70px;\r\n }\r\n\r\n .kelp-right,\r\n .kelp-left {\r\n\r\n transform:\r\n rotate(8deg)\r\n scale(1.1);\r\n }\r\n\r\n .stats-grid {\r\n\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .stat,\r\n .stat:first-child {\r\n\r\n padding: 28px 0;\r\n\r\n border-right: none;\r\n }\r\n\r\n .section-heading {\r\n\r\n display: block;\r\n }\r\n\r\n .section-heading p {\r\n\r\n margin-top: 25px;\r\n }\r\n\r\n .applications {\r\n\r\n padding: 100px 0;\r\n }\r\n\r\n .application-grid {\r\n\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .application,\r\n .application:nth-child(even) {\r\n\r\n border-right: none;\r\n }\r\n\r\n .technology-section,\r\n .machines-section {\r\n\r\n padding: 100px 0;\r\n }\r\n\r\n .tech-row {\r\n\r\n grid-template-columns: 1fr;\r\n\r\n gap: 10px;\r\n }\r\n\r\n .footer-inner {\r\n\r\n flex-direction: column;\r\n\r\n align-items: flex-start;\r\n\r\n gap: 15px;\r\n }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n html {\r\n scroll-behavior: auto;\r\n }\r\n\r\n *,\r\n *::before,\r\n *::after {\r\n\r\n animation-duration: .001ms !important;\r\n animation-iteration-count: 1 !important;\r\n\r\n transition-duration: .001ms !important;\r\n }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n\r\n\r\n<header class=\"site-nav\">\r\n\r\n <div class=\"nav-inner\">\r\n\r\n <a href=\"#\" class=\"logo\">\r\n AXION<span>.CNC<\/span>\r\n <\/a>\r\n\r\n <nav class=\"nav-links\">\r\n\r\n <a href=\"#machines\">Machines<\/a>\r\n <a href=\"#technology\">Technology<\/a>\r\n <a href=\"#applications\">Applications<\/a>\r\n\r\n <\/nav>\r\n\r\n <a href=\"#quote\" class=\"nav-quote\">\r\n Request a Quote\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n<\/header>\r\n\r\n\r\n\r\n\r\n<section class=\"cinematic-journey\" id=\"journey\">\r\n\r\n <div class=\"scene-sticky\">\r\n\r\n <div class=\"scene\" id=\"scene\">\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate plate-bg\"\r\n data-depth=\"-3600\"\r\n data-scale=\"1\"\r\n ><\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate plate-distance\"\r\n data-depth=\"-3250\"\r\n data-scale=\"1\"\r\n >\r\n\r\n <div class=\"sea-shape shape-1\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate plate-distance\"\r\n data-depth=\"-2900\"\r\n data-scale=\"1.05\"\r\n >\r\n\r\n <div class=\"sea-shape shape-2\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate\"\r\n data-depth=\"-2550\"\r\n data-scale=\"1.08\"\r\n >\r\n\r\n <div class=\"coral-arch\">\r\n\r\n <div class=\"coral-branch branch-a\"><\/div>\r\n <div class=\"coral-branch branch-b\"><\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate plate-haze\"\r\n data-depth=\"-2150\"\r\n ><\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate\"\r\n data-depth=\"-1800\"\r\n >\r\n\r\n <div class=\"kelp kelp-right-two\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate\"\r\n data-depth=\"-1450\"\r\n >\r\n\r\n <div class=\"kelp kelp-left-two\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate\"\r\n data-depth=\"-1100\"\r\n >\r\n\r\n <div class=\"sea-shape shape-3\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate\"\r\n data-depth=\"-750\"\r\n >\r\n\r\n <div class=\"kelp kelp-right\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate\"\r\n data-depth=\"-390\"\r\n >\r\n\r\n <div class=\"kelp kelp-left\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"plate\"\r\n data-depth=\"0\"\r\n >\r\n\r\n <div class=\"kelp kelp-left\"><\/div>\r\n <div class=\"kelp kelp-right\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"atmosphere\"><\/div>\r\n\r\n <div class=\"light-beam beam-one\"><\/div>\r\n <div class=\"light-beam beam-two\"><\/div>\r\n <div class=\"light-beam beam-three\"><\/div>\r\n\r\n <div class=\"vignette\"><\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"journey-copy\">\r\n\r\n <div\r\n class=\"copy-inner\"\r\n id=\"heroCopy\"\r\n >\r\n\r\n <div class=\"eyebrow\">\r\n Advanced CNC Manufacturing\r\n <\/div>\r\n\r\n <h1 class=\"hero-title\">\r\n\r\n <span>Engineered<\/span>\r\n\r\n <span class=\"outline\">\r\n For Precision.\r\n <\/span>\r\n\r\n <span>Built To Perform.<\/span>\r\n\r\n <\/h1>\r\n\r\n <p class=\"hero-sub\">\r\n\r\n Precision machining technology designed around\r\n control, repeatability and performance.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"depth-hud\">\r\n\r\n <span>DEPTH<\/span>\r\n\r\n <div class=\"hud-line\">\r\n <div\r\n class=\"hud-progress\"\r\n id=\"hudProgress\"\r\n ><\/div>\r\n <\/div>\r\n\r\n <span id=\"depthValue\">\r\n 00%\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"scroll-indicator\">\r\n\r\n <span>SCROLL TO ENTER<\/span>\r\n\r\n <div class=\"scroll-line\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n\r\n<main class=\"cnc-content\">\r\n\r\n\r\n \r\n\r\n <section class=\"section intro-section\">\r\n\r\n <div class=\"section-inner\">\r\n\r\n <div class=\"intro-grid reveal\">\r\n\r\n <div>\r\n\r\n <div class=\"section-kicker\">\r\n AXION.CNC \/ Precision Systems\r\n <\/div>\r\n\r\n <h2 class=\"intro-title\">\r\n\r\n Precision isn't\r\n <span>a specification.<\/span>\r\n\r\n It's a system.\r\n\r\n <\/h2>\r\n\r\n <\/div>\r\n\r\n <p class=\"intro-copy\">\r\n\r\n AXION.CNC develops advanced machining systems\r\n for manufacturers who demand predictable results,\r\n repeatable processes and uncompromising control.\r\n\r\n <br><br>\r\n\r\n From complex components to high-volume production,\r\n every machine is engineered around one objective:\r\n\r\n <strong>\r\n making precision repeatable.\r\n <\/strong>\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n\r\n \r\n\r\n <section class=\"stats\">\r\n\r\n <div class=\"section-inner\">\r\n\r\n <div class=\"stats-grid\">\r\n\r\n <div class=\"stat reveal\">\r\n\r\n <div class=\"stat-number\">\r\n \u00b10.005\r\n <\/div>\r\n\r\n <div class=\"stat-label\">\r\n Precision capability\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"stat reveal\">\r\n\r\n <div class=\"stat-number\">\r\n 15+\r\n <\/div>\r\n\r\n <div class=\"stat-label\">\r\n Years engineering\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"stat reveal\">\r\n\r\n <div class=\"stat-number\">\r\n 500+\r\n <\/div>\r\n\r\n <div class=\"stat-label\">\r\n Machines delivered\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"stat reveal\">\r\n\r\n <div class=\"stat-number\">\r\n 24\/7\r\n <\/div>\r\n\r\n <div class=\"stat-label\">\r\n Production ready\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n\r\n \r\n\r\n <section\r\n class=\"machines-section\"\r\n id=\"machines\"\r\n >\r\n\r\n <div class=\"section-inner\">\r\n\r\n <div class=\"section-heading reveal\">\r\n\r\n <div>\r\n\r\n <div class=\"section-kicker\">\r\n Machine Systems\r\n <\/div>\r\n\r\n <h2>\r\n Built<br>\r\n Different.\r\n <\/h2>\r\n\r\n <\/div>\r\n\r\n <p>\r\n\r\n High-performance machining platforms\r\n engineered for demanding production\r\n environments.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"machine-grid\">\r\n\r\n\r\n \r\n\r\n <article class=\"machine machine-one reveal\">\r\n\r\n <div class=\"machine-image\"><\/div>\r\n\r\n <div class=\"machine-content\">\r\n\r\n <div class=\"machine-tag\">\r\n Vertical Machining\r\n <\/div>\r\n\r\n <h3>\r\n VX-850 VMC\r\n <\/h3>\r\n\r\n <p>\r\n High-speed vertical machining platform\r\n engineered for rigid cutting and\r\n repeatable production.\r\n <\/p>\r\n\r\n <a\r\n href=\"#quote\"\r\n class=\"machine-link\"\r\n >\r\n Explore Machine\r\n <span>\u2192<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article class=\"machine machine-two reveal\">\r\n\r\n <div class=\"machine-image\"><\/div>\r\n\r\n <div class=\"machine-content\">\r\n\r\n <div class=\"machine-tag\">\r\n Turning Centre\r\n <\/div>\r\n\r\n <h3>\r\n TX-500 PRO\r\n <\/h3>\r\n\r\n <p>\r\n Compact turning technology combining\r\n rigidity, speed and precise tool control.\r\n <\/p>\r\n\r\n <a\r\n href=\"#quote\"\r\n class=\"machine-link\"\r\n >\r\n Explore Machine\r\n <span>\u2192<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article class=\"machine machine-three reveal\">\r\n\r\n <div class=\"machine-image\"><\/div>\r\n\r\n <div class=\"machine-content\">\r\n\r\n <div class=\"machine-tag\">\r\n 5-Axis Platform\r\n <\/div>\r\n\r\n <h3>\r\n AX-5 ULTRA\r\n <\/h3>\r\n\r\n <p>\r\n Multi-axis machining architecture\r\n built for complex geometries and\r\n advanced component production.\r\n <\/p>\r\n\r\n <a\r\n href=\"#quote\"\r\n class=\"machine-link\"\r\n >\r\n Explore Machine\r\n <span>\u2192<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n\r\n \r\n\r\n <section\r\n class=\"technology-section\"\r\n id=\"technology\"\r\n >\r\n\r\n <div class=\"section-inner\">\r\n\r\n <div class=\"tech-grid reveal\">\r\n\r\n <div>\r\n\r\n <div class=\"section-kicker\">\r\n Engineering \/ Technology\r\n <\/div>\r\n\r\n <h2 class=\"tech-title\">\r\n\r\n Control\r\n <span>at every<\/span>\r\n level.\r\n\r\n <\/h2>\r\n\r\n <p class=\"tech-copy\">\r\n\r\n Every AXION system is developed around\r\n mechanical rigidity, thermal stability,\r\n intelligent control and predictable\r\n machine behaviour.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"tech-table\">\r\n\r\n <div class=\"tech-row\">\r\n\r\n <div>Spindle<\/div>\r\n\r\n <div>\r\n High-speed precision spindle\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"tech-row\">\r\n\r\n <div>Structure<\/div>\r\n\r\n <div>\r\n Heavy-duty rigid construction\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"tech-row\">\r\n\r\n <div>Control<\/div>\r\n\r\n <div>\r\n Advanced CNC control architecture\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"tech-row\">\r\n\r\n <div>Accuracy<\/div>\r\n\r\n <div>\r\n Precision positioning system\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"tech-row\">\r\n\r\n <div>Automation<\/div>\r\n\r\n <div>\r\n Production-ready integration\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n\r\n \r\n\r\n <section\r\n class=\"applications\"\r\n id=\"applications\"\r\n >\r\n\r\n <div class=\"section-inner\">\r\n\r\n <div class=\"section-heading reveal\">\r\n\r\n <div>\r\n\r\n <div class=\"section-kicker\">\r\n Applications\r\n <\/div>\r\n\r\n <h2>\r\n Made For<br>\r\n Complexity.\r\n <\/h2>\r\n\r\n <\/div>\r\n\r\n <p>\r\n\r\n From individual precision components\r\n to demanding production environments.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"application-grid\">\r\n\r\n\r\n <article class=\"application reveal\">\r\n\r\n <div class=\"application-number\">\r\n 01 \/ AUTOMOTIVE\r\n <\/div>\r\n\r\n <h3>\r\n Automotive Components\r\n <\/h3>\r\n\r\n <p>\r\n Precision components requiring\r\n repeatability, consistency and\r\n production efficiency.\r\n <\/p>\r\n\r\n <\/article>\r\n\r\n\r\n <article class=\"application reveal\">\r\n\r\n <div class=\"application-number\">\r\n 02 \/ AEROSPACE\r\n <\/div>\r\n\r\n <h3>\r\n Aerospace\r\n <\/h3>\r\n\r\n <p>\r\n Complex geometries and demanding\r\n machining requirements.\r\n <\/p>\r\n\r\n <\/article>\r\n\r\n\r\n <article class=\"application reveal\">\r\n\r\n <div class=\"application-number\">\r\n 03 \/ ENGINEERING\r\n <\/div>\r\n\r\n <h3>\r\n General Engineering\r\n <\/h3>\r\n\r\n <p>\r\n Flexible machining solutions for\r\n specialised components and production.\r\n <\/p>\r\n\r\n <\/article>\r\n\r\n\r\n <article class=\"application reveal\">\r\n\r\n <div class=\"application-number\">\r\n 04 \/ TOOLING\r\n <\/div>\r\n\r\n <h3>\r\n Tool & Die\r\n <\/h3>\r\n\r\n <p>\r\n Accurate machining for moulds,\r\n dies and advanced tooling applications.\r\n <\/p>\r\n\r\n <\/article>\r\n\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n\r\n \r\n\r\n <section\r\n class=\"cta-section\"\r\n id=\"quote\"\r\n >\r\n\r\n <div class=\"section-inner\">\r\n\r\n <div class=\"cta-content reveal\">\r\n\r\n <div class=\"section-kicker\">\r\n Start A Conversation\r\n <\/div>\r\n\r\n <h2 class=\"cta-title\">\r\n\r\n Let's Build\r\n\r\n <span>Precision.<\/span>\r\n\r\n <\/h2>\r\n\r\n <a\r\n href=\"mailto:sales@axioncnc.example\"\r\n class=\"cta-button\"\r\n >\r\n Request A Quote \u2192\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n\r\n<\/main>\r\n\r\n\r\n\r\n\r\n<footer>\r\n\r\n <div class=\"container\">\r\n\r\n <div class=\"footer-inner\">\r\n\r\n <div class=\"footer-logo\">\r\n AXION<span>.CNC<\/span>\r\n <\/div>\r\n\r\n <div>\r\n Engineered for Precision. Built to Perform.\r\n <\/div>\r\n\r\n <div>\r\n \u00a9 2026 AXION CNC\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/footer>\r\n\r\n\r\n<script>\r\n\r\n\/* =========================================================\r\n CINEMATIC CAMERA ENGINE\r\n========================================================= *\/\r\n\r\n(() => {\r\n\r\n const journey =\r\n document.querySelector(\".cinematic-journey\");\r\n\r\n const scene =\r\n document.querySelector(\"#scene\");\r\n\r\n const plates =\r\n [...document.querySelectorAll(\".plate\")];\r\n\r\n const heroCopy =\r\n document.querySelector(\"#heroCopy\");\r\n\r\n const hudProgress =\r\n document.querySelector(\"#hudProgress\");\r\n\r\n const depthValue =\r\n document.querySelector(\"#depthValue\");\r\n\r\n\r\n if (!journey || !scene || !plates.length) {\r\n return;\r\n }\r\n\r\n\r\n \/* -------------------------------------------------------\r\n STATE\r\n ------------------------------------------------------- *\/\r\n\r\n let targetProgress = 0;\r\n\r\n let progress = 0;\r\n\r\n let targetCameraX = 0;\r\n let targetCameraY = 0;\r\n\r\n let cameraX = 0;\r\n let cameraY = 0;\r\n\r\n let pointerActive = false;\r\n\r\n const reducedMotion =\r\n window.matchMedia(\r\n \"(prefers-reduced-motion: reduce)\"\r\n ).matches;\r\n\r\n\r\n \/* -------------------------------------------------------\r\n DEPTH SETTINGS\r\n ------------------------------------------------------- *\/\r\n\r\n const START_Z = 0;\r\n\r\n \/*\r\n The camera travels through the full depth\r\n of the environment.\r\n *\/\r\n\r\n const END_Z = 3700;\r\n\r\n\r\n \/* -------------------------------------------------------\r\n CLAMP\r\n ------------------------------------------------------- *\/\r\n\r\n function clamp(value, min, max) {\r\n\r\n return Math.max(\r\n min,\r\n Math.min(max, value)\r\n );\r\n\r\n }\r\n\r\n\r\n \/* -------------------------------------------------------\r\n SMOOTH STEP\r\n ------------------------------------------------------- *\/\r\n\r\n function smoothstep(t) {\r\n\r\n t = clamp(t, 0, 1);\r\n\r\n return (\r\n t * t *\r\n (3 - 2 * t)\r\n );\r\n\r\n }\r\n\r\n\r\n \/* -------------------------------------------------------\r\n SCROLL TARGET\r\n ------------------------------------------------------- *\/\r\n\r\n function updateScrollTarget() {\r\n\r\n const rect =\r\n journey.getBoundingClientRect();\r\n\r\n const scrollable =\r\n journey.offsetHeight -\r\n window.innerHeight;\r\n\r\n if (scrollable <= 0) {\r\n targetProgress = 0;\r\n return;\r\n }\r\n\r\n const traveled =\r\n -rect.top;\r\n\r\n targetProgress =\r\n clamp(\r\n traveled \/ scrollable,\r\n 0,\r\n 1\r\n );\r\n\r\n }\r\n\r\n\r\n \/* -------------------------------------------------------\r\n POINTER CAMERA\r\n ------------------------------------------------------- *\/\r\n\r\n window.addEventListener(\r\n \"pointermove\",\r\n (event) => {\r\n\r\n if (reducedMotion) {\r\n return;\r\n }\r\n\r\n const x =\r\n event.clientX \/\r\n window.innerWidth;\r\n\r\n const y =\r\n event.clientY \/\r\n window.innerHeight;\r\n\r\n \/*\r\n Camera offset only.\r\n Individual objects are NOT\r\n independently controlled.\r\n *\/\r\n\r\n targetCameraX =\r\n (x - .5) * -26;\r\n\r\n targetCameraY =\r\n (y - .5) * 18;\r\n\r\n pointerActive = true;\r\n\r\n },\r\n {\r\n passive: true\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n \"pointerleave\",\r\n () => {\r\n\r\n targetCameraX = 0;\r\n targetCameraY = 0;\r\n\r\n pointerActive = false;\r\n\r\n }\r\n );\r\n\r\n\r\n \/* -------------------------------------------------------\r\n PLATE DEPTH\r\n ------------------------------------------------------- *\/\r\n\r\n function renderPlate(\r\n plate,\r\n cameraZ,\r\n index\r\n ) {\r\n\r\n const plateDepth =\r\n parseFloat(\r\n plate.dataset.depth || \"0\"\r\n );\r\n\r\n \/*\r\n Relative distance from camera.\r\n *\/\r\n\r\n const relative =\r\n plateDepth + cameraZ;\r\n\r\n \/*\r\n Convert distance into\r\n perspective scale.\r\n\r\n Near plates become huge and\r\n leave the viewport quickly.\r\n *\/\r\n\r\n const distance =\r\n Math.abs(relative);\r\n\r\n const perspectiveScale =\r\n clamp(\r\n 1 +\r\n (cameraZ \/ 2500) *\r\n (1 + index * .025),\r\n .72,\r\n 3.5\r\n );\r\n\r\n\r\n \/*\r\n Plates that have already been\r\n passed by the camera fade out.\r\n *\/\r\n\r\n let opacity = 1;\r\n\r\n if (relative > 500) {\r\n\r\n opacity =\r\n clamp(\r\n 1 -\r\n (relative - 500) \/ 650,\r\n 0,\r\n 1\r\n );\r\n\r\n }\r\n\r\n\r\n \/*\r\n Deep layers become slightly\r\n more visible as we approach.\r\n *\/\r\n\r\n if (relative < -2200) {\r\n\r\n opacity =\r\n clamp(\r\n .25 +\r\n (relative + 2200) \/ 2200,\r\n .25,\r\n 1\r\n );\r\n\r\n }\r\n\r\n\r\n const translateX =\r\n cameraX *\r\n (1 + index * .015);\r\n\r\n const translateY =\r\n cameraY *\r\n (1 + index * .01);\r\n\r\n\r\n plate.style.transform = `\r\n\r\n translate3d(\r\n ${translateX}px,\r\n ${translateY}px,\r\n ${relative}px\r\n )\r\n\r\n scale(\r\n ${perspectiveScale}\r\n )\r\n\r\n `;\r\n\r\n plate.style.opacity = opacity;\r\n\r\n }\r\n\r\n\r\n \/* -------------------------------------------------------\r\n HERO TEXT\r\n ------------------------------------------------------- *\/\r\n\r\n function renderCopy(p) {\r\n\r\n \/*\r\n Hero text slowly leaves as\r\n camera begins travelling.\r\n *\/\r\n\r\n let opacity = 1;\r\n\r\n let y = 0;\r\n\r\n if (p < .18) {\r\n\r\n opacity = 1;\r\n\r\n y = 0;\r\n\r\n } else if (p < .36) {\r\n\r\n const t =\r\n (p - .18) \/ .18;\r\n\r\n opacity =\r\n 1 - smoothstep(t);\r\n\r\n y =\r\n -70 * smoothstep(t);\r\n\r\n } else {\r\n\r\n opacity = 0;\r\n y = -100;\r\n\r\n }\r\n\r\n heroCopy.style.opacity = opacity;\r\n\r\n heroCopy.style.transform =\r\n `translate3d(0, ${y}px, 0)`;\r\n\r\n }\r\n\r\n\r\n \/* -------------------------------------------------------\r\n CAMERA RENDER\r\n ------------------------------------------------------- *\/\r\n\r\n function render() {\r\n\r\n \/*\r\n Smoothly follow scroll target.\r\n *\/\r\n\r\n progress +=\r\n (targetProgress - progress) *\r\n (\r\n reducedMotion\r\n ? .16\r\n : .075\r\n );\r\n\r\n\r\n \/*\r\n Smooth pointer camera.\r\n *\/\r\n\r\n cameraX +=\r\n (targetCameraX - cameraX) *\r\n .055;\r\n\r\n cameraY +=\r\n (targetCameraY - cameraY) *\r\n .055;\r\n\r\n\r\n \/*\r\n Convert progress to camera Z.\r\n *\/\r\n\r\n const easedProgress =\r\n smoothstep(progress);\r\n\r\n const cameraZ =\r\n START_Z +\r\n (\r\n END_Z *\r\n easedProgress\r\n );\r\n\r\n\r\n \/*\r\n Render every depth plate.\r\n *\/\r\n\r\n plates.forEach(\r\n (plate, index) => {\r\n\r\n renderPlate(\r\n plate,\r\n cameraZ,\r\n index\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n \/*\r\n Slight global camera rotation.\r\n *\/\r\n\r\n scene.style.transform = `\r\n\r\n rotateX(${cameraY * .025}deg)\r\n\r\n rotateY(${cameraX * .025}deg)\r\n\r\n `;\r\n\r\n\r\n \/*\r\n Hero copy.\r\n *\/\r\n\r\n renderCopy(progress);\r\n\r\n\r\n \/*\r\n HUD.\r\n *\/\r\n\r\n const percentage =\r\n Math.round(\r\n progress * 100\r\n );\r\n\r\n hudProgress.style.width =\r\n percentage + \"%\";\r\n\r\n depthValue.textContent =\r\n String(percentage)\r\n .padStart(2, \"0\") +\r\n \"%\";\r\n\r\n\r\n requestAnimationFrame(render);\r\n\r\n }\r\n\r\n\r\n \/* -------------------------------------------------------\r\n EVENTS\r\n ------------------------------------------------------- *\/\r\n\r\n window.addEventListener(\r\n \"scroll\",\r\n updateScrollTarget,\r\n {\r\n passive: true\r\n }\r\n );\r\n\r\n window.addEventListener(\r\n \"resize\",\r\n updateScrollTarget\r\n );\r\n\r\n\r\n \/*\r\n Initial calculation.\r\n *\/\r\n\r\n updateScrollTarget();\r\n\r\n requestAnimationFrame(render);\r\n\r\n\r\n})();\r\n\r\n\r\n\/* =========================================================\r\n REVEAL ON SCROLL\r\n========================================================= *\/\r\n\r\n(() => {\r\n\r\n const elements =\r\n document.querySelectorAll(\r\n \".reveal\"\r\n );\r\n\r\n if (!elements.length) {\r\n return;\r\n }\r\n\r\n\r\n const observer =\r\n new IntersectionObserver(\r\n (entries) => {\r\n\r\n entries.forEach(\r\n (entry) => {\r\n\r\n if (\r\n entry.isIntersecting\r\n ) {\r\n\r\n entry.target.classList.add(\r\n \"visible\"\r\n );\r\n\r\n observer.unobserve(\r\n entry.target\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n threshold: .12\r\n }\r\n );\r\n\r\n\r\n elements.forEach(\r\n element => observer.observe(element)\r\n );\r\n\r\n})();\r\n\r\n\r\n\/* =========================================================\r\n SMOOTH ANCHOR NAVIGATION\r\n========================================================= *\/\r\n\r\ndocument\r\n .querySelectorAll(\r\n 'a[href^=\"#\"]'\r\n )\r\n .forEach(\r\n link => {\r\n\r\n link.addEventListener(\r\n \"click\",\r\n (event) => {\r\n\r\n const targetId =\r\n link.getAttribute(\"href\");\r\n\r\n if (\r\n !targetId ||\r\n targetId === \"#\"\r\n ) {\r\n return;\r\n }\r\n\r\n const target =\r\n document.querySelector(\r\n targetId\r\n );\r\n\r\n if (!target) {\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n\r\n target.scrollIntoView({\r\n behavior: \"smooth\"\r\n });\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n\/* =========================================================\r\n MOBILE TOUCH OPTIMIZATION\r\n========================================================= *\/\r\n\r\nif (\r\n window.matchMedia(\r\n \"(pointer: coarse)\"\r\n ).matches\r\n) {\r\n\r\n document.body.classList.add(\r\n \"touch-device\"\r\n );\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AXION.CNC \u2014 Engineered for Precision AXION.CNC Machines Technology Applications Request a Quote Advanced CNC Manufacturing Engineered For Precision. Built To […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15"}],"version-history":[{"count":4,"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":20,"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions\/20"}],"wp:attachment":[{"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}