{"id":10,"date":"2026-07-07T08:47:12","date_gmt":"2026-07-07T08:47:12","guid":{"rendered":"https:\/\/primus.novatraxx.my\/?page_id=10"},"modified":"2026-08-06T04:26:54","modified_gmt":"2026-08-06T04:26:54","slug":"__trashed","status":"publish","type":"page","link":"https:\/\/primus.novatraxx.my\/","title":{"rendered":"Primus Corporate Architecture"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nPrimus Corporate Architecture \u2014 by Novatraxx<\/title>\r\n<meta name=\"description\" content=\"Primus Corporate Architecture: institutional governance, operational systems, enterprise identity, and digital foundations for high-tier enterprises.\">\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/@studio-freight\/lenis@1.0.42\/dist\/lenis.min.js\"><\/script>\r\n\r\n<style>\r\n :root {\r\n --void: #050607;\r\n --ground: #0D0F12;\r\n --panel: #12151A;\r\n --trust-navy: #0F131C;\r\n --gold: #C5A059;\r\n --gold-bright: #DABD84;\r\n --ivory: #F1EEE6;\r\n --slate: #8A8D93;\r\n --hair: rgba(197,160,89,0.16);\r\n --hair-light: rgba(241,238,230,0.08);\r\n }\r\n\r\n * { \r\n box-sizing: border-box; \r\n -webkit-tap-highlight-color: rgba(197, 160, 89, 0.2) !important;\r\n }\r\n\r\n html, body {\r\n background: var(--ground);\r\n color: var(--ivory);\r\n font-family: 'Cormorant Garamond', serif;\r\n overflow-x: hidden !important;\r\n width: 100%;\r\n margin: 0;\r\n padding: 0;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n ::selection { background: var(--gold); color: var(--ground); }\r\n\r\n .font-display { font-family: 'Cinzel', serif; }\r\n .font-ui { font-family: 'Inter', sans-serif; }\r\n .font-mono { font-family: 'JetBrains Mono', monospace; }\r\n\r\n .hairline { border-color: var(--hair); }\r\n\r\n \/* ARCHITECTURAL CORNER REGISTRATION MARKS *\/\r\n .corner-mark { position: relative; }\r\n .corner-mark::before, .corner-mark::after {\r\n content: ''; position: absolute; background: var(--gold); opacity: 0.4; pointer-events: none;\r\n transition: opacity 0.4s ease;\r\n }\r\n .corner-tl::before { top: 0; left: 0; width: 8px; height: 1px; }\r\n .corner-tl::after { top: 0; left: 0; width: 1px; height: 8px; }\r\n .corner-br::before { bottom: 0; right: 0; width: 8px; height: 1px; }\r\n .corner-br::after { bottom: 0; right: 0; width: 1px; height: 8px; }\r\n .corner-mark:hover::before, .corner-mark:hover::after { opacity: 0.9; }\r\n\r\n \/* DYNAMIC LIVING CAD DRAFTING CANVAS BACKGROUND *\/\r\n .drafting-canvas {\r\n position: relative;\r\n background-color: var(--ground);\r\n background-image: \r\n linear-gradient(to right, rgba(197, 160, 89, 0.05) 1px, transparent 1px),\r\n linear-gradient(to bottom, rgba(197, 160, 89, 0.05) 1px, transparent 1px),\r\n linear-gradient(to right, rgba(197, 160, 89, 0.018) 1px, transparent 1px),\r\n linear-gradient(to bottom, rgba(197, 160, 89, 0.018) 1px, transparent 1px);\r\n background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;\r\n animation: gridBreathe 24s ease-in-out infinite alternate;\r\n }\r\n\r\n @keyframes gridBreathe {\r\n 0% { background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px; }\r\n 100% { background-position: 8px 8px, 8px 8px, 2px 2px, 2px 2px; }\r\n }\r\n\r\n \/* CURSOR MOUSE-FOLLOW LIGHT CANVAS *\/\r\n #cad-interactive-canvas {\r\n position: absolute; inset: 0; pointer-events: none; z-index: 1;\r\n }\r\n\r\n .grain {\r\n pointer-events: none;\r\n position: fixed; inset: 0; z-index: 2; opacity: 0.025; mix-blend-mode: overlay;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n }\r\n\r\n \/* SUBTLE CURSOR COORDINATE HUD *\/\r\n #coord-hud {\r\n position: fixed; bottom: 20px; left: 24px; z-index: 90;\r\n pointer-events: none; font-family: 'JetBrains Mono', monospace;\r\n font-size: 0.58rem; color: var(--slate); letter-spacing: 0.15em; opacity: 0.7;\r\n }\r\n\r\n \/* EXECUTIVE VERTICAL SCROLL POSITION INDICATOR *\/\r\n #scroll-indicator {\r\n position: fixed; right: 28px; top: 50%; transform: translateY(-50%); z-index: 90;\r\n display: flex; flex-direction: column; align-items: center; gap: 14px;\r\n font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; color: var(--slate);\r\n }\r\n .scroll-nav-node {\r\n display: flex; flex-direction: column; align-items: center; gap: 4px;\r\n cursor: pointer; opacity: 0.4; transition: opacity 0.35s ease, color 0.35s ease;\r\n }\r\n .scroll-nav-node.active { opacity: 1; color: var(--gold); }\r\n .scroll-nav-line { width: 1px; height: 16px; background: var(--hair); }\r\n\r\n \/* RESPONSIVE DISPLAY RULES FOR OVERLAYS *\/\r\n @media (max-width: 1024px) {\r\n #scroll-indicator { display: none; }\r\n }\r\n @media (max-width: 640px) {\r\n #coord-hud { display: none; }\r\n }\r\n\r\n \/* TYPOGRAPHY ARCHITECTURAL MOTION SYSTEM *\/\r\n .type-construct {\r\n opacity: 0;\r\n transform: translateY(28px) scale(0.98);\r\n filter: blur(10px);\r\n transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),\r\n transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),\r\n filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);\r\n will-change: opacity, transform, filter;\r\n }\r\n .type-construct.is-constructed {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n filter: blur(0);\r\n }\r\n\r\n \/* INTELLIGENT SCROLL REVEAL SYSTEM *\/\r\n .reveal-architectural {\r\n opacity: 0;\r\n transform: translateY(36px) scale(0.96);\r\n filter: blur(8px);\r\n transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),\r\n transform 1s cubic-bezier(0.16, 1, 0.3, 1),\r\n filter 1s cubic-bezier(0.16, 1, 0.3, 1);\r\n will-change: opacity, transform, filter;\r\n }\r\n .reveal-architectural.is-visible {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n filter: blur(0);\r\n }\r\n\r\n \/* MOBILE PERFORMANCE OPTIMIZATION *\/\r\n @media (max-width: 768px) {\r\n .type-construct, .reveal-architectural {\r\n filter: none !important;\r\n transform: translateY(18px) !important;\r\n transition: opacity 0.6s ease-out, transform 0.6s ease-out !important;\r\n }\r\n .drafting-canvas {\r\n animation: none !important;\r\n }\r\n }\r\n\r\n \/* ================= PRELOADER ================= *\/\r\n #preloader {\r\n position: fixed; inset: 0; z-index: 9999;\r\n background: var(--void);\r\n display: flex; align-items: center; justify-content: center;\r\n transition: opacity 500ms cubic-bezier(.65,0,.35,1), visibility 500ms;\r\n }\r\n #preloader.lifted { opacity: 0; visibility: hidden; pointer-events: none; }\r\n \r\n .preloader-viewport {\r\n width: min(90vw, 520px);\r\n border: 1px solid var(--hair);\r\n background: var(--panel);\r\n padding: 2rem 1.5rem;\r\n position: relative;\r\n }\r\n\r\n @media (min-width: 640px) {\r\n .preloader-viewport { padding: 2.5rem 2rem; }\r\n }\r\n\r\n .seq-line { opacity: 0; transform: translateY(4px); transition: all 0.3s ease; }\r\n .seq-line.active { opacity: 1; transform: translateY(0); }\r\n\r\n .mark-stroke {\r\n fill: none; stroke: var(--gold); stroke-width: 1;\r\n stroke-dasharray: 120; stroke-dashoffset: 120;\r\n transition: stroke-dashoffset 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .mark-stroke.drawn { stroke-dashoffset: 0; }\r\n\r\n \/* ---------- HEADER ---------- *\/\r\n header {\r\n position: fixed; top: 0; left: 0; right: 0; z-index: 100;\r\n backdrop-filter: blur(12px);\r\n background: rgba(13,15,18,0.88);\r\n border-bottom: 1px solid var(--hair);\r\n }\r\n .nav-link {\r\n position: relative; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem;\r\n letter-spacing: 0.22em; color: var(--slate); transition: color .35s ease;\r\n }\r\n .nav-link::after {\r\n content: ''; position: absolute; left: 0; bottom: -6px; width: 0%; height: 1px; background: var(--gold);\r\n transition: width .3s cubic-bezier(.65,0,.35,1);\r\n }\r\n .nav-link:hover { color: var(--ivory); }\r\n .nav-link:hover::after { width: 100%; }\r\n\r\n \/* MOBILE NAVIGATION DRAWER *\/\r\n #mobile-drawer {\r\n position: fixed; inset: 0; z-index: 95;\r\n background: rgba(5, 6, 7, 0.98);\r\n backdrop-filter: blur(20px);\r\n display: flex; flex-direction: column; justify-content: center;\r\n padding: 2.5rem;\r\n opacity: 0; visibility: hidden; pointer-events: none;\r\n transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;\r\n }\r\n #mobile-drawer.open {\r\n opacity: 1; visibility: visible; pointer-events: auto;\r\n }\r\n .mobile-drawer-link {\r\n font-family: 'JetBrains Mono', monospace; font-size: 0.85rem;\r\n letter-spacing: 0.2em; color: var(--ivory); padding: 1.25rem 0;\r\n border-bottom: 1px solid var(--hair); transition: color 0.3s ease;\r\n }\r\n .mobile-drawer-link:hover, .mobile-drawer-link:active {\r\n color: var(--gold);\r\n }\r\n\r\n \/* ---------- HERO ---------- *\/\r\n .hero-canvas {\r\n position: absolute; inset: 0; z-index: 0; overflow: hidden;\r\n }\r\n .hero-scan-beam {\r\n position: absolute; top: 0; left: -100%; width: 100%; height: 100%;\r\n background: linear-gradient(90deg, transparent 0%, rgba(197, 160, 89, 0.04) 50%, transparent 100%);\r\n animation: beamScan 8s linear infinite;\r\n pointer-events: none;\r\n }\r\n @keyframes beamScan {\r\n 0% { left: -100%; } 100% { left: 100%; }\r\n }\r\n\r\n .cad-crosshair {\r\n position: absolute; width: 11px; height: 11px; pointer-events: none; opacity: 0.35;\r\n }\r\n .cad-crosshair::before, .cad-crosshair::after { content: ''; position: absolute; background: var(--gold); }\r\n .cad-crosshair::before { top: 5px; left: 0; width: 11px; height: 1px; }\r\n .cad-crosshair::after { left: 5px; top: 0; width: 1px; height: 11px; }\r\n\r\n .cta-frame {\r\n position: relative; overflow: hidden;\r\n border: 1px solid var(--gold);\r\n background: rgba(18, 21, 26, 0.85);\r\n min-height: 44px;\r\n transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .cta-frame::before {\r\n content: ''; position: absolute; inset: 0; background: var(--gold);\r\n transform: translateX(-101%); transition: transform .35s cubic-bezier(.65,0,.35,1); z-index: 0;\r\n }\r\n .cta-frame:hover::before { transform: translateX(0); }\r\n .cta-frame span { position: relative; z-index: 1; transition: color .35s ease; }\r\n .cta-frame:hover span { color: var(--ground); }\r\n .cta-frame:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 24px rgba(197, 160, 89, 0.15);\r\n }\r\n\r\n \/* ---------- SYSTEM RESPONSIVE HOVER EFFECTS & BLUEPRINT INTERFACE ---------- *\/\r\n .node-btn {\r\n border: 1px solid var(--hair);\r\n background: var(--panel);\r\n transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);\r\n position: relative;\r\n min-height: 48px;\r\n overflow: hidden;\r\n }\r\n .node-btn::after {\r\n content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(197,160,89,0.08), transparent);\r\n transition: left 0.6s ease;\r\n }\r\n .node-btn:hover::after { left: 100%; }\r\n .node-btn:hover {\r\n border-color: var(--gold-bright);\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 16px rgba(0,0,0,0.4);\r\n }\r\n .node-btn.active {\r\n border-color: var(--gold);\r\n background: rgba(197,160,89,0.08);\r\n }\r\n .node-btn.active::before {\r\n content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gold);\r\n }\r\n\r\n .config-panel {\r\n background: var(--panel);\r\n border: 1px solid var(--hair);\r\n position: relative;\r\n transition: border-color 0.4s ease, box-shadow 0.4s ease;\r\n }\r\n .config-panel::before {\r\n content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 0%;\r\n background: var(--gold); transition: height .4s ease;\r\n }\r\n .config-panel.reveal::before { height: 100%; }\r\n .config-panel.in-transition {\r\n border-color: var(--gold);\r\n box-shadow: 0 0 25px rgba(197, 160, 89, 0.12);\r\n }\r\n\r\n .config-content { \r\n opacity: 0; \r\n transform: translateY(12px); \r\n filter: blur(4px);\r\n transition: opacity .35s ease, transform .35s ease, filter .35s ease; \r\n }\r\n .config-content.reveal { \r\n opacity: 1; \r\n transform: translateY(0); \r\n filter: blur(0);\r\n }\r\n\r\n .spec-card {\r\n border: 1px solid var(--hair);\r\n background: rgba(13, 15, 18, 0.6);\r\n padding: 1.25rem;\r\n position: relative;\r\n transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .spec-card:hover {\r\n border-color: var(--gold);\r\n transform: translateY(-4px);\r\n box-shadow: 0 10px 24px rgba(0,0,0,0.4), 0 0 12px rgba(197, 160, 89, 0.1);\r\n background: rgba(18, 21, 26, 0.9);\r\n }\r\n\r\n \/* ---------- EXECUTIVE DOSSIER LAYOUT ---------- *\/\r\n .portrait-frame {\r\n position: relative;\r\n border: 1px solid var(--hair);\r\n background: var(--panel);\r\n padding: 8px;\r\n transition: border-color 0.4s ease, transform 0.4s ease;\r\n }\r\n @media (min-width: 640px) {\r\n .portrait-frame { padding: 10px; }\r\n }\r\n .portrait-frame:hover {\r\n border-color: var(--gold);\r\n transform: translateY(-3px);\r\n }\r\n .portrait-img {\r\n filter: grayscale(100%) contrast(108%) brightness(90%);\r\n transition: filter 0.5s ease;\r\n }\r\n .portrait-frame:hover .portrait-img {\r\n filter: grayscale(30%) contrast(105%) brightness(95%);\r\n }\r\n\r\n .dossier-panel {\r\n border: 1px solid var(--hair);\r\n background: var(--panel);\r\n padding: 1.25rem;\r\n transition: border-color 0.4s ease, box-shadow 0.4s ease;\r\n }\r\n @media (min-width: 640px) {\r\n .dossier-panel { padding: 2rem; }\r\n }\r\n .dossier-panel:hover {\r\n border-color: rgba(197, 160, 89, 0.4);\r\n box-shadow: 0 12px 32px rgba(0,0,0,0.4);\r\n }\r\n\r\n \/* ---------- INTAKE FORM ---------- *\/\r\n .field-input {\r\n background: rgba(18, 21, 26, 0.6);\r\n border: 1px solid var(--hair);\r\n color: var(--ivory);\r\n font-size: 16px !important;\r\n transition: border-color 0.3s ease, background-color 0.3s ease;\r\n border-radius: 0px;\r\n min-height: 48px;\r\n }\r\n .field-input:focus { \r\n outline: none; \r\n border-color: var(--gold); \r\n background-color: rgba(197,160,89,0.02);\r\n }\r\n\r\n ::-webkit-scrollbar { width: 5px; }\r\n ::-webkit-scrollbar-track { background: var(--ground); }\r\n ::-webkit-scrollbar-thumb { background: #22252b; }\r\n\r\n a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {\r\n outline: 1px solid var(--gold); outline-offset: 3px;\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n *, .type-construct, .reveal-architectural, .drafting-canvas { \r\n animation: none !important;\r\n transition: none !important; \r\n opacity: 1 !important;\r\n transform: none !important;\r\n filter: none !important;\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body class=\"antialiased w-full overflow-x-hidden\">\r\n\r\n<div class=\"grain\"><\/div>\r\n\r\n<!-- SUBTLE CURSOR HUD -->\r\n<div id=\"coord-hud\">SYS_COORD: <span id=\"hud-xy\">000.00 \/ 000.00<\/span> | ARCH_STATE: VERIFIED<\/div>\r\n\r\n<!-- EXECUTIVE VERTICAL SCROLL POSITION INDICATOR -->\r\n<div id=\"scroll-indicator\">\r\n <div class=\"scroll-nav-node active\" data-target=\"top\" title=\"Top \/ System\">01<\/div>\r\n <div class=\"scroll-nav-line\"><\/div>\r\n <div class=\"scroll-nav-node\" data-target=\"gap\" title=\"01 \/\/ Diagnostic\">02<\/div>\r\n <div class=\"scroll-nav-line\"><\/div>\r\n <div class=\"scroll-nav-node\" data-target=\"framework\" title=\"02 \/\/ Blueprint\">03<\/div>\r\n <div class=\"scroll-nav-line\"><\/div>\r\n <div class=\"scroll-nav-node\" data-target=\"leadership\" title=\"03 \/\/ Leadership\">04<\/div>\r\n <div class=\"scroll-nav-line\"><\/div>\r\n <div class=\"scroll-nav-node\" data-target=\"structure\" title=\"04 \/\/ Parentage\">05<\/div>\r\n <div class=\"scroll-nav-line\"><\/div>\r\n <div class=\"scroll-nav-node\" data-target=\"portal\" title=\"05 \/\/ Mandate\">06<\/div>\r\n<\/div>\r\n\r\n<!-- MOBILE NAVIGATION DRAWER -->\r\n<div id=\"mobile-drawer\" class=\"corner-mark corner-tl corner-br\">\r\n <div class=\"flex items-center justify-between border-b hairline pb-4 mb-6\">\r\n <span class=\"font-mono text-[0.65rem] text-[var(--gold)]\">PRIMUS \/\/ SYSTEM MENU<\/span>\r\n <button id=\"close-drawer\" class=\"font-mono text-xs text-[var(--slate)] hover:text-[var(--ivory)] min-h-[44px] min-w-[44px] flex items-center justify-end\">\r\n [ CLOSE \u2715 ]\r\n <\/button>\r\n <\/div>\r\n <nav class=\"flex flex-col space-y-1\">\r\n <a href=\"#gap\" class=\"mobile-drawer-link\">01 \/\/ DIAGNOSTIC<\/a>\r\n <a href=\"#framework\" class=\"mobile-drawer-link\">02 \/\/ BLUEPRINT<\/a>\r\n <a href=\"#leadership\" class=\"mobile-drawer-link\">03 \/\/ LEADERSHIP<\/a>\r\n <a href=\"#structure\" class=\"mobile-drawer-link\">04 \/\/ PARENTAGE<\/a>\r\n <a href=\"#portal\" class=\"mobile-drawer-link\">05 \/\/ MANDATE<\/a>\r\n <\/nav>\r\n <div class=\"mt-8 pt-6 border-t hairline flex flex-col space-y-3 font-mono text-[0.6rem] text-[var(--slate)]\">\r\n <span>OPERATING UNDER PARENT HQ:<\/span>\r\n <a href=\"https:\/\/www.novatraxx.my\" target=\"_blank\" rel=\"noopener\" class=\"text-[var(--gold)]\">NOVATRAXX SDN. BHD. \u2197<\/a>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ============ PRELOADER \u2014 INSTITUTIONAL ENTRY SEQUENCE ============ -->\r\n<div id=\"preloader\">\r\n <div class=\"preloader-viewport corner-mark corner-tl corner-br\">\r\n <div class=\"flex items-center justify-between border-b hairline pb-3 mb-4 font-mono text-[0.58rem] text-[var(--slate)]\">\r\n <span>PRIMUS ARCHITECTURAL SYSTEM<\/span>\r\n <span id=\"preload-pc\" class=\"text-[var(--gold)]\">00%<\/span>\r\n <\/div>\r\n\r\n <!-- Sequence Line 1: Grid Init -->\r\n <div class=\"seq-line mb-3 font-mono text-[0.62rem] text-[var(--slate)] flex items-center gap-2\" id=\"seq-1\">\r\n <span class=\"w-1.5 h-1.5 bg-[var(--gold)]\"><\/span>\r\n <span>GRID INITIALIZATION \/\/ ARCH_FRAME_001<\/span>\r\n <\/div>\r\n\r\n <!-- Sequence Line 2: Blueprint Geometry -->\r\n <div class=\"seq-line mb-4 flex items-center justify-center py-2 border-t border-b hairline\" id=\"seq-2\">\r\n <svg viewBox=\"0 0 80 40\" width=\"80\" height=\"40\" class=\"overflow-visible\">\r\n <path class=\"mark-stroke\" id=\"svg-stroke-1\" d=\"M 0,20 L 80,20 M 40,0 L 40,40\" \/>\r\n <path class=\"mark-stroke\" id=\"svg-stroke-2\" d=\"M 10,5 L 70,5 L 70,35 L 10,35 Z\" \/>\r\n <\/svg>\r\n <\/div>\r\n\r\n <!-- Sequence Line 3: System Metadata -->\r\n <div class=\"seq-line font-mono text-[0.6rem] text-[var(--ivory)] space-y-1 mb-4\" id=\"seq-3\">\r\n <div class=\"flex justify-between\"><span>SYSTEM:<\/span> <span class=\"text-[var(--slate)]\">INSTITUTIONAL FRAMEWORK ENGINE<\/span><\/div>\r\n <div class=\"flex justify-between\"><span>DIVISION:<\/span> <span class=\"text-[var(--slate)]\">NOVATRAXX GROUP<\/span><\/div>\r\n <div class=\"flex justify-between\"><span>STATUS:<\/span> <span class=\"text-[var(--gold)]\">ARCHITECTURE VERIFIED<\/span><\/div>\r\n <\/div>\r\n\r\n <!-- Sequence Progress Bar -->\r\n <div class=\"w-full h-1 bg-[var(--ground)] overflow-hidden border hairline\">\r\n <div id=\"preload-bar\" class=\"h-full bg-[var(--gold)] w-0 transition-all duration-200\"><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ============ HEADER ============ -->\r\n<header class=\"py-3 sm:py-4\">\r\n <div class=\"max-w-[1440px] mx-auto px-4 sm:px-6 md:px-12 flex items-center justify-between\">\r\n <a href=\"https:\/\/www.novatraxx.my\" target=\"_blank\" rel=\"noopener\" class=\"flex items-center gap-2.5 sm:gap-3 group\">\r\n <span class=\"font-display tracking-widest text-sm sm:text-base text-[var(--ivory)] group-hover:text-[var(--gold)] transition-colors\">PRIMUS<\/span>\r\n <span class=\"w-px h-3 bg-[var(--hair)]\"><\/span>\r\n <div class=\"flex flex-col\">\r\n <span class=\"font-mono text-[0.48rem] sm:text-[0.52rem] tracking-widest text-[var(--gold)] uppercase\">CORPORATE ARCHITECTURE<\/span>\r\n <span class=\"font-mono text-[0.45rem] sm:text-[0.5rem] tracking-widest text-[var(--slate)] group-hover:text-[var(--ivory)] transition-colors uppercase\">NOVATRAXX GROUP \u2197<\/span>\r\n <\/div>\r\n <\/a>\r\n <nav class=\"hidden md:flex items-center gap-8\">\r\n <a href=\"#gap\" class=\"nav-link\">01 \/\/ DIAGNOSTIC<\/a>\r\n <a href=\"#framework\" class=\"nav-link\">02 \/\/ BLUEPRINT<\/a>\r\n <a href=\"#leadership\" class=\"nav-link\">03 \/\/ LEADERSHIP<\/a>\r\n <a href=\"#structure\" class=\"nav-link\">04 \/\/ PARENTAGE<\/a>\r\n <a href=\"#portal\" class=\"nav-link\">05 \/\/ MANDATE<\/a>\r\n <\/nav>\r\n <button id=\"open-drawer\" class=\"md:hidden font-mono text-[0.6rem] tracking-wider text-[var(--gold)] border border-[var(--gold)] px-3 py-2 min-h-[44px] min-w-[44px] flex items-center justify-center\">\r\n 00 \/\/ MENU\r\n <\/button>\r\n <\/div>\r\n<\/header>\r\n\r\n<!-- ============ HERO SECTION ============ -->\r\n<section id=\"top\" class=\"relative min-h-[100svh] flex items-center pt-20 pb-12 sm:pt-24 sm:pb-16 drafting-canvas overflow-hidden\">\r\n <canvas id=\"cad-interactive-canvas\"><\/canvas>\r\n <div class=\"hero-canvas\">\r\n <div class=\"hero-scan-beam\"><\/div>\r\n <!-- Structural Cad Crosshairs -->\r\n <div class=\"cad-crosshair\" style=\"top: 12%; left: 6%;\"><\/div>\r\n <div class=\"cad-crosshair\" style=\"top: 12%; right: 6%;\"><\/div>\r\n <div class=\"cad-crosshair\" style=\"bottom: 12%; left: 6%;\"><\/div>\r\n <div class=\"cad-crosshair\" style=\"bottom: 12%; right: 6%;\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"relative z-10 max-w-[1440px] mx-auto px-4 sm:px-6 md:px-12 w-full\">\r\n \r\n <!-- Architectural Header HUD -->\r\n <div class=\"grid grid-cols-12 gap-2 sm:gap-4 border-b hairline pb-3 sm:pb-4 mb-6 sm:mb-8 font-mono text-[0.5rem] sm:text-[0.58rem] text-[var(--slate)] reveal-architectural\">\r\n <div class=\"col-span-12 sm:col-span-6 flex items-center gap-2 sm:gap-3\">\r\n <span class=\"w-1.5 h-1.5 bg-[var(--gold)]\"><\/span>\r\n <span class=\"text-[var(--gold)] tracking-widest\">[ PRIMUS ARCHITECTURAL SYSTEM ]<\/span>\r\n <\/div>\r\n <div class=\"col-span-12 sm:col-span-6 sm:text-right hidden sm:block\">\r\n <span>REF_SPEC: ENTERPRISE_ARCHITECTURE_2026<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-12 gap-8 items-end\">\r\n <div class=\"md:col-span-8\">\r\n <p class=\"font-mono text-[0.55rem] sm:text-[0.6rem] tracking-[0.2em] text-[var(--slate)] uppercase mb-3 sm:mb-4 type-construct\">\r\n ENTERPRISE ARCHITECTURE PRACTICE\r\n <\/p>\r\n \r\n <h1 class=\"font-display tracking-tight text-[clamp(1.65rem,6vw,4.2rem)] leading-[1.1] text-[var(--ivory)] mb-6 sm:mb-8 uppercase font-semibold type-construct\">\r\n We Architect Enterprises<br class=\"hidden sm:inline\">\r\n Built to Outlast Their Founders.\r\n <\/h1>\r\n \r\n <p class=\"font-ui text-xs sm:text-[0.95rem] md:text-[1.02rem] leading-relaxed text-[var(--slate)] max-w-2xl mb-8 sm:mb-10 type-construct\">\r\n Primus designs governance structures, operational systems, corporate identity frameworks, and digital foundations for companies transitioning from successful businesses into enduring institutions.\r\n <\/p>\r\n\r\n <div class=\"flex flex-col sm:flex-row items-stretch sm:items-center gap-4 sm:gap-6 type-construct\">\r\n <a href=\"#portal\" class=\"cta-frame inline-flex items-center justify-center px-6 sm:px-8 py-3.5 sm:py-4\">\r\n <span class=\"font-mono text-[0.6rem] sm:text-[0.65rem] tracking-[0.18em] text-[var(--ivory)] uppercase\">\r\n [ REQUEST INSTITUTIONAL REVIEW ]\r\n <\/span>\r\n <\/a>\r\n <a href=\"#gap\" class=\"font-mono text-[0.58rem] sm:text-[0.62rem] tracking-[0.18em] text-[var(--slate)] hover:text-[var(--gold)] transition-colors text-center sm:text-left py-2\">\r\n EXAMINE DIAGNOSTIC →\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Architectural HUD Corner Panel -->\r\n <div class=\"md:col-span-4 border hairline bg-[var(--panel)] p-4 sm:p-5 font-mono text-[0.55rem] sm:text-[0.6rem] space-y-2.5 sm:space-y-3 reveal-architectural corner-mark corner-tl corner-br mt-4 md:mt-0\">\r\n <div class=\"text-[var(--gold)] border-b hairline pb-2 font-semibold flex justify-between\">\r\n <span>FRAMEWORK ARCHITECTURE<\/span>\r\n <span class=\"text-[var(--slate)]\">[SYS_ACTIVE]<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between\"><span class=\"text-[var(--slate)]\">01 \/ STRUCTURE:<\/span> <span class=\"text-[var(--ivory)]\">GOVERNANCE<\/span><\/div>\r\n <div class=\"flex justify-between\"><span class=\"text-[var(--slate)]\">02 \/ DISCIPLINE:<\/span> <span class=\"text-[var(--ivory)]\">OPERATIONAL<\/span><\/div>\r\n <div class=\"flex justify-between\"><span class=\"text-[var(--slate)]\">03 \/ POSITIONING:<\/span> <span class=\"text-[var(--ivory)]\">IDENTITY<\/span><\/div>\r\n <div class=\"flex justify-between\"><span class=\"text-[var(--slate)]\">04 \/ FOUNDATION:<\/span> <span class=\"text-[var(--ivory)]\">DIGITAL<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============ SECTION 01: THE INSTITUTIONAL GAP ============ -->\r\n<section id=\"gap\" class=\"relative py-16 sm:py-24 md:py-36 bg-[var(--panel)] border-t border-b hairline\">\r\n <div class=\"max-w-[1440px] mx-auto px-4 sm:px-6 md:px-12\">\r\n \r\n <!-- Section Identifier Metadata -->\r\n <div class=\"flex items-center justify-between border-b hairline pb-3 mb-8 sm:mb-12 font-mono text-[0.52rem] sm:text-[0.58rem] reveal-architectural\">\r\n <div class=\"flex items-center gap-2 sm:gap-3\">\r\n <span class=\"text-[var(--gold)]\">SECTION 01<\/span>\r\n <span class=\"text-[var(--slate)]\">\/\/<\/span>\r\n <span class=\"text-[var(--ivory)] uppercase\">SYSTEM ANALYSIS<\/span>\r\n <\/div>\r\n <span class=\"text-[var(--slate)] hidden sm:inline\">DIAGNOSTIC_ID: ENTERPRISE_FRAGILITY<\/span>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-12 gap-8 md:gap-12\">\r\n <div class=\"md:col-span-4 reveal-architectural\">\r\n <p class=\"font-mono text-[0.58rem] sm:text-[0.6rem] tracking-[0.2em] text-[var(--gold)] uppercase mb-2 sm:mb-3\">STRUCTURAL FRAGILITY<\/p>\r\n <h2 class=\"font-display text-[clamp(1.5rem,4.5vw,2.5rem)] leading-tight text-[var(--ivory)] type-construct\">\r\n The Institutional Gap.\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"md:col-span-8 reveal-architectural\">\r\n <p class=\"font-display text-lg sm:text-xl md:text-2xl text-[var(--ivory)] leading-relaxed mb-6 sm:mb-8 type-construct\">\r\n Most companies do not fail because they lack ambition. They struggle because growth exposes structural weaknesses.\r\n <\/p>\r\n\r\n <div class=\"grid sm:grid-cols-2 gap-4 sm:gap-6 pt-6 border-t hairline mb-6 sm:mb-8\">\r\n <div class=\"border hairline p-3.5 sm:p-4 bg-[var(--ground)] spec-card\">\r\n <span class=\"font-mono text-[0.58rem] text-[var(--gold)] block mb-1\">GAP 01 \/\/ LEADERSHIP<\/span>\r\n <p class=\"font-ui text-xs text-[var(--ivory)] font-medium mb-1\">Founder Dependency<\/p>\r\n <p class=\"font-ui text-xs text-[var(--slate)] leading-relaxed\">Decisions halted at executive level; absence of autonomous governance structures.<\/p>\r\n <\/div>\r\n <div class=\"border hairline p-3.5 sm:p-4 bg-[var(--ground)] spec-card\">\r\n <span class=\"font-mono text-[0.58rem] text-[var(--gold)] block mb-1\">GAP 02 \/\/ OPERATIONS<\/span>\r\n <p class=\"font-ui text-xs text-[var(--ivory)] font-medium mb-1\">Undocumented Processes<\/p>\r\n <p class=\"font-ui text-xs text-[var(--slate)] leading-relaxed\">Key operational intelligence held in personal memory rather than institutional manuals.<\/p>\r\n <\/div>\r\n <div class=\"border hairline p-3.5 sm:p-4 bg-[var(--ground)] spec-card\">\r\n <span class=\"font-mono text-[0.58rem] text-[var(--gold)] block mb-1\">GAP 03 \/\/ IDENTITY<\/span>\r\n <p class=\"font-ui text-xs text-[var(--ivory)] font-medium mb-1\">Fragmented Identity<\/p>\r\n <p class=\"font-ui text-xs text-[var(--slate)] leading-relaxed\">Market presence lacking board-level gravitas and institutional alignment.<\/p>\r\n <\/div>\r\n <div class=\"border hairline p-4 bg-[var(--ground)] spec-card\">\r\n <span class=\"font-mono text-[0.58rem] text-[var(--gold)] block mb-1\">GAP 04 \/\/ INFRASTRUCTURE<\/span>\r\n <p class=\"font-ui text-xs text-[var(--ivory)] font-medium mb-1\">Disconnected Technology<\/p>\r\n <p class=\"font-ui text-xs text-[var(--slate)] leading-relaxed\">Digital systems operating in silos without unified governance control.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"p-4 sm:p-5 border hairline bg-[var(--ground)] font-mono text-[0.62rem] sm:text-[0.7rem] text-[var(--ivory)] flex items-center justify-between\">\r\n <span>PRIMUS MANDATE: CLOSING THE GAP<\/span>\r\n <span class=\"text-[var(--gold)]\">VERIFIED<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============ SECTION 02: CORPORATE ARCHITECTURE BLUEPRINT INTERFACE (INCLUDES 5TH DISCIPLINE) ============ -->\r\n<section id=\"framework\" class=\"relative py-16 sm:py-24 md:py-36 drafting-canvas\">\r\n <div class=\"max-w-[1440px] mx-auto px-4 sm:px-6 md:px-12\">\r\n \r\n <!-- Section Identifier Metadata -->\r\n <div class=\"flex items-center justify-between border-b hairline pb-3 mb-8 sm:mb-12 font-mono text-[0.52rem] sm:text-[0.58rem] reveal-architectural\">\r\n <div class=\"flex items-center gap-2 sm:gap-3\">\r\n <span class=\"text-[var(--gold)]\">SECTION 02<\/span>\r\n <span class=\"text-[var(--slate)]\">\/\/<\/span>\r\n <span class=\"text-[var(--ivory)] uppercase\">ARCHITECTURAL BLUEPRINT<\/span>\r\n <\/div>\r\n <span class=\"text-[var(--slate)] hidden sm:inline\">SPEC_MAP: SYSTEM_LAYERS<\/span>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-12 gap-6 md:gap-8 mb-6 sm:mb-8\">\r\n <div class=\"md:col-span-5 reveal-architectural\">\r\n <p class=\"font-mono text-[0.58rem] sm:text-[0.6rem] tracking-[0.2em] text-[var(--gold)] uppercase mb-2\">SYSTEM METHODOLOGY<\/p>\r\n <h2 class=\"font-display text-[clamp(1.5rem,4.5vw,2.5rem)] leading-tight text-[var(--ivory)] type-construct\">\r\n Corporate Architecture Blueprint.\r\n <\/h2>\r\n <\/div>\r\n <div class=\"md:col-span-7 flex items-end reveal-architectural\">\r\n <p class=\"font-ui text-xs sm:text-[0.88rem] leading-relaxed text-[var(--slate)] type-construct\">\r\n An enterprise is engineered layer by layer. Select an architectural layer below to examine its specification and deliverables.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Layer Mapping Selector Buttons (5 Disciplines) -->\r\n <div class=\"grid grid-cols-2 md:grid-cols-5 gap-2.5 sm:gap-3 mb-6 reveal-architectural\" id=\"config-buttons\">\r\n <button data-node=\"governance\" class=\"node-btn active p-3 sm:p-4 text-left\">\r\n <span class=\"font-mono text-[0.52rem] sm:text-[0.58rem] text-[var(--gold)] block mb-0.5 sm:mb-1\">LAYER 01<\/span>\r\n <span class=\"font-ui text-[0.7rem] sm:text-xs font-medium text-[var(--ivory)] uppercase block\">GOVERNANCE<\/span>\r\n <span class=\"font-mono text-[0.48rem] sm:text-[0.52rem] text-[var(--slate)] uppercase block mt-1\">STATUS: VERIFIED<\/span>\r\n <\/button>\r\n <button data-node=\"operations\" class=\"node-btn p-3 sm:p-4 text-left\">\r\n <span class=\"font-mono text-[0.52rem] sm:text-[0.58rem] text-[var(--slate)] block mb-0.5 sm:mb-1\">LAYER 02<\/span>\r\n <span class=\"font-ui text-[0.7rem] sm:text-xs font-medium text-[var(--ivory)] uppercase block\">OPERATIONS<\/span>\r\n <span class=\"font-mono text-[0.48rem] sm:text-[0.52rem] text-[var(--slate)] uppercase block mt-1\">STATUS: READY<\/span>\r\n <\/button>\r\n <button data-node=\"identity\" class=\"node-btn p-3 sm:p-4 text-left\">\r\n <span class=\"font-mono text-[0.52rem] sm:text-[0.58rem] text-[var(--slate)] block mb-0.5 sm:mb-1\">LAYER 03<\/span>\r\n <span class=\"font-ui text-[0.7rem] sm:text-xs font-medium text-[var(--ivory)] uppercase block\">IDENTITY<\/span>\r\n <span class=\"font-mono text-[0.48rem] sm:text-[0.52rem] text-[var(--slate)] uppercase block mt-1\">STATUS: READY<\/span>\r\n <\/button>\r\n <button data-node=\"digital\" class=\"node-btn p-3 sm:p-4 text-left\">\r\n <span class=\"font-mono text-[0.52rem] sm:text-[0.58rem] text-[var(--slate)] block mb-0.5 sm:mb-1\">LAYER 04<\/span>\r\n <span class=\"font-ui text-[0.7rem] sm:text-xs font-medium text-[var(--ivory)] uppercase block\">DIGITAL<\/span>\r\n <span class=\"font-mono text-[0.48rem] sm:text-[0.52rem] text-[var(--slate)] uppercase block mt-1\">STATUS: READY<\/span>\r\n <\/button>\r\n <button data-node=\"presence\" class=\"node-btn p-3 sm:p-4 text-left col-span-2 md:col-span-1\">\r\n <span class=\"font-mono text-[0.52rem] sm:text-[0.58rem] text-[var(--slate)] block mb-0.5 sm:mb-1\">LAYER 05<\/span>\r\n <span class=\"font-ui text-[0.7rem] sm:text-xs font-medium text-[var(--ivory)] uppercase block\">WEB PRESENCE<\/span>\r\n <span class=\"font-mono text-[0.48rem] sm:text-[0.52rem] text-[var(--slate)] uppercase block mt-1\">STATUS: READY<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- Blueprint Viewport Panel -->\r\n <div class=\"config-panel reveal p-4 sm:p-6 md:p-10 corner-mark corner-tl corner-br reveal-architectural\" id=\"config-panel\">\r\n <div class=\"config-content reveal\" id=\"config-content\" data-node=\"governance\">\r\n <div class=\"flex items-center justify-between border-b hairline pb-3 mb-4 sm:mb-6 font-mono text-[0.52rem] sm:text-[0.58rem]\">\r\n <span class=\"text-[var(--gold)]\">LAYER 01 \/\/ GOVERNANCE FOUNDATION<\/span>\r\n <span class=\"text-[var(--slate)]\">PRIMUS_GOVERNANCE_001<\/span>\r\n <\/div>\r\n \r\n <h3 class=\"font-display text-xl sm:text-2xl text-[var(--ivory)] mb-2 sm:mb-3 type-construct\">Constitutional & Policy Foundations<\/h3>\r\n <p class=\"font-ui text-xs sm:text-sm leading-relaxed text-[var(--slate)] max-w-3xl mb-6 sm:mb-8 type-construct\">\r\n Establishing board charters, localized statutory compliance matrices, constitutional bylaws, and shareholder framework structures. The foundational layer preventing structural conflict as capital scales.\r\n <\/p>\r\n\r\n <div class=\"grid md:grid-cols-3 gap-3 sm:gap-4\">\r\n <div class=\"spec-card\">\r\n <span class=\"font-mono text-[0.55rem] sm:text-[0.58rem] text-[var(--gold)] block mb-1\">DELIVERABLE 01<\/span>\r\n <p class=\"font-ui text-xs text-[var(--ivory)] font-medium mb-1\">Board Charters & Governance Manuals<\/p>\r\n <p class=\"font-ui text-[0.72rem] sm:text-[0.75rem] text-[var(--slate)] leading-relaxed\">Formal authority boundaries and legal governance documentation for executive boards.<\/p>\r\n <\/div>\r\n <div class=\"spec-card\">\r\n <span class=\"font-mono text-[0.55rem] sm:text-[0.58rem] text-[var(--gold)] block mb-1\">DELIVERABLE 02<\/span>\r\n <p class=\"font-ui text-xs text-[var(--ivory)] font-medium mb-1\">Statutory Compliance Architecture<\/p>\r\n <p class=\"font-ui text-[0.72rem] sm:text-[0.75rem] text-[var(--slate)] leading-relaxed\">Jurisdictional regulatory mapping and automated compliance matrices.<\/p>\r\n <\/div>\r\n <div class=\"spec-card\">\r\n <span class=\"font-mono text-[0.55rem] sm:text-[0.58rem] text-[var(--gold)] block mb-1\">DELIVERABLE 03<\/span>\r\n <p class=\"font-ui text-xs text-[var(--ivory)] font-medium mb-1\">Decision Rights Matrix (DOA)<\/p>\r\n <p class=\"font-ui text-[0.72rem] sm:text-[0.75rem] text-[var(--slate)] leading-relaxed\">Delegation of authority systems preventing decision bottlenecks at the founder level.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============ SECTION 03: EXECUTIVE LEADERSHIP OFFICE (NAME LINE-HEIGHT FIXED) ============ -->\r\n<section id=\"leadership\" class=\"relative py-16 sm:py-24 md:py-36 bg-[var(--panel)] border-t border-b hairline\">\r\n <div class=\"max-w-[1440px] mx-auto px-4 sm:px-6 md:px-12\">\r\n \r\n <!-- Section Identifier Metadata -->\r\n <div class=\"flex items-center justify-between border-b hairline pb-3 mb-8 sm:mb-12 font-mono text-[0.52rem] sm:text-[0.58rem] reveal-architectural\">\r\n <div class=\"flex items-center gap-2 sm:gap-3\">\r\n <span class=\"text-[var(--gold)]\">SECTION 03<\/span>\r\n <span class=\"text-[var(--slate)]\">\/\/<\/span>\r\n <span class=\"text-[var(--ivory)] uppercase\">LEADERSHIP OFFICE<\/span>\r\n <\/div>\r\n <span class=\"text-[var(--slate)] hidden sm:inline\">DOSSIER_REF: LEADERSHIP_AUTHORITY<\/span>\r\n <\/div>\r\n\r\n <div class=\"mb-8 sm:mb-12 reveal-architectural\">\r\n <p class=\"font-mono text-[0.58rem] sm:text-[0.6rem] tracking-[0.2em] text-[var(--gold)] uppercase mb-2\">EXECUTIVE PRACTICE<\/p>\r\n <h2 class=\"font-display text-[clamp(1.5rem,4.5vw,2.5rem)] leading-tight text-[var(--ivory)] type-construct\">\r\n The Leadership Office.\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"space-y-12 sm:space-y-16\">\r\n \r\n <!-- Executive Dossier 1: Khoghuelen Raguraman -->\r\n <div class=\"grid md:grid-cols-12 gap-6 md:gap-8 items-start reveal-architectural border-b hairline pb-10 sm:pb-12\">\r\n <div class=\"md:col-span-4\">\r\n <div class=\"portrait-frame max-w-sm md:max-w-none mx-auto\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/novatraxx.my\/wp-content\/uploads\/2026\/07\/COO-Full-Pic.jpeg\" \r\n alt=\"Khoghuelen Raguraman, Principal Architect\" \r\n class=\"portrait-img w-full h-[320px] sm:h-[380px] object-cover object-top\"\r\n loading=\"lazy\"\r\n >\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"md:col-span-8 dossier-panel corner-mark corner-tl\">\r\n <div class=\"border-b hairline pb-4 mb-5 flex flex-col space-y-1.5\">\r\n <!-- Tighter line height for mobile string wrapping -->\r\n <h3 class=\"font-display text-lg sm:text-2xl text-[var(--ivory)] leading-snug sm:leading-tight type-construct\">KHOGHUELEN RAGURAMAN<\/h3>\r\n <p class=\"font-mono text-[0.58rem] sm:text-[0.62rem] text-[var(--gold)] uppercase leading-normal\">PRINCIPAL ARCHITECT \/\/ PRIMUS CORPORATE ARCHITECTURE<\/p>\r\n <p class=\"font-mono text-[0.52rem] sm:text-[0.58rem] text-[var(--slate)] uppercase leading-normal\">CHIEF OPERATING OFFICER \/\/ NOVATRAXX SDN. BHD.<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid sm:grid-cols-2 gap-4 sm:gap-6 font-mono text-[0.58rem] sm:text-[0.6rem] mb-6\">\r\n <div>\r\n <span class=\"text-[var(--slate)] block mb-1\">AUTHORITY DOMAIN:<\/span>\r\n <ul class=\"text-[var(--ivory)] space-y-1\">\r\n <li>\u2022 Corporate Architecture<\/li>\r\n <li>\u2022 Legal & Regulatory Architecture<\/li>\r\n <li>\u2022 Operational Systems<\/li>\r\n <li>\u2022 Digital Infrastructure<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <span class=\"text-[var(--slate)] block mb-1\">RESPONSIBILITY:<\/span>\r\n <p class=\"text-[var(--slate)] leading-relaxed\">\r\n Directs internal corporate architecture, operational systems design, legal & regulatory architecture, and digital infrastructure integration.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"font-ui text-xs leading-relaxed text-[var(--slate)] border-t hairline pt-4\">\r\n Ensures every framework issued under Primus aligns with strict compliance, legal precision, and structural execution standards.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Executive Dossier 2: Raguraman Subramaniam -->\r\n <div class=\"grid md:grid-cols-12 gap-6 md:gap-8 items-start reveal-architectural\">\r\n <div class=\"md:col-span-4\">\r\n <div class=\"portrait-frame max-w-sm md:max-w-none mx-auto\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/novatraxx.my\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-07-at-16.47.20.jpeg\" \r\n alt=\"Raguraman Subramaniam, Managing Director & CEO\" \r\n class=\"portrait-img w-full h-[320px] sm:h-[380px] object-cover object-top\"\r\n loading=\"lazy\"\r\n >\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"md:col-span-8 dossier-panel corner-mark corner-br\">\r\n <div class=\"border-b hairline pb-4 mb-5 flex flex-col space-y-1.5\">\r\n <h3 class=\"font-display text-lg sm:text-2xl text-[var(--ivory)] leading-snug sm:leading-tight type-construct\">RAGURAMAN SUBRAMANIAM<\/h3>\r\n <p class=\"font-mono text-[0.58rem] sm:text-[0.62rem] text-[var(--gold)] uppercase leading-normal\">MANAGING DIRECTOR & CEO \/\/ NOVATRAXX SDN. BHD.<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid sm:grid-cols-2 gap-4 sm:gap-6 font-mono text-[0.58rem] sm:text-[0.6rem] mb-6\">\r\n <div>\r\n <span class=\"text-[var(--slate)] block mb-1\">AUTHORITY DOMAIN:<\/span>\r\n <ul class=\"text-[var(--ivory)] space-y-1\">\r\n <li>\u2022 Strategic Intelligence<\/li>\r\n <li>\u2022 Corporate Governance<\/li>\r\n <li>\u2022 Institutional Oversight<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <span class=\"text-[var(--slate)] block mb-1\">RESPONSIBILITY:<\/span>\r\n <p class=\"text-[var(--slate)] leading-relaxed\">\r\n Provides strategic direction and institutional oversight across all Novatraxx advisory practices.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"font-ui text-xs leading-relaxed text-[var(--slate)] border-t hairline pt-4\">\r\n Guarantees that Primus engagements are backed by enterprise risk advisory and high-level corporate intelligence.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============ SECTION 04: INSTITUTIONAL RELATIONSHIP DIAGRAM ============ -->\r\n<section id=\"structure\" class=\"relative py-16 sm:py-24 md:py-36 drafting-canvas\">\r\n <div class=\"max-w-[1440px] mx-auto px-4 sm:px-6 md:px-12\">\r\n \r\n <!-- Section Identifier Metadata -->\r\n <div class=\"flex items-center justify-between border-b hairline pb-3 mb-8 sm:mb-12 font-mono text-[0.52rem] sm:text-[0.58rem] reveal-architectural\">\r\n <div class=\"flex items-center gap-2 sm:gap-3\">\r\n <span class=\"text-[var(--gold)]\">SECTION 04<\/span>\r\n <span class=\"text-[var(--slate)]\">\/\/<\/span>\r\n <span class=\"text-[var(--ivory)] uppercase\">PARENT PRACTICE HIERARCHY<\/span>\r\n <\/div>\r\n <span class=\"text-[var(--slate)] hidden sm:inline\">ENTITY_MAP: NOVATRAXX_GROUP<\/span>\r\n <\/div>\r\n\r\n <div class=\"max-w-2xl mb-8 sm:mb-12 reveal-architectural\">\r\n <p class=\"font-mono text-[0.58rem] sm:text-[0.6rem] tracking-[0.2em] text-[var(--gold)] uppercase mb-2\">CORPORATE HIERARCHY<\/p>\r\n <h2 class=\"font-display text-[clamp(1.5rem,4.5vw,2.5rem)] leading-tight text-[var(--ivory)] type-construct\">\r\n Institutional Relationship.\r\n <\/h2>\r\n <\/div>\r\n\r\n <!-- Hierarchical Structure Diagram -->\r\n <div class=\"max-w-3xl mx-auto reveal-architectural font-mono text-[0.58rem] sm:text-[0.6rem]\">\r\n \r\n <!-- Top Level: Holding Entity -->\r\n <div class=\"border hairline bg-[var(--panel)] p-4 sm:p-6 text-center spec-card corner-mark corner-tl corner-br\">\r\n <span class=\"text-[var(--gold)] text-[0.52rem] sm:text-[0.55rem] uppercase block mb-1\">[ PARENT HOLDING ENTITY & HQ ]<\/span>\r\n <h3 class=\"font-display text-lg sm:text-xl text-[var(--ivory)] mb-1\">NOVATRAXX SDN. BHD.<\/h3>\r\n <p class=\"text-[var(--slate)]\">CORPORATE REGISTRATION \/\/ MALAYSIA<\/p>\r\n <\/div>\r\n\r\n <!-- Connecting Line -->\r\n <div class=\"w-px h-6 sm:h-8 bg-[var(--gold)] mx-auto opacity-40\"><\/div>\r\n\r\n <!-- Middle Level: Strategic Intelligence Division -->\r\n <div class=\"border hairline bg-[var(--ground)] p-3.5 sm:p-4 text-center max-w-xl mx-auto spec-card\">\r\n <span class=\"text-[var(--slate)] text-[0.52rem] sm:text-[0.55rem] uppercase block\">STRATEGIC INTELLIGENCE & RISK DIVISION<\/span>\r\n <p class=\"text-[var(--ivory)] mt-1\">Corporate Intelligence | Risk Advisory | Investigation<\/p>\r\n <\/div>\r\n\r\n <!-- Connecting Line -->\r\n <div class=\"w-px h-6 sm:h-8 bg-[var(--gold)] mx-auto opacity-40\"><\/div>\r\n\r\n <!-- Bottom Level: Primus Corporate Architecture -->\r\n <div class=\"border hairline bg-[var(--panel)] p-4 sm:p-6 text-center border-[var(--gold)] spec-card corner-mark corner-tl corner-br\">\r\n <span class=\"text-[var(--gold)] text-[0.52rem] sm:text-[0.55rem] uppercase block mb-1\">[ SPECIALIZED PRACTICE DIVISION ]<\/span>\r\n <h3 class=\"font-display text-lg sm:text-xl text-[var(--ivory)] mb-1\">PRIMUS CORPORATE ARCHITECTURE<\/h3>\r\n <p class=\"text-[var(--slate)]\">Governance Systems | Enterprise Identity | Digital Infrastructure<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============ SECTION 05: CONFIDENTIAL BRIEFING TERMINAL ============ -->\r\n<section id=\"portal\" class=\"relative py-16 sm:py-24 md:py-36 bg-[var(--panel)] border-t hairline\">\r\n <div class=\"max-w-[1440px] mx-auto px-4 sm:px-6 md:px-12\">\r\n \r\n <!-- Section Identifier Metadata -->\r\n <div class=\"flex items-center justify-between border-b hairline pb-3 mb-8 sm:mb-12 font-mono text-[0.52rem] sm:text-[0.58rem] reveal-architectural\">\r\n <div class=\"flex items-center gap-2 sm:gap-3\">\r\n <span class=\"text-[var(--gold)]\">SECTION 05<\/span>\r\n <span class=\"text-[var(--slate)]\">\/\/<\/span>\r\n <span class=\"text-[var(--ivory)] uppercase\">EXECUTIVE TERMINAL<\/span>\r\n <\/div>\r\n <span class=\"text-[var(--slate)] hidden sm:inline\">CHANNEL: PRIVATE_REVIEW<\/span>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-12 gap-8 md:gap-12\">\r\n <div class=\"md:col-span-5 reveal-architectural\">\r\n <p class=\"font-mono text-[0.58rem] sm:text-[0.6rem] tracking-[0.2em] text-[var(--gold)] uppercase mb-2 sm:mb-3\">EXECUTIVE ENGAGEMENT<\/p>\r\n <h2 class=\"font-display text-[clamp(1.5rem,4.5vw,2.5rem)] leading-tight text-[var(--ivory)] mb-4 sm:mb-6 type-construct\">\r\n Institutional Review Request.\r\n <\/h2>\r\n <p class=\"font-ui text-xs sm:text-sm leading-relaxed text-[var(--slate)] mb-6\">\r\n Provide an overview of your current enterprise structure. Primus reviews each submission to determine the appropriate architectural approach.\r\n <\/p>\r\n\r\n <div class=\"border hairline p-3.5 sm:p-4 bg-[var(--ground)] font-mono text-[0.55rem] sm:text-[0.58rem] space-y-2 corner-mark corner-tl\">\r\n <div class=\"flex justify-between\"><span class=\"text-[var(--slate)]\">SECURITY STATUS:<\/span> <span class=\"text-[var(--gold)]\">PRIVATE REVIEW CHANNEL<\/span><\/div>\r\n <div class=\"flex justify-between\"><span class=\"text-[var(--slate)]\">CASE REFERENCE:<\/span> <span class=\"text-[var(--ivory)]\">GENERATED UPON TRANSMISSION<\/span><\/div>\r\n <div class=\"flex justify-between\"><span class=\"text-[var(--slate)]\">OVERSIGHT:<\/span> <span class=\"text-[var(--ivory)]\">LEADERSHIP OFFICE DIRECT<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"md:col-span-7\">\r\n <form id=\"intake-form\" class=\"reveal-architectural space-y-4 sm:space-y-6\" data-endpoint=\"73ff5d8c-147e-424e-966e-7cdfb6942a8b\">\r\n \r\n <div class=\"flex flex-col\">\r\n <label class=\"font-mono text-[0.55rem] sm:text-[0.58rem] tracking-[0.15em] text-[var(--slate)] uppercase mb-1.5\" for=\"company\">COMPANY NAME<\/label>\r\n <input id=\"company\" name=\"company\" type=\"text\" required\r\n class=\"field-input w-full py-3 px-4 font-ui text-[16px] text-[var(--ivory)]\"\r\n placeholder=\"Registered business entity name\">\r\n <\/div>\r\n\r\n <div class=\"flex flex-col\">\r\n <label class=\"font-mono text-[0.55rem] sm:text-[0.58rem] tracking-[0.15em] text-[var(--slate)] uppercase mb-1.5\" for=\"founder\">LEADERSHIP CONTACT<\/label>\r\n <input id=\"founder\" name=\"founder\" type=\"text\" required\r\n class=\"field-input w-full py-3 px-4 font-ui text-[16px] text-[var(--ivory)]\"\r\n placeholder=\"Full name & title (Managing Director \/ Founder)\">\r\n <\/div>\r\n\r\n <div class=\"flex flex-col\">\r\n <label class=\"font-mono text-[0.55rem] sm:text-[0.58rem] tracking-[0.15em] text-[var(--slate)] uppercase mb-1.5\" for=\"bottleneck\">CURRENT STRUCTURAL CHALLENGE<\/label>\r\n <textarea id=\"bottleneck\" name=\"bottleneck\" rows=\"4\" required\r\n class=\"field-input w-full py-3 px-4 font-ui text-[16px] text-[var(--ivory)] resize-none\"\r\n placeholder=\"Describe the governance, operational, or identity bottleneck requiring review.\"><\/textarea>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"cta-frame w-full sm:w-auto inline-flex items-center justify-center px-8 py-4\">\r\n <span class=\"font-mono text-[0.62rem] tracking-[0.2em] text-[var(--ivory)] uppercase\" id=\"submit-label\">\r\n [ TRANSMIT MANDATE BRIEF ]\r\n <\/span>\r\n <\/button>\r\n \r\n <p class=\"font-mono text-[0.6rem] text-[var(--slate)]\" id=\"form-status\"><\/p>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============ FOOTER ============ -->\r\n<footer class=\"border-t hairline py-6 sm:py-8 bg-[var(--ground)]\">\r\n <div class=\"max-w-[1440px] mx-auto px-4 sm:px-6 md:px-12 font-mono text-[0.55rem] sm:text-[0.58rem] text-[var(--slate)]\">\r\n <div class=\"flex flex-col sm:flex-row items-center justify-between gap-4\">\r\n <div class=\"flex flex-wrap items-center justify-center sm:justify-start gap-2 sm:gap-3 text-center sm:text-left\">\r\n <span class=\"text-[var(--ivory)] font-medium\">PRIMUS CORPORATE ARCHITECTURE<\/span>\r\n <span class=\"hidden sm:inline text-[var(--hair)]\">|<\/span>\r\n <span>A PRACTICE OF NOVATRAXX SDN. BHD.<\/span>\r\n <\/div>\r\n\r\n <div class=\"flex items-center gap-4\">\r\n <a href=\"https:\/\/www.novatraxx.my\" target=\"_blank\" rel=\"noopener\" class=\"text-[var(--gold)] hover:underline transition-colors uppercase tracking-wider\">\r\n [ NOVATRAXX HQ \u2197 ]\r\n <\/a>\r\n <span class=\"text-[var(--hair)]\">|<\/span>\r\n <span>\u00a9 2026 ALL RIGHTS RESERVED<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n\r\n \/\/ Mobile Drawer Navigation Logic\r\n const mobileDrawer = document.getElementById('mobile-drawer');\r\n const openDrawerBtn = document.getElementById('open-drawer');\r\n const closeDrawerBtn = document.getElementById('close-drawer');\r\n const drawerLinks = document.querySelectorAll('.mobile-drawer-link');\r\n\r\n if (openDrawerBtn && mobileDrawer) {\r\n openDrawerBtn.addEventListener('click', () => {\r\n mobileDrawer.classList.add('open');\r\n document.body.style.overflow = 'hidden';\r\n });\r\n }\r\n\r\n function closeDrawer() {\r\n if (mobileDrawer) {\r\n mobileDrawer.classList.remove('open');\r\n document.body.style.overflow = '';\r\n }\r\n }\r\n\r\n if (closeDrawerBtn) closeDrawerBtn.addEventListener('click', closeDrawer);\r\n drawerLinks.forEach(link => link.addEventListener('click', closeDrawer));\r\n\r\n \/\/ Cursor HUD coordinate tracking\r\n const hudXY = document.getElementById('hud-xy');\r\n window.addEventListener('mousemove', (e) => {\r\n if (hudXY) {\r\n const x = String(e.clientX).padStart(3, '0');\r\n const y = String(e.clientY).padStart(3, '0');\r\n hudXY.textContent = `${x}.00 \/ ${y}.00`;\r\n }\r\n });\r\n\r\n \/\/ LIVING CAD CANVAS MOUSE INTERACTION SYSTEM (PAUSED ON TOUCH)\r\n const isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);\r\n const canvas = document.getElementById('cad-interactive-canvas');\r\n\r\n if (canvas && !isTouchDevice) {\r\n const ctx = canvas.getContext('2d');\r\n let mouseX = -1000, mouseY = -1000;\r\n\r\n function resizeCanvas() {\r\n const heroSec = document.getElementById('top');\r\n if (heroSec) {\r\n canvas.width = heroSec.offsetWidth;\r\n canvas.height = heroSec.offsetHeight;\r\n }\r\n }\r\n resizeCanvas();\r\n window.addEventListener('resize', resizeCanvas);\r\n\r\n window.addEventListener('mousemove', (e) => {\r\n const rect = canvas.getBoundingClientRect();\r\n mouseX = e.clientX - rect.left;\r\n mouseY = e.clientY - rect.top;\r\n });\r\n\r\n function drawCadLight() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n if (mouseX >= 0 && mouseY >= 0 && mouseX <= canvas.width && mouseY <= canvas.height) {\r\n const grad = ctx.createRadialGradient(mouseX, mouseY, 10, mouseX, mouseY, 180);\r\n grad.addColorStop(0, 'rgba(197, 160, 89, 0.08)');\r\n grad.addColorStop(0.5, 'rgba(197, 160, 89, 0.02)');\r\n grad.addColorStop(1, 'transparent');\r\n\r\n ctx.fillStyle = grad;\r\n ctx.beginPath();\r\n ctx.arc(mouseX, mouseY, 180, 0, Math.PI * 2);\r\n ctx.fill();\r\n\r\n ctx.strokeStyle = 'rgba(197, 160, 89, 0.15)';\r\n ctx.lineWidth = 1;\r\n ctx.beginPath();\r\n ctx.moveTo(mouseX - 20, mouseY); ctx.lineTo(mouseX + 20, mouseY);\r\n ctx.moveTo(mouseX, mouseY - 20); ctx.lineTo(mouseX, mouseY + 20);\r\n ctx.stroke();\r\n }\r\n requestAnimationFrame(drawCadLight);\r\n }\r\n drawCadLight();\r\n }\r\n\r\n \/\/ Smooth scroll init\r\n if (window.Lenis) {\r\n const lenis = new Lenis({ duration: 0.9, smoothWheel: true });\r\n function raf(time) { lenis.raf(time); requestAnimationFrame(raf); }\r\n requestAnimationFrame(raf);\r\n }\r\n\r\n \/\/ Preloader Sequence\r\n const preloader = document.getElementById('preloader');\r\n const preloadBar = document.getElementById('preload-bar');\r\n const preloadPc = document.getElementById('preload-pc');\r\n const seq1 = document.getElementById('seq-1');\r\n const seq2 = document.getElementById('seq-2');\r\n const seq3 = document.getElementById('seq-3');\r\n const stroke1 = document.getElementById('svg-stroke-1');\r\n const stroke2 = document.getElementById('svg-stroke-2');\r\n\r\n let progress = 0;\r\n const pInterval = setInterval(() => {\r\n progress += 5;\r\n if (progress > 100) progress = 100;\r\n if (preloadBar) preloadBar.style.width = `${progress}%`;\r\n if (preloadPc) preloadPc.textContent = `${String(progress).padStart(2, '0')}%`;\r\n \r\n if (progress === 100) clearInterval(pInterval);\r\n }, 90);\r\n\r\n setTimeout(() => { if (seq1) seq1.classList.add('active'); }, 100);\r\n setTimeout(() => { \r\n if (seq2) seq2.classList.add('active'); \r\n if (stroke1) stroke1.classList.add('drawn');\r\n if (stroke2) stroke2.classList.add('drawn');\r\n }, 500);\r\n setTimeout(() => { if (seq3) seq3.classList.add('active'); }, 1000);\r\n\r\n setTimeout(() => {\r\n if (preloader) preloader.classList.add('lifted');\r\n }, 2200);\r\n\r\n \/\/ Scroll reveal observer\r\n const revealEls = document.querySelectorAll('.reveal-architectural');\r\n const typeConstructs = document.querySelectorAll('.type-construct');\r\n\r\n const io = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if (e.isIntersecting) {\r\n e.target.classList.add('is-visible');\r\n const internalConstructs = e.target.querySelectorAll('.type-construct');\r\n internalConstructs.forEach((c, idx) => {\r\n setTimeout(() => c.classList.add('is-constructed'), idx * 120);\r\n });\r\n }\r\n });\r\n }, { threshold: 0.08 });\r\n\r\n revealEls.forEach(el => io.observe(el));\r\n typeConstructs.forEach(el => {\r\n if (!el.closest('.reveal-architectural')) {\r\n const singleIo = new IntersectionObserver((entries) => {\r\n entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('is-constructed'); });\r\n }, { threshold: 0.1 });\r\n singleIo.observe(el);\r\n }\r\n });\r\n\r\n \/\/ Vertical Scroll Navigation Indicator\r\n const sections = ['top', 'gap', 'framework', 'leadership', 'structure', 'portal'];\r\n const scrollNavNodes = document.querySelectorAll('.scroll-nav-node');\r\n\r\n window.addEventListener('scroll', () => {\r\n let current = 'top';\r\n sections.forEach(id => {\r\n const sec = document.getElementById(id);\r\n if (sec) {\r\n const top = sec.offsetTop - 200;\r\n if (window.scrollY >= top) current = id;\r\n }\r\n });\r\n scrollNavNodes.forEach(node => {\r\n node.classList.toggle('active', node.dataset.target === current);\r\n });\r\n });\r\n\r\n scrollNavNodes.forEach(node => {\r\n node.addEventListener('click', () => {\r\n const targetSec = document.getElementById(node.dataset.target);\r\n if (targetSec) targetSec.scrollIntoView({ behavior: 'smooth' });\r\n });\r\n });\r\n\r\n \/\/ Blueprint Panel Switcher (Now includes 5 Disciplines)\r\n const nodeData = {\r\n governance: {\r\n layer: 'LAYER 01 \/\/ GOVERNANCE FOUNDATION',\r\n code: 'PRIMUS_GOVERNANCE_001',\r\n title: 'Constitutional & Policy Foundations',\r\n body: 'Establishing board charters, localized statutory compliance matrices, constitutional bylaws, and shareholder framework structures. The foundational layer preventing structural conflict as capital scales.',\r\n del1_t: 'Board Charters & Governance Manuals',\r\n del1_d: 'Formal authority boundaries and legal governance documentation for executive boards.',\r\n del2_t: 'Statutory Compliance Architecture',\r\n del2_d: 'Jurisdictional regulatory mapping and automated compliance matrices.',\r\n del3_t: 'Decision Rights Matrix (DOA)',\r\n del3_d: 'Delegation of authority systems preventing decision bottlenecks at the founder level.'\r\n },\r\n operations: {\r\n layer: 'LAYER 02 \/\/ OPERATIONAL SYSTEMS',\r\n code: 'PRIMUS_STD_OPS',\r\n title: 'Standard Operating Environments & Process Control',\r\n body: 'Codifying operating procedures, accountability grids, and execution discipline. Building systemic workflows that allow the enterprise to perform consistently without founder intervention.',\r\n del1_t: 'Standard Operating Procedures (SOPs)',\r\n del1_d: 'Codified operational manuals for business continuity and training.',\r\n del2_t: 'Accountability & Execution Grids',\r\n del2_d: 'Clear KPI and responsibility mapping across all operational tiers.',\r\n del3_t: 'Process Control Infrastructure',\r\n del3_d: 'Monitoring mechanisms ensuring continuous operational quality.'\r\n },\r\n identity: {\r\n layer: 'LAYER 03 \/\/ CORPORATE IDENTITY',\r\n code: 'PRIMUS_STD_ID',\r\n title: 'Boardroom Presence & Brand Governance',\r\n body: 'Engineering formal brand assets, boardroom presentation standards, stationery systems, and brand control manuals that project immutable authority to markets and investors.',\r\n del1_t: 'Governed Asset Libraries',\r\n del1_d: 'Centralized, protected repositories for all official brand assets.',\r\n del2_t: 'Boardroom & Investor Assets',\r\n del2_d: 'High-impact presentation decks and corporate reporting templates.',\r\n del3_t: 'Institutional Brand Guidelines',\r\n del3_d: 'Strict visual standards manuals preserving market gravitas.'\r\n },\r\n digital: {\r\n layer: 'LAYER 04 \/\/ DIGITAL INFRASTRUCTURE',\r\n code: 'PRIMUS_STD_DIG',\r\n title: 'Enterprise Platforms & Security Foundations',\r\n body: 'Deploying high-performance web platforms, integrated cloud software, and structured internal communication networks designed for enterprise reliability.',\r\n del1_t: 'Engineered Web Platforms',\r\n del1_d: 'Bespoke web infrastructure built for performance, security, and scale.',\r\n del2_t: 'Cloud Systems Architecture',\r\n del2_d: 'Secure cloud environment setup and data access controls.',\r\n del3_t: 'Digital Infrastructure Audits',\r\n del3_d: 'Continuous vulnerability assessment and system optimization.'\r\n },\r\n presence: {\r\n layer: 'LAYER 05 \/\/ DIGITAL PRESENCE DEVELOPMENT',\r\n code: 'PRIMUS_WEB_PRESENCE',\r\n title: 'Corporate Website & External Digital Identity',\r\n body: 'Designing and engineering high-authority corporate web platforms that establish institutional identity, articulate external-facing corporate structures, and present executive-level presence to global markets.',\r\n del1_t: 'High-Authority Corporate Portals',\r\n del1_d: 'Bespoke corporate web architectures built for enterprise positioning and board-level credibility.',\r\n del2_t: 'Governed Visual Systems & Media',\r\n del2_d: 'Structured digital identity frameworks ensuring brand alignment across all external communications.',\r\n del3_t: 'External Governance & Web Security',\r\n del3_d: 'Secure, continuous web infrastructure designed for confidential investor and client engagement.'\r\n }\r\n };\r\n\r\n const buttons = document.querySelectorAll('#config-buttons .node-btn');\r\n const panel = document.getElementById('config-panel');\r\n const content = document.getElementById('config-content');\r\n\r\n buttons.forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n const node = btn.dataset.node;\r\n if (content.dataset.node === node) return;\r\n\r\n buttons.forEach(b => {\r\n b.classList.remove('active');\r\n b.querySelector('span:first-child').style.color = 'var(--slate)';\r\n });\r\n btn.classList.add('active');\r\n btn.querySelector('span:first-child').style.color = 'var(--gold)';\r\n\r\n panel.classList.add('in-transition');\r\n content.classList.remove('reveal');\r\n\r\n setTimeout(() => {\r\n const d = nodeData[node];\r\n content.innerHTML = `\r\n <div class=\"flex items-center justify-between border-b hairline pb-3 mb-4 sm:mb-6 font-mono text-[0.52rem] sm:text-[0.58rem]\">\r\n <span class=\"text-[var(--gold)]\">${d.layer}<\/span>\r\n <span class=\"text-[var(--slate)]\">${d.code}<\/span>\r\n <\/div>\r\n <h3 class=\"font-display text-xl sm:text-2xl text-[var(--ivory)] mb-2 sm:mb-3 type-construct is-constructed\">${d.title}<\/h3>\r\n <p class=\"font-ui text-xs sm:text-sm leading-relaxed text-[var(--slate)] max-w-3xl mb-6 sm:mb-8 type-construct is-constructed\">${d.body}<\/p>\r\n <div class=\"grid md:grid-cols-3 gap-3 sm:gap-4\">\r\n <div class=\"spec-card\">\r\n <span class=\"font-mono text-[0.55rem] sm:text-[0.58rem] text-[var(--gold)] block mb-1\">DELIVERABLE 01<\/span>\r\n <p class=\"font-ui text-xs text-[var(--ivory)] font-medium mb-1\">${d.del1_t}<\/p>\r\n <p class=\"font-ui text-[0.72rem] sm:text-[0.75rem] text-[var(--slate)] leading-relaxed\">${d.del1_d}<\/p>\r\n <\/div>\r\n <div class=\"spec-card\">\r\n <span class=\"font-mono text-[0.55rem] sm:text-[0.58rem] text-[var(--gold)] block mb-1\">DELIVERABLE 02<\/span>\r\n <p class=\"font-ui text-xs text-[var(--ivory)] font-medium mb-1\">${d.del2_t}<\/p>\r\n <p class=\"font-ui text-[0.72rem] sm:text-[0.75rem] text-[var(--slate)] leading-relaxed\">${d.del2_d}<\/p>\r\n <\/div>\r\n <div class=\"spec-card\">\r\n <span class=\"font-mono text-[0.55rem] sm:text-[0.58rem] text-[var(--gold)] block mb-1\">DELIVERABLE 03<\/span>\r\n <p class=\"font-ui text-xs text-[var(--ivory)] font-medium mb-1\">${d.del3_t}<\/p>\r\n <p class=\"font-ui text-[0.72rem] sm:text-[0.75rem] text-[var(--slate)] leading-relaxed\">${d.del3_d}<\/p>\r\n <\/div>\r\n <\/div>\r\n `;\r\n content.dataset.node = node;\r\n content.classList.add('reveal');\r\n setTimeout(() => panel.classList.remove('in-transition'), 200);\r\n }, 200);\r\n });\r\n });\r\n\r\n \/\/ Form Submission\r\n const form = document.getElementById('intake-form');\r\n const statusEl = document.getElementById('form-status');\r\n const submitLabel = document.getElementById('submit-label');\r\n\r\n if (form) {\r\n form.addEventListener('submit', async (e) => {\r\n e.preventDefault();\r\n const endpointToken = form.dataset.endpoint;\r\n const endpoint = `https:\/\/hooks.novatraxx.my\/intake\/${endpointToken}`;\r\n\r\n const payload = {\r\n company: document.getElementById('company').value,\r\n founder: document.getElementById('founder').value,\r\n bottleneck: document.getElementById('bottleneck').value\r\n };\r\n\r\n submitLabel.textContent = '[ TRANSMITTING MANDATE... ]';\r\n statusEl.textContent = '';\r\n\r\n try {\r\n await fetch(endpoint, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify(payload)\r\n });\r\n submitLabel.textContent = '[ TRANSMISSION COMPLETE ]';\r\n statusEl.textContent = 'Mandate briefing logged under case reference. Executive review initiated.';\r\n form.reset();\r\n } catch (err) {\r\n submitLabel.textContent = '[ TRANSMIT MANDATE BRIEF ]';\r\n statusEl.textContent = 'Transmission failure. Please re-verify parameters and submit.';\r\n }\r\n });\r\n }\r\n\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Primus Corporate Architecture \u2014 by Novatraxx SYS_COORD: 000.00 \/ 000.00 | ARCH_STATE: VERIFIED 01 02 03 04 05 06 PRIMUS \/\/ SYSTEM MENU [ CLOSE \u2715 ] 01 \/\/ DIAGNOSTIC 02 \/\/ BLUEPRINT 03 \/\/ LEADERSHIP 04 \/\/ PARENTAGE 05 \/\/ MANDATE OPERATING UNDER PARENT HQ: NOVATRAXX SDN. BHD. \u2197 PRIMUS ARCHITECTURAL SYSTEM 00% GRID […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/primus.novatraxx.my\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/primus.novatraxx.my\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/primus.novatraxx.my\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/primus.novatraxx.my\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/primus.novatraxx.my\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":94,"href":"https:\/\/primus.novatraxx.my\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":125,"href":"https:\/\/primus.novatraxx.my\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/125"}],"wp:attachment":[{"href":"https:\/\/primus.novatraxx.my\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}