| Server IP : 139.59.63.204 / Your IP : 216.73.217.62 Web Server : Apache/2.4.58 (Ubuntu) System : Linux ubuntu-s-1vcpu-1gb-blr1-01 6.8.0-110-generic #110-Ubuntu SMP PREEMPT_DYNAMIC Thu Mar 19 15:09:20 UTC 2026 x86_64 User : root ( 0) PHP Version : 8.3.6 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/efbtechnology.com/demo/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PrecisionCore CNC — Industrial Machine Tools</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet" />
<style>
:root {
--steel: #0a0c10;
--gunmetal: #141820;
--iron: #1e2430;
--chrome: #2e3a50;
--accent: #e8501a;
--accent2: #f0a500;
--silver: #8899aa;
--light: #ccd6e0;
--white: #eef3f8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--steel); color: var(--white); font-family: 'Rajdhani', sans-serif; overflow-x: hidden; cursor: none; }
#cursor { width: 12px; height: 12px; background: var(--accent); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; }
#cursor-ring { width: 36px; height: 36px; border: 1.5px solid rgba(232,80,26,0.5); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; transition: width 0.2s, height 0.2s, border-color 0.2s; }
body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1000; opacity: 0.4; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--steel); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }
.font-display { font-family: 'Bebas Neue', cursive; letter-spacing: 0.04em; }
.font-mono-custom { font-family: 'Share Tech Mono', monospace; }
#navbar { transition: background 0.4s ease, backdrop-filter 0.4s ease; }
#navbar.scrolled { background: rgba(10,12,16,0.97) !important; backdrop-filter: blur(16px); border-bottom: 1px solid rgba(232,80,26,0.2); }
.hero-grid-bg { background-image: linear-gradient(rgba(232,80,26,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(232,80,26,0.04) 1px, transparent 1px); background-size: 60px 60px; }
.scanline { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(232,80,26,0.5), transparent); animation: scan 4s linear infinite; pointer-events: none; }
@keyframes scan { 0% { top: 0; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.section-label { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; }
.accent-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(232,80,26,0.4), transparent); }
.stat-card { border: 1px solid rgba(232,80,26,0.2); background: linear-gradient(135deg, rgba(30,36,48,0.8), rgba(20,24,32,0.9)); transition: border-color 0.3s, transform 0.3s; }
.stat-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.cat-card { position: relative; overflow: hidden; border: 1px solid rgba(136,153,170,0.15); transition: border-color 0.3s, transform 0.4s cubic-bezier(0.23,1,0.32,1); background: var(--gunmetal); }
.cat-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(232,80,26,0.12), transparent 60%); opacity: 0; transition: opacity 0.4s; }
.cat-card:hover { border-color: var(--accent); transform: translateY(-6px); }
.cat-card:hover::before { opacity: 1; }
.cat-icon { width: 52px; height: 52px; border: 1.5px solid rgba(232,80,26,0.4); display: flex; align-items: center; justify-content: center; transition: background 0.3s, border-color 0.3s; }
.cat-card:hover .cat-icon { background: var(--accent); border-color: var(--accent); }
.cat-num { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: rgba(232,80,26,0.5); letter-spacing: 2px; }
.prod-card { position: relative; overflow: hidden; background: var(--gunmetal); border: 1px solid rgba(136,153,170,0.12); transition: all 0.4s cubic-bezier(0.23,1,0.32,1); }
.prod-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; }
.prod-card:hover { transform: translateY(-8px); border-color: rgba(232,80,26,0.3); }
.prod-card:hover::after { transform: scaleX(1); }
.badge { font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 1.5px; padding: 3px 10px; }
.ticker-track { display: flex; gap: 80px; animation: ticker 20s linear infinite; width: max-content; }
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.23,1,0.32,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.23,1,0.32,1); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(36px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.23,1,0.32,1); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
#loader { position: fixed; inset: 0; background: var(--steel); z-index: 9990; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: opacity 0.6s ease, transform 0.6s ease; }
.loader-bar { width: 200px; height: 2px; background: rgba(255,255,255,0.06); position: relative; overflow: hidden; }
.loader-bar::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: loadbar 1.6s ease forwards; }
@keyframes loadbar { to { left: 100%; } }
.form-input { background: rgba(30,36,48,0.7); border: 1px solid rgba(136,153,170,0.2); color: var(--white); font-family: 'Rajdhani', sans-serif; font-size: 15px; padding: 14px 18px; width: 100%; outline: none; transition: border-color 0.3s; }
.form-input:focus { border-color: var(--accent); }
.form-input::placeholder { color: var(--silver); }
.btn-primary { background: var(--accent); color: #fff; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; padding: 15px 36px; border: none; position: relative; overflow: hidden; cursor: none; transition: transform 0.2s, box-shadow 0.3s; display: inline-block; text-align: center; text-decoration: none; }
.btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: rgba(255,255,255,0.15); transform: skewX(-20deg); transition: left 0.4s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(232,80,26,0.4); }
.btn-primary:hover::before { left: 160%; }
.btn-outline { border: 1.5px solid rgba(232,80,26,0.5); color: var(--light); font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; padding: 14px 32px; background: transparent; cursor: none; transition: all 0.3s; display: inline-block; text-align: center; text-decoration: none; }
.btn-outline:hover { background: rgba(232,80,26,0.1); border-color: var(--accent); color: var(--white); }
.ring { position: absolute; border: 1px solid rgba(232,80,26,0.15); border-radius: 50%; animation: pulse-ring 3s linear infinite; }
@keyframes pulse-ring { 0% { transform: translate(-50%,-50%) scale(0.92); opacity: 0.6; } 50% { transform: translate(-50%,-50%) scale(1.04); opacity: 0.2; } 100% { transform: translate(-50%,-50%) scale(0.92); opacity: 0.6; } }
.testimonial-card { border-left: 3px solid var(--accent); background: linear-gradient(135deg, rgba(30,36,48,0.7), rgba(20,24,32,0.8)); }
#mobile-menu { display: none; position: fixed; inset: 0; background: rgba(10,12,16,0.98); z-index: 800; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; }
#mobile-menu.open { display: flex; }
.tab-btn { transition: all 0.3s; border-bottom: 2px solid transparent; padding-bottom: 6px; }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.img-placeholder { background: linear-gradient(135deg, var(--iron) 0%, var(--chrome) 100%); display: flex; align-items: center; justify-content: center; }
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes scrollPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes barFill { from { width: 0%; } }
.bar-fill { animation: barFill 2s ease forwards; }
</style>
</head>
<body>
<div id="cursor"></div>
<div id="cursor-ring"></div>
<!-- LOADER -->
<div id="loader">
<img src="img/KENT-USA-philippines.png">
<div class="loader-bar mb-4"></div>
<div class="font-mono-custom text-xs" style="color:var(--accent);letter-spacing:3px;" id="loader-pct">INITIALIZING — 0%</div>
</div>
<!-- NAVBAR -->
<nav id="navbar" class="fixed top-0 left-0 right-0 z-50 px-6 lg:px-12 py-5 flex items-center justify-between" style="background:transparent;">
<a href="#" class="flex items-center gap-3">
<img src="img/KENT-USA-philippines.png" />
</a>
<ul class="hidden lg:flex items-center gap-8">
<li><a href="#categories" class="font-mono-custom text-xs tracking-widest" style="color:var(--silver);" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">PRODUCTS</a></li>
<li><a href="#featured" class="font-mono-custom text-xs tracking-widest" style="color:var(--silver);" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">INVENTORY</a></li>
<li><a href="#brands" class="font-mono-custom text-xs tracking-widest" style="color:var(--silver);" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">BRANDS</a></li>
<li><a href="#services" class="font-mono-custom text-xs tracking-widest" style="color:var(--silver);" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">SERVICES</a></li>
<li><a href="#contact" class="font-mono-custom text-xs tracking-widest" style="color:var(--silver);" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">CONTACT</a></li>
</ul>
<div class="hidden lg:flex items-center gap-4">
<span class="font-mono-custom text-xs" style="color:var(--silver);">+1.888.565.8807</span>
<a href="#contact" class="btn-primary">GET A QUOTE</a>
</div>
<button id="hamburger" onclick="toggleMenu()" class="lg:hidden flex flex-col gap-1.5 p-2" style="cursor:none;">
<span class="w-6 h-0.5 bg-white block transition-all" id="h1"></span>
<span class="w-4 h-0.5 block transition-all" style="background:var(--accent);" id="h2"></span>
<span class="w-6 h-0.5 bg-white block transition-all" id="h3"></span>
</button>
</nav>
<!-- MOBILE MENU -->
<div id="mobile-menu">
<ul class="flex flex-col items-center gap-6 text-center">
<li><a href="#categories" class="font-display text-4xl tracking-widest hover:text-orange-500 transition-colors" onclick="toggleMenu()">PRODUCTS</a></li>
<li><a href="#featured" class="font-display text-4xl tracking-widest hover:text-orange-500 transition-colors" onclick="toggleMenu()">INVENTORY</a></li>
<li><a href="#brands" class="font-display text-4xl tracking-widest hover:text-orange-500 transition-colors" onclick="toggleMenu()">BRANDS</a></li>
<li><a href="#services" class="font-display text-4xl tracking-widest hover:text-orange-500 transition-colors" onclick="toggleMenu()">SERVICES</a></li>
<li><a href="#contact" class="font-display text-4xl tracking-widest hover:text-orange-500 transition-colors" onclick="toggleMenu()">CONTACT</a></li>
</ul>
<a href="#contact" class="btn-primary mt-6" onclick="toggleMenu()">GET A QUOTE</a>
</div>
<!-- HERO -->
<section class="relative min-h-screen flex flex-col justify-center hero-grid-bg overflow-hidden" style="padding-top:100px;">
<div class="scanline"></div>
<div class="absolute pointer-events-none" style="top:20%;left:60%;width:700px;height:700px;background:radial-gradient(circle,rgba(232,80,26,0.08) 0%,transparent 70%);transform:translate(-50%,-50%);"></div>
<div class="absolute pointer-events-none" style="bottom:10%;left:15%;width:400px;height:400px;background:radial-gradient(circle,rgba(240,165,0,0.05) 0%,transparent 70%);"></div>
<div class="relative z-10 max-w-7xl mx-auto px-6 lg:px-12 w-full">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="section-label mb-6 reveal">// INDUSTRIAL CNC SOLUTIONS — EST. 1979</div>
<h1 class="font-display leading-none mb-6 reveal" style="font-size:clamp(4rem,9vw,8.5rem);line-height:0.9;">
PRECISION<br><span style="color:var(--accent);">ENGINEERED</span><br>FOR YOU.
</h1>
<p class="mb-8 max-w-md leading-relaxed reveal" style="color:var(--silver);font-size:16px;font-weight:400;">
Canada's most trusted source for CNC machine tools. Delivering cutting-edge milling, turning, and specialty machines — backed by unmatched service across 4 locations.
</p>
<div class="flex flex-wrap gap-4 reveal">
<a href="#featured" class="btn-primary">VIEW INVENTORY</a>
<a href="#services" class="btn-outline">OUR SERVICES</a>
</div>
<div class="flex gap-8 mt-12 reveal">
<div>
<div class="font-display text-4xl counter" style="color:var(--accent);" data-target="45">0</div>
<div class="font-mono-custom text-xs mt-1" style="color:var(--silver);letter-spacing:2px;">YRS EXPERIENCE</div>
</div>
<div style="width:1px;background:rgba(136,153,170,0.2);"></div>
<div>
<div class="font-display text-4xl counter" data-target="500">0</div>
<div class="font-mono-custom text-xs mt-1" style="color:var(--silver);letter-spacing:2px;">MACHINES SOLD</div>
</div>
<div style="width:1px;background:rgba(136,153,170,0.2);"></div>
<div>
<div class="font-display text-4xl counter" style="color:var(--accent);" data-target="4">0</div>
<div class="font-mono-custom text-xs mt-1" style="color:var(--silver);letter-spacing:2px;">LOCATIONS</div>
</div>
</div>
</div>
<!-- Machine Visual -->
<div class="relative hidden lg:flex items-center justify-center" style="height:520px;">
<div class="ring" style="width:420px;height:420px;top:50%;left:50%;animation-delay:0s;"></div>
<div class="ring" style="width:320px;height:320px;top:50%;left:50%;animation-delay:1s;"></div>
<div class="ring" style="width:220px;height:220px;top:50%;left:50%;animation-delay:2s;"></div>
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:170px;height:170px;background:linear-gradient(135deg,var(--iron),var(--chrome));border:2px solid rgba(232,80,26,0.4);display:flex;align-items:center;justify-content:center;clip-path:polygon(5% 0%,95% 0%,100% 5%,100% 95%,95% 100%,5% 100%,0% 95%,0% 5%);">
<svg width="80" height="80" viewBox="0 0 80 80" fill="none">
<rect x="10" y="20" width="60" height="40" rx="2" stroke="#e8501a" stroke-width="1.5" fill="rgba(232,80,26,0.05)"/>
<rect x="22" y="10" width="36" height="12" rx="1" stroke="#8899aa" stroke-width="1" fill="rgba(136,153,170,0.05)"/>
<circle cx="40" cy="40" r="12" stroke="#e8501a" stroke-width="1.5" stroke-dasharray="4 2" fill="none" style="animation:spinSlow 8s linear infinite;transform-origin:40px 40px;"/>
<circle cx="40" cy="40" r="4" fill="#e8501a"/>
<line x1="10" y1="60" x2="70" y2="60" stroke="#2e3a50" stroke-width="1.5"/>
<rect x="5" y="60" width="70" height="8" rx="1" stroke="#8899aa" stroke-width="1" fill="rgba(30,36,48,0.7)"/>
</svg>
</div>
<div class="font-mono-custom text-xs absolute" style="top:18%;left:0%;color:rgba(232,80,26,0.7);">
<div>X: 1020mm</div><div>Y: 560mm</div><div>Z: 620mm</div>
</div>
<div class="font-mono-custom text-xs absolute text-right" style="bottom:20%;right:0%;color:rgba(136,153,170,0.6);">
<div>RPM: 12,000</div><div>AXES: 5</div><div>STATUS: <span style="color:#4ade80;">ACTIVE</span></div>
</div>
</div>
</div>
</div>
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2">
<div class="font-mono-custom text-xs tracking-widest" style="color:var(--silver);">SCROLL</div>
<div style="width:1px;height:48px;background:linear-gradient(to bottom,rgba(232,80,26,0.7),transparent);animation:scrollPulse 2s ease-in-out infinite;"></div>
</div>
</section>
<!-- STATS BAR -->
<div class="accent-line"></div>
<div style="background:var(--gunmetal);padding:28px 0;">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-5">
<div class="stat-card p-6 reveal"><div class="font-mono-custom text-xs mb-2" style="color:var(--silver);letter-spacing:2px;">WAREHOUSE SIZE</div><div class="font-display text-3xl">70,000 <span style="color:var(--accent);font-size:1.2rem;">SQFT</span></div></div>
<div class="stat-card p-6 reveal" style="transition-delay:0.1s;"><div class="font-mono-custom text-xs mb-2" style="color:var(--silver);letter-spacing:2px;">PARTS INVENTORY</div><div class="font-display text-3xl">$8M <span style="color:var(--accent);font-size:1.2rem;">+</span></div></div>
<div class="stat-card p-6 reveal" style="transition-delay:0.2s;"><div class="font-mono-custom text-xs mb-2" style="color:var(--silver);letter-spacing:2px;">RESPONSE TIME</div><div class="font-display text-3xl">SAME <span style="color:var(--accent);font-size:1.2rem;">DAY</span></div></div>
<div class="stat-card p-6 reveal" style="transition-delay:0.3s;"><div class="font-mono-custom text-xs mb-2" style="color:var(--silver);letter-spacing:2px;">ACTIVE BRANDS</div><div class="font-display text-3xl">12 <span style="color:var(--accent);font-size:1.2rem;">OEM</span></div></div>
</div>
</div>
</div>
<div class="accent-line"></div>
<!-- CATEGORIES -->
<section id="categories" class="py-24 max-w-7xl mx-auto px-6 lg:px-12">
<div class="flex flex-col lg:flex-row lg:items-end justify-between mb-16 gap-6">
<div class="reveal-left">
<div class="section-label mb-3">// PRODUCT CATALOG</div>
<h2 class="font-display leading-none" style="font-size:clamp(3.5rem,7vw,6rem);">MACHINE<br><span style="color:var(--accent);">CATEGORIES</span></h2>
</div>
<p class="max-w-sm leading-relaxed reveal-right" style="color:var(--silver);font-size:15px;">From 5-axis milling to multi-spindle turning — comprehensive coverage of every precision machining requirement.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
<div class="cat-card p-8 reveal" style="transition-delay:0s;">
<div class="cat-num mb-3">CAT — 001</div>
<div class="cat-icon mb-5">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#e8501a" stroke-width="1.5"><rect x="2" y="7" width="20" height="14" rx="1"/><path d="M8 7V5a2 2 0 014 0v2"/><circle cx="12" cy="14" r="2"/></svg>
</div>
<h3 class="font-display text-3xl mb-2">HORIZONTAL<br>MILLING CENTER</h3>
<p style="color:var(--silver);font-size:13px;" class="leading-relaxed mb-6">4-Axis, 5-Axis, and Boring Mills for heavy-duty horizontal machining operations.</p>
<div class="flex items-center gap-2 font-mono-custom text-xs tracking-wider group" style="color:var(--accent);">
<span>EXPLORE 3 TYPES</span>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition:transform 0.3s;" class="group-hover:translate-x-1"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</div>
</div>
<div class="cat-card p-8 reveal" style="transition-delay:0.08s;">
<div class="cat-num mb-3">CAT — 002</div>
<div class="cat-icon mb-5">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#e8501a" stroke-width="1.5"><rect x="4" y="2" width="16" height="20" rx="1"/><line x1="12" y1="6" x2="12" y2="18"/><line x1="8" y1="10" x2="16" y2="10"/><line x1="8" y1="14" x2="16" y2="14"/></svg>
</div>
<h3 class="font-display text-3xl mb-2">VERTICAL<br>MILLING CENTER</h3>
<p style="color:var(--silver);font-size:13px;" class="leading-relaxed mb-6">C-Frame, Bridge, Moving Column, Gantry, and 5-Axis configurations available.</p>
<div class="flex items-center gap-2 font-mono-custom text-xs tracking-wider" style="color:var(--accent);">
<span>EXPLORE 5 TYPES</span>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</div>
</div>
<div class="cat-card p-8 reveal" style="transition-delay:0.16s;">
<div class="cat-num mb-3">CAT — 003</div>
<div class="cat-icon mb-5">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#e8501a" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/><line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/></svg>
</div>
<h3 class="font-display text-3xl mb-2">TURNING<br>CENTER</h3>
<p style="color:var(--silver);font-size:13px;" class="leading-relaxed mb-6">Single Turret, Multi-Axis, Swiss, Mill-Turn, and Flat-bed CNC configurations.</p>
<div class="flex items-center gap-2 font-mono-custom text-xs tracking-wider" style="color:var(--accent);">
<span>EXPLORE 6 TYPES</span>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</div>
</div>
<div class="cat-card p-8 reveal" style="transition-delay:0.24s;">
<div class="cat-num mb-3">CAT — 004</div>
<div class="cat-icon mb-5">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#e8501a" stroke-width="1.5"><polygon points="12,2 22,8.5 22,15.5 12,22 2,15.5 2,8.5"/><circle cx="12" cy="12" r="3"/></svg>
</div>
<h3 class="font-display text-3xl mb-2">SPECIALTY<br>MACHINES</h3>
<p style="color:var(--silver);font-size:13px;" class="leading-relaxed mb-6">Purpose-built solutions for unique and complex machining applications.</p>
<div class="flex items-center gap-2 font-mono-custom text-xs tracking-wider" style="color:var(--accent);">
<span>VIEW MACHINES</span>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</div>
</div>
<div class="cat-card p-8 reveal" style="transition-delay:0.32s;">
<div class="cat-num mb-3">CAT — 005</div>
<div class="cat-icon mb-5">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#e8501a" stroke-width="1.5"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
</div>
<h3 class="font-display text-3xl mb-2">DEEP HOLE<br>DRILLING</h3>
<p style="color:var(--silver);font-size:13px;" class="leading-relaxed mb-6">Gun Drill machines for molds and cylindrical workpieces with high precision.</p>
<div class="flex items-center gap-2 font-mono-custom text-xs tracking-wider" style="color:var(--accent);">
<span>EXPLORE 2 TYPES</span>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</div>
</div>
<div class="cat-card p-8 reveal flex flex-col justify-between" style="transition-delay:0.4s;border-color:rgba(232,80,26,0.35);background:linear-gradient(135deg,rgba(232,80,26,0.1),rgba(20,24,32,0.9));">
<div>
<div class="cat-num mb-3">PRE-OWNED</div>
<h3 class="font-display text-3xl mb-3">QUALITY<br><span style="color:var(--accent);">PRE-OWNED</span><br>MACHINES</h3>
<p style="color:var(--silver);font-size:13px;" class="leading-relaxed mb-6">Inspected and certified used machines at competitive pricing.</p>
</div>
<a href="#featured" class="btn-primary text-center" style="font-size:11px;">BROWSE INVENTORY</a>
</div>
</div>
</section>
<!-- FEATURED PRODUCTS -->
<section id="featured" style="background:var(--gunmetal);padding:96px 0;">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<div class="flex flex-col lg:flex-row lg:items-end justify-between mb-10 gap-6">
<div class="reveal-left">
<div class="section-label mb-3">// IN-STOCK NOW</div>
<h2 class="font-display leading-none" style="font-size:clamp(3.5rem,7vw,6rem);">FEATURED<br><span style="color:var(--accent);">PRODUCTS</span></h2>
</div>
<div class="flex gap-5 reveal-right">
<button class="tab-btn active font-mono-custom text-xs tracking-widest" style="color:var(--light);" onclick="switchTab('all',this)">ALL</button>
<button class="tab-btn font-mono-custom text-xs tracking-widest" style="color:var(--silver);" onclick="switchTab('milling',this)">MILLING</button>
<button class="tab-btn font-mono-custom text-xs tracking-widest" style="color:var(--silver);" onclick="switchTab('turning',this)">TURNING</button>
<button class="tab-btn font-mono-custom text-xs tracking-widest" style="color:var(--silver);" onclick="switchTab('used',this)">PRE-OWNED</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="products-grid">
<div class="prod-card reveal" data-cat="milling" style="transition-delay:0s;">
<div class="img-placeholder" style="height:210px;">
<svg width="110" height="110" viewBox="0 0 110 110" fill="none">
<rect x="18" y="36" width="74" height="52" rx="2" stroke="#8899aa" stroke-width="1.5" fill="rgba(46,58,80,0.5)"/>
<rect x="32" y="22" width="46" height="16" rx="1" stroke="#8899aa" stroke-width="1" fill="rgba(30,36,48,0.6)"/>
<circle cx="55" cy="62" r="15" stroke="#e8501a" stroke-width="1.5" stroke-dasharray="5 2" fill="rgba(232,80,26,0.07)" style="animation:spinSlow 10s linear infinite;transform-origin:55px 62px;"/>
<circle cx="55" cy="62" r="5" fill="#e8501a" opacity="0.8"/>
<rect x="13" y="88" width="84" height="9" rx="1" stroke="#2e3a50" stroke-width="1" fill="rgba(20,24,32,0.8)"/>
</svg>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-3">
<span class="badge" style="background:rgba(20,83,45,0.6);color:#4ade80;border:1px solid rgba(74,222,128,0.3);">IN STOCK</span>
<span class="badge" style="color:var(--silver);border:1px solid rgba(136,153,170,0.3);">NEW</span>
</div>
<div class="section-label mb-1" style="font-size:9px;">AWEA // VERTICAL MILLING</div>
<h3 class="font-display text-2xl mb-1">FCV-620</h3>
<div class="font-mono-custom text-xs mb-4" style="color:var(--silver);">C-Frame Vertical Machining Center</div>
<div class="grid grid-cols-3 gap-3 mb-5 pt-4" style="border-top:1px solid rgba(46,58,80,0.8);">
<div><div class="font-mono-custom text-xs" style="color:var(--accent);">X-AXIS</div><div class="text-sm font-semibold">620mm</div></div>
<div><div class="font-mono-custom text-xs" style="color:var(--accent);">SPINDLE</div><div class="text-sm font-semibold">12,000</div></div>
<div><div class="font-mono-custom text-xs" style="color:var(--accent);">AXES</div><div class="text-sm font-semibold">3-AXIS</div></div>
</div>
<button class="btn-primary w-full" style="font-size:11px;" onclick="openQuote('AWEA FCV-620')">REQUEST QUOTE</button>
</div>
</div>
<div class="prod-card reveal" data-cat="milling" style="transition-delay:0.1s;">
<div class="img-placeholder" style="height:210px;">
<svg width="110" height="110" viewBox="0 0 110 110" fill="none">
<rect x="13" y="27" width="84" height="60" rx="2" stroke="#8899aa" stroke-width="1.5" fill="rgba(46,58,80,0.4)"/>
<rect x="28" y="14" width="24" height="15" rx="1" stroke="#8899aa" stroke-width="1" fill="rgba(30,36,48,0.6)"/>
<rect x="58" y="14" width="24" height="15" rx="1" stroke="#8899aa" stroke-width="1" fill="rgba(30,36,48,0.6)"/>
<rect x="40" y="45" width="30" height="28" rx="1" stroke="#e8501a" stroke-width="1.5" fill="rgba(232,80,26,0.06)"/>
<circle cx="55" cy="59" r="6" fill="#e8501a" opacity="0.7"/>
<rect x="8" y="87" width="94" height="8" rx="1" stroke="#2e3a50" stroke-width="1" fill="rgba(20,24,32,0.8)"/>
</svg>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-3">
<span class="badge" style="background:rgba(23,37,84,0.6);color:#93c5fd;border:1px solid rgba(147,197,253,0.3);">ON ORDER</span>
<span class="badge" style="color:var(--silver);border:1px solid rgba(136,153,170,0.3);">NEW</span>
</div>
<div class="section-label mb-1" style="font-size:9px;">GROB // 5-AXIS</div>
<h3 class="font-display text-2xl mb-1">G-350</h3>
<div class="font-mono-custom text-xs mb-4" style="color:var(--silver);">5-Axis Universal Machining Center</div>
<div class="grid grid-cols-3 gap-3 mb-5 pt-4" style="border-top:1px solid rgba(46,58,80,0.8);">
<div><div class="font-mono-custom text-xs" style="color:var(--accent);">X-AXIS</div><div class="text-sm font-semibold">400mm</div></div>
<div><div class="font-mono-custom text-xs" style="color:var(--accent);">SPINDLE</div><div class="text-sm font-semibold">17,000</div></div>
<div><div class="font-mono-custom text-xs" style="color:var(--accent);">AXES</div><div class="text-sm font-semibold">5-AXIS</div></div>
</div>
<button class="btn-primary w-full" style="font-size:11px;" onclick="openQuote('GROB G-350')">REQUEST QUOTE</button>
</div>
</div>
<div class="prod-card reveal" data-cat="turning" style="transition-delay:0.2s;">
<div class="img-placeholder" style="height:210px;">
<svg width="110" height="110" viewBox="0 0 110 110" fill="none">
<rect x="9" y="32" width="92" height="56" rx="3" stroke="#8899aa" stroke-width="1.5" fill="rgba(46,58,80,0.4)"/>
<circle cx="55" cy="60" r="20" stroke="#e8501a" stroke-width="1.5" fill="rgba(232,80,26,0.06)"/>
<circle cx="55" cy="60" r="7" stroke="#8899aa" stroke-width="1" fill="rgba(30,36,48,0.8)"/>
<circle cx="55" cy="60" r="3" fill="#e8501a" opacity="0.9"/>
<line x1="9" y1="60" x2="35" y2="60" stroke="#e8501a" stroke-width="1.5" opacity="0.4"/>
<line x1="75" y1="60" x2="101" y2="60" stroke="#e8501a" stroke-width="1.5" opacity="0.4"/>
<rect x="9" y="88" width="92" height="8" rx="1" fill="rgba(20,24,32,0.8)" stroke="#2e3a50" stroke-width="1"/>
</svg>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-3">
<span class="badge" style="background:rgba(20,83,45,0.6);color:#4ade80;border:1px solid rgba(74,222,128,0.3);">IN STOCK</span>
<span class="badge" style="color:var(--silver);border:1px solid rgba(136,153,170,0.3);">NEW</span>
</div>
<div class="section-label mb-1" style="font-size:9px;">GOODWAY // TURNING</div>
<h3 class="font-display text-2xl mb-1">GS-2600</h3>
<div class="font-mono-custom text-xs mb-4" style="color:var(--silver);">CNC Single Turret Turning Center</div>
<div class="grid grid-cols-3 gap-3 mb-5 pt-4" style="border-top:1px solid rgba(46,58,80,0.8);">
<div><div class="font-mono-custom text-xs" style="color:var(--accent);">SWING</div><div class="text-sm font-semibold">520mm</div></div>
<div><div class="font-mono-custom text-xs" style="color:var(--accent);">SPINDLE</div><div class="text-sm font-semibold">4,500</div></div>
<div><div class="font-mono-custom text-xs" style="color:var(--accent);">AXES</div><div class="text-sm font-semibold">2-AXIS</div></div>
</div>
<button class="btn-primary w-full" style="font-size:11px;" onclick="openQuote('GOODWAY GS-2600')">REQUEST QUOTE</button>
</div>
</div>
<div class="prod-card reveal" data-cat="used" style="transition-delay:0.3s;">
<div class="img-placeholder" style="height:210px;">
<svg width="110" height="110" viewBox="0 0 110 110" fill="none">
<rect x="18" y="23" width="74" height="65" rx="2" stroke="#8899aa" stroke-width="1.5" fill="rgba(46,58,80,0.3)"/>
<rect x="32" y="37" width="46" height="32" rx="1" stroke="#f0a500" stroke-width="1" fill="rgba(240,165,0,0.05)"/>
<circle cx="55" cy="53" r="8" stroke="#f0a500" stroke-width="1.5" fill="none" stroke-dasharray="3 2" style="animation:spinSlow 6s linear infinite;transform-origin:55px 53px;"/>
<circle cx="55" cy="53" r="3" fill="#f0a500" opacity="0.8"/>
<rect x="13" y="88" width="84" height="8" rx="1" fill="rgba(20,24,32,0.8)" stroke="#2e3a50" stroke-width="1"/>
</svg>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-3">
<span class="badge" style="background:rgba(78,53,0,0.6);color:#fbbf24;border:1px solid rgba(251,191,36,0.3);">PRE-OWNED</span>
<span class="badge" style="color:var(--silver);border:1px solid rgba(136,153,170,0.3);">CERTIFIED</span>
</div>
<div class="section-label mb-1" style="font-size:9px;">HURON // MILLING</div>
<h3 class="font-display text-2xl mb-1">KX-40</h3>
<div class="font-mono-custom text-xs mb-4" style="color:var(--silver);">5-Axis High-Speed Machining Center</div>
<div class="grid grid-cols-3 gap-3 mb-5 pt-4" style="border-top:1px solid rgba(46,58,80,0.8);">
<div><div class="font-mono-custom text-xs" style="color:#f0a500;">X-AXIS</div><div class="text-sm font-semibold">800mm</div></div>
<div><div class="font-mono-custom text-xs" style="color:#f0a500;">SPINDLE</div><div class="text-sm font-semibold">24,000</div></div>
<div><div class="font-mono-custom text-xs" style="color:#f0a500;">AXES</div><div class="text-sm font-semibold">5-AXIS</div></div>
</div>
<button class="btn-primary w-full" style="font-size:11px;" onclick="openQuote('HURON KX-40')">REQUEST QUOTE</button>
</div>
</div>
<div class="prod-card reveal" data-cat="turning" style="transition-delay:0.4s;">
<div class="img-placeholder" style="height:210px;">
<svg width="110" height="110" viewBox="0 0 110 110" fill="none">
<rect x="11" y="28" width="88" height="60" rx="2" stroke="#8899aa" stroke-width="1.5" fill="rgba(46,58,80,0.35)"/>
<circle cx="36" cy="58" r="17" stroke="#e8501a" stroke-width="1.5" fill="rgba(232,80,26,0.06)"/>
<circle cx="74" cy="58" r="17" stroke="#e8501a" stroke-width="1.5" fill="rgba(232,80,26,0.06)"/>
<circle cx="36" cy="58" r="5" fill="#e8501a" opacity="0.7"/>
<circle cx="74" cy="58" r="5" fill="#e8501a" opacity="0.7"/>
<rect x="11" y="88" width="88" height="8" rx="1" fill="rgba(20,24,32,0.8)" stroke="#2e3a50" stroke-width="1"/>
</svg>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-3">
<span class="badge" style="background:rgba(20,83,45,0.6);color:#4ade80;border:1px solid rgba(74,222,128,0.3);">IN STOCK</span>
<span class="badge" style="color:var(--silver);border:1px solid rgba(136,153,170,0.3);">NEW</span>
</div>
<div class="section-label mb-1" style="font-size:9px;">TONGTAI // TURNING</div>
<h3 class="font-display text-2xl mb-1">THL-300</h3>
<div class="font-mono-custom text-xs mb-4" style="color:var(--silver);">Multi-Axis Mill-Turn Center</div>
<div class="grid grid-cols-3 gap-3 mb-5 pt-4" style="border-top:1px solid rgba(46,58,80,0.8);">
<div><div class="font-mono-custom text-xs" style="color:var(--accent);">SWING</div><div class="text-sm font-semibold">610mm</div></div>
<div><div class="font-mono-custom text-xs" style="color:var(--accent);">TURRETS</div><div class="text-sm font-semibold">2</div></div>
<div><div class="font-mono-custom text-xs" style="color:var(--accent);">AXES</div><div class="text-sm font-semibold">Y-AXIS</div></div>
</div>
<button class="btn-primary w-full" style="font-size:11px;" onclick="openQuote('TONGTAI THL-300')">REQUEST QUOTE</button>
</div>
</div>
<div class="prod-card reveal" data-cat="milling" style="transition-delay:0.5s;">
<div class="img-placeholder" style="height:210px;">
<svg width="110" height="110" viewBox="0 0 110 110" fill="none">
<rect x="4" y="28" width="102" height="60" rx="2" stroke="#8899aa" stroke-width="1.5" fill="rgba(46,58,80,0.3)"/>
<rect x="18" y="42" width="74" height="33" rx="1" stroke="#e8501a" stroke-width="1" fill="rgba(232,80,26,0.05)"/>
<line x1="55" y1="28" x2="55" y2="42" stroke="#e8501a" stroke-width="2"/>
<rect x="46" y="16" width="18" height="13" rx="1" stroke="#8899aa" stroke-width="1" fill="rgba(30,36,48,0.7)"/>
<circle cx="55" cy="58" r="9" stroke="#e8501a" stroke-width="1.5" fill="rgba(232,80,26,0.1)"/>
<circle cx="55" cy="58" r="3" fill="#e8501a"/>
<rect x="4" y="88" width="102" height="8" rx="1" fill="rgba(20,24,32,0.8)" stroke="#2e3a50" stroke-width="1"/>
</svg>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-3">
<span class="badge" style="background:rgba(20,83,45,0.6);color:#4ade80;border:1px solid rgba(74,222,128,0.3);">IN STOCK</span>
<span class="badge" style="color:var(--silver);border:1px solid rgba(136,153,170,0.3);">NEW</span>
</div>
<div class="section-label mb-1" style="font-size:9px;">AWEA // BRIDGE TYPE</div>
<h3 class="font-display text-2xl mb-1">BF-4000</h3>
<div class="font-mono-custom text-xs mb-4" style="color:var(--silver);">Bridge Double Column Vertical Center</div>
<div class="grid grid-cols-3 gap-3 mb-5 pt-4" style="border-top:1px solid rgba(46,58,80,0.8);">
<div><div class="font-mono-custom text-xs" style="color:var(--accent);">X-AXIS</div><div class="text-sm font-semibold">4,000mm</div></div>
<div><div class="font-mono-custom text-xs" style="color:var(--accent);">SPINDLE</div><div class="text-sm font-semibold">6,000</div></div>
<div><div class="font-mono-custom text-xs" style="color:var(--accent);">AXES</div><div class="text-sm font-semibold">3-AXIS</div></div>
</div>
<button class="btn-primary w-full" style="font-size:11px;" onclick="openQuote('AWEA BF-4000')">REQUEST QUOTE</button>
</div>
</div>
</div>
<div class="text-center mt-12 reveal">
<a href="#" class="btn-outline">VIEW ALL INVENTORY →</a>
</div>
</div>
</section>
<!-- BRANDS TICKER -->
<section id="brands" style="background:var(--steel);padding:60px 0;overflow:hidden;">
<div class="max-w-7xl mx-auto px-6 lg:px-12 mb-10 text-center">
<div class="section-label reveal">// OUR TRUSTED BRANDS</div>
</div>
<div class="accent-line mb-6"></div>
<div style="overflow:hidden;padding:20px 0;">
<div class="ticker-track">
<span class="font-display text-3xl tracking-widest" style="color:var(--silver);white-space:nowrap;">AWEA</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--accent);white-space:nowrap;">GROB</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--silver);white-space:nowrap;">HURON</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--silver);white-space:nowrap;">GOODWAY</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--accent);white-space:nowrap;">TONGTAI</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--silver);white-space:nowrap;">APEC</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--silver);white-space:nowrap;">MAXXTRON</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--accent);white-space:nowrap;">IMSA</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--silver);white-space:nowrap;">FERMAT</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--silver);white-space:nowrap;">EVERISING</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--silver);white-space:nowrap;">AWEA</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--accent);white-space:nowrap;">GROB</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--silver);white-space:nowrap;">HURON</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--silver);white-space:nowrap;">GOODWAY</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--accent);white-space:nowrap;">TONGTAI</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--silver);white-space:nowrap;">APEC</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--silver);white-space:nowrap;">MAXXTRON</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--accent);white-space:nowrap;">IMSA</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--silver);white-space:nowrap;">FERMAT</span>
<span class="font-display text-3xl tracking-widest" style="color:var(--silver);white-space:nowrap;">EVERISING</span>
</div>
</div>
<div class="accent-line mt-6"></div>
</section>
<!-- SERVICES -->
<section id="services" class="py-24 max-w-7xl mx-auto px-6 lg:px-12">
<div class="grid lg:grid-cols-2 gap-20 items-center">
<div class="reveal-left">
<div class="section-label mb-3">// AFTER-SALES SUPPORT</div>
<h2 class="font-display leading-none mb-8" style="font-size:clamp(3rem,6vw,5.5rem);">WORLD-CLASS<br><span style="color:var(--accent);">SERVICE</span></h2>
<p class="leading-relaxed mb-8" style="color:var(--silver);font-size:15px;">Our certified technicians provide rapid response service and maintenance, minimizing downtime and maximizing your investment. Same-day technical support guaranteed across all locations.</p>
<div class="space-y-5 mb-10">
<div class="flex items-start gap-4">
<div style="width:32px;height:32px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5"><polyline points="20,6 9,17 4,12"/></svg>
</div>
<div><div class="font-semibold mb-0.5">Preventive Maintenance Programs</div><div style="color:var(--silver);font-size:13px;">Scheduled service plans for peak machine performance.</div></div>
</div>
<div class="flex items-start gap-4">
<div style="width:32px;height:32px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5"><polyline points="20,6 9,17 4,12"/></svg>
</div>
<div><div class="font-semibold mb-0.5">Emergency Breakdown Support</div><div style="color:var(--silver);font-size:13px;">24/7 assistance with same-day field service dispatch.</div></div>
</div>
<div class="flex items-start gap-4">
<div style="width:32px;height:32px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5"><polyline points="20,6 9,17 4,12"/></svg>
</div>
<div><div class="font-semibold mb-0.5">Spare Parts & Inventory</div><div style="color:var(--silver);font-size:13px;">$8M+ parts inventory for critical component availability.</div></div>
</div>
<div class="flex items-start gap-4">
<div style="width:32px;height:32px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5"><polyline points="20,6 9,17 4,12"/></svg>
</div>
<div><div class="font-semibold mb-0.5">Operator & Programming Training</div><div style="color:var(--silver);font-size:13px;">Comprehensive onsite training for all machine models.</div></div>
</div>
</div>
<a href="#contact" class="btn-primary">BOOK A SERVICE CALL</a>
</div>
<div class="reveal-right">
<div style="background:var(--gunmetal);border:1px solid rgba(136,153,170,0.12);padding:40px;">
<div class="section-label mb-6">PERFORMANCE METRICS</div>
<div class="space-y-6">
<div>
<div class="flex justify-between mb-2">
<span class="font-mono-custom text-sm" style="color:var(--light);">EMERGENCY RESPONSE</span>
<span class="font-mono-custom text-sm" style="color:var(--accent);">SAME DAY</span>
</div>
<div style="height:4px;background:rgba(255,255,255,0.06);border-radius:2px;">
<div class="bar-fill" style="height:100%;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-mono-custom text-sm" style="color:var(--light);">PARTS AVAILABILITY</span>
<span class="font-mono-custom text-sm" style="color:var(--accent);">95%</span>
</div>
<div style="height:4px;background:rgba(255,255,255,0.06);border-radius:2px;">
<div class="bar-fill" style="height:100%;width:95%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;animation-delay:0.2s;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-mono-custom text-sm" style="color:var(--light);">CUSTOMER SATISFACTION</span>
<span class="font-mono-custom text-sm" style="color:var(--accent);">98%</span>
</div>
<div style="height:4px;background:rgba(255,255,255,0.06);border-radius:2px;">
<div class="bar-fill" style="height:100%;width:98%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;animation-delay:0.4s;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-mono-custom text-sm" style="color:var(--light);">MACHINE UPTIME</span>
<span class="font-mono-custom text-sm" style="color:var(--accent);">99%</span>
</div>
<div style="height:4px;background:rgba(255,255,255,0.06);border-radius:2px;">
<div class="bar-fill" style="height:100%;width:99%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;animation-delay:0.6s;"></div>
</div>
</div>
</div>
<div class="accent-line my-8"></div>
<div class="grid grid-cols-2 gap-4">
<div class="stat-card p-4"><div class="font-display text-3xl" style="color:var(--accent);">4</div><div class="font-mono-custom text-xs mt-1" style="color:var(--silver);letter-spacing:2px;">SERVICE LOCATIONS</div></div>
<div class="stat-card p-4"><div class="font-display text-3xl">45+</div><div class="font-mono-custom text-xs mt-1" style="color:var(--silver);letter-spacing:2px;">YEARS EXPERIENCE</div></div>
</div>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<div style="background:var(--gunmetal);padding:80px 0;">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<div class="section-label text-center mb-4 reveal">// WHAT OUR CLIENTS SAY</div>
<h2 class="font-display text-5xl text-center mb-14 reveal">TRUSTED BY INDUSTRY <span style="color:var(--accent);">LEADERS</span></h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="testimonial-card p-8 reveal-left">
<div class="font-display text-5xl mb-4" style="color:var(--accent);opacity:0.3;">"</div>
<p class="leading-relaxed mb-6" style="color:var(--light);font-size:15px;">For our operation, there is no other choice. PrecisionCore's reliability, diverse product range, and outstanding customer support make them the best in the industry. Their excellence continues to positively impact our business.</p>
<div class="flex items-center gap-4">
<div style="width:44px;height:44px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',cursive;font-size:18px;">SM</div>
<div>
<div class="font-semibold text-sm">Sal Mazza</div>
<div class="font-mono-custom text-xs" style="color:var(--silver);letter-spacing:1.5px;">FACILITIES MANAGER — OMEGA TOOL CORP</div>
</div>
</div>
</div>
<div class="testimonial-card p-8 reveal-right">
<div class="font-display text-5xl mb-4" style="color:var(--accent);opacity:0.3;">"</div>
<p class="leading-relaxed mb-6" style="color:var(--light);font-size:15px;">PrecisionCore prioritizes our needs over the sale. They ensured we made the best choice within our budget. Their exceptional local service, with same-day tech support, minimizes downtime and keeps projects on track.</p>
<div class="flex items-center gap-4">
<div style="width:44px;height:44px;border:1px solid rgba(232,80,26,0.4);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',cursive;font-size:18px;background:var(--chrome);">MS</div>
<div>
<div class="font-semibold text-sm">Mike Secrest</div>
<div class="font-mono-custom text-xs" style="color:var(--silver);letter-spacing:1.5px;">GENERAL MANAGER — VIKING TOOL & ENGINEERING</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- LOCATIONS -->
<div style="background:var(--steel);padding:80px 0;">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<div class="section-label text-center mb-3 reveal">// FIND US</div>
<h2 class="font-display text-5xl text-center mb-14 reveal">OUR <span style="color:var(--accent);">LOCATIONS</span></h2>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
<div class="stat-card p-6 reveal" style="transition-delay:0s;">
<div class="font-mono-custom text-xs mb-3" style="color:var(--accent);letter-spacing:2px;">HEADQUARTERS</div>
<h3 class="font-display text-2xl mb-2">MISSISSAUGA</h3>
<p style="color:var(--silver);font-size:13px;" class="leading-relaxed">7100 Edwards Blvd<br>Mississauga, ON L5S 1Z1</p>
<div class="mt-4 font-mono-custom text-xs" style="color:var(--light);">+1.888.565.8807</div>
</div>
<div class="stat-card p-6 reveal" style="transition-delay:0.1s;">
<div class="font-mono-custom text-xs mb-3" style="color:var(--silver);letter-spacing:2px;">BRANCH OFFICE</div>
<h3 class="font-display text-2xl mb-2">MONTREAL</h3>
<p style="color:var(--silver);font-size:13px;" class="leading-relaxed">Montreal, QC<br>Canada</p>
<div class="mt-4 font-mono-custom text-xs" style="color:var(--light);">+1.888.565.8807</div>
</div>
<div class="stat-card p-6 reveal" style="transition-delay:0.2s;">
<div class="font-mono-custom text-xs mb-3" style="color:var(--silver);letter-spacing:2px;">BRANCH OFFICE</div>
<h3 class="font-display text-2xl mb-2">WINDSOR</h3>
<p style="color:var(--silver);font-size:13px;" class="leading-relaxed">Windsor, ON<br>Canada</p>
<div class="mt-4 font-mono-custom text-xs" style="color:var(--light);">+1.888.565.8807</div>
</div>
<div class="stat-card p-6 reveal" style="transition-delay:0.3s;border-color:rgba(232,80,26,0.35);">
<div class="font-mono-custom text-xs mb-3" style="color:var(--accent);letter-spacing:2px;">NEW — USA</div>
<h3 class="font-display text-2xl mb-2">MICHIGAN</h3>
<p style="color:var(--silver);font-size:13px;" class="leading-relaxed">Michigan, USA<br>Now Open!</p>
<div class="mt-4 font-mono-custom text-xs" style="color:var(--accent);">LEARN MORE →</div>
</div>
</div>
</div>
</div>
<!-- CONTACT / QUOTE -->
<section id="contact" style="background:var(--gunmetal);padding:96px 0;">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<div class="grid lg:grid-cols-2 gap-20">
<div class="reveal-left">
<div class="section-label mb-3">// LET'S TALK</div>
<h2 class="font-display leading-none mb-6" style="font-size:clamp(3rem,6vw,5.5rem);">REQUEST<br>A <span style="color:var(--accent);">QUOTE</span></h2>
<p class="leading-relaxed mb-10" style="color:var(--silver);font-size:15px;">Tell us about your machining requirements and our team will respond within 24 hours with a tailored proposal.</p>
<div class="space-y-5">
<div class="flex items-center gap-4">
<div style="width:40px;height:40px;border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#e8501a" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 8.63 19.79 19.79 0 01.22 2 2 2 0 012.18 0h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.91 7.91a16 16 0 006.18 6.18l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 14.92v2z"/></svg>
</div>
<div><div class="font-mono-custom text-xs mb-0.5" style="color:var(--silver);">CALL US</div><div class="font-semibold">+1.888.565.8807</div></div>
</div>
<div class="flex items-center gap-4">
<div style="width:40px;height:40px;border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#e8501a" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
</div>
<div><div class="font-mono-custom text-xs mb-0.5" style="color:var(--silver);">EMAIL US</div><div class="font-semibold">sales@precisioncore.com</div></div>
</div>
</div>
</div>
<div class="reveal-right">
<form id="quote-form" onsubmit="submitForm(event)" style="display:grid;gap:14px;">
<div id="product-prefill" class="hidden font-mono-custom text-xs p-3" style="background:rgba(232,80,26,0.1);border:1px solid rgba(232,80,26,0.3);color:var(--accent);letter-spacing:1px;"></div>
<div class="grid grid-cols-2 gap-4">
<div><label class="font-mono-custom text-xs block mb-2" style="color:var(--silver);letter-spacing:2px;">FIRST NAME</label><input type="text" class="form-input" placeholder="John" required /></div>
<div><label class="font-mono-custom text-xs block mb-2" style="color:var(--silver);letter-spacing:2px;">LAST NAME</label><input type="text" class="form-input" placeholder="Doe" required /></div>
</div>
<div><label class="font-mono-custom text-xs block mb-2" style="color:var(--silver);letter-spacing:2px;">COMPANY</label><input type="text" class="form-input" placeholder="Your Company Inc." /></div>
<div><label class="font-mono-custom text-xs block mb-2" style="color:var(--silver);letter-spacing:2px;">EMAIL ADDRESS</label><input type="email" class="form-input" placeholder="john@company.com" required /></div>
<div>
<label class="font-mono-custom text-xs block mb-2" style="color:var(--silver);letter-spacing:2px;">MACHINE OF INTEREST</label>
<select id="machine-select" class="form-input" style="cursor:none;">
<option value="" style="background:var(--iron);">Select a Category</option>
<option style="background:var(--iron);">Horizontal Milling Center</option>
<option style="background:var(--iron);">Vertical Milling Center</option>
<option style="background:var(--iron);">Turning Center</option>
<option style="background:var(--iron);">Deep Hole Drilling</option>
<option style="background:var(--iron);">Specialty Machines</option>
<option style="background:var(--iron);">Pre-Owned Equipment</option>
</select>
</div>
<div><label class="font-mono-custom text-xs block mb-2" style="color:var(--silver);letter-spacing:2px;">MESSAGE</label><textarea class="form-input" rows="4" placeholder="Describe your machining requirements..."></textarea></div>
<button type="submit" class="btn-primary w-full">SEND INQUIRY</button>
<div id="form-success" class="hidden text-center py-4 font-mono-custom text-xs" style="color:#4ade80;border:1px solid rgba(74,222,128,0.3);letter-spacing:2px;">✓ MESSAGE SENT — WE'LL RESPOND WITHIN 24 HOURS</div>
</form>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer style="background:var(--steel);border-top:1px solid rgba(46,58,80,0.6);padding:60px 0 30px;">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
<div class="col-span-2 lg:col-span-1">
<div class="font-display text-3xl mb-3">PRECISION<span style="color:var(--accent);">CORE</span></div>
<p style="color:var(--silver);font-size:13px;" class="leading-relaxed mb-5">Canada's most trusted source for CNC machine tools, backed by 45+ years of industrial expertise.</p>
</div>
<div>
<div class="font-mono-custom text-xs mb-5" style="color:var(--silver);letter-spacing:2px;">PRODUCTS</div>
<ul class="space-y-3 text-sm" style="color:var(--silver);">
<li><a href="#" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">Horizontal Milling</a></li>
<li><a href="#" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">Vertical Milling</a></li>
<li><a href="#" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">Turning Centers</a></li>
<li><a href="#" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">Specialty Machines</a></li>
<li><a href="#" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">Pre-Owned</a></li>
</ul>
</div>
<div>
<div class="font-mono-custom text-xs mb-5" style="color:var(--silver);letter-spacing:2px;">COMPANY</div>
<ul class="space-y-3 text-sm" style="color:var(--silver);">
<li><a href="#" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">About Us</a></li>
<li><a href="#" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">Meet the Team</a></li>
<li><a href="#" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">Brands</a></li>
<li><a href="#" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">Locations</a></li>
<li><a href="#" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">Blog & Events</a></li>
</ul>
</div>
<div>
<div class="font-mono-custom text-xs mb-5" style="color:var(--silver);letter-spacing:2px;">SERVICES</div>
<ul class="space-y-3 text-sm" style="color:var(--silver);">
<li><a href="#" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">Service & Maintenance</a></li>
<li><a href="#" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">Equipment Financing</a></li>
<li><a href="#" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">Operator Training</a></li>
<li><a href="#" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">Spare Parts</a></li>
</ul>
</div>
</div>
<div class="accent-line mb-6"></div>
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
<div class="font-mono-custom text-xs" style="color:var(--silver);letter-spacing:1.5px;">© 2026 PRECISIONCORE CNC SOLUTIONS — ALL RIGHTS RESERVED</div>
<div class="flex gap-6">
<a href="#" class="font-mono-custom text-xs transition-colors" style="color:var(--silver);" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">PRIVACY POLICY</a>
<a href="#" class="font-mono-custom text-xs transition-colors" style="color:var(--silver);" onmouseenter="this.style.color='var(--accent)'" onmouseleave="this.style.color='var(--silver)'">TERMS OF SERVICE</a>
</div>
</div>
</div>
</footer>
<!-- QUOTE MODAL -->
<div id="quote-modal" style="display:none;position:fixed;inset:0;background:rgba(10,12,16,0.92);z-index:2000;align-items:center;justify-content:center;backdrop-filter:blur(6px);">
<div style="background:var(--gunmetal);border:1px solid rgba(232,80,26,0.3);padding:40px;max-width:480px;width:90%;position:relative;">
<button onclick="closeModal()" style="position:absolute;top:16px;right:16px;background:none;border:none;color:var(--silver);cursor:none;font-size:20px;">✕</button>
<div class="section-label mb-3">// QUICK QUOTE</div>
<h3 class="font-display text-3xl mb-6">REQUEST <span style="color:var(--accent);">PRICING</span></h3>
<p id="modal-product-name" class="font-mono-custom text-xs mb-6 p-3" style="background:rgba(232,80,26,0.1);border:1px solid rgba(232,80,26,0.2);color:var(--accent);letter-spacing:1.5px;"></p>
<div style="display:grid;gap:12px;">
<input type="text" class="form-input" placeholder="Your Name" />
<input type="email" class="form-input" placeholder="Email Address" />
<input type="tel" class="form-input" placeholder="Phone Number" />
<button onclick="closeModal()" class="btn-primary w-full">SUBMIT REQUEST</button>
</div>
</div>
</div>
<script>
// CURSOR
const cur = document.getElementById('cursor');
const ring = document.getElementById('cursor-ring');
let mx=0,my=0,rx=0,ry=0;
document.addEventListener('mousemove',e=>{
mx=e.clientX; my=e.clientY;
cur.style.transform=`translate(${mx-6}px,${my-6}px)`;
});
(function animRing(){
rx+=(mx-rx)*0.12; ry+=(my-ry)*0.12;
ring.style.transform=`translate(${rx-18}px,${ry-18}px)`;
requestAnimationFrame(animRing);
})();
document.querySelectorAll('a,button,.cat-card,.prod-card,.stat-card').forEach(el=>{
el.addEventListener('mouseenter',()=>{ ring.style.width='52px'; ring.style.height='52px'; ring.style.borderColor='rgba(232,80,26,0.9)'; });
el.addEventListener('mouseleave',()=>{ ring.style.width='36px'; ring.style.height='36px'; ring.style.borderColor='rgba(232,80,26,0.5)'; });
});
// LOADER
let pct=0;
const pctEl=document.getElementById('loader-pct');
const iv=setInterval(()=>{
pct+=Math.floor(Math.random()*14)+3;
if(pct>=100){pct=100;clearInterval(iv);}
pctEl.textContent=`INITIALIZING — ${pct}%`;
},100);
window.addEventListener('load',()=>{
setTimeout(()=>{
const l=document.getElementById('loader');
l.style.opacity='0'; l.style.transform='translateY(-20px)';
setTimeout(()=>{ l.style.display='none'; }, 600);
}, 1800);
});
// NAVBAR
window.addEventListener('scroll',()=>{
document.getElementById('navbar').classList.toggle('scrolled',window.scrollY>60);
});
// SCROLL REVEAL
const obs=new IntersectionObserver(entries=>{
entries.forEach(e=>{ if(e.isIntersecting) e.target.classList.add('visible'); });
},{threshold:0.1});
document.querySelectorAll('.reveal,.reveal-left,.reveal-right').forEach(el=>obs.observe(el));
// COUNTERS
const cObs=new IntersectionObserver(entries=>{
entries.forEach(e=>{
if(!e.isIntersecting)return;
const el=e.target, target=parseInt(el.dataset.target);
let cur2=0; const step=target/40;
const t=setInterval(()=>{
cur2=Math.min(cur2+step,target);
el.textContent=Math.floor(cur2)+(target>10?'+':'');
if(cur2>=target)clearInterval(t);
},40);
cObs.unobserve(el);
});
},{threshold:0.5});
document.querySelectorAll('.counter').forEach(el=>cObs.observe(el));
// MOBILE MENU
let mOpen=false;
function toggleMenu(){
mOpen=!mOpen;
document.getElementById('mobile-menu').classList.toggle('open',mOpen);
document.getElementById('h1').style.transform=mOpen?'rotate(45deg) translate(4px,4px)':'';
document.getElementById('h2').style.opacity=mOpen?'0':'1';
document.getElementById('h3').style.transform=mOpen?'rotate(-45deg) translate(4px,-4px)':'';
}
// PRODUCT TABS
function switchTab(cat,btn){
document.querySelectorAll('.tab-btn').forEach(b=>{ b.classList.remove('active'); b.style.color='var(--silver)'; });
btn.classList.add('active'); btn.style.color='var(--light)';
document.querySelectorAll('.prod-card').forEach(card=>{
const show=cat==='all'||card.dataset.cat===cat;
card.style.transition='opacity 0.3s, transform 0.3s';
card.style.opacity=show?'1':'0.15';
card.style.transform=show?'':'scale(0.95)';
card.style.pointerEvents=show?'all':'none';
});
}
// FORM
function submitForm(e){
e.preventDefault();
const btn=e.target.querySelector('button[type=submit]');
btn.textContent='SENDING...'; btn.style.opacity='0.7';
setTimeout(()=>{
e.target.reset();
btn.textContent='SEND INQUIRY'; btn.style.opacity='1';
document.getElementById('product-prefill').classList.add('hidden');
const s=document.getElementById('form-success');
s.classList.remove('hidden');
setTimeout(()=>s.classList.add('hidden'),5000);
},1400);
}
// QUICK QUOTE MODAL
function openQuote(product){
document.getElementById('modal-product-name').textContent='SELECTED: '+product;
document.getElementById('quote-modal').style.display='flex';
}
function closeModal(){
document.getElementById('quote-modal').style.display='none';
}
document.getElementById('quote-modal').addEventListener('click',function(e){
if(e.target===this)closeModal();
});
</script>
</body>
</html>