{"id":191,"date":"2026-05-22T02:56:46","date_gmt":"2026-05-22T02:56:46","guid":{"rendered":"https:\/\/sainosure.com\/natfirst\/?page_id=191"},"modified":"2026-07-06T14:00:07","modified_gmt":"2026-07-06T08:30:07","slug":"solutions-for-retailers","status":"publish","type":"page","link":"https:\/\/sainosure.com\/natfirst\/solutions-for-retailers\/","title":{"rendered":"Solutions For Retailers"},"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\nSolutions \u2013 For Retailers | 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<!-- 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 --green-fresh: #22c55e;\r\n --amber-warm: #f59e0b;\r\n --red-alert: #ef4444;\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\/* 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.1);\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, #66D9FF);\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: var(--blue-electric); }\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: var(--blue-electric); 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: rgba(255,255,255,0.12); color: #fff;\r\n border: 1px solid rgba(255,255,255,0.2);\r\n backdrop-filter: blur(10px);\r\n}\r\n.btn-dark:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }\r\n.btn-ghost {\r\n background: transparent; color: var(--blue-electric);\r\n border: none; padding: 0; font-size: 14px; font-weight: 600;\r\n}\r\n.btn-ghost:hover { color: #fff; }\r\n\r\n\/* CONTAINER *\/\r\n.container { max-width: 1180px; margin: 0 auto; padding: 0 28px; width: 100%; }\r\n\r\n\/* REVEAL *\/\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\r\n\/* PILL LABEL *\/\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: var(--blue-electric);\r\n border: 1px solid rgba(102,217,255,0.25);\r\n}\r\n.pill-light {\r\n background: rgba(102,217,255,0.1); color: var(--blue-primary);\r\n border: 1px solid rgba(102,217,255,0.2);\r\n}\r\n.pill-green {\r\n background: rgba(34,197,94,0.1); color: #22c55e;\r\n border: 1px solid rgba(34,197,94,0.2);\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.4) 50%, rgba(102,217,255,0.2) 70%, transparent 100%);\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; width: 100%; height: 100%; pointer-events: none;\r\n}\r\n.hero-orb {\r\n position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px);\r\n}\r\n.hero-orb-1 {\r\n width: 500px; height: 500px; right: -100px; top: -80px;\r\n background: radial-gradient(circle, rgba(64,184,255,0.14), transparent 65%);\r\n}\r\n.hero-orb-2 {\r\n width: 400px; height: 400px; left: -60px; bottom: -60px;\r\n background: radial-gradient(circle, rgba(64,184,255,0.098), transparent 65%);\r\n}\r\n.hero-orb-3 { display: none; }\r\n.hero-inner {\r\n position: relative; z-index: 2;\r\n display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;\r\n}\r\n.hero-h1 {\r\n font-size: clamp(27px,3.85vw,53px);\r\n font-weight: 800; color: #000000; line-height: 1.08;\r\n letter-spacing: -0.03em; margin-bottom: 20px;\r\n}\r\n.hero-h1 .accent { color: #0F2E73; }\r\n.hero-sub {\r\n font-size: 17px; color: #2E4F6F; line-height: 1.75;\r\n max-width: 480px; margin-bottom: 32px; font-weight: 600;\r\n}\r\n.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }\r\n\r\n\/* FEATURED CARD *\/\r\n\r\n.hero-featured-card {\r\n margin-top: 32px;\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 18px;\r\n padding: 32px 28px;\r\n min-height: 140px;\r\n\r\n background-image:\r\n linear-gradient(\r\n to bottom,\r\n rgba(2,11,26,0.35),\r\n rgba(2,11,26,0.82)\r\n ),\r\n url(\"https:\/\/sainosure.com\/natfirst\/wp-content\/uploads\/2026\/05\/For-Retail-Hero-Card-1.png\");\r\n\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n\r\n border: 1px solid rgba(102,217,255,0.18);\r\n\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.35);\r\n}\r\n\r\n.hero-feat-label,\r\n.hero-feat-title,\r\n.hero-feat-body {\r\n position: relative;\r\n z-index: 2;\r\n}\r\n\r\n.hero-feat-title {\r\n color: #fff;\r\n font-size: clamp(1.15rem, 2vw, 1.45rem);\r\n font-weight: 800;\r\n line-height: 1.2;\r\n letter-spacing: -0.02em;\r\n margin-bottom: 14px;\r\n}\r\n\r\n.hero-feat-body {\r\n color: rgba(255,255,255,0.88);\r\n}\r\n\/* ===== SECTION COMMON ===== *\/\r\n.section { padding: 100px 0; }\r\n.section-header { text-align: center; max-width: 680px; margin: 0 auto 60px; }\r\n.section-header .pill { margin-bottom: 14px; }\r\n.section-h2 {\r\n font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800;\r\n line-height: 1.15; letter-spacing: -0.025em; color: var(--text-dark); margin-bottom: 16px;\r\n}\r\n.section-h2-dark { color: #fff; }\r\n.section-sub { font-size: 16px; color: var(--text-muted); line-height: 1.75; }\r\n.section-sub-dark { color: var(--white-70); }\r\n\r\n\/* ===== MINI CARDS GRID ===== *\/\r\n.mini-cards-grid {\r\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;\r\n margin-top: 48px;\r\n}\r\n.mini-card {\r\n background: #fff; border: 1px solid rgba(102,217,255,0.12);\r\n border-radius: 16px; padding: 24px 20px;\r\n transition: var(--transition); position: relative; overflow: hidden;\r\n}\r\n.mini-card::before {\r\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;\r\n background: linear-gradient(90deg, #66D9FF, #66D9FF);\r\n transform: scaleX(0); transform-origin: left;\r\n transition: transform 0.3s ease;\r\n}\r\n.mini-card:hover::before { transform: scaleX(1); }\r\n.mini-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(102,217,255,0.12); border-color: rgba(102,217,255,0.3); }\r\n.mini-card-title { font-size: 15px; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; }\r\n.mini-card-desc { font-size: 13px; color: var(--text-muted); line-height: 1.65; }\r\n\r\n\/* ===== SECTION 2 \u2013 RETAIL IMPACT ===== *\/\r\n#retail-impact { background: var(--light-bg); }\r\n\r\n\/* ===== SECTION 3 \u2013 BUILD ON TOP (DARK) ===== *\/\r\n#build-on-top {\r\n background: var(--navy-deep); padding: 100px 0;\r\n position: relative; overflow: hidden;\r\n}\r\n.build-orb-1 {\r\n position: absolute; width: 600px; height: 600px; border-radius: 50%;\r\n right: -150px; top: -150px; pointer-events: none; filter: blur(80px);\r\n background: radial-gradient(circle, rgba(102,217,255,0.07) 0%, transparent 70%);\r\n}\r\n.build-orb-2 {\r\n position: absolute; width: 400px; height: 400px; border-radius: 50%;\r\n left: -80px; bottom: -80px; pointer-events: none; filter: blur(60px);\r\n background: radial-gradient(circle, rgba(34,197,94,0.06) 0%, transparent 70%);\r\n}\r\n.mini-card-dark {\r\n background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);\r\n border-radius: 16px; padding: 24px 20px;\r\n transition: var(--transition);\r\n}\r\n.mini-card-dark:hover { border-color: rgba(102,217,255,0.3); background: rgba(102,217,255,0.06); transform: translateY(-4px); }\r\n.mini-card-dark .mini-card-title { color: #fff; }\r\n.mini-card-dark .mini-card-desc { color: var(--white-50); }\r\n\r\n\/* ===== ADDITION \/ INTEGRATION BANNER ===== *\/\r\n#integration-banner {\r\n background: #ffffff;\r\n padding: 120px 0;\r\n position: relative; overflow: hidden;\r\n}\r\n.integration-box {\r\n background: #0b1a2e;\r\n border-radius: 20px;\r\n padding: 48px 52px;\r\n border: 1px solid rgba(255,255,255,0.06);\r\n box-shadow: 0 24px 64px rgba(0,0,0,0.22);\r\n}\r\n.integration-inner {\r\n display: block;\r\n}\r\n.integration-heading {\r\n font-size: clamp(1.2rem, 2.2vw, 1.75rem); font-weight: 900; color: #fff;\r\n line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 32px;\r\n text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\r\n}\r\n.integration-checks {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 18px 40px;\r\n}\r\n.integration-check {\r\n display: flex; align-items: center; gap: 12px;\r\n font-size: 14.5px; color: var(--white-70); font-weight: 500;\r\n text-align: left;\r\n}\r\n.integration-check-icon {\r\n width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;\r\n background: rgba(102,217,255,0.18); border: 1px solid rgba(102,217,255,0.35);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 13px; color: var(--blue-electric);\r\n}\r\n\r\n\/* ===== SECTION 4 \u2013 WHY NATFIRST ===== *\/\r\n#why-natfirst { background: var(--light-bg); padding: 100px 0; }\r\n.why-grid {\r\n display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;\r\n}\r\n.why-left { }\r\n.why-heading {\r\n font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 800; color: var(--text-dark);\r\n line-height: 1.2; letter-spacing: -0.025em; margin-bottom: 16px;\r\n}\r\n.why-sub { font-size: 15px; color: var(--text-muted); line-height: 1.75; margin-bottom: 12px; }\r\n.why-quote {\r\n background: #fff; border-left: 3px solid var(--blue-electric);\r\n border-radius: 0 12px 12px 0; padding: 18px 22px;\r\n margin: 24px 0 32px; font-size: 14px; color: var(--text-mid);\r\n line-height: 1.7; font-style: italic;\r\n}\r\n.why-mini-points { display: flex; flex-direction: column; gap: 18px; }\r\n.why-point {\r\n display: flex; align-items: flex-start; gap: 14px;\r\n padding: 18px 20px; background: #fff;\r\n border: 1px solid rgba(102,217,255,0.1);\r\n border-radius: 14px; transition: var(--transition);\r\n}\r\n.why-point:hover { border-color: rgba(102,217,255,0.3); box-shadow: 0 4px 20px rgba(102,217,255,0.08); transform: translateX(4px); }\r\n.why-point-num {\r\n width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;\r\n background: linear-gradient(135deg, rgba(102,217,255,0.15), rgba(102,217,255,0.08));\r\n border: 1px solid rgba(102,217,255,0.2);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 11px; font-weight: 800; color: var(--blue-bright);\r\n margin-top: 2px;\r\n}\r\n.why-point-title { font-size: 14px; font-weight: 700; color: var(--text-dark); margin-bottom: 3px; }\r\n.why-point-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; }\r\n\r\n\/* ===== CTA BANNER ===== *\/\r\n#cta-banner {\r\n background: var(--navy-deep); padding: 100px 0;\r\n position: relative; overflow: hidden;\r\n}\r\n.cta-glow-orb {\r\n position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px);\r\n}\r\n.cta-glow-orb-1 {\r\n width: 600px; height: 600px; left: 50%; top: 50%;\r\n transform: translate(-50%,-50%);\r\n background: radial-gradient(circle, rgba(102,217,255,0.09) 0%, transparent 70%);\r\n}\r\n.cta-banner-inner {\r\n position: relative; z-index: 2; text-align: center;\r\n}\r\n.cta-heading {\r\n font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: #fff; line-height: 1.1;\r\n letter-spacing: -0.03em; margin-bottom: 18px;\r\n}\r\n.cta-sub { font-size: 17px; color: var(--white-70); line-height: 1.75; max-width: 580px; margin: 0 auto 36px; }\r\n.cta-email-row {\r\n display: flex; align-items: center; justify-content: center; gap: 12px;\r\n flex-wrap: wrap; margin-bottom: 28px;\r\n}\r\n.cta-email-input {\r\n padding: 14px 22px; border-radius: 50px;\r\n background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);\r\n color: #fff; font-family: var(--font); font-size: 14px;\r\n width: 280px; outline: none; transition: border-color 0.2s;\r\n}\r\n.cta-email-input::placeholder { color: var(--white-50); }\r\n.cta-email-input:focus { border-color: rgba(102,217,255,0.5); }\r\n.cta-trust-row {\r\n display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap;\r\n margin-bottom: 16px;\r\n}\r\n.cta-trust-item {\r\n display: flex; align-items: center; gap: 8px;\r\n font-size: 13px; color: var(--white-50); font-weight: 500;\r\n}\r\n.cta-trust-dot {\r\n width: 7px; height: 7px; border-radius: 50%;\r\n background: var(--green-fresh); flex-shrink: 0;\r\n box-shadow: 0 0 8px rgba(34,197,94,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(34,197,94,0.5); }\r\n 50% { box-shadow: 0 0 14px rgba(34,197,94,0.9); }\r\n}\r\n.cta-glow-line {\r\n height: 1px; max-width: 400px; margin: 0 auto 32px;\r\n background: linear-gradient(90deg, transparent, rgba(102,217,255,0.4), transparent);\r\n}\r\n\r\n\/* ===== FOOTER ===== *\/\r\n#site-footer {\r\n background: var(--navy-deep); padding: 60px 0 32px;\r\n border-top: 1px solid rgba(102,217,255,0.1);\r\n}\r\n.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }\r\n.footer-logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }\r\n.footer-logo-icon { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg,#66D9FF,#66D9FF); display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:#fff; }\r\n.footer-logo-name { font-weight: 800; font-size: 17px; color: #fff; }\r\n.footer-logo-name span { color: var(--blue-electric); }\r\n.footer-desc { font-size: 13px; color: var(--white-50); line-height: 1.7; max-width: 260px; }\r\n.footer-col-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--white-50); margin-bottom: 16px; }\r\n.footer-col ul { display: flex; flex-direction: column; gap: 10px; }\r\n.footer-col li a { font-size: 13.5px; color: var(--white-70); transition: color 0.2s; }\r\n.footer-col li a:hover { color: #fff; }\r\n.footer-divider { border: none; height: 1px; background: rgba(255,255,255,0.07); margin-bottom: 24px; }\r\n.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }\r\n.footer-bottom span { font-size: 12.5px; color: var(--white-50); }\r\n.footer-bottom-links { display: flex; gap: 20px; }\r\n.footer-bottom-links a { font-size: 12.5px; color: var(--white-50); transition: color 0.2s; }\r\n.footer-bottom-links a:hover { color: var(--blue-electric); }\r\n\r\n\/* ===== ENHANCED ANIMATIONS & EFFECTS ===== *\/\r\n\r\n\/* \u2014 Animated gradient mesh background on hero (disabled: light theme) \u2014 *\/\r\n\r\n\/* \u2014 Floating orb animation \u2014 *\/\r\n.hero-orb-1 { animation: floatOrb1 14s ease-in-out infinite alternate; }\r\n.hero-orb-2 { animation: floatOrb2 18s ease-in-out infinite alternate; }\r\n.hero-orb-3 { display: none; }\r\n@keyframes floatOrb1 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-40px, 30px) scale(1.08); } }\r\n@keyframes floatOrb2 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(30px,-20px) scale(1.05); } }\r\n@keyframes floatOrb3 { 0% { transform: translate(0,0); } 100% { transform: translate(-20px, 25px); } }\r\n\r\n\/* \u2014 Animated gradient text for hero headline \u2014 *\/\r\n.hero-h1 .accent {\r\n color: #0F2E73;\r\n background: none;\r\n -webkit-text-fill-color: initial;\r\n animation: none;\r\n}\r\n@keyframes gradientFlow {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n}\r\n\r\n\/* \u2014 Nav logo icon pulse ring \u2014 *\/\r\n.nav-logo-icon {\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n}\r\n.nav-logo:hover .nav-logo-icon {\r\n transform: rotate(-8deg) scale(1.12);\r\n box-shadow: 0 0 20px rgba(102,217,255,0.5);\r\n}\r\n\r\n\/* \u2014 Pill glow pulse on hover \u2014 *\/\r\n.pill {\r\n transition: box-shadow 0.3s ease, transform 0.2s ease;\r\n}\r\n.pill:hover, .section-header .pill {\r\n animation: pillPulse 3s ease-in-out infinite;\r\n}\r\n@keyframes pillPulse {\r\n 0%,100% { box-shadow: 0 0 0 0 rgba(102,217,255,0.0); }\r\n 50% { box-shadow: 0 0 14px 3px rgba(102,217,255,0.22); }\r\n}\r\n\r\n\/* \u2014 Sweeping shimmer on pill-dark \u2014 *\/\r\n.pill-dark {\r\n position: relative; overflow: hidden;\r\n}\r\n.pill-dark::after {\r\n content: '';\r\n position: absolute; top: 0; left: -100%; width: 60%; height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(102,217,255,0.18), transparent);\r\n animation: pillShimmer 3.5s ease-in-out infinite;\r\n}\r\n@keyframes pillShimmer { 0% { left: -100%; } 60%,100% { left: 160%; } }\r\n\r\n\/* \u2014 Hero featured card glow on hover \u2014 *\/\r\n.hero-featured-card {\r\n transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s ease, border-color 0.4s ease;\r\n}\r\n.hero-featured-card:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 24px 60px rgba(102,217,255,0.2), 0 0 0 1px rgba(102,217,255,0.2);\r\n border-color: rgba(102,217,255,0.35);\r\n}\r\n\/* Animated top border sweep *\/\r\n.hero-featured-card::before {\r\n background: linear-gradient(90deg, #66D9FF, #66D9FF, #22c55e, #66D9FF);\r\n background-size: 300% 100%;\r\n animation: borderSlide 4s linear infinite;\r\n}\r\n@keyframes borderSlide {\r\n 0% { background-position: 0% 0%; }\r\n 100% { background-position: 300% 0%; }\r\n}\r\n\r\n\/* \u2014 Glow separator animation \u2014 *\/\r\n.glow-sep {\r\n background: linear-gradient(90deg, transparent 0%, rgba(102,217,255,0.15) 20%, rgba(102,217,255,0.5) 50%, rgba(102,217,255,0.15) 80%, transparent 100%);\r\n background-size: 200% 100%;\r\n animation: sepGlow 5s ease-in-out infinite alternate;\r\n height: 1.5px;\r\n}\r\n@keyframes sepGlow {\r\n 0% { background-position: 0% 0%; opacity: 0.7; }\r\n 100% { background-position: 100% 0%; opacity: 1; }\r\n}\r\n\r\n\/* \u2014 Mini cards: richer hover with glow and gradient bg \u2014 *\/\r\n.mini-card {\r\n transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;\r\n}\r\n.mini-card:hover {\r\n transform: translateY(-8px) scale(1.02);\r\n box-shadow: 0 20px 50px rgba(102,217,255,0.18), 0 0 0 1px rgba(102,217,255,0.15);\r\n border-color: rgba(102,217,255,0.35);\r\n background: linear-gradient(160deg, #fff 60%, rgba(102,217,255,0.04));\r\n}\r\n\/* Number badge that appears on hover *\/\r\n.mini-card-title {\r\n transition: color 0.25s ease;\r\n}\r\n.mini-card:hover .mini-card-title { color: var(--blue-primary); }\r\n\r\n\/* \u2014 Dark mini cards: shimmer sweep \u2014 *\/\r\n.mini-card-dark {\r\n position: relative; overflow: hidden;\r\n transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;\r\n}\r\n.mini-card-dark::after {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: linear-gradient(135deg, rgba(102,217,255,0.06) 0%, transparent 60%);\r\n opacity: 0; transition: opacity 0.35s ease;\r\n pointer-events: none;\r\n}\r\n.mini-card-dark:hover::after { opacity: 1; }\r\n.mini-card-dark:hover {\r\n transform: translateY(-8px) scale(1.02);\r\n box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(102,217,255,0.25);\r\n border-color: rgba(102,217,255,0.3);\r\n background: rgba(102,217,255,0.08);\r\n}\r\n.mini-card-dark:hover .mini-card-title { color: var(--blue-electric); }\r\n\r\n\/* \u2014 Build section orbs: slow float \u2014 *\/\r\n.build-orb-1 { animation: floatOrb1 16s ease-in-out infinite alternate; }\r\n.build-orb-2 { animation: floatOrb2 20s ease-in-out infinite alternate; }\r\n\r\n\/* \u2014 Integration banner: white bg \u2014 *\/\r\n#integration-banner {\r\n background: #ffffff !important;\r\n}\r\n\r\n\/* \u2014 Integration check items animated entrance & hover \u2014 *\/\r\n.integration-check {\r\n transition: transform 0.25s ease, color 0.25s ease;\r\n cursor: default;\r\n}\r\n.integration-check:hover { transform: translateX(8px); color: #fff; }\r\n.integration-check-icon {\r\n transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;\r\n}\r\n.integration-check:hover .integration-check-icon {\r\n transform: scale(1.2) rotate(10deg);\r\n background: rgba(34,197,94,0.25);\r\n box-shadow: 0 0 12px rgba(34,197,94,0.4);\r\n}\r\n\r\n\/* \u2014 Why-point cards: left border glow on hover \u2014 *\/\r\n.why-point {\r\n transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease;\r\n border-left: 3px solid transparent;\r\n}\r\n.why-point:hover {\r\n transform: translateX(6px);\r\n border-left-color: var(--blue-electric);\r\n box-shadow: 0 6px 28px rgba(102,217,255,0.12), -4px 0 0 rgba(102,217,255,0.2);\r\n}\r\n\/* Number badge glow *\/\r\n.why-point-num {\r\n transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;\r\n}\r\n.why-point:hover .why-point-num {\r\n transform: scale(1.15);\r\n background: linear-gradient(135deg, rgba(102,217,255,0.3), rgba(102,217,255,0.2));\r\n box-shadow: 0 0 12px rgba(102,217,255,0.35);\r\n}\r\n\r\n\/* \u2014 Why quote: animated left border \u2014 *\/\r\n.why-quote {\r\n transition: box-shadow 0.3s ease, border-left-color 0.3s ease;\r\n border-left: 3px solid var(--blue-electric);\r\n position: relative; overflow: hidden;\r\n}\r\n.why-quote::before {\r\n content: '\"';\r\n position: absolute; top: -10px; left: 12px;\r\n font-size: 80px; font-weight: 900; line-height: 1;\r\n color: rgba(102,217,255,0.07); pointer-events: none;\r\n font-family: Georgia, serif;\r\n}\r\n.why-quote:hover { box-shadow: 0 4px 20px rgba(102,217,255,0.1); }\r\n\r\n\/* \u2014 CTA email input glow on focus \u2014 *\/\r\n.cta-email-input {\r\n transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;\r\n}\r\n.cta-email-input:focus {\r\n border-color: rgba(102,217,255,0.6);\r\n box-shadow: 0 0 0 3px rgba(102,217,255,0.12), 0 0 20px rgba(102,217,255,0.1);\r\n background: rgba(255,255,255,0.11);\r\n}\r\n\r\n\/* \u2014 CTA section: animated multi-layered orbs \u2014 *\/\r\n#cta-banner::before {\r\n content: '';\r\n position: absolute; inset: 0; pointer-events: none;\r\n background:\r\n radial-gradient(ellipse 60% 50% at 20% 50%, rgba(102,217,255,0.07) 0%, transparent 60%),\r\n radial-gradient(ellipse 50% 40% at 80% 50%, rgba(34,197,94,0.05) 0%, transparent 60%);\r\n animation: ctaBgPulse 8s ease-in-out infinite alternate;\r\n}\r\n@keyframes ctaBgPulse {\r\n 0% { opacity: 0.7; transform: scale(1); }\r\n 100% { opacity: 1; transform: scale(1.05); }\r\n}\r\n\r\n\/* \u2014 Animated gradient section-h2 headings on light sections \u2014 *\/\r\n.section-h2:not(.section-h2-dark) {\r\n background: linear-gradient(135deg, #0b1e3d 40%, #00AADD 80%, #66D9FF 100%);\r\n background-size: 200% 200%;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n animation: headingGradient 6s ease-in-out infinite alternate;\r\n}\r\n@keyframes headingGradient {\r\n 0% { background-position: 0% 50%; }\r\n 100% { background-position: 100% 50%; }\r\n}\r\n\r\n\/* \u2014 Buttons: enhanced depth \u2014 *\/\r\n.btn-primary {\r\n background: #00AADD;\r\n}\r\n.btn-primary:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 35px rgba(0,170,221,0.65);\r\n}\r\n.btn-dark:hover {\r\n background: rgba(255,255,255,0.18);\r\n box-shadow: 0 6px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.15);\r\n}\r\n\r\n\/* \u2014 Footer links: underline slide \u2014 *\/\r\n.footer-col li a {\r\n position: relative; display: inline-block;\r\n}\r\n.footer-col li a::after {\r\n content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px;\r\n background: var(--blue-electric); transition: width 0.25s ease;\r\n}\r\n.footer-col li a:hover::after { width: 100%; }\r\n.footer-col li a:hover { color: var(--blue-electric); }\r\n\r\n\/* \u2014 Section backgrounds: subtle gradient mesh on light sections \u2014 *\/\r\n#retail-impact {\r\n background:\r\n radial-gradient(ellipse 70% 50% at 90% 0%, rgba(102,217,255,0.05) 0%, transparent 60%),\r\n radial-gradient(ellipse 50% 40% at 0% 100%, rgba(102,217,255,0.04) 0%, transparent 60%),\r\n var(--light-bg);\r\n}\r\n#why-natfirst {\r\n background:\r\n radial-gradient(ellipse 60% 50% at 0% 30%, rgba(102,217,255,0.05) 0%, transparent 60%),\r\n radial-gradient(ellipse 40% 40% at 100% 80%, rgba(102,217,255,0.04) 0%, transparent 60%),\r\n var(--light-bg);\r\n}\r\n\r\n\/* \u2014 Scroll progress bar \u2014 *\/\r\n#page-progress-bar {\r\n background: #66D9FF !important;\r\n}\r\n\r\n\/* RESPONSIVE *\/\r\n@media (max-width: 1024px) {\r\n .mini-cards-grid { grid-template-columns: repeat(2, 1fr); }\r\n}\r\n@media (max-width: 900px) {\r\n .hero-inner, .why-grid, .integration-inner { grid-template-columns: 1fr; gap: 40px; }\r\n .hero-visual { order: -1; }\r\n .footer-grid { grid-template-columns: 1fr 1fr; }\r\n .nav-links, .nav-cta { display: none; }\r\n .mini-cards-grid { grid-template-columns: repeat(2, 1fr); }\r\n}\r\n@media (max-width: 600px) {\r\n .mini-cards-grid { grid-template-columns: 1fr; }\r\n .footer-grid { grid-template-columns: 1fr; }\r\n .section { padding: 72px 0; }\r\n .cta-email-row { flex-direction: column; }\r\n .cta-email-input { width: 100%; max-width: 320px; }\r\n}\r\n\r\n\/* ===== PAGE LOADER ===== *\/\r\n#page-loader{position:fixed;inset:0;z-index:99999;background:#E3F2FF;display:flex;align-items:center;justify-content:center;transition:opacity 0.6s ease,visibility 0.6s ease}\r\n#page-loader.loaded{opacity:0;visibility:hidden;pointer-events:none}\r\n.nf-spinner-wrap{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center}\r\n.nf-ring-outer{position:absolute;width:150px;height:150px;border-radius:50%;border:3.5px solid transparent;border-top-color:#3CB8FF;border-right-color:#3CB8FF44;animation:nfSpin 1.1s linear infinite}\r\n.nf-ring-inner{position:absolute;width:114px;height:114px;border-radius:50%;border:2.5px solid transparent;border-bottom-color:#3CB8FF99;border-left-color:#3CB8FF33;animation:nfSpin 1.6s linear infinite reverse}\r\n.nf-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#3CB8FF;top:4px;left:calc(50% - 4px);box-shadow:0 0 8px #3CB8FFaa;animation:nfSpin 1.1s linear infinite;transform-origin:4px 71px}\r\n@keyframes nfSpin{to{transform:rotate(360deg)}}\r\n.nf-logo-wrap{position:relative;z-index:2;width:84px;height:84px;display:flex;align-items:center;justify-content:center;animation:nfBreathe 2.2s ease-in-out infinite}\r\n.nf-logo-wrap::before{content:'';position:absolute;inset:-14px;border-radius:50%;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%);filter:blur(8px)}\r\n.nf-logo{width:76px;height:76px;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 0 10px rgba(255,255,255,0.18))}\r\n@keyframes nfBreathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:0.88}}\r\n<\/style>\r\n<style id=\"nf-mobile-responsive\">\r\n\r\n\/* ============================================================\r\n NATFIRST \u2014 UNIVERSAL MOBILE RESPONSIVE LAYER v2\r\n Additive only. Zero content changes. Zero layout overrides\r\n on desktop. Progressively enhances mobile & tablet views.\r\n ============================================================ *\/\r\n\r\n\/* \u2500\u2500 GLOBAL OVERFLOW GUARD \u2014 prevents horizontal scroll on ALL pages \u2500\u2500 *\/\r\nhtml, body {\r\n overflow-x: hidden !important;\r\n max-width: 100% !important;\r\n}\r\n\r\n\/* \u2500\u2500 SECTIONS: contain absolutely-positioned decorative elements \u2500\u2500 *\/\r\nsection, .section, header, footer, nav {\r\n max-width: 100% !important;\r\n}\r\n#hero, #intro, #india-section, #pie-section, #intelliserv,\r\n#retail-platform, #brands, #consumer, #footer-cta, #cta-strip,\r\n#meet-pie-intro, #how-it-works, #value-created, #lanes, #future,\r\n#corpus, #in-production, #delivery, #architecture, #definitions,\r\n#build-on-top, #integration-banner, #cta-banner, #thesis,\r\n#thesis-intro, #mission, #values, #final-cta {\r\n overflow-x: hidden !important;\r\n}\r\n\r\n\/* \u2500\u2500 DECORATIVE ORBS & RINGS \u2014 prevent overflow on small screens \u2500\u2500 *\/\r\n.hero-orb-1, .hero-orb-2, .hero-orb-3,\r\n.nf-orb, .nf-orb-1, .nf-orb-2, .nf-orb-3 {\r\n pointer-events: none !important;\r\n}\r\n\r\n\/* \u2500\u2500 SCROLL TO TOP BUTTON \u2500\u2500 *\/\r\n#nf-scroll-top {\r\n position: fixed;\r\n bottom: 28px;\r\n right: 24px;\r\n z-index: 9990;\r\n width: 46px;\r\n height: 46px;\r\n border-radius: 50%;\r\n background: #66D9FF;\r\n border: none;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 4px 20px rgba(102,217,255,0.45);\r\n opacity: 0;\r\n 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 {\r\n opacity: 1;\r\n pointer-events: auto;\r\n transform: translateY(0);\r\n}\r\n#nf-scroll-top:hover {\r\n box-shadow: 0 8px 28px rgba(102,217,255,0.65);\r\n transform: translateY(-3px);\r\n}\r\n#nf-scroll-top:active {\r\n transform: translateY(-1px);\r\n}\r\n#nf-scroll-top svg {\r\n width: 20px;\r\n height: 20px;\r\n stroke: #fff;\r\n fill: none;\r\n stroke-width: 2.5;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n}\r\n\r\n\/* \u2500\u2500 HIDE SKIP-TO-CONTENT ENTIRELY \u2500\u2500 *\/\r\n.skip-link { display: none !important; }\r\n\r\n\/* \u2500\u2500 PAGE LOADER \u2014 ensure works on all screen sizes \u2500\u2500 *\/\r\n#page-loader {\r\n position: fixed !important;\r\n inset: 0 !important;\r\n z-index: 99999 !important;\r\n background: #E3F2FF !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n flex-direction: column !important;\r\n}\r\n\r\n\/* \u2500\u2500 FONT LOADING PERFORMANCE: preload hint \u2500\u2500 *\/\r\n\/* Google Fonts is loaded in <head>; @import inside style tag is redundant *\/\r\n\r\n\/* \u2500\u2500 SCROLL DOT INDICATOR \u2500\u2500 *\/\r\n@media (max-width: 480px) {\r\n #scroll-indicator { display: none !important; }\r\n}\r\n\r\n\/* ============================================================\r\n TABLET max-width: 960px\r\n ============================================================ *\/\r\n@media (max-width: 960px) {\r\n\r\n html, body { overflow-x: hidden !important; }\r\n\r\n .container { padding-left: 20px !important; padding-right: 20px !important; }\r\n .section-pad { padding: 64px 0 !important; }\r\n .section-pad-sm { padding: 48px 0 !important; }\r\n section { padding: 64px 0 !important; }\r\n\r\n \/* \u2500\u2500 NAV \u2014 uniform across all pages \u2500\u2500 *\/\r\n .nav-links, .nav-cta, .nav-actions { display: none !important; }\r\n .nav-hamburger { display: flex !important; }\r\n .nav-inner { padding: 0 20px !important; height: 62px !important; }\r\n \/* Normalize nav-link appearance across all pages *\/\r\n .nav-link {\r\n font-size: 13.5px !important;\r\n font-weight: 600 !important;\r\n padding: 8px 16px !important;\r\n border-radius: 8px !important;\r\n }\r\n .nav-brand {\r\n font-size: 18px !important;\r\n font-weight: 800 !important;\r\n letter-spacing: -0.02em !important;\r\n }\r\n\r\n \/* \u2500\u2500 HOME PAGE: Two-column grids \u2192 single column \u2500\u2500 *\/\r\n .india-main-grid,\r\n .truth-grid,\r\n .contact-grid,\r\n .intelliserv-inner,\r\n .ff-inner,\r\n .rp-inner,\r\n .partner-inner,\r\n .brands-inner,\r\n .consumer-inner,\r\n .pie-inner { grid-template-columns: 1fr !important; gap: 32px !important; }\r\n\r\n \/* \u2500\u2500 HOME PAGE: 3-col \u2192 2-col \u2500\u2500 *\/\r\n .metrics-grid,\r\n .attr-grid,\r\n .value-cards,\r\n .bot-cols,\r\n .pricing-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }\r\n\r\n \/* \u2500\u2500 HOME PAGE: 4-col \u2192 2-col \u2500\u2500 *\/\r\n .steps-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }\r\n\r\n \/* \u2500\u2500 HOME PAGE: stat strip \u2500\u2500 *\/\r\n .stat-strip-inner { grid-template-columns: 1fr 1fr !important; gap: 0 !important; }\r\n\r\n \/* \u2500\u2500 HOME PAGE: Footer \u2500\u2500 *\/\r\n .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }\r\n\r\n \/* \u2500\u2500 HOME PAGE: Visual heights \u2500\u2500 *\/\r\n .hero-visual,\r\n .pie-visual,\r\n .is-visual,\r\n .rp-visual,\r\n .partner-visual,\r\n .brands-visual { height: 300px !important; }\r\n\r\n \/* \u2500\u2500 HOME PAGE: India col \u2500\u2500 *\/\r\n .india-img-col { min-height: 340px !important; }\r\n .india-img-wrap img { width: 340px !important; }\r\n .india-hud-rings { width: 360px !important; height: 360px !important; }\r\n .india-hud-ring:nth-child(1) { width: 360px !important; height: 360px !important; }\r\n .india-hud-ring:nth-child(2) { width: 288px !important; height: 288px !important; }\r\n .india-hud-ring:nth-child(3) { width: 216px !important; height: 216px !important; }\r\n\r\n \/* \u2500\u2500 HOME PAGE: India features 2-col \u2500\u2500 *\/\r\n .india-features { grid-template-columns: 1fr 1fr !important; }\r\n\r\n \/* \u2500\u2500 ABOUT PAGE \u2500\u2500 *\/\r\n .mission-inner,\r\n .values-header { grid-template-columns: 1fr !important; gap: 32px !important; }\r\n .values-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }\r\n .footer-top { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }\r\n\r\n \/* \u2500\u2500 INTELLISERV PAGE \u2500\u2500 *\/\r\n .attr-row-grid,\r\n .truth-grid,\r\n .contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; }\r\n .steps-grid,\r\n .value-cards,\r\n .bot-cols,\r\n .pricing-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }\r\n\r\n \/* \u2500\u2500 PARTNERSHIPS PAGE \u2500\u2500 *\/\r\n .featured-grid,\r\n .lanes-grid,\r\n .future-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }\r\n\r\n \/* \u2500\u2500 TRUST\/COMPLIANCE PAGE \u2500\u2500 *\/\r\n .capability-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }\r\n .stacked-item { grid-template-columns: 1fr !important; gap: 16px !important; }\r\n\r\n \/* \u2500\u2500 TRUST\/METHODOLOGY PAGE \u2500\u2500 *\/\r\n .layers-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }\r\n .layers-grid-bottom,\r\n .faq-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }\r\n\r\n \/* \u2500\u2500 SOLUTIONS: BRANDS PAGE \u2500\u2500 *\/\r\n .hero-inner { grid-template-columns: 1fr !important; gap: 40px !important; }\r\n .brand-kpi-row,\r\n .workflows-tiles { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }\r\n .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }\r\n .core-cards { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }\r\n .teams-grid { grid-template-columns: 1fr !important; }\r\n .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }\r\n .complexity-cards { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }\r\n\r\n \/* \u2500\u2500 SOLUTIONS: CONSUMERS PAGE \u2500\u2500 *\/\r\n .approach-grid,\r\n .problems-grid { grid-template-columns: 1fr !important; gap: 24px !important; }\r\n .tiles-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }\r\n\r\n \/* \u2500\u2500 SOLUTIONS: RETAILERS PAGE \u2500\u2500 *\/\r\n .mini-cards-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }\r\n .integration-inner,\r\n .why-grid { grid-template-columns: 1fr !important; gap: 32px !important; }\r\n\r\n \/* \u2500\u2500 TECHNOLOGY PAGE \u2500\u2500 *\/\r\n .tm-grid,\r\n .prod-cards,\r\n .arch-layer-body-content { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }\r\n .proof-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }\r\n .corpus-inner,\r\n .corpus-stats,\r\n .om-card-inner,\r\n .del-grid { grid-template-columns: 1fr !important; gap: 24px !important; }\r\n .def-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }\r\n\r\n \/* \u2500\u2500 INLINE GRID OVERRIDES \u2500\u2500 *\/\r\n div[style*=\"grid-template-columns:1fr 1fr\"],\r\n div[style*=\"grid-template-columns: 1fr 1fr\"],\r\n div[style*=\"grid-template-columns:1.5fr 1fr\"],\r\n div[style*=\"grid-template-columns: 1.5fr 1fr\"],\r\n div[style*=\"grid-template-columns:1fr 1.5fr\"],\r\n div[style*=\"grid-template-columns: 1fr 1.5fr\"],\r\n div[style*=\"grid-template-columns:1.2fr 1fr\"],\r\n div[style*=\"grid-template-columns: 1.2fr 1fr\"],\r\n div[style*=\"grid-template-columns:1fr 1.2fr\"],\r\n div[style*=\"grid-template-columns: 1fr 1.2fr\"],\r\n div[style*=\"grid-template-columns:65fr 35fr\"],\r\n div[style*=\"grid-template-columns: 65fr 35fr\"] {\r\n grid-template-columns: 1fr !important;\r\n gap: 32px !important;\r\n }\r\n\r\n \/* 4-col inline grids \u2192 2-col *\/\r\n div[style*=\"grid-template-columns:repeat(4\"],\r\n div[style*=\"grid-template-columns: repeat(4\"] {\r\n grid-template-columns: 1fr 1fr !important;\r\n }\r\n\r\n \/* 3-col inline grids \u2192 2-col *\/\r\n div[style*=\"grid-template-columns:repeat(3\"],\r\n div[style*=\"grid-template-columns: repeat(3\"],\r\n div[style*=\"grid-template-columns:1.5fr 1fr 1fr\"],\r\n div[style*=\"grid-template-columns: 1.5fr 1fr 1fr\"] {\r\n grid-template-columns: 1fr 1fr !important;\r\n }\r\n\r\n \/* Inline max-width elements: ensure they don't overflow *\/\r\n div[style*=\"max-width:920px\"],\r\n div[style*=\"max-width: 920px\"],\r\n div[style*=\"max-width:980px\"],\r\n div[style*=\"max-width: 980px\"] {\r\n max-width: 100% !important;\r\n width: 100% !important;\r\n }\r\n}\r\n\r\n\/* ============================================================\r\n MOBILE max-width: 600px\r\n ============================================================ *\/\r\n@media (max-width: 600px) {\r\n\r\n \/* Base *\/\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 .section-pad { padding: 48px 0 !important; }\r\n .section-pad-sm { padding: 36px 0 !important; }\r\n #hero { padding-top: 96px !important; padding-bottom: 52px !important; }\r\n\r\n \/* Images: always responsive *\/\r\n img { max-width: 100% !important; height: auto !important; }\r\n\r\n \/* \u2500\u2500 NAV \u2014 uniform across ALL pages on mobile \u2500\u2500 *\/\r\n .nav-links, .nav-cta, .nav-actions { display: none !important; }\r\n .nav-hamburger { display: flex !important; }\r\n .nav-inner { height: 58px !important; padding: 0 14px !important; }\r\n .nav-brand {\r\n font-size: 16px !important;\r\n font-weight: 800 !important;\r\n letter-spacing: -0.02em !important;\r\n }\r\n .nav-mobile-link {\r\n font-size: 14px !important;\r\n font-weight: 600 !important;\r\n padding: 12px 0 !important;\r\n }\r\n\r\n \/* \u2500\u2500 ALL GRIDS \u2192 1 COLUMN \u2500\u2500 *\/\r\n .metrics-grid, .attr-grid, .value-cards, .bot-cols, .pricing-grid,\r\n .stat-strip-inner, .steps-grid, .india-features, .footer-inner,\r\n .consumer-metrics, .india-main-grid, .truth-grid, .contact-grid,\r\n .intelliserv-inner, .ff-inner, .rp-inner, .partner-inner,\r\n .brands-inner, .consumer-inner, .pie-inner,\r\n \/* About *\/\r\n .mission-inner, .values-header, .values-grid, .footer-top,\r\n \/* IntelliServ *\/\r\n .attr-row-grid,\r\n \/* Partnerships *\/\r\n .featured-grid, .lanes-grid, .future-grid,\r\n \/* Trust\/Compliance *\/\r\n .capability-grid, .stacked-item,\r\n \/* Trust\/Methodology *\/\r\n .layers-grid, .layers-grid-bottom, .faq-grid,\r\n \/* Brands *\/\r\n .hero-inner, .brand-kpi-row, .core-cards, .workflows-tiles,\r\n .teams-grid, .footer-grid, .complexity-cards,\r\n \/* Consumers *\/\r\n .approach-grid, .tiles-grid, .problems-grid, .stats-grid,\r\n \/* Retailers *\/\r\n .mini-cards-grid, .integration-inner, .why-grid,\r\n \/* Technology *\/\r\n .tm-grid, .proof-grid, .corpus-inner, .corpus-stats,\r\n .arch-layer-body-content, .prod-cards, .def-grid,\r\n .om-card-inner, .del-grid {\r\n grid-template-columns: 1fr !important;\r\n gap: 14px !important;\r\n }\r\n\r\n \/* \u2500\u2500 INLINE GRIDS \u2192 1 COLUMN \u2500\u2500 *\/\r\n div[style*=\"display:grid\"],\r\n div[style*=\"display: grid\"] {\r\n display: grid !important;\r\n grid-template-columns: 1fr !important;\r\n gap: 16px !important;\r\n }\r\n\r\n \/* \u2500\u2500 FLEX STACKS \u2500\u2500 *\/\r\n .hero-cta-row, .hero-ctas, .cta-row, .hero-tags, .hero-metrics,\r\n .hero-eyebrow, .footer-links, .cta-email-row, .cta-trust-row,\r\n .hero-trust-row, .label-row {\r\n flex-direction: column !important;\r\n align-items: center !important;\r\n gap: 12px !important;\r\n flex-wrap: wrap !important;\r\n }\r\n \/* Email CTA rows: stack on mobile *\/\r\n .cta-email-row input,\r\n .cta-email-row .btn {\r\n width: 100% !important;\r\n max-width: 320px !important;\r\n }\r\n\r\n \/* footer bottom row *\/\r\n .footer-bottom {\r\n flex-direction: column !important;\r\n text-align: center !important;\r\n gap: 10px !important;\r\n align-items: center !important;\r\n }\r\n .footer-bottom-links {\r\n flex-direction: row !important;\r\n justify-content: center !important;\r\n flex-wrap: wrap !important;\r\n gap: 12px !important;\r\n }\r\n\r\n \/* Hero metric separators \u2192 horizontal line *\/\r\n .hero-metric-sep {\r\n width: 50px !important;\r\n height: 1px !important;\r\n }\r\n\r\n \/* \u2500\u2500 CENTER ALIGNMENT \u2500\u2500 *\/\r\n .hero-inner, .intro-inner, .india-top-header, .india-bottom-center,\r\n .india-content-col, .section-header, .attr-header, .dq-inner,\r\n .bot-header, .contact-left, .hero-visual, .thesis-intro-inner,\r\n .mission-inner, .corpus-inner, .cta-inner, .lanes-inner, .layers-inner,\r\n .core-banner-inner, .cta-banner-inner {\r\n text-align: center !important;\r\n }\r\n\r\n \/* Section text alignment for dark sections *\/\r\n #pie-section .container,\r\n #intelliserv .container,\r\n #retail-platform .container,\r\n #brands .container,\r\n #footer-cta .container,\r\n #cta-strip .container,\r\n #lanes .container,\r\n #future .container,\r\n #cta .container,\r\n #architecture .container,\r\n #in-production .container,\r\n #delivery .container {\r\n text-align: center !important;\r\n }\r\n\r\n \/* Preserve left-align on lists *\/\r\n .india-bullet-list, .pie-list, .rp-list, .brands-list,\r\n .ff-bullets, .is-features, .contact-quick-items,\r\n .pricing-features, .use-cases-list, .ff-right,\r\n .enables-list, .approach-list, .problem-list,\r\n .cta-check-item, .lane-card-desc, .layer-card-desc,\r\n .featured-card-desc, .future-card-desc {\r\n text-align: left !important;\r\n }\r\n\r\n \/* \u2500\u2500 CTAs: full-width pill buttons \u2500\u2500 *\/\r\n .btn {\r\n width: 100% !important;\r\n max-width: 300px !important;\r\n justify-content: center !important;\r\n }\r\n\r\n \/* \u2500\u2500 TYPOGRAPHY \u2500\u2500 *\/\r\n .hero-h1 { font-size: clamp(20px, 6vw, 30px) !important; line-height: 1.2 !important; }\r\n .hero-sub { font-size: 14px !important; line-height: 1.65 !important; }\r\n .section-h2, .section-h2-dark, h2 { font-size: clamp(18px, 5.5vw, 26px) !important; line-height: 1.25 !important; }\r\n h1 { font-size: clamp(22px, 6.5vw, 34px) !important; }\r\n h3 { font-size: clamp(16px, 4.5vw, 22px) !important; }\r\n\r\n \/* \u2500\u2500 VISUAL HEIGHTS \u2500\u2500 *\/\r\n .hero-visual { height: 200px !important; overflow: hidden !important; }\r\n .pie-visual { height: 220px !important; overflow: hidden !important; }\r\n .is-visual, .rp-visual, .partner-visual,\r\n .brands-visual, .consumer-img-frame { height: 220px !important; overflow: hidden !important; }\r\n\r\n \/* \u2500\u2500 HOME PAGE: HERO SPHERE \u2500\u2500 *\/\r\n .hero-sphere { width: 180px !important; height: 180px !important; }\r\n .ring-outer { width: 240px !important; height: 240px !important; }\r\n .ring-inner { width: 160px !important; height: 160px !important; }\r\n\r\n \/* \u2500\u2500 HOME PAGE: PIE ORB \u2500\u2500 *\/\r\n .pie-orb { width: 180px !important; height: 180px !important; }\r\n .pie-orb-inner { width: 110px !important; height: 110px !important; }\r\n .pie-orb-center { width: 60px !important; height: 60px !important; font-size: 10px !important; }\r\n .pie-ring-1 { width: 220px !important; height: 220px !important; }\r\n .pie-ring-2 { width: 260px !important; height: 260px !important; }\r\n .pie-dot { display: none !important; }\r\n\r\n \/* \u2500\u2500 HOME PAGE: INDIA SECTION \u2500\u2500 *\/\r\n .india-img-col { min-height: 220px !important; }\r\n .india-img-wrap img { width: 220px !important; }\r\n .india-hud-rings { width: 240px !important; height: 240px !important; }\r\n .india-hud-ring:nth-child(1) { width: 240px !important; height: 240px !important; }\r\n .india-hud-ring:nth-child(2) { width: 190px !important; height: 190px !important; }\r\n .india-hud-ring:nth-child(3) { width: 140px !important; height: 140px !important; }\r\n\r\n \/* \u2500\u2500 FLOATING DATA TAGS \u2014 hide on mobile \u2500\u2500 *\/\r\n .data-tag { display: none !important; }\r\n\r\n \/* \u2500\u2500 RETAIL PLATFORM \u2500\u2500 *\/\r\n .rp-visual { min-height: 200px !important; }\r\n .rp-visual img { min-height: 160px !important; object-fit: contain !important; width: 100% !important; }\r\n\r\n \/* \u2500\u2500 PARTNER IMAGE \u2500\u2500 *\/\r\n .partner-img-frame { height: 200px !important; width: 100% !important; max-width: 100% !important; }\r\n .partner-img-frame img { width: 100% !important; }\r\n\r\n \/* \u2500\u2500 CARDS \u2014 reduced padding on mobile \u2500\u2500 *\/\r\n .metric-card, .attr-card, .value-card,\r\n .val-card, .cap-card, .lane-card, .layer-card,\r\n .featured-card, .future-card, .faq-card,\r\n .hero-stat-card, .om-card, .def-card { padding: 20px 14px !important; }\r\n .metric-number { font-size: 32px !important; }\r\n .pricing-card { padding: 22px 16px !important; }\r\n .step-card, .bot-col, .stat-item { padding: 18px 14px !important; }\r\n .mini-card, .mini-card-dark { padding: 18px 14px !important; }\r\n .complexity-card { padding: 18px 14px !important; }\r\n .tile-icon-wrap { margin: 0 auto !important; }\r\n\r\n \/* \u2500\u2500 CONTACT FORM \u2500\u2500 *\/\r\n .contact-form { padding: 20px 14px !important; }\r\n\r\n \/* \u2500\u2500 CTA CARDS \u2500\u2500 *\/\r\n .cta-card, .cta-inner { padding: 32px 20px !important; text-align: center !important; }\r\n .cta-check-item { justify-content: center !important; }\r\n\r\n \/* \u2500\u2500 PERF: hide decorative canvases on mobile \u2500\u2500 *\/\r\n #trail-canvas, #particles-canvas { display: none !important; }\r\n\r\n \/* \u2500\u2500 SCROLL INDICATOR \u2500\u2500 *\/\r\n #scroll-indicator { display: none !important; }\r\n\r\n \/* \u2500\u2500 HERO ORBS \u2014 shrink to prevent overflow \u2500\u2500 *\/\r\n .hero-orb-1 { width: 300px !important; height: 300px !important; }\r\n .hero-orb-2 { width: 240px !important; height: 240px !important; }\r\n .hero-orb-3 { width: 160px !important; height: 160px !important; }\r\n\r\n \/* \u2500\u2500 INLINE FLEX ROWS with CTA gaps \u2500\u2500 *\/\r\n div[style*=\"display:flex\"][style*=\"gap:14px\"],\r\n div[style*=\"display: flex\"][style*=\"gap:14px\"],\r\n div[style*=\"display:flex\"][style*=\"gap:12px\"],\r\n div[style*=\"display: flex\"][style*=\"gap:12px\"],\r\n div[style*=\"display:flex\"][style*=\"gap:20px\"],\r\n div[style*=\"display: flex\"][style*=\"gap:20px\"] {\r\n flex-wrap: wrap !important;\r\n justify-content: center !important;\r\n }\r\n\r\n \/* \u2500\u2500 HOME: INTELLISERV VISUAL \u2500\u2500 *\/\r\n .is-brain { width: 200px !important; height: 200px !important; }\r\n\r\n \/* \u2500\u2500 HOME: BRANDS ORB \u2500\u2500 *\/\r\n .brands-orb { width: 200px !important; height: 200px !important; }\r\n .brands-orb-inner { width: 130px !important; height: 130px !important; }\r\n .brands-orb-center { width: 70px !important; height: 70px !important; font-size: 10px !important; }\r\n\r\n \/* \u2500\u2500 ABOUT: MISSION \/ VALUES \u2500\u2500 *\/\r\n .mv-grid { grid-template-columns: 1fr !important; gap: 16px !important; }\r\n .values-grid { grid-template-columns: 1fr !important; gap: 14px !important; }\r\n\r\n \/* \u2500\u2500 TECHNOLOGY: PROOF GRID \u2500\u2500 *\/\r\n .proof-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }\r\n .hero-stat-cards { gap: 12px !important; }\r\n\r\n \/* \u2500\u2500 TECHNOLOGY: ARCHITECTURE \u2500\u2500 *\/\r\n .arch-layer-body-content { grid-template-columns: 1fr !important; }\r\n\r\n \/* \u2500\u2500 SOLUTIONS FOR BRANDS: HERO VISUAL \u2500\u2500 *\/\r\n .brand-dashboard-wrap,\r\n .brand-dashboard { overflow: hidden !important; border-radius: 12px !important; }\r\n\r\n \/* \u2500\u2500 SOLUTIONS FOR CONSUMERS: REVIEWS CAROUSEL \u2500\u2500 *\/\r\n .reviews-track-wrap { overflow: hidden !important; }\r\n .review-card { min-width: 260px !important; }\r\n\r\n \/* \u2500\u2500 SOLUTIONS FOR CONSUMERS: LABEL ROWS \u2500\u2500 *\/\r\n .label-row { flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; }\r\n .label-row-name { min-width: 100px !important; }\r\n\r\n \/* \u2500\u2500 SOLUTIONS FOR RETAILERS: HERO FEATURED CARD \u2500\u2500 *\/\r\n .hero-featured-card { padding: 20px 14px !important; }\r\n .integration-box { padding: 28px 20px !important; border-radius: 14px !important; }\r\n\r\n \/* \u2500\u2500 INTELLISERV: STEP CARDS \u2500\u2500 *\/\r\n .steps-grid { gap: 12px !important; }\r\n\r\n \/* \u2500\u2500 PARTNERSHIPS: LANE CARDS \u2500\u2500 *\/\r\n .lanes-inner { gap: 24px !important; }\r\n .lane-card-num { font-size: 32px !important; }\r\n\r\n \/* \u2500\u2500 TRUST\/METHODOLOGY: LAYER CARDS \u2500\u2500 *\/\r\n .layers-inner { gap: 24px !important; }\r\n .layer-card-num { font-size: 32px !important; }\r\n\r\n \/* Inline max-width elements *\/\r\n div[style*=\"max-width:920px\"],\r\n div[style*=\"max-width: 920px\"],\r\n div[style*=\"max-width:980px\"],\r\n div[style*=\"max-width: 980px\"],\r\n div[style*=\"max-width:820px\"],\r\n div[style*=\"max-width: 820px\"],\r\n div[style*=\"max-width:780px\"],\r\n div[style*=\"max-width: 780px\"],\r\n div[style*=\"max-width:720px\"],\r\n div[style*=\"max-width: 720px\"],\r\n div[style*=\"max-width:700px\"],\r\n div[style*=\"max-width: 700px\"] {\r\n max-width: 100% !important;\r\n width: 100% !important;\r\n box-sizing: border-box !important;\r\n }\r\n}\r\n\r\n\/* ============================================================\r\n MOBILE SMALL max-width: 400px\r\n ============================================================ *\/\r\n@media (max-width: 400px) {\r\n .container { padding-left: 12px !important; padding-right: 12px !important; }\r\n .btn { font-size: 13px !important; padding: 11px 18px !important; }\r\n .hero-h1 { font-size: 19px !important; }\r\n .nav-inner { padding: 0 12px !important; }\r\n .metric-number { font-size: 26px !important; }\r\n section { padding: 36px 0 !important; }\r\n #hero { padding-top: 86px !important; }\r\n\r\n \/* Page loader sizing *\/\r\n .nf-spinner-wrap { width: 110px !important; height: 110px !important; }\r\n .nf-ring-outer { width: 110px !important; height: 110px !important; }\r\n .nf-ring-inner { width: 84px !important; height: 84px !important; }\r\n .nf-dot { transform-origin: 4px 51px !important; }\r\n .nf-logo { width: 54px !important; height: 54px !important; }\r\n .nf-logo-wrap { width: 60px !important; height: 60px !important; }\r\n\r\n \/* Extra small type *\/\r\n .section-h2, .section-h2-dark, h2 { font-size: 17px !important; }\r\n h1 { font-size: 20px !important; }\r\n .hero-sub, .section-sub, .section-sub-dark { font-size: 13px !important; }\r\n}\r\n\r\n\r\n<\/style>\r\n\r\n\r\n\r\n\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<!-- PROGRESS BAR -->\r\n<div id=\"page-progress-bar\"><\/div>\r\n\r\n<!-- NAV -->\r\n\r\n\r\n<!-- ===== HERO \u2013 FOR RETAILERS ===== -->\r\n<section id=\"hero\">\r\n <canvas id=\"hero-canvas\"><\/canvas>\r\n <div class=\"hero-orb hero-orb-1\"><\/div>\r\n <div class=\"hero-orb hero-orb-2\"><\/div>\r\n <div class=\"hero-orb hero-orb-3\"><\/div>\r\n <div class=\"container\">\r\n <div class=\"hero-inner\">\r\n\r\n <div class=\"hero-text\">\r\n <h1 class=\"hero-h1 reveal reveal-d1\">\r\n Make every digital shelf more <span class=\"accent\">discoverable.<\/span>\r\n <\/h1>\r\n <p class=\"hero-sub reveal reveal-d2\">\r\n Retail and marketplace teams benefit from Structured product intelligence that improves search, filters, recommendations, and category discovery across large retail catalogs.\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\">Try IntelliServ for free<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Featured Card (right column) -->\r\n <div class=\"reveal-right\">\r\n <div class=\"hero-featured-card\">\r\n <div class=\"hero-feat-title\">Built for modern merchandising<\/div>\r\n <div class=\"hero-feat-body\">\r\n Power search, filters, AI shopping, and category experiences with a single product intelligence layer.\r\n <\/div>\r\n <\/div>\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<!-- ===== SECTION 2 \u2013 RETAIL IMPACT ===== -->\r\n<section id=\"retail-impact\" class=\"section\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-h2 reveal reveal-d1\">Product intelligence that improves discovery, trust, and conversion.<\/h2>\r\n <p class=\"section-sub reveal reveal-d2\">Retail systems can directly shape shopper discovery, confidence, and conversion, from search relevance and filter coverage to recommendation logic and digital shelf clarity.<\/p>\r\n <\/div>\r\n\r\n <div class=\"mini-cards-grid\">\r\n <div class=\"mini-card reveal reveal-d1\">\r\n <div class=\"mini-card-title\">Search relevance<\/div>\r\n <div class=\"mini-card-desc\">Match shopper intent with attributes that make queries more precise and results more useful.<\/div>\r\n <\/div>\r\n <div class=\"mini-card reveal reveal-d2\">\r\n <div class=\"mini-card-title\">Filter coverage<\/div>\r\n <div class=\"mini-card-desc\">Turn fragmented catalog data into filters shoppers can actually trust and use.<\/div>\r\n <\/div>\r\n <div class=\"mini-card reveal reveal-d3\">\r\n <div class=\"mini-card-title\">Recommendation logic<\/div>\r\n <div class=\"mini-card-desc\">Feed recommendation engines with cleaner signals for substitutes, complements, and ranking.<\/div>\r\n <\/div>\r\n <div class=\"mini-card reveal reveal-d4\">\r\n <div class=\"mini-card-title\">Shelf clarity<\/div>\r\n <div class=\"mini-card-desc\">Make digital shelves easier to browse with attributes that support better grouping and navigation.<\/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<!-- ===== SECTION 3 \u2013 BUILD ON TOP ===== -->\r\n<section id=\"build-on-top\">\r\n <div class=\"build-orb-1\"><\/div>\r\n <div class=\"build-orb-2\"><\/div>\r\n <div class=\"container\" style=\"position:relative;z-index:2;\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-h2 section-h2-dark reveal reveal-d1\">From static catalogs to smarter retail experiences.<\/h2>\r\n <p class=\"section-sub section-sub-dark reveal reveal-d2\">Once product truth is structured and reusable, retail teams can move beyond listing enrichment and build shopping experiences around real shopper intent, category logic, and AI-driven discovery.<\/p>\r\n <div style=\"margin-top:24px;\" class=\"reveal reveal-d3\">\r\n <a href=\"https:\/\/sainosure.com\/natfirst\/contact-us\/#contact-main\" class=\"btn btn-primary\">Try IntelliServ for free<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mini-cards-grid\">\r\n <div class=\"mini-card-dark reveal reveal-d1\">\r\n <div class=\"mini-card-title\">Diet and condition-led aisles<\/div>\r\n <div class=\"mini-card-desc\">Create shelves around gluten-free, high-protein, low-sugar, nut-free, heart-aware, or retailer-defined shopper needs.<\/div>\r\n <\/div>\r\n <div class=\"mini-card-dark reveal reveal-d2\">\r\n <div class=\"mini-card-title\">AI shopping journeys<\/div>\r\n <div class=\"mini-card-desc\">Support conversational discovery and query-led shopping with attributes that answer how people actually ask.<\/div>\r\n <\/div>\r\n <div class=\"mini-card-dark reveal reveal-d3\">\r\n <div class=\"mini-card-title\">Custom retailer taxonomy<\/div>\r\n <div class=\"mini-card-desc\">Define your own category logic, product groupings, and shelf rules without relying on supplier metadata alone.<\/div>\r\n <\/div>\r\n <div class=\"mini-card-dark reveal reveal-d4\">\r\n <div class=\"mini-card-title\">Dynamic merchandising<\/div>\r\n <div class=\"mini-card-desc\">Adapt collections, substitutes, and category experiences as shopper intent and assortment change.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ===== INTEGRATION BANNER ===== -->\r\n<section id=\"integration-banner\">\r\n <div class=\"container\">\r\n <div class=\"integration-box reveal\">\r\n <div class=\"integration-inner\">\r\n <h2 class=\"integration-heading\">Built for existing brand workflows, not workflow replacement.<\/h2>\r\n <div class=\"integration-checks\">\r\n <div class=\"integration-check\">\r\n <div class=\"integration-check-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg><\/div>\r\n Use existing images or managed capture\r\n <\/div>\r\n <div class=\"integration-check\">\r\n <div class=\"integration-check-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg><\/div>\r\n Export retailer-ready outputs\r\n <\/div>\r\n <div class=\"integration-check\">\r\n <div class=\"integration-check-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg><\/div>\r\n Supports brand, regulatory, and e-commerce teams\r\n <\/div>\r\n <div class=\"integration-check\">\r\n <div class=\"integration-check-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg><\/div>\r\n Works with existing operating processes\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ===== SECTION 4 \u2013 WHY NATFIRST ===== -->\r\n<section id=\"why-natfirst\">\r\n <div class=\"container\">\r\n <div class=\"why-grid\">\r\n\r\n <div class=\"why-left\">\r\n <div style=\"margin-bottom:16px;\" class=\"reveal\">\r\n <\/div>\r\n <div class=\"why-hero-img reveal reveal-d1\">\r\n <img decoding=\"async\" src=\"https:\/\/sainosure.com\/natfirst\/wp-content\/uploads\/2026\/05\/Retail-Data-Problem.jpg.jpeg\" alt=\"Retail Data Problem\" style=\"width:100%;border-radius:16px;display:block;object-fit:cover;max-height:220px;\" \/>\r\n <\/div>\r\n <h2 class=\"why-heading reveal reveal-d1\" style=\"margin-top:24px;\">The hard part is not the model. It is the retail system around it.<\/h2>\r\n <p class=\"why-sub reveal reveal-d2\">Retailers need more than just attribute extraction. They need a production-ready system that can handle inconsistent supplier data, changing packs, evolving taxonomies, and deployment into live retail workflows.<\/p>\r\n <div style=\"margin-top:8px;\" class=\"reveal reveal-d4\">\r\n <a href=\"https:\/\/sainosure.com\/natfirst\/contact-us\/#contact-main\" class=\"btn btn-primary\">Get a demo<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"why-mini-points\">\r\n <div class=\"why-point reveal reveal-d1\">\r\n <div class=\"why-point-num\">1<\/div>\r\n <div>\r\n <div class=\"why-point-title\">Supplier data is inconsistent<\/div>\r\n <div class=\"why-point-desc\">The retail problem starts with incomplete, conflicting, and low-quality product inputs that rarely arrive in usable structure.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"why-point reveal reveal-d2\">\r\n <div class=\"why-point-num\">2<\/div>\r\n <div>\r\n <div class=\"why-point-title\">Taxonomy work never stands still<\/div>\r\n <div class=\"why-point-desc\">Claims, diet tags, allergen families, and category rules need constant maintenance as catalogs and shopper expectations evolve.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"why-point reveal reveal-d3\">\r\n <div class=\"why-point-num\">3<\/div>\r\n <div>\r\n <div class=\"why-point-title\">Freshness breaks static systems<\/div>\r\n <div class=\"why-point-desc\">Pack changes, claim shifts, and ingredient updates weaken homegrown logic quickly unless review and refresh are built in.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"why-point reveal reveal-d4\">\r\n <div class=\"why-point-num\">4<\/div>\r\n <div>\r\n <div class=\"why-point-title\">Deployment is where complexity shows up<\/div>\r\n <div class=\"why-point-desc\">Retail value only appears when product truth reaches search, filters, recommendations, merchandising systems, and other live shopper surfaces.<\/div>\r\n <\/div>\r\n <\/div>\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<!-- ===== CTA BANNER ===== -->\r\n<section id=\"cta-banner\">\r\n <div class=\"cta-glow-orb cta-glow-orb-1\"><\/div>\r\n <div class=\"container\">\r\n <div class=\"cta-banner-inner\">\r\n <h2 class=\"cta-heading reveal\">Bring smarter product intelligence to every digital shelf.<\/h2>\r\n <div class=\"cta-glow-line reveal reveal-d1\"><\/div>\r\n <p class=\"cta-sub reveal reveal-d2\">Talk to us about how NatFirst can improve discovery, shelf logic, recommendations, and AI-led shopping across your catalog.<\/p>\r\n <div class=\"cta-email-row reveal reveal-d3\" id=\"nf-enquiry-row\">\r\n <input type=\"email\" class=\"cta-email-input\" id=\"nf-enquiry-email\" placeholder=\"Enter your work email\">\r\n <a href=\"https:\/\/sainosure.com\/natfirst\/contact-us\/#contact-main\" class=\"btn btn-primary\">Try IntelliServ for free<\/a>\r\n <\/div>\r\n <div class=\"reveal reveal-d3\" id=\"nf-enquiry-success\" style=\"display:none;text-align:center;max-width:480px;margin:0 auto;padding:24px 20px;border-radius:16px;background:rgba(102,217,255,0.08);border:1px solid rgba(102,217,255,0.25);\">\r\n <div style=\"font-size:32px;margin-bottom:8px;\">\u2705<\/div>\r\n <div style=\"color:#fff;font-weight:700;font-size:16px;margin-bottom:4px;\">Thanks for reaching out!<\/div>\r\n <div style=\"color:var(--white-70);font-size:13.5px;\">Our team has received your enquiry and will get back to you shortly.<\/div>\r\n <\/div>\r\n <div class=\"cta-trust-row reveal reveal-d4\">\r\n <div class=\"cta-trust-item\">\r\n <div class=\"cta-trust-dot\"><\/div>\r\n Retail and marketplace ready\r\n <\/div>\r\n <div class=\"cta-trust-item\">\r\n <div class=\"cta-trust-dot\"><\/div>\r\n Supports custom attributes and merchandising logic\r\n <\/div>\r\n <\/div>\r\n <div class=\"reveal reveal-d5\" style=\"margin-top:8px;\">\r\n <a href=\"https:\/\/sainosure.com\/natfirst\/contact-us\/#contact-main\" class=\"btn btn-outline btn-sm\">Talk to us<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n\/* PROGRESS BAR *\/\r\n(function(){\r\n const bar = document.getElementById('page-progress-bar');\r\n if (!bar) return;\r\n Object.assign(bar.style, {\r\n position:'fixed',top:'0',left:'0',height:'2px',zIndex:'99999',\r\n background:'#66D9FF',\r\n width:'0%', transition:'width 0.1s linear',\r\n pointerEvents:'none'\r\n });\r\n window.addEventListener('scroll',()=>{\r\n const s=window.scrollY, max=document.documentElement.scrollHeight-window.innerHeight;\r\n bar.style.width=Math.min(100,(s\/max)*100)+'%';\r\n },{passive:true});\r\n})();\r\n\r\n\/* NAV SCROLL *\/\r\n(function(){\r\n const nav=document.getElementById('main-nav');\r\n if(nav) window.addEventListener('scroll',()=>nav.classList.toggle('scrolled',window.scrollY>40),{passive:true});\r\n})();\r\n\r\n\/* PARTICLES *\/\r\n(function(){\r\n const canvas=document.getElementById('hero-canvas');\r\n if(!canvas)return;\r\n const ctx=canvas.getContext('2d');\r\n let W,H,particles=[];\r\n const N=55,MAX_DIST=120;\r\n const COLORS=['rgba(60,184,255,','rgba(60,184,255,','rgba(30,168,245,'];\r\n function resize(){\r\n const hero=document.getElementById('hero');\r\n W=canvas.width=hero.offsetWidth; H=canvas.height=hero.offsetHeight;\r\n }\r\n function init(){\r\n particles=[];\r\n for(let i=0;i<N;i++) particles.push({\r\n x:Math.random()*W,y:Math.random()*H,\r\n vx:(Math.random()-0.5)*0.35,vy:(Math.random()-0.5)*0.35,\r\n r:Math.random()*2+0.8,color:COLORS[Math.floor(Math.random()*COLORS.length)]\r\n });\r\n }\r\n function draw(){\r\n ctx.clearRect(0,0,W,H);\r\n for(let i=0;i<N;i++) for(let j=i+1;j<N;j++){\r\n const dx=particles[i].x-particles[j].x,dy=particles[i].y-particles[j].y;\r\n const d=Math.sqrt(dx*dx+dy*dy);\r\n if(d<MAX_DIST){\r\n ctx.beginPath();ctx.strokeStyle=`rgba(60,184,255,${(1-d\/MAX_DIST)*0.07})`;\r\n ctx.lineWidth=0.6;ctx.moveTo(particles[i].x,particles[i].y);\r\n ctx.lineTo(particles[j].x,particles[j].y);ctx.stroke();\r\n }\r\n }\r\n for(const p of particles){\r\n ctx.beginPath();ctx.arc(p.x,p.y,p.r,0,Math.PI*2);\r\n ctx.fillStyle=p.color+'0.28)';ctx.fill();\r\n p.x+=p.vx;p.y+=p.vy;\r\n if(p.x<0||p.x>W)p.vx*=-1;if(p.y<0||p.y>H)p.vy*=-1;\r\n }\r\n requestAnimationFrame(draw);\r\n }\r\n resize();init();draw();\r\n window.addEventListener('resize',()=>{resize();init();});\r\n})();\r\n\r\n\/* SCROLL REVEAL *\/\r\n(function(){\r\n const els=document.querySelectorAll('.reveal,.reveal-left,.reveal-right');\r\n const obs=new IntersectionObserver(entries=>{\r\n entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('visible');obs.unobserve(e.target);}});\r\n },{threshold:0.12});\r\n els.forEach(el=>obs.observe(el));\r\n setTimeout(()=>els.forEach(el=>{if(el.getBoundingClientRect().top<window.innerHeight)el.classList.add('visible');}),100);\r\n})();\r\n\r\n\/* MAGNETIC BUTTONS *\/\r\n(function(){\r\n document.querySelectorAll('.btn').forEach(btn=>{\r\n btn.addEventListener('mousemove',function(e){\r\n const r=this.getBoundingClientRect();\r\n const dx=(e.clientX-r.left-r.width\/2)*0.12,dy=(e.clientY-r.top-r.height\/2)*0.12;\r\n this.style.transform=`translate(${dx}px,${dy}px) translateY(-2px)`;\r\n });\r\n btn.addEventListener('mouseleave',function(){this.style.transform='';});\r\n });\r\n})();\r\n\r\n\/* ===== PAGE LOADER ===== *\/\r\n(function(){\r\n var loader = document.getElementById('page-loader');\r\n if (!loader) return;\r\n window.addEventListener('load', function(){\r\n setTimeout(function(){ loader.classList.add('loaded'); }, 400);\r\n setTimeout(function(){ loader.remove(); }, 1100);\r\n });\r\n})();\r\n<\/script>\r\n\r\n<script id=\"nf-scroll-top-js\">\r\n\/* \u2500\u2500 SCROLL TO TOP \u2500\u2500 *\/\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\r\n\r\n<style id=\"nf-66d9ff-enhancements\">\r\n\/* ===== #66D9FF BRAND-BLUE ENHANCEMENTS (additive, non-destructive) ===== *\/\r\n\r\n\/* Filled primary buttons: solid cyan matching About.html *\/\r\n.btn-primary {\r\n background: #00AADD !important;\r\n box-shadow: 0 4px 20px rgba(0,170,221,0.50) !important;\r\n}\r\n.btn-primary:hover {\r\n box-shadow: 0 10px 35px rgba(0,170,221,0.65) !important;\r\n}\r\n\r\n\/* Numbered point badges *\/\r\n.why-point-num { color: #00AADD !important; }\r\n\r\n\/* ----- Subtle section highlight borders (NOT solid #66D9FF) ----- *\/\r\n#retail-impact,\r\n#build-on-top,\r\n#integration-banner,\r\n#why-natfirst,\r\n#cta-banner {\r\n position: relative;\r\n border-top: 1px solid rgba(102,217,255,0.16);\r\n border-bottom: 1px solid rgba(102,217,255,0.08);\r\n}\r\n\r\n\/* Slim centered accent tab sitting on each section's top edge *\/\r\n#retail-impact::after,\r\n#build-on-top::after,\r\n#integration-banner::after,\r\n#why-natfirst::after,\r\n#cta-banner::after {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 50%; transform: translateX(-50%);\r\n width: 120px; height: 2px;\r\n background: linear-gradient(90deg, transparent, #66D9FF, transparent);\r\n border-radius: 0 0 3px 3px;\r\n pointer-events: none;\r\n z-index: 3;\r\n}\r\n\r\n\/* Brand-cyan edge on the integration card for consistency *\/\r\n.integration-box { border: 1px solid rgba(102,217,255,0.14) !important; }\r\n<\/style>\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>Solutions \u2013 For Retailers | NatFirst Make every digital shelf more discoverable. Retail and marketplace teams benefit from Structured product intelligence that improves search, filters, recommendations, and category discovery across large retail catalogs. Try IntelliServ for free Built for modern merchandising Power search, filters, AI shopping, and category experiences with a single product intelligence layer. […]<\/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-191","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sainosure.com\/natfirst\/wp-json\/wp\/v2\/pages\/191","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=191"}],"version-history":[{"count":73,"href":"https:\/\/sainosure.com\/natfirst\/wp-json\/wp\/v2\/pages\/191\/revisions"}],"predecessor-version":[{"id":1423,"href":"https:\/\/sainosure.com\/natfirst\/wp-json\/wp\/v2\/pages\/191\/revisions\/1423"}],"wp:attachment":[{"href":"https:\/\/sainosure.com\/natfirst\/wp-json\/wp\/v2\/media?parent=191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}