{"id":197,"date":"2026-05-22T02:59:59","date_gmt":"2026-05-22T02:59:59","guid":{"rendered":"https:\/\/sainosure.com\/natfirst\/?page_id=197"},"modified":"2026-07-06T14:01:11","modified_gmt":"2026-07-06T08:31:11","slug":"technology","status":"publish","type":"page","link":"https:\/\/sainosure.com\/natfirst\/technology\/","title":{"rendered":"Technology"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nTechnology | NatFirst<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n<!-- Lucide Icons -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/lucide\/0.383.0\/umd\/lucide.min.js\"><\/script>\r\n<!-- EmailJS (sends form submissions to sales@natfirst.com, bcc jitender.ayyadevara@gmail.com) -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@4\/dist\/email.min.js\"><\/script>\r\n<script>\r\n\/* ====================================================================\r\n NATFIRST EMAILJS CONFIG \u2014 SETUP REQUIRED BEFORE THIS GOES LIVE\r\n 1. Create a free account at https:\/\/www.emailjs.com\r\n 2. Add an Email Service (Gmail\/Outlook\/SMTP) -> copy its SERVICE ID\r\n 3. Create an Email Template -> copy its TEMPLATE ID. In the template\r\n settings set \"To Email\" to {{to_email}} and \"Bcc\" to {{bcc_email}}.\r\n In the template body use {{from_email}}, {{subject}}, {{message}}.\r\n 4. Copy your Public Key from Account > General -> paste below.\r\n Replace the three placeholder strings below with your real values.\r\n ==================================================================== *\/\r\nwindow.NF_EMAILJS = {\r\n PUBLIC_KEY: \"YOUR_EMAILJS_PUBLIC_KEY\",\r\n SERVICE_ID: \"YOUR_EMAILJS_SERVICE_ID\",\r\n TEMPLATE_ID: \"YOUR_EMAILJS_TEMPLATE_ID\",\r\n TO_EMAIL: \"sales@natfirst.com\",\r\n BCC_EMAIL: \"jitender.ayyadevara@gmail.com\"\r\n};\r\n(function(){\r\n if (window.emailjs && window.NF_EMAILJS.PUBLIC_KEY) {\r\n emailjs.init({ publicKey: window.NF_EMAILJS.PUBLIC_KEY });\r\n }\r\n})();\r\n<\/script>\r\n\r\n<style>\r\n:root {\r\n --navy-deep: #020b1a;\r\n --navy-mid: #041229;\r\n --navy-card: #071a36;\r\n --navy-light: #0a2247;\r\n --blue-primary: #66D9FF;\r\n --blue-bright: #66D9FF;\r\n --blue-glow: #66D9FF;\r\n --blue-electric: #66D9FF;\r\n --blue-accent: #66D9FF;\r\n --amber-warm: #f59e0b;\r\n --red-alert: #ef4444;\r\n --purple-soft: #8b5cf6;\r\n --teal-soft: #66D9FF;\r\n --white: #ffffff;\r\n --white-90: rgba(255,255,255,0.9);\r\n --white-70: rgba(255,255,255,0.7);\r\n --white-50: rgba(255,255,255,0.5);\r\n --white-20: rgba(255,255,255,0.2);\r\n --white-10: rgba(255,255,255,0.1);\r\n --white-05: rgba(255,255,255,0.05);\r\n --text-dark: #0b1e3d;\r\n --text-mid: #2c3e5a;\r\n --text-muted: #6b7a99;\r\n --light-bg: #f5f8ff;\r\n --light-bg2: #eef3fc;\r\n --border-blue: rgba(102,217,255,0.25);\r\n --font: 'Poppins', sans-serif;\r\n --transition: 0.3s cubic-bezier(0.4,0,0.2,1);\r\n --radius-lg: 20px;\r\n --radius-md: 12px;\r\n --radius-sm: 8px;\r\n}\r\n\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\nhtml { scroll-behavior: smooth; overflow-x: hidden; }\r\nbody {\r\n font-family: var(--font);\r\n font-size: 15px;\r\n line-height: 1.7;\r\n color: var(--text-dark);\r\n background: #fff;\r\n overflow-x: hidden;\r\n}\r\nimg { max-width: 100%; display: block; }\r\na { text-decoration: none; color: inherit; }\r\nul { list-style: none; }\r\nh1,h2,h3,h4,h5 { font-family: var(--font); font-weight: 800; line-height: 1.15; }\r\n\r\n::-webkit-scrollbar { width: 5px; }\r\n::-webkit-scrollbar-track { background: #020b1a; }\r\n::-webkit-scrollbar-thumb { background: rgba(102,217,255,0.45); border-radius: 3px; }\r\n\r\n\/* ===== PAGE LOADER ===== *\/\r\n#page-loader {\r\n position: fixed; inset: 0; z-index: 9999;\r\n background: #E3F2FF;\r\n display: flex; align-items: center; justify-content: center;\r\n flex-direction: column; gap: 28px;\r\n transition: opacity 0.6s ease, visibility 0.6s ease;\r\n}\r\n#page-loader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }\r\n.nf-spinner-wrap {\r\n position: relative;\r\n width: 150px; height: 150px;\r\n display: flex; align-items: center; justify-content: center;\r\n}\r\n.nf-ring-outer {\r\n position: absolute;\r\n width: 150px; height: 150px;\r\n border-radius: 50%;\r\n border: 3.5px solid transparent;\r\n border-top-color: #3CB8FF;\r\n border-right-color: #3CB8FF44;\r\n animation: nfSpin 1.1s linear infinite;\r\n}\r\n.nf-ring-inner {\r\n position: absolute;\r\n width: 114px; height: 114px;\r\n border-radius: 50%;\r\n border: 2.5px solid transparent;\r\n border-bottom-color: #3CB8FF99;\r\n border-left-color: #3CB8FF33;\r\n animation: nfSpin 1.6s linear infinite reverse;\r\n}\r\n.nf-dot {\r\n position: absolute;\r\n width: 8px; height: 8px;\r\n border-radius: 50%;\r\n background: #3CB8FF;\r\n top: 4px; left: calc(50% - 4px);\r\n box-shadow: 0 0 8px #3CB8FFaa;\r\n animation: nfSpin 1.1s linear infinite;\r\n transform-origin: 4px 71px;\r\n}\r\n@keyframes nfSpin { to { transform: rotate(360deg); } }\r\n.nf-logo-wrap {\r\n position: relative; z-index: 2;\r\n width: 84px; height: 84px;\r\n display: flex; align-items: center; justify-content: center;\r\n animation: nfBreathe 2.2s ease-in-out infinite;\r\n}\r\n.nf-logo-wrap::before {\r\n content: '';\r\n position: absolute;\r\n inset: -14px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.12) 42%, rgba(255,255,255,0.04) 62%, transparent 75%);\r\n filter: blur(8px);\r\n}\r\n.nf-logo {\r\n width: 76px; height: 76px;\r\n object-fit: contain;\r\n position: relative; z-index: 1;\r\n filter: drop-shadow(0 0 10px rgba(255,255,255,0.18));\r\n}\r\n@keyframes nfBreathe {\r\n 0%, 100% { transform: scale(1); opacity: 1; }\r\n 50% { transform: scale(1.06); opacity: 0.88; }\r\n}\r\n\r\n\/* ===== NAV ===== *\/\r\n#main-nav {\r\n position: fixed; top: 0; left: 0; right: 0; z-index: 1000;\r\n background: rgba(2,11,26,0.88);\r\n backdrop-filter: blur(18px) saturate(1.8);\r\n border-bottom: 1px solid rgba(102,217,255,0.12);\r\n transition: background 0.3s, box-shadow 0.3s;\r\n}\r\n#main-nav.scrolled { background: rgba(2,11,26,0.97); box-shadow: 0 4px 30px rgba(0,0,0,0.4); }\r\n.nav-inner {\r\n max-width: 1180px; margin: 0 auto; padding: 0 28px;\r\n height: 70px; display: flex; align-items: center; gap: 32px;\r\n}\r\n.nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }\r\n.nav-logo-icon {\r\n width: 36px; height: 36px; border-radius: 10px;\r\n background: linear-gradient(135deg, #66D9FF, #00AADD);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 18px; font-weight: 900; color: #fff; letter-spacing: -0.05em;\r\n}\r\n.nav-brand { font-weight: 800; font-size: 18px; color: #fff; }\r\n.nav-brand span { color: #66D9FF; }\r\n.nav-links { display: flex; align-items: center; gap: 4px; flex: 1; }\r\n.nav-link {\r\n font-size: 13.5px; font-weight: 500; color: var(--white-70);\r\n padding: 8px 14px; border-radius: 8px;\r\n transition: color 0.2s, background 0.2s;\r\n}\r\n.nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); }\r\n.nav-link.active { color: #66D9FF; background: rgba(102,217,255,0.08); }\r\n.nav-cta { flex-shrink: 0; }\r\n\r\n\/* ===== BUTTONS ===== *\/\r\n.btn {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n padding: 13px 28px; border-radius: 50px;\r\n font-family: var(--font); font-weight: 700; font-size: 14px;\r\n cursor: pointer; border: none; transition: var(--transition);\r\n text-decoration: none; position: relative; overflow: hidden; letter-spacing: 0.01em;\r\n}\r\n.btn-primary {\r\n background: #00AADD;\r\n color: #fff; box-shadow: 0 4px 20px rgba(0,170,221,0.5);\r\n}\r\n.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,170,221,0.7); }\r\n.btn-outline {\r\n background: transparent; color: #00AADD;\r\n border: 2px solid #00AADD;\r\n}\r\n.btn-outline:hover { background: rgba(0,170,221,0.12); transform: translateY(-2px); }\r\n.btn::after {\r\n content: ''; position: absolute; top: 0; left: -100%;\r\n width: 60%; height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);\r\n transition: left 0.5s ease;\r\n}\r\n.btn:hover::after { left: 140%; }\r\n.btn-sm { padding: 9px 20px; font-size: 13px; }\r\n.btn-dark {\r\n background: transparent; color: #1EA8F5;\r\n border: 2px solid #3CB8FF;\r\n}\r\n.btn-dark:hover { background: rgba(60,184,255,0.14); transform: translateY(-2px); }\r\n\r\n\/* ===== LAYOUT ===== *\/\r\n.container { max-width: 1180px; margin: 0 auto; padding: 0 28px; width: 100%; }\r\nsection { padding: 90px 0; }\r\n\r\n\/* ===== REVEAL ANIMATIONS ===== *\/\r\n.reveal {\r\n opacity: 0; transform: translateY(32px);\r\n transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1);\r\n}\r\n.reveal.visible { opacity: 1; transform: translateY(0); }\r\n.reveal-d1 { transition-delay: 0.1s; }\r\n.reveal-d2 { transition-delay: 0.2s; }\r\n.reveal-d3 { transition-delay: 0.3s; }\r\n.reveal-d4 { transition-delay: 0.4s; }\r\n.reveal-d5 { transition-delay: 0.5s; }\r\n.reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1); }\r\n.reveal-right { opacity: 0; transform: translateX(36px); transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1); }\r\n.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; }\r\n.reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1); }\r\n.reveal-scale.visible { opacity: 1; transform: scale(1); }\r\n\r\n\/* ===== PILLS ===== *\/\r\n.pill {\r\n display: inline-flex; align-items: center; gap: 6px;\r\n padding: 6px 16px; border-radius: 50px;\r\n font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;\r\n}\r\n.pill-dark {\r\n background: rgba(102,217,255,0.12); color: #66D9FF;\r\n border: 1px solid rgba(102,217,255,0.25);\r\n}\r\n.pill-amber {\r\n background: rgba(245,158,11,0.12); color: var(--amber-warm);\r\n border: 1px solid rgba(245,158,11,0.25);\r\n}\r\n.pill-purple {\r\n background: rgba(102,217,255,0.12); color: #66D9FF;\r\n border: 1px solid rgba(102,217,255,0.25);\r\n}\r\n\r\n\/* ===== GLOW SEP ===== *\/\r\n.glow-sep {\r\n height: 1px;\r\n background: linear-gradient(90deg, transparent 0%, rgba(102,217,255,0.2) 30%, rgba(102,217,255,0.5) 50%, rgba(102,217,255,0.2) 70%, transparent 100%);\r\n}\r\n\r\n\/* ===== SECTION BORDER HIGHLIGHTS ===== *\/\r\n\/* Light sections get a top accent line using a pseudo wrapper approach *\/\r\nsection#proof,\r\nsection#architecture,\r\nsection#extensibility,\r\nsection#cta {\r\n position: relative;\r\n}\r\nsection#proof::before,\r\nsection#architecture::before,\r\nsection#extensibility::before,\r\nsection#cta::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 5%; right: 5%;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, rgba(102,217,255,0.18), rgba(102,217,255,0.45), rgba(102,217,255,0.18), transparent);\r\n border-radius: 2px;\r\n}\r\n\/* Dark sections top highlight *\/\r\nsection#corpus::before,\r\nsection#in-production::before,\r\nsection#delivery::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 5%; right: 5%;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, rgba(102,217,255,0.12), rgba(102,217,255,0.35), rgba(102,217,255,0.12), transparent);\r\n border-radius: 2px;\r\n}\r\n\r\n\/* ===== SECTION TYPOGRAPHY ===== *\/\r\n.section-eyebrow { margin-bottom: 16px; }\r\n.section-h2 {\r\n font-size: clamp(1.7rem, 3.2vw, 2.5rem);\r\n font-weight: 900; color: var(--text-dark);\r\n line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 16px;\r\n}\r\n.section-h2-dark { color: #fff; }\r\n.section-sub {\r\n font-size: 16px; color: var(--text-muted); line-height: 1.75; max-width: 560px;\r\n}\r\n.section-sub-dark { color: var(--white-70); }\r\n.section-header { text-align: center; max-width: 680px; margin: 0 auto 56px; }\r\n.section-header .section-sub { margin: 0 auto; }\r\n\r\n\/* ===== PULSING DOT ===== *\/\r\n.pulse-dot {\r\n width: 7px; height: 7px; border-radius: 50%;\r\n background: #66D9FF; flex-shrink: 0;\r\n box-shadow: 0 0 8px rgba(102,217,255,0.6);\r\n animation: pulseDot 2.2s ease-in-out infinite;\r\n}\r\n@keyframes pulseDot {\r\n 0%,100% { box-shadow: 0 0 5px rgba(102,217,255,0.5); }\r\n 50% { box-shadow: 0 0 14px rgba(102,217,255,0.9); }\r\n}\r\n\r\n\/* ===== HERO ===== *\/\r\n#hero {\r\n background: linear-gradient(180deg,#f8faff 0%,#eef4ff 100%);\r\n min-height: 500px; display: flex; align-items: center;\r\n position: relative; overflow: hidden; padding: 136px 0 80px;\r\n}\r\n.hero-canvas {\r\n position: absolute; inset: 0; pointer-events: none;\r\n}\r\n.hero-orb {\r\n position: absolute; border-radius: 50%; pointer-events: none; filter: blur(90px);\r\n}\r\n.hero-orb-1 {\r\n width: 500px; height: 500px; right: -100px; top: -100px;\r\n background: radial-gradient(circle, rgba(64,184,255,0.14), transparent 65%);\r\n animation: orbDrift1 12s ease-in-out infinite;\r\n}\r\n.hero-orb-2 {\r\n width: 400px; height: 400px; left: -80px; bottom: -80px;\r\n background: radial-gradient(circle, rgba(64,184,255,0.098), transparent 65%);\r\n animation: orbDrift2 15s ease-in-out infinite;\r\n}\r\n.hero-orb-3 { display: none; }\r\n@keyframes orbDrift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,20px)} }\r\n@keyframes orbDrift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-25px)} }\r\n@keyframes orbDrift3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-15px,15px)} }\r\n\r\n.hero-inner {\r\n position: relative; z-index: 2;\r\n display: flex; flex-direction: column; align-items: center;\r\n text-align: center; gap: 0;\r\n}\r\n.hero-h1 {\r\n font-size: clamp(27px,3.85vw,53px);\r\n font-weight: 800; color: #0F2E73; line-height: 1.08;\r\n letter-spacing: -0.03em; margin-bottom: 20px;\r\n max-width: 800px;\r\n}\r\n.hero-h1 .accent { color: #000000; }\r\n.hero-h1 .accent2 { color: #000000; }\r\n.hero-sub {\r\n font-size: 17px; color: #2E4F6F; line-height: 1.75;\r\n max-width: 620px; margin: 0 auto 32px; font-weight: 600;\r\n}\r\n.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; justify-content: center; }\r\n.hero-trust-row {\r\n display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center;\r\n}\r\n.hero-trust-item {\r\n display: flex; align-items: center; gap: 8px;\r\n font-size: 12.5px; color: #2E4F6F; font-weight: 500;\r\n}\r\n\r\n.hero-stat-cards {\r\n display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;\r\n margin-top: 0; width: 100%; max-width: 780px;\r\n}\r\n.hero-stat-card {\r\n background: rgba(255,255,255,0.65);\r\n border: 1px solid rgba(70,180,255,0.252);\r\n border-radius: 18px; padding: 28px 36px;\r\n flex: 1; min-width: 180px; max-width: 220px;\r\n text-align: center;\r\n transition: border-color 0.3s, background 0.3s, transform 0.3s;\r\n backdrop-filter: blur(18px);\r\n}\r\n.hero-stat-card:hover {\r\n border-color: rgba(60,184,255,0.45);\r\n background: rgba(60,184,255,0.07);\r\n transform: translateY(-4px);\r\n}\r\n.hero-stat-val {\r\n font-size: clamp(1.8rem, 3vw, 2.4rem);\r\n font-weight: 900; color: #1EA8F5;\r\n letter-spacing: -0.03em; line-height: 1;\r\n margin-bottom: 8px;\r\n}\r\n.hero-stat-label {\r\n font-size: 13px; color: #2E4F6F;\r\n font-weight: 500; line-height: 1.45;\r\n}\r\n\r\n\/* ===== PROOF POINTS ===== *\/\r\n#proof {\r\n background: #fff; padding: 80px 0;\r\n}\r\n.proof-intro { margin-bottom: 64px; }\r\n.proof-grid {\r\n display: grid; grid-template-columns: repeat(6,1fr); gap: 20px;\r\n}\r\n.proof-grid .proof-card:nth-child(1) { grid-column: span 2; }\r\n.proof-grid .proof-card:nth-child(2) { grid-column: span 2; }\r\n.proof-grid .proof-card:nth-child(3) { grid-column: span 2; }\r\n.proof-grid .proof-card:nth-child(4) { grid-column: 2 \/ 4; }\r\n.proof-grid .proof-card:nth-child(5) { grid-column: 4 \/ 6; }\r\n.proof-card {\r\n background: var(--light-bg); border: 1px solid rgba(102,217,255,0.12);\r\n border-radius: 18px; padding: 26px 22px;\r\n transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;\r\n position: relative; overflow: hidden;\r\n}\r\n.proof-card::before {\r\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;\r\n background: linear-gradient(90deg, #66D9FF, #00AADD);\r\n transform: scaleX(0); transform-origin: left;\r\n transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);\r\n}\r\n.proof-card:hover { border-color: rgba(102,217,255,0.35); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(102,217,255,0.1); }\r\n.proof-card:hover::before { transform: scaleX(1); }\r\n.proof-card-icon {\r\n width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;\r\n margin-bottom: 16px;\r\n background: rgba(102,217,255,0.1);\r\n color: #66D9FF;\r\n}\r\n.proof-card-icon.purple { background: rgba(102,217,255,0.12); color: #66D9FF; }\r\n.proof-card-icon.amber { background: rgba(245,158,11,0.1); color: #f59e0b; }\r\n.proof-card-icon.teal { background: rgba(102,217,255,0.1); color: #66D9FF; }\r\n.proof-card-icon.green { background: rgba(0,200,100,0.1); color: #22c55e; }\r\n.proof-card-icon svg { width: 20px; height: 20px; }\r\n.proof-card-title { font-size: 14.5px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }\r\n.proof-card-desc { font-size: 13px; color: var(--text-muted); line-height: 1.65; }\r\n\r\n\/* ===== CORPUS DARK SECTION ===== *\/\r\n#corpus {\r\n background: var(--navy-deep);\r\n position: relative; overflow: hidden; padding: 100px 0;\r\n}\r\n.corpus-orb-1 {\r\n position: absolute; width: 600px; height: 600px; border-radius: 50%;\r\n right: -150px; top: -150px; filter: blur(100px); pointer-events: none;\r\n background: radial-gradient(circle, rgba(102,217,255,0.1) 0%, transparent 70%);\r\n}\r\n.corpus-orb-2 {\r\n position: absolute; width: 400px; height: 400px; border-radius: 50%;\r\n left: -100px; bottom: -100px; filter: blur(100px); pointer-events: none;\r\n background: radial-gradient(circle, rgba(102,217,255,0.08) 0%, transparent 70%);\r\n}\r\n.corpus-inner {\r\n position: relative; z-index: 2;\r\n display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;\r\n}\r\n.corpus-stats {\r\n display: grid; grid-template-columns: 1fr 1fr; gap: 16px;\r\n}\r\n.corpus-stat {\r\n background: rgba(255,255,255,0.04); border: 1px solid rgba(102,217,255,0.14);\r\n border-radius: 18px; padding: 22px 20px;\r\n transition: border-color 0.3s, transform 0.3s;\r\n}\r\n.corpus-stat:hover { border-color: rgba(102,217,255,0.35); transform: translateY(-3px); }\r\n.corpus-stat-num {\r\n font-size: 2.2rem; font-weight: 900; color: #fff; letter-spacing: -0.04em; margin-bottom: 4px;\r\n background: linear-gradient(135deg, #fff 60%, #66D9FF);\r\n -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\r\n}\r\n.corpus-stat-label { font-size: 12.5px; color: var(--white-50); font-weight: 500; line-height: 1.5; }\r\n\r\n\/* ===== ARCHITECTURE SECTION ===== *\/\r\n#architecture {\r\n background: #fff; padding: 100px 0;\r\n}\r\n\r\n\/* ===== IN PRODUCTION SECTION ===== *\/\r\n#in-production {\r\n background: var(--navy-deep);\r\n position: relative; overflow: hidden; padding: 100px 0;\r\n}\r\n.prod-orb {\r\n position: absolute; border-radius: 50%; pointer-events: none; filter: blur(100px);\r\n}\r\n.prod-orb-1 {\r\n width: 700px; height: 700px; left: -200px; top: -200px;\r\n background: radial-gradient(circle, rgba(102,217,255,0.09) 0%, transparent 70%);\r\n}\r\n.prod-orb-2 {\r\n width: 500px; height: 500px; right: -100px; bottom: -100px;\r\n background: radial-gradient(circle, rgba(102,217,255,0.08) 0%, transparent 70%);\r\n}\r\n.prod-inner { position: relative; z-index: 2; }\r\n.prod-header { text-align: center; max-width: 680px; margin: 0 auto 64px; }\r\n\r\n\/* Operating Model Card *\/\r\n.om-card {\r\n background: linear-gradient(135deg, #020b1a 0%, #041229 40%, #071a36 100%);\r\n border-radius: 24px; border: 1px solid rgba(102,217,255,0.22);\r\n position: relative; overflow: hidden;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\r\n}\r\n.om-card-orb {\r\n position: absolute; width: 600px; height: 600px; border-radius: 50%;\r\n right: -150px; top: -200px; filter: blur(90px); pointer-events: none;\r\n background: radial-gradient(circle, rgba(102,217,255,0.14) 0%, rgba(102,217,255,0.07) 50%, transparent 70%);\r\n}\r\n.om-card-inner {\r\n position: relative; z-index: 2;\r\n display: grid; grid-template-columns: 1fr 1fr; gap: 60px;\r\n align-items: center; padding: 60px 56px;\r\n}\r\n.om-card-h3 {\r\n font-size: clamp(1.5rem, 2.5vw, 2rem);\r\n font-weight: 900; color: #fff; line-height: 1.15;\r\n letter-spacing: -0.025em; margin-bottom: 16px;\r\n}\r\n.om-card-sub {\r\n font-size: 15px; color: var(--white-70); line-height: 1.75;\r\n}\r\n.om-card-right {\r\n display: flex; flex-direction: column; gap: 14px;\r\n}\r\n.om-mini-card {\r\n display: flex; align-items: flex-start; gap: 14px;\r\n padding: 16px 18px; border-radius: 14px;\r\n background: rgba(255,255,255,0.05); border: 1px solid rgba(102,217,255,0.14);\r\n transition: border-color 0.3s, background 0.3s;\r\n}\r\n.om-mini-card:hover { border-color: rgba(102,217,255,0.35); background: rgba(102,217,255,0.06); }\r\n.om-mini-icon {\r\n width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;\r\n display: flex; align-items: center; justify-content: center;\r\n background: rgba(102,217,255,0.15);\r\n color: #66D9FF;\r\n}\r\n.om-mini-icon svg { width: 16px; height: 16px; }\r\n.om-mini-title { font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 4px; }\r\n.om-mini-desc { font-size: 12px; color: var(--white-50); line-height: 1.6; }\r\n\r\n\/* ===== DEFENSIBILITY ===== *\/\r\n#extensibility {\r\n background: #fff; padding: 100px 0;\r\n}\r\n.def-grid {\r\n display: grid; grid-template-columns: repeat(4,1fr); gap: 24px;\r\n}\r\n.def-card {\r\n background: #fff;\r\n border: 1px solid rgba(102,217,255,0.15);\r\n border-radius: 22px;\r\n padding: 32px 26px 24px;\r\n display: flex; flex-direction: column; justify-content: space-between;\r\n position: relative; overflow: hidden;\r\n box-shadow: 0 2px 20px rgba(0,0,0,0.05);\r\n transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;\r\n}\r\n.def-card:hover { border-color: rgba(102,217,255,0.45); transform: translateY(-6px); box-shadow: 0 12px 40px rgba(102,217,255,0.1); }\r\n.def-card-glow {\r\n position: absolute; width: 200px; height: 200px; border-radius: 50%;\r\n top: -60px; right: -60px; filter: blur(60px); pointer-events: none;\r\n}\r\n.def-glow-blue { background: radial-gradient(circle, rgba(102,217,255,0.14) 0%, transparent 70%); }\r\n.def-glow-teal { background: radial-gradient(circle, rgba(102,217,255,0.12) 0%, transparent 70%); }\r\n.def-glow-purple{ background: radial-gradient(circle, rgba(102,217,255,0.13) 0%, transparent 70%); }\r\n.def-glow-amber { background: radial-gradient(circle, rgba(245,158,11,0.12) 0%, transparent 70%); }\r\n.def-card-content { position: relative; z-index: 1; flex: 1; }\r\n.def-card-icon-wrap {\r\n width: 50px; height: 50px; border-radius: 14px;\r\n display: flex; align-items: center; justify-content: center;\r\n margin-bottom: 20px;\r\n color: #66D9FF;\r\n}\r\n.def-card-icon-wrap svg { width: 22px; height: 22px; }\r\n.def-icon-blue { background: rgba(102,217,255,0.1); }\r\n.def-icon-teal { background: rgba(102,217,255,0.1); }\r\n.def-icon-purple { background: rgba(102,217,255,0.1); color: #66D9FF; }\r\n.def-icon-amber { background: rgba(245,158,11,0.1); color: #f59e0b; }\r\n.def-card-label {\r\n font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;\r\n color: var(--text-muted); margin-bottom: 8px;\r\n}\r\n.def-card-title {\r\n font-size: 16px; font-weight: 800; color: var(--text-dark);\r\n margin-bottom: 12px; letter-spacing: -0.01em;\r\n}\r\n.def-card-desc {\r\n font-size: 13.5px; color: var(--text-muted); line-height: 1.7;\r\n}\r\n.def-card-footer {\r\n position: relative; z-index: 1;\r\n margin-top: 24px; padding-top: 18px;\r\n border-top: 1px solid rgba(102,217,255,0.1);\r\n display: flex; align-items: center; gap: 6px; flex-wrap: wrap;\r\n}\r\n.def-stat {\r\n font-size: 14px; font-weight: 900; color: #66D9FF;\r\n}\r\n.def-stat-label {\r\n font-size: 11px; color: var(--text-muted); font-weight: 500;\r\n}\r\n.def-badge {\r\n display: inline-flex; align-items: center;\r\n padding: 4px 12px; border-radius: 50px;\r\n background: rgba(102,217,255,0.07); color: #66D9FF;\r\n font-size: 11px; font-weight: 600; border: 1px solid rgba(102,217,255,0.18);\r\n}\r\n\r\n\/* ===== CTA SECTION ===== *\/\r\n#cta {\r\n background: #fff; padding: 80px 0;\r\n}\r\n.cta-card {\r\n background: linear-gradient(135deg, #020b1a 0%, #041229 50%, #071a36 100%);\r\n border-radius: 28px; padding: 72px 60px;\r\n position: relative; overflow: hidden; text-align: center;\r\n border: 1px solid rgba(102,217,255,0.22);\r\n box-shadow: 0 0 0 1px rgba(102,217,255,0.06) inset;\r\n}\r\n.cta-orb {\r\n position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px);\r\n}\r\n.cta-orb-1 { width: 500px; height: 500px; left: -100px; top: -100px; background: radial-gradient(circle, rgba(102,217,255,0.12) 0%, transparent 70%); }\r\n.cta-orb-2 { width: 500px; height: 500px; right: -100px; bottom: -100px; background: radial-gradient(circle, rgba(102,217,255,0.1) 0%, transparent 70%); }\r\n.cta-inner { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }\r\n.cta-h2 {\r\n font-size: clamp(1.8rem, 3.5vw, 2.8rem);\r\n font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 18px;\r\n}\r\n.cta-h2 span { color: #66D9FF; }\r\n.cta-sub { font-size: 16px; color: var(--white-70); line-height: 1.75; margin-bottom: 40px; }\r\n.cta-email-row { display: flex; gap: 12px; max-width: 480px; margin: 0 auto 24px; }\r\n.cta-email-input {\r\n flex: 1; padding: 14px 20px; border-radius: 50px;\r\n background: rgba(255,255,255,0.08); border: 1px solid rgba(102,217,255,0.25);\r\n color: #fff; font-family: var(--font); font-size: 14px;\r\n outline: none; transition: border-color 0.3s, background 0.3s;\r\n}\r\n.cta-email-input::placeholder { color: rgba(255,255,255,0.4); }\r\n.cta-email-input:focus { border-color: rgba(102,217,255,0.55); background: rgba(255,255,255,0.1); }\r\n.nf-form-success { display:none; text-align:center; max-width:480px; margin:0 auto 24px; padding:24px 20px; border-radius:16px; background:rgba(102,217,255,0.08); border:1px solid rgba(102,217,255,0.25); }\r\n.nf-form-success .nf-success-icon { font-size:32px; margin-bottom:8px; }\r\n.nf-form-success .nf-success-title { color:#fff; font-weight:700; font-size:16px; margin-bottom:4px; }\r\n.nf-form-success .nf-success-text { color:var(--white-70); font-size:13.5px; }\r\n.nf-email-error { border-color: rgba(239,68,68,0.7) !important; }\r\n.cta-checks { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }\r\n.cta-check-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--white-50); font-weight: 500; }\r\n.cta-check-icon { color: #66D9FF; font-size: 13px; }\r\n\r\n\/* ===== FOOTER ===== *\/\r\nfooter {\r\n background: var(--navy-deep); border-top: 1px solid rgba(102,217,255,0.1);\r\n padding: 36px 0; text-align: center;\r\n}\r\n.footer-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }\r\n.footer-brand-icon {\r\n width: 32px; height: 32px; border-radius: 9px;\r\n background: linear-gradient(135deg, #66D9FF, #00AADD);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 16px; font-weight: 900; color: #fff;\r\n}\r\n.footer-brand-name { font-weight: 800; font-size: 16px; color: #fff; }\r\n.footer-brand-name span { color: #66D9FF; }\r\n.footer-copy { font-size: 12px; color: var(--white-50); }\r\n\r\n\/* ===== COUNTER ANIMATION ===== *\/\r\n.count-up { display: inline-block; }\r\n\r\n\/* ===== SECTION INNER BORDER HIGHLIGHTS \u2014 CARD-LEVEL ===== *\/\r\n\/* Architecture section center content border *\/\r\n#architecture .arch-section-border {\r\n border: 1px solid rgba(102,217,255,0.1);\r\n border-radius: 24px;\r\n padding: 40px;\r\n background: linear-gradient(180deg, rgba(102,217,255,0.02) 0%, transparent 100%);\r\n}\r\n\r\n\/* Left\/right side items in architecture *\/\r\n#architecture .arch-side-item {\r\n padding: 18px 20px;\r\n border-radius: 14px;\r\n border: 1px solid rgba(102,217,255,0.08);\r\n background: rgba(102,217,255,0.02);\r\n transition: border-color 0.3s, background 0.3s;\r\n}\r\n#architecture .arch-side-item:hover {\r\n border-color: rgba(102,217,255,0.22);\r\n background: rgba(102,217,255,0.04);\r\n}\r\n#architecture .arch-side-item .arch-item-icon {\r\n display: flex; align-items: center; gap: 10px; margin-bottom: 8px;\r\n}\r\n#architecture .arch-side-item svg {\r\n color: #66D9FF;\r\n width: 18px; height: 18px; flex-shrink: 0;\r\n}\r\n\r\n\/* Corpus signal block *\/\r\n.corpus-signal-block {\r\n margin-top: 24px; background: rgba(102,217,255,0.06); border: 1px solid rgba(102,217,255,0.15);\r\n border-radius: 14px; padding: 18px 20px;\r\n}\r\n.csb-label { font-size: 10px; font-weight: 700; color: var(--white-50); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 10px; }\r\n.csb-tags { display: flex; gap: 8px; flex-wrap: wrap; }\r\n.csb-tag {\r\n padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 600;\r\n background: rgba(102,217,255,0.1); color: #66D9FF; border: 1px solid rgba(102,217,255,0.22);\r\n transition: background 0.2s;\r\n}\r\n.csb-tag:hover { background: rgba(102,217,255,0.2); }\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n@media (max-width: 1024px) {\r\n .corpus-inner, .om-card-inner { grid-template-columns: 1fr; gap: 40px; }\r\n .proof-grid { grid-template-columns: repeat(2,1fr); }\r\n .proof-grid .proof-card:nth-child(1),\r\n .proof-grid .proof-card:nth-child(2),\r\n .proof-grid .proof-card:nth-child(3),\r\n .proof-grid .proof-card:nth-child(4),\r\n .proof-grid .proof-card:nth-child(5) { grid-column: span 1; }\r\n .def-grid { grid-template-columns: repeat(2,1fr); }\r\n}\r\n@media (max-width: 640px) {\r\n .hero-stat-cards { flex-direction: column; align-items: center; }\r\n .hero-stat-card { max-width: 100%; width: 100%; }\r\n .proof-grid, .corpus-stats, .def-grid { grid-template-columns: 1fr; }\r\n .cta-email-row { flex-direction: column; }\r\n .nav-links { display: none; }\r\n section { padding: 60px 0; }\r\n .cta-card { padding: 40px 24px; }\r\n .om-card-inner { padding: 36px 24px; }\r\n}\r\n<\/style>\r\n<style id=\"nf-mobile-responsive\">\r\nhtml, body { overflow-x: hidden !important; max-width: 100% !important; }\r\nsection, .section, header, footer, nav { max-width: 100% !important; }\r\n#hero, #corpus, #in-production, #delivery, #architecture, #extensibility, #cta { overflow-x: hidden !important; }\r\n.hero-orb-1, .hero-orb-2, .hero-orb-3 { pointer-events: none !important; }\r\n\r\n#nf-scroll-top {\r\n position: fixed; bottom: 28px; right: 24px; z-index: 9990;\r\n width: 46px; height: 46px; border-radius: 50%;\r\n background: #66D9FF;\r\n border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;\r\n box-shadow: 0 4px 20px rgba(102,217,255,0.45);\r\n opacity: 0; pointer-events: none;\r\n transform: translateY(12px);\r\n transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.3s ease;\r\n}\r\n#nf-scroll-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }\r\n#nf-scroll-top:hover { box-shadow: 0 8px 28px rgba(102,217,255,0.65); transform: translateY(-3px); }\r\n#nf-scroll-top svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }\r\n\r\n#page-loader { position: fixed !important; inset: 0 !important; z-index: 99999 !important; }\r\n\r\n@media (max-width: 960px) {\r\n html, body { overflow-x: hidden !important; }\r\n .container { padding-left: 20px !important; padding-right: 20px !important; }\r\n section { padding: 64px 0 !important; }\r\n .nav-links, .nav-cta { display: none !important; }\r\n .nav-inner { padding: 0 20px !important; height: 62px !important; }\r\n .corpus-inner, .om-card-inner, .def-grid { grid-template-columns: 1fr !important; gap: 24px !important; }\r\n div[style*=\"grid-template-columns:1fr 520px 1fr\"],\r\n div[style*=\"grid-template-columns: 1fr 520px 1fr\"] { grid-template-columns: 1fr !important; gap: 32px !important; }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n html, body { overflow-x: hidden !important; }\r\n .container { padding-left: 16px !important; padding-right: 16px !important; }\r\n section { padding: 48px 0 !important; }\r\n #hero { padding-top: 96px !important; padding-bottom: 52px !important; }\r\n img { max-width: 100% !important; height: auto !important; }\r\n .nav-links, .nav-cta { display: none !important; }\r\n .nav-inner { height: 58px !important; padding: 0 14px !important; }\r\n .proof-grid, .corpus-stats, .def-grid, .om-card-inner { grid-template-columns: 1fr !important; gap: 14px !important; }\r\n div[style*=\"display:grid\"], div[style*=\"display: grid\"] { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; }\r\n .hero-ctas, .cta-email-row { flex-direction: column !important; align-items: center !important; gap: 12px !important; }\r\n .cta-email-row input, .cta-email-row .btn { width: 100% !important; max-width: 320px !important; }\r\n .btn { width: 100% !important; max-width: 300px !important; justify-content: center !important; }\r\n .hero-h1 { font-size: clamp(20px, 6vw, 30px) !important; }\r\n .section-h2, .section-h2-dark, h2 { font-size: clamp(18px, 5.5vw, 26px) !important; }\r\n .hero-orb-1 { width: 300px !important; height: 300px !important; }\r\n .hero-orb-2 { width: 240px !important; height: 240px !important; }\r\n .cta-card { padding: 32px 20px !important; }\r\n .om-card-inner { padding: 32px 20px !important; }\r\n #nf-scroll-top svg { stroke: #fff; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- PAGE LOADER -->\r\n<div id=\"page-loader\" role=\"status\" aria-label=\"Loading NatFirst, please wait\">\r\n <div class=\"nf-spinner-wrap\">\r\n <div class=\"nf-ring-outer\"><\/div>\r\n <div class=\"nf-ring-inner\"><\/div>\r\n <div class=\"nf-dot\"><\/div>\r\n <div class=\"nf-logo-wrap\">\r\n <img decoding=\"async\" class=\"nf-logo\"\r\n src=\"https:\/\/sainosure.com\/natfirst\/wp-content\/uploads\/2026\/05\/NatFirst-Brand-Logo.png\"\r\n alt=\"NatFirst\"\r\n onerror=\"this.style.display='none'\">\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ===== HERO ===== -->\r\n<section id=\"hero\">\r\n <div class=\"hero-canvas\">\r\n <div class=\"hero-orb hero-orb-1\"><\/div>\r\n <div class=\"hero-orb hero-orb-2\"><\/div>\r\n <\/div>\r\n <div class=\"container\">\r\n <div class=\"hero-inner\">\r\n <h1 class=\"hero-h1 reveal reveal-d1\">\r\n PiE : The intelligence engine<br>\r\n <span class=\"accent2\">behind structured product understanding.<\/span>\r\n <\/h1>\r\n <p class=\"hero-sub reveal reveal-d2\">\r\n PiE combines pack data, brand inputs, domain science, and live consumer signals to create structured, evidence-linked product intelligence powering TruthIn, IntelliServ, APIs, and research workflows.\r\n <\/p>\r\n <div class=\"hero-ctas reveal reveal-d3\">\r\n <a href=https:\/\/sainosure.com\/natfirst\/contact-us\/#contact-main class=\"btn btn-primary\">Book a walkthrough \u2192<\/a>\r\n <a href=https:\/\/sainosure.com\/natfirst\/contact-us\/#contact-main class=\"btn btn-dark\">Request API access<\/a>\r\n <\/div>\r\n <div class=\"hero-stat-cards reveal reveal-d4\">\r\n <div class=\"hero-stat-card\">\r\n <div class=\"hero-stat-val\"><span class=\"count-up\" data-target=\"200\">0<\/span>+<\/div>\r\n <div class=\"hero-stat-label\">Pack-derived attributes<\/div>\r\n <\/div>\r\n <div class=\"hero-stat-card\">\r\n <div class=\"hero-stat-val\"><span class=\"count-up\" data-target=\"70\">0<\/span>K<\/div>\r\n <div class=\"hero-stat-label\">SKUs processed<\/div>\r\n <\/div>\r\n <div class=\"hero-stat-card\">\r\n <div class=\"hero-stat-val\"><span class=\"count-up\" data-target=\"5\">0<\/span>M+<\/div>\r\n <div class=\"hero-stat-label\">Scans powering freshness<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"glow-sep\"><\/div>\r\n\r\n<!-- ===== PROOF POINTS ===== -->\r\n<section id=\"proof\">\r\n <div class=\"container\">\r\n <div class=\"proof-intro\">\r\n <h2 class=\"section-h2 reveal reveal-d1\">Product truth is harder<br>than extraction alone.<\/h2>\r\n <p class=\"section-sub reveal reveal-d2\">Reliable product attribution takes more than extraction. It takes messy inputs, domain logic, validation, freshness, and production delivery working as one system.<\/p>\r\n <\/div>\r\n <div class=\"reveal reveal-d3\" style=\"display:flex;justify-content:flex-end;margin-top:-260px;margin-bottom:80px;\">\r\n <img decoding=\"async\" src=\"https:\/\/sainosure.com\/natfirst\/wp-content\/uploads\/2026\/05\/Complex-to-structured-1.png\"\r\n alt=\"Complex to Structured\"\r\n style=\"width:100%;max-width:570px;height:auto;display:block;\">\r\n <\/div>\r\n <div class=\"proof-grid\">\r\n <div class=\"proof-card reveal reveal-d1\">\r\n <div class=\"proof-card-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/><line x1=\"10\" y1=\"9\" x2=\"8\" y2=\"9\"\/><\/svg>\r\n <\/div>\r\n <div class=\"proof-card-title\">Messy inputs<\/div>\r\n <div class=\"proof-card-desc\">Reconciling fragmented data from packs, listings, suppliers, and consumers.<\/div>\r\n <\/div>\r\n <div class=\"proof-card reveal reveal-d2\">\r\n <div class=\"proof-card-icon purple\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96-.46 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3zM14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96-.46 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"proof-card-title\">Domain taxonomies<\/div>\r\n <div class=\"proof-card-desc\">Applying category-specific logic to ingredients, claims, nutrients, and certifications.<\/div>\r\n <\/div>\r\n <div class=\"proof-card reveal reveal-d3\">\r\n <div class=\"proof-card-icon amber\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>\r\n <\/div>\r\n <div class=\"proof-card-title\">Trained attribution<\/div>\r\n <div class=\"proof-card-desc\">Learning from high-confidence data and real-world edge cases.<\/div>\r\n <\/div>\r\n <div class=\"proof-card reveal reveal-d4\">\r\n <div class=\"proof-card-icon teal\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 12a9 9 0 1 1-6.219-8.56\"\/><path d=\"M12 8v4l3 3\"\/><\/svg>\r\n <\/div>\r\n <div class=\"proof-card-title\">Evidence and review<\/div>\r\n <div class=\"proof-card-desc\">Delivering traceable, reviewable, and defensible outputs.<\/div>\r\n <\/div>\r\n <div class=\"proof-card reveal reveal-d5\">\r\n <div class=\"proof-card-icon green\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 22c1.25-1.25 2.5-2 4-2 1.5 0 2.75.75 4 1.5S12.5 23 14 23c1.5 0 3.5-1 4-2\"\/><path d=\"M7 9c.28-2.33 1.52-3.65 3-4.5C12.27 3.28 14.5 4 14 7c-.45 2.65-2.45 4-5 4-2.55 0-3-1-3-2z\"\/><path d=\"M7 9C4.14 7.96 3 6.5 3 5c0-1.5 1-3 3.5-3C9 2 10.14 4.14 10 7\"\/><path d=\"M14 7c1.25 1.25 2.1 2.7 2 5-.1 2-1 4-3 5\"\/><\/svg>\r\n <\/div>\r\n <div class=\"proof-card-title\">Freshness loops<\/div>\r\n <div class=\"proof-card-desc\">Keeping intelligence current as products, packs, and catalogs change.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"glow-sep\"><\/div>\r\n\r\n<!-- ===== CORPUS ===== -->\r\n<section id=\"corpus\">\r\n <div class=\"corpus-orb-1\"><\/div>\r\n <div class=\"corpus-orb-2\"><\/div>\r\n <div class=\"container\">\r\n <div class=\"corpus-inner\">\r\n <div class=\"corpus-left reveal-left\">\r\n <h2 class=\"section-h2 section-h2-dark\">Built on a living product corpus.<\/h2>\r\n <p class=\"section-sub section-sub-dark\">PiE is grounded in high-confidence labels, broad category coverage, and live consumer signals that keep product truth usable in production.<\/p>\r\n <\/div>\r\n <div class=\"corpus-right reveal-right\">\r\n <div class=\"corpus-stats\">\r\n <div class=\"corpus-stat\">\r\n <div class=\"corpus-stat-num\"><span class=\"count-up\" data-target=\"70\">0<\/span>K<\/div>\r\n <div class=\"corpus-stat-label\">high-confidence SKUs<\/div>\r\n <\/div>\r\n <div class=\"corpus-stat\">\r\n <div class=\"corpus-stat-num\"><span class=\"count-up\" data-target=\"200\">0<\/span>+<\/div>\r\n <div class=\"corpus-stat-label\">categories trained on<\/div>\r\n <\/div>\r\n <div class=\"corpus-stat\">\r\n <div class=\"corpus-stat-num\"><span class=\"count-up\" data-target=\"5\">0<\/span>M+<\/div>\r\n <div class=\"corpus-stat-label\">scans powering freshness<\/div>\r\n <\/div>\r\n <div class=\"corpus-stat\">\r\n <div class=\"corpus-stat-num\"><span class=\"count-up\" data-target=\"800\">0<\/span>K+<\/div>\r\n <div class=\"corpus-stat-label\">consumers contributing<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"glow-sep\"><\/div>\r\n\r\n<!-- ===== ARCHITECTURE ===== -->\r\n<section id=\"architecture\">\r\n <div class=\"container\">\r\n <div style=\"text-align:center;max-width:980px;margin:0 auto 70px;\">\r\n <h2 style=\"font-size:clamp(2.2rem,4vw,2.0rem);line-height:1.25;font-weight:800;letter-spacing:-0.02em;color:#071a36;margin-bottom:24px;\">\r\n One intelligence engine. Multiple delivery surfaces.\r\n <\/h2>\r\n <p style=\"font-size:20px;line-height:2.0;color:#6b7a99;max-width:920px;margin:0 auto;font-weight:500;\">\r\n PiE powers consumer experiences, enterprise workflows, APIs,<br> and research-grade product intelligence\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"reveal reveal-d1 arch-section-border\" style=\"display:grid;grid-template-columns:1fr 520px 1fr;gap:50px;align-items:center;margin-top:40px;\">\r\n\r\n <!-- LEFT SIDE -->\r\n <div style=\"display:flex;flex-direction:column;gap:20px;\">\r\n\r\n <div class=\"arch-side-item\">\r\n <div class=\"arch-item-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"17 8 12 3 7 8\"\/><line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"\/><\/svg>\r\n <div style=\"font-size:16px;font-weight:800;color:#0b1e3d;\">Capture & Ingestion<\/div>\r\n <\/div>\r\n <div style=\"font-size:13.5px;color:#6b7a99;line-height:1.75;\">\r\n Ingest pack images, brand data, e-commerce assets, and field inputs through a common layer built for real-world data.\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"arch-side-item\">\r\n <div class=\"arch-item-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M3 9h18M9 21V9\"\/><\/svg>\r\n <div style=\"font-size:16px;font-weight:800;color:#0b1e3d;\">Taxonomy & Attribution<\/div>\r\n <\/div>\r\n <div style=\"font-size:13.5px;color:#6b7a99;line-height:1.75;\">\r\n Transform ingredients, nutrients, claims, warnings, and certifications into structured, reusable attributes.\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"arch-side-item\">\r\n <div class=\"arch-item-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z\"\/><path d=\"M12 8v4l3 3\"\/><\/svg>\r\n <div style=\"font-size:16px;font-weight:800;color:#0b1e3d;\">Evidence & Freshness<\/div>\r\n <\/div>\r\n <div style=\"font-size:13.5px;color:#6b7a99;line-height:1.75;\">\r\n Ensure accuracy through cross-source validation, confidence scoring, and continuous freshness checks.\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- CENTER IMAGE -->\r\n <div style=\"display:flex;justify-content:center;align-items:center;\">\r\n <img decoding=\"async\" src=\"https:\/\/sainosure.com\/natfirst\/wp-content\/uploads\/2026\/05\/PiE-Technology-f-1.png\"\r\n alt=\"PiE Technology\"\r\n style=\"width:100%;max-width:520px;height:auto;display:block;\">\r\n <\/div>\r\n\r\n <!-- RIGHT SIDE -->\r\n <div style=\"display:flex;flex-direction:column;gap:20px;\">\r\n\r\n <div class=\"arch-side-item\">\r\n <div class=\"arch-item-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\n <div style=\"font-size:16px;font-weight:800;color:#0b1e3d;\">TruthIn<\/div>\r\n <\/div>\r\n <div style=\"font-size:13.5px;color:#6b7a99;line-height:1.75;\">\r\n Consumer-facing intelligence that delivers instant product understanding, scan-to-buy discovery, and a continuous feedback loop.\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"arch-side-item\">\r\n <div class=\"arch-item-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/><\/svg>\r\n <div style=\"font-size:16px;font-weight:800;color:#0b1e3d;\">IntelliServ<\/div>\r\n <\/div>\r\n <div style=\"font-size:13.5px;color:#6b7a99;line-height:1.75;\">\r\n Enterprise product intelligence platform for extraction, validation, exports, custom schemas, and operational workflows.\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"arch-side-item\">\r\n <div class=\"arch-item-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"\/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"\/><\/svg>\r\n <div style=\"font-size:16px;font-weight:800;color:#0b1e3d;\">API & Research Workflows<\/div>\r\n <\/div>\r\n <div style=\"font-size:13.5px;color:#6b7a99;line-height:1.75;\">\r\n Deliver structured product intelligence into enterprise systems, data pipelines, and research environments.\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"glow-sep\"><\/div>\r\n\r\n<!-- ===== IN PRODUCTION ===== -->\r\n<section id=\"in-production\">\r\n <div class=\"prod-orb prod-orb-1\"><\/div>\r\n <div class=\"prod-orb prod-orb-2\"><\/div>\r\n <div class=\"container\">\r\n <div class=\"prod-inner\">\r\n <div class=\"prod-header reveal\">\r\n <h2 class=\"section-h2 section-h2-dark\">Technology only matters<br>when it ships.<\/h2>\r\n <p class=\"section-sub section-sub-dark\" style=\"text-align:center;margin-left:auto;margin-right:auto;\">PiE combines operational delivery, live consumer feedback and domain science so product intelligence stays usable in the real world, not just in a model demo.<\/p>\r\n <\/div>\r\n\r\n <!-- Operating Model Card -->\r\n <div class=\"om-card reveal-scale\" style=\"margin-top:40px;\">\r\n <div class=\"om-card-orb\"><\/div>\r\n <div class=\"om-card-inner\">\r\n <div class=\"om-card-left\">\r\n <h3 class=\"om-card-h3\">Built for real catalog conditions.<\/h3>\r\n <p class=\"om-card-sub\">Because real product intelligence must work beyond clean datasets\u2014across fragmented catalogs, changing products, and operational complexity.<\/p>\r\n <\/div>\r\n <div class=\"om-card-right\">\r\n <div class=\"om-mini-card\">\r\n <div class=\"om-mini-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"\/><polyline points=\"14 2 14 8 20 8\"\/><\/svg>\r\n <\/div>\r\n <div class=\"om-mini-body\">\r\n <div class=\"om-mini-title\">Flexible ingestion<\/div>\r\n <div class=\"om-mini-desc\">Ingest pack images, e-commerce assets, supplier files, and field data through a common workflow.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"om-mini-card\">\r\n <div class=\"om-mini-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"1 4 1 10 7 10\"\/><polyline points=\"23 20 23 14 17 14\"\/><path d=\"M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4-4.64 4.36A9 9 0 0 1 3.51 15\"\/><\/svg>\r\n <\/div>\r\n <div class=\"om-mini-body\">\r\n <div class=\"om-mini-title\">Data readiness<\/div>\r\n <div class=\"om-mini-desc\">Built for metadata gaps, pack changes, and incomplete product information.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"om-mini-card\">\r\n <div class=\"om-mini-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"\/><rect x=\"9\" y=\"9\" width=\"6\" height=\"6\"\/><line x1=\"9\" y1=\"2\" x2=\"9\" y2=\"4\"\/><line x1=\"15\" y1=\"2\" x2=\"15\" y2=\"4\"\/><line x1=\"9\" y1=\"20\" x2=\"9\" y2=\"22\"\/><line x1=\"15\" y1=\"20\" x2=\"15\" y2=\"22\"\/><line x1=\"20\" y1=\"9\" x2=\"22\" y2=\"9\"\/><line x1=\"20\" y1=\"14\" x2=\"22\" y2=\"14\"\/><line x1=\"2\" y1=\"9\" x2=\"4\" y2=\"9\"\/><line x1=\"2\" y1=\"14\" x2=\"4\" y2=\"14\"\/><\/svg>\r\n <\/div>\r\n <div class=\"om-mini-body\">\r\n <div class=\"om-mini-title\">Enterprise delivery<\/div>\r\n <div class=\"om-mini-desc\">Deliver structured outputs through CSV or APIs with predictable quality, throughput, and turnaround.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"glow-sep\"><\/div>\r\n\r\n<!-- ===== DEFENSIBILITY ===== -->\r\n<section id=\"extensibility\">\r\n <div class=\"container\">\r\n <div class=\"section-header reveal\" style=\"margin-bottom:48px;\">\r\n <h2 class=\"section-h2\">Built to compound.<\/h2>\r\n <p class=\"section-sub\">Every product, signal, and workflow helps PiE learn, improve, and deliver stronger product intelligence over time.<\/p>\r\n <\/div>\r\n <div class=\"def-grid\">\r\n <div class=\"def-card reveal reveal-d1\">\r\n <div class=\"def-card-glow def-glow-blue\"><\/div>\r\n <div class=\"def-card-content\">\r\n <div class=\"def-card-icon-wrap def-icon-blue\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96-.46 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3zM14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96-.46 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"def-card-label\">01<\/div>\r\n <div class=\"def-card-title\">Live corpus<\/div>\r\n <div class=\"def-card-desc\">High-confidence product data combined with real-world catalog diversity.<\/div>\r\n <\/div>\r\n <div class=\"def-card-footer\" style=\"flex-direction:column;align-items:flex-start;gap:4px;\">\r\n <div><span class=\"def-stat\">70K+<\/span> <span class=\"def-stat-label\">High-confidence SKUs<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"def-card reveal reveal-d2\">\r\n <div class=\"def-card-glow def-glow-teal\"><\/div>\r\n <div class=\"def-card-content\">\r\n <div class=\"def-card-icon-wrap def-icon-teal\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"\/><\/svg>\r\n <\/div>\r\n <div class=\"def-card-label\">02<\/div>\r\n <div class=\"def-card-title\">TruthIn flywheel<\/div>\r\n <div class=\"def-card-desc\">Consumer scans and pack-change signals continuously improve freshness and relevance.<\/div>\r\n <\/div>\r\n <div class=\"def-card-footer\" style=\"flex-direction:column;align-items:flex-start;gap:4px;\">\r\n <div><span class=\"def-stat\">800K+<\/span> <span class=\"def-stat-label\">Users contributing<\/span><\/div>\r\n <div><span class=\"def-stat\">5M+<\/span> <span class=\"def-stat-label\">Scans powering freshness<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"def-card reveal reveal-d3\">\r\n <div class=\"def-card-glow def-glow-purple\"><\/div>\r\n <div class=\"def-card-content\">\r\n <div class=\"def-card-icon-wrap def-icon-purple\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"\/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"\/><\/svg>\r\n <\/div>\r\n <div class=\"def-card-label\">03<\/div>\r\n <div class=\"def-card-title\">Evidence trail<\/div>\r\n <div class=\"def-card-desc\">Traceable, explainable, and defensible product intelligence.<\/div>\r\n <\/div>\r\n <div class=\"def-card-footer\">\r\n <span style=\"font-size:11px;font-weight:500;color:#071a36;\">Dynamic attribution with a why trail<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"def-card reveal reveal-d4\">\r\n <div class=\"def-card-glow def-glow-amber\"><\/div>\r\n <div class=\"def-card-content\">\r\n <div class=\"def-card-icon-wrap def-icon-amber\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z\"\/><circle cx=\"12\" cy=\"13\" r=\"3\"\/><\/svg>\r\n <\/div>\r\n <div class=\"def-card-label\">04<\/div>\r\n <div class=\"def-card-title\">Domain science<\/div>\r\n <div class=\"def-card-desc\">Ingredient taxonomy, nutrition logic, and compliance-aligned reasoning built into every output.<\/div>\r\n <\/div>\r\n <div class=\"def-card-footer\">\r\n <span style=\"font-size:11px;font-weight:500;color:#071a36;\">Science-backed workflows<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"glow-sep\"><\/div>\r\n\r\n<!-- ===== CTA ===== -->\r\n<section id=\"cta\">\r\n <div class=\"container\">\r\n <div class=\"cta-card reveal-scale\">\r\n <div class=\"cta-orb cta-orb-1\"><\/div>\r\n <div class=\"cta-orb cta-orb-2\"><\/div>\r\n <div class=\"cta-inner\">\r\n <div class=\"section-eyebrow\" style=\"margin-bottom:16px\"><span class=\"pill pill-dark\" style=\"letter-spacing:0.22em;\">Next step<\/span><\/div>\r\n <h2 class=\"cta-h2\">Bring <span>PiE<\/span> into your<br>product intelligence stack.<\/h2>\r\n <p class=\"cta-sub\">Whether you are evaluating APIs, custom attribution, or research-grade product data, we can show you how PiE fits into your workflow.<\/p>\r\n <div class=\"cta-email-row\" id=\"nf-enquiry-row\">\r\n <input type=\"email\" class=\"cta-email-input\" id=\"nf-enquiry-email\" placeholder=\"Enter your work email\">\r\n <button class=\"btn btn-primary\" id=\"nf-enquiry-btn\" onclick=\"nfSubmitEnquiry(this,'nf-enquiry-email','nf-enquiry-success','nf-enquiry-row')\">Book a walkthrough \u2192<\/button>\r\n <\/div>\r\n <div class=\"nf-form-success\" id=\"nf-enquiry-success\">\r\n <div class=\"nf-success-icon\">\u2705<\/div>\r\n <div class=\"nf-success-title\">Thanks for reaching out!<\/div>\r\n <div class=\"nf-success-text\">Our team has received your enquiry and will get back to you shortly.<\/div>\r\n <\/div>\r\n <div class=\"cta-checks\">\r\n <div class=\"cta-check-item\"><span class=\"cta-check-icon\">\u2713<\/span> API, CSV, and custom workflows<\/div>\r\n <div class=\"cta-check-item\"><span class=\"cta-check-icon\">\u2713<\/span> TruthIn, IntelliServ, and research on one engine<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n\/\/ PAGE LOADER\r\nwindow.addEventListener('load', () => {\r\n setTimeout(() => {\r\n const loader = document.getElementById('page-loader');\r\n if (loader) loader.classList.add('loaded');\r\n }, 1900);\r\n});\r\n\r\n\/\/ NAV SCROLL\r\nconst nav = document.getElementById('main-nav');\r\nif (nav) {\r\n window.addEventListener('scroll', () => {\r\n nav.classList.toggle('scrolled', window.scrollY > 40);\r\n });\r\n}\r\n\r\n\/\/ REVEAL ON SCROLL\r\nconst revealEls = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale');\r\nconst revealObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); } });\r\n}, { threshold: 0.12 });\r\nrevealEls.forEach(el => revealObserver.observe(el));\r\n\r\n\/\/ COUNT UP ANIMATION\r\nfunction animateCountUp(el) {\r\n const target = parseInt(el.dataset.target, 10);\r\n const duration = 1600;\r\n const start = performance.now();\r\n function step(now) {\r\n const elapsed = now - start;\r\n const progress = Math.min(elapsed \/ duration, 1);\r\n const eased = 1 - Math.pow(1 - progress, 3);\r\n el.textContent = Math.floor(eased * target);\r\n if (progress < 1) requestAnimationFrame(step);\r\n else el.textContent = target;\r\n }\r\n requestAnimationFrame(step);\r\n}\r\nconst countEls = document.querySelectorAll('.count-up');\r\nconst countObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if (e.isIntersecting && !e.target.dataset.animated) {\r\n e.target.dataset.animated = 'true';\r\n animateCountUp(e.target);\r\n }\r\n });\r\n}, { threshold: 0.5 });\r\ncountEls.forEach(el => countObserver.observe(el));\r\n\r\n\/\/ HERO PARALLAX\r\ndocument.addEventListener('mousemove', (e) => {\r\n const x = (e.clientX \/ window.innerWidth - 0.5) * 30;\r\n const y = (e.clientY \/ window.innerHeight - 0.5) * 20;\r\n const o1 = document.querySelector('.hero-orb-1');\r\n const o3 = document.querySelector('.hero-orb-3');\r\n if (o1) o1.style.transform = `translate(${x * 0.6}px, ${y * 0.6}px)`;\r\n if (o3) o3.style.transform = `translate(${-x * 0.4}px, ${-y * 0.4}px)`;\r\n});\r\n\r\n\/\/ STAGGER HERO ELEMENTS\r\nsetTimeout(() => {\r\n document.querySelectorAll('#hero .reveal, #hero .reveal-right').forEach((el, i) => {\r\n setTimeout(() => el.classList.add('visible'), 200 + i * 120);\r\n });\r\n}, 2000);\r\n<\/script>\r\n\r\n<script id=\"nf-scroll-top-js\">\r\n(function(){\r\n 'use strict';\r\n var btn = document.createElement('button');\r\n btn.id = 'nf-scroll-top';\r\n btn.setAttribute('aria-label', 'Back to top');\r\n btn.setAttribute('title', 'Back to top');\r\n btn.innerHTML = '<svg viewBox=\"0 0 24 24\"><polyline points=\"18 15 12 9 6 15\"><\/polyline><\/svg>';\r\n document.body.appendChild(btn);\r\n var ticking = false;\r\n window.addEventListener('scroll', function(){\r\n if (!ticking) {\r\n requestAnimationFrame(function(){\r\n btn.classList.toggle('visible', window.scrollY > 320);\r\n ticking = false;\r\n });\r\n ticking = true;\r\n }\r\n }, {passive: true});\r\n btn.addEventListener('click', function(){\r\n window.scrollTo({top: 0, behavior: 'smooth'});\r\n });\r\n})();\r\n<\/script>\r\n<script>\r\n\/* ===== NATFIRST ENQUIRY FORM (EmailJS) ===== *\/\r\nfunction nfSubmitEnquiry(btn, inputId, successId, rowId) {\r\n var input = document.getElementById(inputId);\r\n var email = input.value.trim();\r\n var emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n if (!emailRegex.test(email)) {\r\n input.style.outline = '2px solid #ef4444';\r\n input.focus();\r\n setTimeout(function(){ input.style.outline = ''; }, 1800);\r\n return;\r\n }\r\n if (typeof emailjs === 'undefined') {\r\n alert('Email service is not available right now. Please email us directly at sales@natfirst.com.');\r\n return;\r\n }\r\n var originalText = btn.innerHTML;\r\n btn.innerHTML = 'Sending\u2026';\r\n btn.style.pointerEvents = 'none';\r\n\r\n var params = {\r\n to_email: window.NF_EMAILJS.TO_EMAIL,\r\n bcc_email: window.NF_EMAILJS.BCC_EMAIL,\r\n from_email: email,\r\n subject: 'New website enquiry from ' + email,\r\n message: 'A new enquiry has been submitted by the website visitor with the email address \"' + email + '\". Please follow up with them at your earliest convenience.'\r\n };\r\n\r\n emailjs.send(window.NF_EMAILJS.SERVICE_ID, window.NF_EMAILJS.TEMPLATE_ID, params).then(function () {\r\n var row = document.getElementById(rowId);\r\n var success = document.getElementById(successId);\r\n if (row) row.style.display = 'none';\r\n if (success) success.style.display = 'block';\r\n }).catch(function (err) {\r\n console.error('EmailJS error:', err);\r\n btn.innerHTML = originalText;\r\n btn.style.pointerEvents = '';\r\n alert('Sorry, something went wrong sending your enquiry. Please try again or email us directly at sales@natfirst.com.');\r\n });\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Technology | NatFirst PiE : The intelligence engine behind structured product understanding. PiE combines pack data, brand inputs, domain science, and live consumer signals to create structured, evidence-linked product intelligence powering TruthIn, IntelliServ, APIs, and research workflows. Book a walkthrough \u2192 Request API access 0+ Pack-derived attributes 0K SKUs processed 0M+ Scans powering freshness Product […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-197","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sainosure.com\/natfirst\/wp-json\/wp\/v2\/pages\/197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sainosure.com\/natfirst\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sainosure.com\/natfirst\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sainosure.com\/natfirst\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sainosure.com\/natfirst\/wp-json\/wp\/v2\/comments?post=197"}],"version-history":[{"count":115,"href":"https:\/\/sainosure.com\/natfirst\/wp-json\/wp\/v2\/pages\/197\/revisions"}],"predecessor-version":[{"id":1432,"href":"https:\/\/sainosure.com\/natfirst\/wp-json\/wp\/v2\/pages\/197\/revisions\/1432"}],"wp:attachment":[{"href":"https:\/\/sainosure.com\/natfirst\/wp-json\/wp\/v2\/media?parent=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}