Packven - The Pilot Protocol<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --cBlueSoft: #89CFF0; \n --cDark: #1a1a1a;\n }\n\n body { margin: 0; font-family: 'Outfit', sans-serif; }\n\n \/* --- HEADER CONTAINER --- *\/\n .pvLiveHeader {\n position: fixed;\n top: 0; left: 0; width: 100%;\n padding: 0 30px;\n height: 50px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background-color: rgba(255, 255, 255, 0.98);\n backdrop-filter: blur(5px);\n z-index: 999999;\n border-bottom: 1px solid rgba(0,0,0,0.05);\n box-sizing: border-box;\n }\n\n \/* --- BRAND (Left Side) --- *\/\n .pvBrand {\n display: flex;\n align-items: center;\n text-decoration: none;\n }\n \n #headerLogo {\n height: 32px; \n width: auto;\n display: block;\n object-fit: fill;\n vertical-align: middle;\n transition: opacity 0.2s ease;\n }\n \n .pvBrand:hover #headerLogo { \n opacity: 0.8; \n }\n\n \/* --- DESKTOP NAV (Right Side) --- *\/\n .pvNavDesktop {\n display: flex;\n align-items: center;\n gap: 25px; \n height: 100%;\n }\n\n .navGroup {\n position: relative;\n height: 100%;\n display: flex;\n align-items: center;\n }\n\n .pvLink {\n text-decoration: none;\n color: var(--cDark);\n font-weight: 500;\n font-size: 14px !important;\n transition: color 0.2s ease;\n padding: 10px 0;\n cursor: pointer;\n }\n .pvLink:hover { color: var(--cBlueSoft); }\n\n \/* --- DROPDOWNS (Desktop) --- *\/\n .dropdownContent {\n position: absolute;\n top: 100%; left: 50%;\n transform: translateX(-50%) translateY(10px);\n background-color: white;\n min-width: 140px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n border-radius: 6px;\n padding: 5px 0;\n border: 1px solid #f0f0f0;\n opacity: 0; visibility: hidden;\n transition: all 0.2s ease;\n z-index: 100000;\n }\n\n @media (min-width: 769px) {\n .navGroup:hover .dropdownContent {\n opacity: 1; visibility: visible;\n transform: translateX(-50%) translateY(0);\n }\n }\n\n .dpLink {\n display: block; padding: 8px 15px;\n color: #555; text-decoration: none;\n font-size: 13px !important;\n font-weight: 500; white-space: nowrap;\n }\n\n .dpLink:hover { background-color: #f9f9f9; color: var(--cBlueSoft); }\n\n \/* --- MOBILE MENU --- *\/\n .mobileToggle {\n display: none;\n font-size: 24px;\n cursor: pointer;\n color: var(--cDark);\n }\n\n .mobileMenuContainer {\n display: none; \n position: fixed;\n top: 65px; left: 0; width: 100%;\n background: white;\n border-bottom: 1px solid #eee;\n flex-direction: column;\n padding: 20px;\n box-shadow: 0 10px 20px rgba(0,0,0,0.05);\n z-index: 99998;\n }\n\n \/* --- RESPONSIVENESS --- *\/\n @media (max-width: 768px) {\n .pvNavDesktop { display: none; } \n .mobileToggle { display: block; }\n\n .mobLink {\n display: block;\n padding: 12px 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--cDark);\n text-decoration: none;\n border-bottom: 1px solid #f5f5f5;\n }\n\n .mobSubLink {\n display: block;\n padding: 8px 0 8px 20px; \n font-size: 14px;\n color: #666;\n text-decoration: none;\n background: #fafafa;\n }\n\n .mobLink:hover, .mobSubLink:hover { color: var(--cBlueSoft); }\n }\n <\/style>\n<\/head>\n<body data-rsssl=1 data-rsssl=1 data-rsssl=1>\n\n<header class=\"pvLiveHeader\">\n <a href=\"https:\/\/packven.com\" class=\"pvBrand\">\n <img decoding=\"async\" src=\"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/Packven_App-Icon_Black_2048.png\" alt=\"Packven Logo\" id=\"headerLogo\">\n <\/a>\n\n <nav class=\"pvNavDesktop\">\n <div class=\"navGroup\">\n <a href=\"\/about\" class=\"pvLink\">About<\/a>\n <div class=\"dropdownContent\">\n <a href=\"https:\/\/packven.com\/about-us\/\" class=\"dpLink\">About Us<\/a>\n <a href=\"\/faq\" class=\"dpLink\">FAQ<\/a>\n <\/div>\n <\/div>\n\n <div class=\"navGroup\">\n <a href=\"https:\/\/packven.com\/packven-research\/\" class=\"pvLink\">Research<\/a>\n <\/div>\n\n <div class=\"navGroup\">\n <a href=\"\/#contact-target\" class=\"pvLink\">Contact<\/a>\n <\/div>\n \n <div class=\"navGroup\">\n <a href=\"https:\/\/packven.com\/client-portal\/\" class=\"pvLink\">Pilot Protocol<\/a>\n <\/div>\n <\/nav>\n \n <div class=\"mobileToggle\" id=\"mobileToggleButton\">\u2630<\/div>\n<\/header>\n\n<nav id=\"mobileMenu\" class=\"mobileMenuContainer\">\n <a href=\"\/about\" class=\"mobLink\">About<\/a>\n <a href=\"https:\/\/packven.com\/about-us\/\" class=\"mobSubLink\">\u21b3 About Us<\/a>\n <a href=\"\/faq\" class=\"mobSubLink\">\u21b3 FAQ<\/a>\n <a href=\"https:\/\/packven.com\/packven-research\/\" class=\"mobLink\">Research<\/a>\n <a href=\"\/#contact-target\" class=\"mobLink\">Contact<\/a>\n <a href=\"https:\/\/packven.com\/client-portal\/\" class=\"mobLink\">Pilot Protocol<\/a>\n<\/nav>\n\n<script>\n \/**\n * Packven Header Optimizer\n * Handles navigation interactions and mobile state.\n *\/\n const packvenHeaderOptimizer = {\n domNodes: {},\n\n init: function() {\n this.cacheDom();\n this.bindEvents();\n },\n\n cacheDom: function() {\n this.domNodes = {\n mobileMenu: document.getElementById('mobileMenu'),\n toggleButton: document.getElementById('mobileToggleButton')\n };\n },\n\n bindEvents: function() {\n if (this.domNodes.toggleButton) {\n this.domNodes.toggleButton.addEventListener('click', () => this.toggleMobileMenu());\n }\n },\n\n toggleMobileMenu: function() {\n const isVisible = this.domNodes.mobileMenu.style.display === 'flex';\n this.domNodes.mobileMenu.style.display = isVisible ? 'none' : 'flex';\n }\n };\n\n \/\/ Execute when DOM is ready\n document.addEventListener('DOMContentLoaded', () => packvenHeaderOptimizer.init());\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7d57dbe e-flex e-con-boxed e-con e-parent\" data-id=\"7d57dbe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2049850 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"2049850\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n \/* Scoped to hero container to prevent WordPress conflicts *\/\n .heroClean {\n --cBlueSoft: #89CFF0; \n --cDark: #1a1a1a;\n --cRed: #F88379;\n \/* Seamless pure white background *\/\n background-color: #ffffff !important;\n position: relative;\n width: 100%;\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 5%;\n overflow: hidden;\n font-family: 'Outfit', sans-serif;\n }\n\n .heroClean *, .heroClean *::before, .heroClean *::after { \n box-sizing: border-box; \n }\n\n \/* --- ANIMATED BACKGROUND LAYER --- *\/\n .animatedBgContainer {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n overflow: hidden;\n background-color: #ffffff; \/* Ensures orbs have a pure white canvas to multiply against *\/\n }\n\n .orb {\n position: absolute;\n border-radius: 50%;\n mix-blend-mode: multiply; \/* Multiplies vibrant colors against white for maximum saturation *\/\n z-index: 2;\n }\n\n \/* Brighter, Highly Saturated Colors *\/\n .orb1 {\n width: 600px; height: 600px;\n background: radial-gradient(circle, rgba(255, 42, 85, 0.45) 0%, rgba(255, 42, 85, 0) 70%); \/* Vibrant Magenta\/Red *\/\n filter: blur(60px); top: 15%; left: 10%;\n animation: float1 20s ease-in-out infinite;\n }\n .orb2 {\n width: 700px; height: 700px;\n background: radial-gradient(circle, rgba(255, 153, 0, 0.4) 0%, rgba(255, 153, 0, 0) 70%); \/* Bright Tangerine *\/\n filter: blur(70px); top: 20%; right: 15%;\n animation: float2 18s ease-in-out infinite;\n }\n .orb3 {\n width: 650px; height: 650px;\n background: radial-gradient(circle, rgba(0, 195, 255, 0.45) 0%, rgba(0, 195, 255, 0) 70%); \/* Vibrant Cyan *\/\n filter: blur(65px); bottom: 20%; left: 20%;\n animation: float3 22s ease-in-out infinite;\n }\n .orb4 {\n width: 750px; height: 750px;\n background: radial-gradient(circle, rgba(10, 205, 95, 0.4) 0%, rgba(10, 205, 95, 0) 70%); \/* Electric Green *\/\n filter: blur(80px); bottom: 10%; right: 10%;\n animation: float4 25s ease-in-out infinite;\n }\n .orb5 {\n width: 400px; height: 400px;\n background: radial-gradient(circle, rgba(138, 43, 226, 0.35) 0%, rgba(138, 43, 226, 0) 70%); \/* Bright Violet *\/\n filter: blur(50px); top: 60%; left: 50%;\n animation: float5 16s ease-in-out infinite;\n }\n\n .particlesContainer {\n position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3;\n }\n\n .waveLines {\n position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.4; z-index: 5;\n mix-blend-mode: multiply;\n }\n\n \/* Subtle white fade over the animations behind the text, fading to transparent *\/\n .heroOverlay {\n position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;\n background: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 45%, rgba(255,255,255,0) 100%);\n pointer-events: none;\n }\n\n \/* --- CONTENT LAYER --- *\/\n .heroContent {\n position: relative; z-index: 20;\n max-width: 650px;\n }\n\n .brandTag {\n display: inline-block; font-size: 0.85rem; font-weight: 900;\n letter-spacing: 2px; text-transform: uppercase;\n color: var(--cRed); margin-bottom: 20px;\n }\n\n .heroLogoImg {\n display: block; max-width: 100%; height: auto;\n max-height: clamp(40px, 6vw, 80px); \n margin-bottom: 20px; margin-top: -10px;\n will-change: transform, opacity;\n }\n\n .heroDesc {\n font-size: 1.25rem; line-height: 1.6; color: #334155;\n margin-bottom: 50px; font-weight: 400; max-width: 500px;\n }\n\n .standardsContainer { border-top: 1px solid rgba(0,0,0,0.1); padding-top: 30px; }\n \n .standardsTitle {\n font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px;\n color: #64748b; margin-bottom: 20px; display: block; font-weight: 700;\n }\n \n .logoRow { display: flex; gap: 30px; flex-wrap: wrap; align-items: center; }\n \n .logoText {\n font-size: 1rem; font-weight: 700; color: #64748b;\n transition: color 0.3s ease; cursor: default;\n }\n .logoText:hover { color: var(--cDark); }\n\n \/* RESPONSIVENESS *\/\n @media (max-width: 768px) {\n .heroOverlay {\n background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 100%);\n }\n .heroClean { justify-content: center; text-align: center; }\n .logoRow { justify-content: center; }\n }\n\n \/* --- KEYFRAMES --- *\/\n @keyframes float1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(100px, -80px) scale(1.1); } 66% { transform: translate(-50px, 60px) scale(0.95); } }\n @keyframes float2 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-120px, 70px) scale(1.05); } 66% { transform: translate(80px, -90px) scale(0.9); } }\n @keyframes float3 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(90px, 100px) scale(0.95); } 66% { transform: translate(-70px, -50px) scale(1.08); } }\n @keyframes float4 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-100px, -70px) scale(1.06); } 66% { transform: translate(110px, 80px) scale(0.92); } }\n @keyframes float5 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, -60px) scale(1.15); } }\n @keyframes wave1 { 0%, 100% { d: path(\"M0,300 Q250,200 500,300 T1000,300 T1500,300 T2000,300\"); } 50% { d: path(\"M0,300 Q250,400 500,300 T1000,300 T1500,300 T2000,300\"); } }\n @keyframes wave2 { 0%, 100% { d: path(\"M0,500 Q250,400 500,500 T1000,500 T1500,500 T2000,500\"); } 50% { d: path(\"M0,500 Q250,600 500,500 T1000,500 T1500,500 T2000,500\"); } }\n<\/style>\n\n<div class=\"heroClean\">\n <div class=\"animatedBgContainer\">\n <div class=\"orb orb1\"><\/div>\n <div class=\"orb orb2\"><\/div>\n <div class=\"orb orb3\"><\/div>\n <div class=\"orb orb4\"><\/div>\n <div class=\"orb orb5\"><\/div>\n <div class=\"particlesContainer\" id=\"particlesContainer\"><\/div>\n <svg class=\"waveLines\">\n <defs>\n <linearGradient id=\"waveGrad1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style=\"stop-color: #ff2a55; stop-opacity: 0.7\" \/>\n <stop offset=\"50%\" style=\"stop-color: #ff9900; stop-opacity: 0.7\" \/>\n <stop offset=\"100%\" style=\"stop-color: #ff2a55; stop-opacity: 0.7\" \/>\n <\/linearGradient>\n <linearGradient id=\"waveGrad2\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style=\"stop-color: #00c3ff; stop-opacity: 0.7\" \/>\n <stop offset=\"50%\" style=\"stop-color: #0acd5f; stop-opacity: 0.7\" \/>\n <stop offset=\"100%\" style=\"stop-color: #00c3ff; stop-opacity: 0.7\" \/>\n <\/linearGradient>\n <\/defs>\n <path d=\"M0,300 Q250,200 500,300 T1000,300 T1500,300 T2000,300\" stroke=\"url(#waveGrad1)\" stroke-width=\"4\" fill=\"none\" style=\"animation: wave1 12s ease-in-out infinite\" \/>\n <path d=\"M0,500 Q250,400 500,500 T1000,500 T1500,500 T2000,500\" stroke=\"url(#waveGrad2)\" stroke-width=\"4\" fill=\"none\" style=\"animation: wave2 14s ease-in-out infinite\" \/>\n <\/svg>\n <\/div>\n\n <div class=\"heroOverlay\"><\/div>\n\n <div class=\"heroContent\">\n <span class=\"brandTag\">Logistics Audit Engine<\/span>\n \n <img decoding=\"async\" \n src=\"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/Packven_Lockup_Black_4000w-scaled.png\" \n alt=\"Packven Logo\" \n class=\"heroLogoImg\"\n >\n\n <p class=\"heroDesc\">We re-engineer your shipping volume to fit the exact standards of the Nordic logistics grid. Eliminate air. Eliminate waste.<\/p>\n \n <div class=\"standardsContainer\">\n <span class=\"standardsTitle\">Designed for the Standards of<\/span>\n <div class=\"logoRow\">\n <span class=\"logoText\">PostNord<\/span>\n <span class=\"logoText\">Instabox<\/span>\n <span class=\"logoText\">Budbee<\/span>\n <span class=\"logoText\">Early Bird<\/span>\n <span class=\"logoText\">DHL<\/span>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n\n<script>\nconst packvenHeroOptimizer = {\n domNodes: {},\n\n init: function() {\n this.cacheDom();\n this.generateParticles();\n this.runSequence();\n },\n\n cacheDom: function() {\n this.domNodes = {\n particlesContainer: document.getElementById('particlesContainer'),\n brandTag: document.querySelector('.brandTag'),\n heroLogo: document.querySelector('.heroLogoImg'), \n heroDesc: document.querySelector('.heroDesc'),\n standardsContainer: document.querySelector('.standardsContainer'),\n partnerLogos: document.querySelectorAll('.logoText')\n };\n },\n\n generateParticles: function() {\n \/\/ Highly saturated particles to match the vivid orbs\n const particleColors = ['rgba(255, 42, 85, 0.7)', 'rgba(255, 153, 0, 0.7)', 'rgba(0, 195, 255, 0.7)', 'rgba(10, 205, 95, 0.7)'];\n const particleGlows = ['rgba(255, 42, 85, 0.4)', 'rgba(255, 153, 0, 0.4)', 'rgba(0, 195, 255, 0.4)', 'rgba(10, 205, 95, 0.4)'];\n\n for (let i = 0; i < 30; i++) {\n const particle = document.createElement('div');\n const size = Math.random() * 5 + 3;\n const colorIndex = i % 4;\n\n particle.style.position = 'absolute';\n particle.style.width = `${size}px`;\n particle.style.height = `${size}px`;\n particle.style.borderRadius = '50%';\n particle.style.background = particleColors[colorIndex];\n particle.style.left = `${Math.random() * 100}%`;\n particle.style.top = `${Math.random() * 100}%`;\n particle.style.animation = `float${(i%5)+1} ${Math.random() * 10 + 15}s ease-in-out infinite`;\n particle.style.boxShadow = `0 0 ${Math.random() * 15 + 10}px ${particleGlows[colorIndex]}`;\n\n if(this.domNodes.particlesContainer) {\n this.domNodes.particlesContainer.appendChild(particle);\n }\n }\n },\n\n runSequence: function() {\n if (typeof gsap === 'undefined') {\n console.error(\"GSAP failed to load.\");\n return;\n }\n\n gsap.set([\n this.domNodes.brandTag, \n this.domNodes.heroLogo, \n this.domNodes.heroDesc, \n this.domNodes.standardsContainer\n ], { opacity: 0 });\n\n const scanTimeline = gsap.timeline({ defaults: { ease: \"power3.out\" } });\n\n scanTimeline\n .fromTo(this.domNodes.brandTag, \n { y: 20, opacity: 0 },\n { y: 0, opacity: 1, duration: 0.8, delay: 0.3 }\n )\n .fromTo(this.domNodes.heroLogo,\n { y: 40, opacity: 0 },\n { y: 0, opacity: 1, duration: 1 },\n \"-=0.6\"\n )\n .fromTo(this.domNodes.heroDesc,\n { y: 20, opacity: 0 },\n { y: 0, opacity: 1, duration: 0.8 },\n \"-=0.6\"\n )\n .fromTo(this.domNodes.standardsContainer,\n { opacity: 0 },\n { opacity: 1, duration: 0.6 },\n \"-=0.4\"\n )\n .fromTo(this.domNodes.partnerLogos,\n { y: 15, opacity: 0 },\n { y: 0, opacity: 1, stagger: 0.1, duration: 0.6 },\n \"-=0.3\"\n );\n }\n};\n\n\/\/ Execution hook\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => packvenHeroOptimizer.init());\n} else {\n packvenHeroOptimizer.init();\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f514325 elementor-widget elementor-widget-spacer\" data-id=\"f514325\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ae709fe e-flex e-con-boxed e-con e-parent\" data-id=\"ae709fe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-35b9430 elementor-widget elementor-widget-html\" data-id=\"35b9430\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Packven Packaging OS<\/title>\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n \/* --- Reset & Base --- *\/\n body { margin: 0; padding: 0; background-color: #fff; font-family: 'Outfit', sans-serif; }\n * { box-sizing: border-box; }\n\n \/* --- Packven Hero Styles --- *\/\n .pv-hero { padding: 84px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); background-color: #fff; color: #000; width: 100%; overflow: hidden; }\n .pv-container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }\n .pv-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; }\n\n .pv-content { max-width: 640px; }\n .pv-meta-row { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }\n .pv-meta-tag { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(0, 0, 0, 0.6); font-weight: 500; }\n .pv-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); }\n \n .pv-title { margin: 0 0 14px 0; font-size: 2.5rem; line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; color: #2c3e50; }\n .pv-text { margin: 0 0 14px 0; font-size: 18px; line-height: 1.55; color: #555; font-weight: 300; }\n .pv-text:last-of-type { margin-bottom: 0; }\n\n .pv-pills-row { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }\n .pv-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #0f172a; white-space: nowrap; }\n .pill-blue { background: rgba(22, 151, 165, 0.08); color: #1697a5; border: 1px solid rgba(22, 151, 165, 0.2); }\n .pill-green { background: rgba(75, 157, 39, 0.08); color: #4b9d27; border: 1px solid rgba(75, 157, 39, 0.2); }\n .pill-yellow { background: rgba(231, 180, 72, 0.08); color: #b48a2a; border: 1px solid rgba(231, 180, 72, 0.2); }\n .pill-slate { background: rgba(15, 23, 42, 0.04); color: #0f172a; border: 1px solid rgba(15, 23, 42, 0.1); }\n .pv-note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: rgba(0, 0, 0, 0.62); }\n\n \/* --- THE NEW TRIGGER BOX WITH PHOTO --- *\/\n .pv-visual-wrapper { position: relative; min-height: 400px; display: flex; align-items: center; justify-content: flex-start; }\n .portal-trigger-box {\n width: 100%; min-height: 400px; border: 3px dashed #5f686c; border-radius: 20px;\n \/* Applying your photo as the background *\/\n background-image: url('https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/showcase_placeholder.jpg');\n background-size: cover;\n background-position: center;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n cursor: pointer; transition: all 0.3s ease; color: #5f686c; \/* white text color for contrast *\/\n }\n .portal-trigger-box:hover {\n border-color: #1697a5; \n \/* Light overlay on hover using cyan color *\/\n background-image: linear-gradient(0deg, rgba(22, 151, 165, 0.1), rgba(22, 151, 165, 0.1)), url('https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/showcase_placeholder.jpg');\n color: #1697a5; \/* cyan text color on hover *\/\n transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(22, 151, 165, 0.25);\n }\n \/* Style spans inside the box on hover to increase size *\/\n .portal-trigger-box:hover span { transform: scale(1.05); }\n .portal-trigger-box span { font-size: 1.35rem; font-weight: 600; font-family: 'Outfit', sans-serif; transition: all 0.3s ease; }\n\n \/* ==========================================================================\n INTERACTIVE PORTAL MODAL (SCOPED CSS)\n ========================================================================== *\/\n .ip-overlay {\n position: fixed; inset: 0; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px);\n display: none; align-items: center; justify-content: center; z-index: 9999999;\n font-family: 'Inter', sans-serif;\n opacity: 0; transition: opacity 0.3s ease;\n }\n .ip-overlay.show { display: flex; opacity: 1; }\n\n \/* The 5px Split Layout (Wider Max-Width & Controlled Height) *\/\n .ip-wrapper {\n display: flex; gap: 5px; width: 95vw; max-width: 1650px; \n height: 80vh; max-height: 800px;\n transform: translateY(20px) scale(0.98); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ip-overlay.show .ip-wrapper { transform: translateY(0) scale(1); }\n\n \/* Left: Portal Shell *\/\n .ip-shell {\n flex: 1; background: #f8fafc; border-radius: 16px; overflow: hidden;\n display: flex; flex-direction: column; border: 1px solid #2a3b57;\n position: relative; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);\n }\n\n \/* Right: Explainer Panel *\/\n .ip-explainer {\n width: 360px; background: white; border-radius: 16px; padding: 32px 28px;\n overflow-y: auto; display: flex; flex-direction: column; align-items: center; text-align: left;\n box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); position: relative;\n }\n .ip-close-btn {\n position: absolute; top: 16px; right: 16px; background: #f1f5f9; border: none; width: 32px; height: 32px;\n border-radius: 8px; color: #64748b; font-size: 1.1rem; cursor: pointer; transition: 0.2s;\n display: flex; align-items: center; justify-content: center;\n z-index: 10;\n }\n .ip-close-btn:hover { background: #fee2e2; color: #af2020; transform: rotate(90deg); }\n .ip-explainer-kicker { font-size: 0.75rem; font-weight: 800; color: #1697a5; text-transform: uppercase; letter-spacing: 1px; width: 100%; margin-bottom: 8px; }\n .ip-explainer-title { font-family: 'Outfit', sans-serif; font-size: 1.8rem; font-weight: 700; color: #0f172a; margin: 0 0 20px 0; width: 100%; line-height: 1.1; }\n .ip-explainer-text { font-size: 0.95rem; color: #475569; line-height: 1.6; width: 100%; }\n .ip-explainer-text b { color: #0f172a; font-weight: 700; }\n\n \/* --- SHELL HEADER (Adapted from base.html) --- *\/\n .sh-header { height: 4.625rem; background: #0b1220; border-bottom: 1px solid #2a3b57; display: flex; align-items: center; flex-shrink: 0; }\n .sh-brand-area { width: 16.5rem; height: 100%; display: flex; align-items: center; padding-left: 1.75rem; border-right: 1px solid #2a3b57; flex-shrink: 0; }\n .sh-brand { font-size: 1.5rem; font-weight: 800; color: white; display: flex; align-items: center; gap: 0.4375rem; }\n .sh-main-area { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 1.75rem; position: relative; }\n \n .sh-context { display: flex; align-items: center; gap: 0.875rem; }\n .sh-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.6875rem; background: rgba(22, 151, 165, 0.16); color: #1697a5; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }\n .sh-title { font-size: 1.48rem; font-weight: 700; color: #f8fafc; }\n\n .sh-center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 18rem; }\n .sh-cd-label { font-size: 0.62rem; color: #9fb0c6; font-weight: 700; letter-spacing: 1px; }\n .sh-cd-row { width: 100%; display: flex; align-items: center; gap: 10px; }\n .sh-cd-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; }\n .sh-cd-fill { width: 40%; height: 100%; background: linear-gradient(90deg, #1697a5, #3bbfd0); border-radius: 4px; }\n .sh-cd-text { font-size: 0.72rem; color: #94a3b8; font-weight: 700; }\n\n .sh-right { display: flex; align-items: center; gap: 16px; }\n .sh-notif { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255,255,255,0.09); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; }\n .sh-sep { width: 1px; height: 24px; background: #2a3b57; }\n \n .sh-profile { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 6px; border-radius: 8px; transition: 0.2s; position: relative; }\n .sh-profile:hover { background: rgba(255,255,255,0.1); }\n .sh-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 800; background: #e0f2fe; color: #0369a1; }\n .sh-p-info { display: flex; flex-direction: column; }\n .sh-p-name { font-size: 0.9rem; font-weight: 600; color: white; }\n .sh-p-id { font-size: 0.75rem; color: #94a3b8; }\n\n \/* Dropdown *\/\n .sh-dropdown { position: absolute; top: 100%; right: 0; margin-top: 10px; background: #1a2a42; border: 1px solid #2e3f5d; border-radius: 12px; width: 260px; display: none; flex-direction: column; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.5); z-index: 100;}\n .sh-dropdown.show { display: flex; }\n .sh-dd-hero { padding: 20px 0 12px; display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid #2e3f5d; }\n .sh-dd-avatar { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; cursor: pointer; transition: 0.2s; background: #e0f2fe; color: #0369a1; position: relative; }\n .sh-dd-avatar:hover { transform: scale(1.05); }\n .sh-dd-avatar:hover::after { content: '\\f303'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; bottom: -4px; right: -4px; background: white; color: #0b1220; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }\n .sh-dd-item { padding: 12px 16px; display: flex; align-items: center; gap: 12px; color: #94a3b8; font-size: 0.9rem; cursor: pointer; transition: 0.2s; }\n .sh-dd-item:hover { background: rgba(255,255,255,0.05); color: white; }\n\n \/* --- SHELL BODY & SIDEBAR --- *\/\n .sh-body { display: flex; flex: 1; overflow: hidden; background: #f8fafc; }\n .sh-sidebar { width: 16.5rem; background: #0b1220; border-right: 1px solid #2a3b57; padding: 1.375rem; overflow-y: auto; flex-shrink: 0; }\n \n .sh-nav-group { margin-bottom: 2rem; }\n .sh-nav-label-blue { font-size: 0.75rem; text-transform: uppercase; font-weight: 800; margin-bottom: 15px; letter-spacing: 1.5px; padding-left: 18px; color: #1697a5; }\n .sh-nav-label-red { font-size: 0.75rem; text-transform: uppercase; font-weight: 800; margin-bottom: 15px; letter-spacing: 1.5px; padding-left: 18px; color: #af2020; }\n .sh-nav-label-amber { font-size: 0.75rem; text-transform: uppercase; font-weight: 800; margin-bottom: 15px; letter-spacing: 1.5px; padding-left: 18px; color: #e7b448; }\n \n .sh-nav-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 10px; cursor: pointer; transition: all 0.2s; font-weight: 500; color: #9fb0c6; font-size: 0.9rem; border-left: 3px solid transparent; margin-bottom: 4px; }\n .sh-nav-item i { width: 20px; text-align: center; font-size: 1.1rem; opacity: 0.7; transition: 0.2s; }\n \n \/* Sidebar Hover Logic *\/\n .grp-blue .sh-nav-item:hover { background: rgba(59, 130, 246, 0.05); color: #1697a5; transform: translateX(5px); }\n .grp-blue .sh-nav-item:hover i { color: #1697a5; opacity: 1; }\n .grp-blue .sh-nav-item.active { background: rgba(22, 151, 165, 0.15); color: white; border-left-color: #1697a5; font-weight: 600; }\n .grp-blue .sh-nav-item.active i { color: #1697a5; opacity: 1; text-shadow: 0 0 6px rgba(22, 151, 165, 0.6); }\n\n .grp-green .sh-nav-item:hover { background: rgba(175, 32, 32, 0.05); color: #af2020; transform: translateX(5px); }\n .grp-green .sh-nav-item:hover i { color: #af2020; opacity: 1; }\n .grp-green .sh-nav-item.active { background: rgba(175, 32, 32, 0.15); color: white; border-left-color: #af2020; font-weight: 600; }\n .grp-green .sh-nav-item.active i { color: #af2020; opacity: 1; text-shadow: 0 0 6px rgba(175, 32, 32, 0.6); }\n\n .grp-amber .sh-nav-item:hover { background: rgba(245, 158, 11, 0.05); color: #e7b448; transform: translateX(5px); }\n .grp-amber .sh-nav-item:hover i { color: #e7b448; opacity: 1; }\n .grp-amber .sh-nav-item.active { background: rgba(231, 180, 72, 0.15); color: white; border-left-color: #e7b448; font-weight: 600; }\n .grp-amber .sh-nav-item.active i { color: #e7b448; opacity: 1; text-shadow: 0 0 6px rgba(231, 180, 72, 0.6); }\n\n \/* --- SEAMLESS SHELL CONTENT AREA --- *\/\n .sh-content { \n flex: 1; \n overflow-y: auto; \n overflow-x: hidden; \n background: #e5e7eb; \/* Dynamic background set via JS *\/\n position: relative; \n padding: 0;\n }\n \n .sh-placeholder { \n width: 100%; height: 100%; min-height: 400px;\n display: flex; flex-direction: column; align-items: center; justify-content: center; \n color: #94a3b8; text-align: center; \n }\n .sh-placeholder i { font-size: 4rem; margin-bottom: 20px; opacity: 0.5; animation: bounceHint 2s infinite; }\n @keyframes bounceHint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }\n \n \/* The container for the stacked screenshots *\/\n .sh-screenshot-container {\n display: none; \n flex-direction: column; \n width: 100%; \n padding-bottom: 20px; \/* Provides the 20px color-matched margin at the bottom *\/\n opacity: 0;\n transition: opacity 0.2s ease;\n }\n\n .sh-screenshot { \n width: 100%; \n height: auto; \n vertical-align: top;\n border: none; \n border-radius: 0; \n box-shadow: none; \n }\n\n \/* --- PREMIUM SCROLLBARS --- *\/\n .sh-sidebar::-webkit-scrollbar { width: 6px; display: none; } \/* Hidden on mobile by default, overriden for desktop below *\/\n .sh-sidebar::-webkit-scrollbar-track { background: #0b1220; }\n .sh-sidebar::-webkit-scrollbar-thumb { background: #2a3b57; border-radius: 10px; }\n .sh-sidebar::-webkit-scrollbar-thumb:hover { background: #3b5078; }\n\n .ip-explainer::-webkit-scrollbar, .sh-content::-webkit-scrollbar { width: 8px; }\n .ip-explainer::-webkit-scrollbar-track, .sh-content::-webkit-scrollbar-track { background: transparent; }\n .ip-explainer::-webkit-scrollbar-thumb, .sh-content::-webkit-scrollbar-thumb { \n background: #cbd5e1; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; \n }\n .ip-explainer::-webkit-scrollbar-thumb:hover, .sh-content::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }\n\n \/* --- AVATAR MODAL --- *\/\n .ava-modal { position: absolute; inset: 0; background: rgba(15,23,42,0.8); z-index: 200; display: none; align-items: center; justify-content: center; border-radius: 16px; opacity: 0; transition: 0.3s; }\n .ava-modal.show { display: flex; opacity: 1; }\n .ava-box { background: white; border-radius: 16px; width: 480px; padding: 24px; box-shadow: 0 25px 50px rgba(0,0,0,0.4); transform: scale(0.95); transition: 0.3s; }\n .ava-modal.show .ava-box { transform: scale(1); }\n \n .ava-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }\n .ava-header h3 { margin: 0; color: #0f172a; font-weight: 800; display: flex; align-items: center; gap: 8px;}\n .ava-close { background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; color: #64748b; display: flex; align-items: center; justify-content: center; transition: 0.2s; }\n .ava-close:hover { background: #fee2e2; color: #af2020; transform: rotate(90deg); }\n .ava-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }\n .ava-opt { aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; cursor: pointer; transition: 0.2s; border: 3px solid transparent; }\n .ava-opt:hover { transform: scale(1.1); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }\n\n \/* Avatar Colors *\/\n .c-def { background: #e0f2fe; color: #0369a1; }\n .c-1 { background: #d1fae5; color: #047857; } .c-2 { background: #fef3c7; color: #b45309; }\n .c-3 { background: #fee2e2; color: #b91c1c; } .c-4 { background: #ede9fe; color: #5b21b6; }\n .c-5 { background: #cffafe; color: #0369a1; } .c-6 { background: #ccfbf1; color: #0f766e; }\n .c-7 { background: #fae8ff; color: #be123c; } .c-8 { background: #fce7f3; color: #be185d; }\n\n \/* ==========================================================================\n MOBILE RESPONSIVENESS OVERRIDES\n ========================================================================== *\/\n @media (min-width: 901px) {\n .sh-sidebar::-webkit-scrollbar { display: block; }\n }\n \n @media (max-width: 900px) {\n \/* Hero fixes *\/\n .pv-grid { grid-template-columns: 1fr; gap: 40px; }\n .pv-title { font-size: 36px; }\n .pv-hero { padding: 60px 0; }\n .pv-visual-wrapper { min-height: 0; justify-content: center; }\n\n \/* Modal Wrapper *\/\n .ip-wrapper { \n flex-direction: column; width: 100vw; max-width: 100vw; \n height: 100vh; max-height: 100vh; gap: 0; \n transform: none !important; \/* Allow simple display rather than scaled animation to avoid edge gaps *\/\n }\n .ip-shell { border-radius: 0; flex: 1; border: none; border-bottom: 1px solid #cbd5e1; }\n .ip-explainer { \n width: 100%; flex: none; height: 35vh; border-radius: 0; \n padding: 24px 20px; box-shadow: 0 -10px 25px rgba(0,0,0,0.1); \n }\n \n \/* Move close button out of the explainer and to the top right of the viewport *\/\n .ip-close-btn { \n position: fixed; top: 10px; right: 10px; z-index: 100000;\n background: rgba(15, 23, 42, 0.8); color: white;\n }\n .ip-close-btn:hover { background: #af2020; color: white; }\n\n \/* Shell Header *\/\n .sh-header { height: auto; min-height: 60px; padding: 0 15px; justify-content: space-between; }\n .sh-brand-area { width: auto; padding: 0; border: none; }\n .sh-main-area { padding: 0; justify-content: flex-end; flex: 1; }\n .sh-context, .sh-center, .sh-sep { display: none; }\n .sh-right { gap: 10px; }\n .sh-dropdown { position: fixed; top: 60px; right: 10px; width: calc(100vw - 20px); z-index: 1000000; }\n\n \/* Shell Sidebar (Horizontal Scroll) *\/\n .sh-body { flex-direction: column; }\n .sh-sidebar { \n width: 100%; height: auto; display: flex; flex-direction: row; \n overflow-x: auto; padding: 10px; border-right: none; \n border-bottom: 1px solid #2a3b57; align-items: center;\n -webkit-overflow-scrolling: touch; \/* Smooth iOS scroll *\/\n }\n .sh-nav-group { display: flex; flex-direction: row; margin: 0; }\n .sh-nav-label-blue, .sh-nav-label-red, .sh-nav-label-amber { display: none; }\n .sh-nav-item { \n white-space: nowrap; margin: 0 8px 0 0; padding: 8px 12px; \n border-left: none; border-bottom: 2px solid transparent; border-radius: 8px;\n }\n \n \/* Remove hover translates on mobile *\/\n .grp-blue .sh-nav-item:hover, .grp-green .sh-nav-item:hover, .grp-amber .sh-nav-item:hover { transform: none; }\n \n \/* Fix active states for bottom borders instead of left borders *\/\n .grp-blue .sh-nav-item.active { border-left-color: transparent; border-bottom-color: #1697a5; }\n .grp-green .sh-nav-item.active { border-left-color: transparent; border-bottom-color: #af2020; }\n .grp-amber .sh-nav-item.active { border-left-color: transparent; border-bottom-color: #e7b448; }\n\n \/* Shell Content Mobile *\/\n .sh-content { padding: 0; }\n .sh-placeholder { min-height: 200px; }\n\n \/* Avatar Modal Mobile *\/\n .ava-box { width: 90%; padding: 20px; }\n .ava-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }\n .ava-opt { font-size: 1.4rem; }\n }\n <\/style>\n<\/head>\n<body data-rsssl=1 data-rsssl=1>\n\n <section class=\"pv-hero\">\n <div class=\"pv-container\">\n <div class=\"pv-grid\">\n \n <div class=\"pv-content\">\n <div class=\"pv-meta-row\">\n <span class=\"pv-meta-tag\">Packven Packaging OS<\/span>\n <span class=\"pv-meta-dot\"><\/span>\n <span class=\"pv-meta-tag\">Product vision<\/span>\n <\/div>\n <p class=\"pv-title\">Packaging becomes a controlled system.<\/p>\n <p class=\"pv-text\">Buying packaging isn\u2019t the hard part. The hard part is choosing the right formats, keeping usage consistent, and staying ready for EU-ready documentation and reporting workflows.<\/p>\n <p class=\"pv-text\">Many teams get stuck in guesswork: provisional box sizes, \u201cit works\u201d decisions, and fragmented packaging data that lives in spreadsheets and supplier emails.<\/p>\n <p class=\"pv-text\">Packven brings structure: a managed packaging workflow, right-size recommendations, and exportable compliance artifacts so that operations get control, not noise.<\/p>\n \n <div class=\"pv-pills-row\">\n <span class=\"pv-pill pill-blue\"><i class=\"fa-solid fa-microchip\"><\/i> Right-size intelligence<\/span>\n <span class=\"pv-pill pill-green\"><i class=\"fa-solid fa-shield-halved\"><\/i> Compliance Passport<\/span>\n <span class=\"pv-pill pill-yellow\"><i class=\"fa-solid fa-file-export\"><\/i> Export-ready outputs<\/span>\n <span class=\"pv-pill pill-slate\"><i class=\"fa-solid fa-gears\"><\/i> Designed for ops<\/span>\n <\/div>\n <div class=\"pv-note\">Pilot note: current deliverables are evaluation-only and described under \u201cPilot Protocol.\u201d<\/div>\n <\/div>\n\n <div class=\"pv-visual-wrapper\">\n <div class=\"portal-trigger-box\" onclick=\"openPortalModal()\">\n <span>Click to explore the portal<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n <div id=\"interactivePortal\" class=\"ip-overlay\" onclick=\"handleOverlayClick(event)\">\n <div class=\"ip-wrapper\">\n \n <div class=\"ip-shell\">\n <div class=\"sh-header\">\n <div class=\"sh-brand-area\">\n <div class=\"sh-brand\"><i class=\"fa-solid fa-cube\" style=\"color:var(--c-blue);\"><\/i> Packven OS<\/div>\n <\/div>\n <div class=\"sh-main-area\">\n <div class=\"sh-context\">\n <span class=\"sh-icon\" id=\"shPageIcon\"><i class=\"fa-solid fa-compass\"><\/i><\/span>\n <span class=\"sh-title\" id=\"shPageTitle\">Workspace Portal<\/span>\n <\/div>\n <div class=\"sh-center\">\n <div class=\"sh-cd-label\">TRIAL PROGRESS (12 DAYS REMAINING)<\/div>\n <div class=\"sh-cd-row\">\n <div class=\"sh-cd-bar\"><div class=\"sh-cd-fill\"><\/div><\/div>\n <div class=\"sh-cd-text\">12<\/div>\n <\/div>\n <\/div>\n <div class=\"sh-right\">\n <div class=\"sh-notif\"><i class=\"fa-solid fa-bell\"><\/i><\/div>\n <div class=\"sh-sep\"><\/div>\n <div class=\"sh-profile\" onclick=\"toggleDropdown(event)\">\n <div class=\"sh-avatar c-def\" id=\"headerAvatar\">U<\/div>\n <div class=\"sh-p-info\">\n <div class=\"sh-p-name\">Demo User<\/div>\n <div class=\"sh-p-id\">ID: PV-2026<\/div>\n <\/div>\n <i class=\"fa-solid fa-chevron-down\" style=\"color: #94a3b8; font-size: 12px; margin-left: 4px;\"><\/i>\n \n <div class=\"sh-dropdown\" id=\"profileDropdown\" onclick=\"event.stopPropagation()\">\n <div class=\"sh-dd-hero\">\n <div class=\"sh-dd-avatar c-def\" id=\"menuAvatar\" onclick=\"openAvatarModal(event)\">U<\/div>\n <div style=\"font-size: 12px; font-weight: 700; color: #1697a5; margin-top: 10px; cursor: pointer;\" onclick=\"openAvatarModal(event)\">Edit Avatar<\/div>\n <\/div>\n <div class=\"sh-dd-item\" style=\"opacity: 0.5; cursor: not-allowed;\"><i class=\"fa-solid fa-lock\"><\/i> Account Settings<\/div>\n <div class=\"sh-dd-item\" style=\"color: #fda4af;\" onclick=\"closePortalModal()\"><i class=\"fa-solid fa-right-from-bracket\"><\/i> Exit Sandbox<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"sh-body\">\n <div class=\"sh-sidebar\">\n <div class=\"sh-nav-group grp-blue\">\n <div class=\"sh-nav-label-blue\">Workspace<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('dashboard', this)\"><i class=\"fa-solid fa-house\"><\/i> Dashboard<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('optimizer', this)\"><i class=\"fa-solid fa-microchip\"><\/i> Logistics Optimizer<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('logger', this)\"><i class=\"fa-solid fa-qrcode\"><\/i> Shipment Logger<\/div>\n <\/div>\n <div class=\"sh-nav-group grp-green\">\n <div class=\"sh-nav-label-red\">Resources<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('catalog', this)\"><i class=\"fa-solid fa-box-open\"><\/i> Package Catalog<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('compliance', this)\"><i class=\"fa-solid fa-shield-halved\"><\/i> Compliance Passport<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('prototype', this)\"><i class=\"fa-solid fa-truck-ramp-box\"><\/i> Prototype Status<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('archives', this)\"><i class=\"fa-solid fa-folder-open\"><\/i> Archives<\/div>\n <\/div>\n <div class=\"sh-nav-group grp-amber\">\n <div class=\"sh-nav-label-amber\">Account<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('settings', this)\"><i class=\"fa-solid fa-gear\"><\/i> System Settings<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('subscription', this)\"><i class=\"fa-solid fa-credit-card\"><\/i> Subscription<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('help', this)\"><i class=\"fa-solid fa-circle-question\"><\/i> Help & FAQ<\/div>\n <\/div>\n <\/div>\n\n <div class=\"sh-content\" id=\"shContentArea\">\n <div id=\"shPlaceholder\" class=\"sh-placeholder\">\n <i class=\"fa-solid fa-hand-pointer\"><\/i>\n <h2 style=\"margin: 0 0 10px; color: #0f172a;\">Interact with the Sidebar<\/h2>\n <p style=\"margin: 0;\">Select a module to view its interface.<\/p>\n <\/div>\n <div id=\"shScreenshotContainer\" class=\"sh-screenshot-container\">\n <img decoding=\"async\" id=\"shScreenshot1\" class=\"sh-screenshot\" src=\"\" alt=\"Portal Screen Part 1\">\n <img decoding=\"async\" id=\"shScreenshot2\" class=\"sh-screenshot\" src=\"\" alt=\"Portal Screen Part 2\" style=\"display: none;\">\n <img decoding=\"async\" id=\"shScreenshot3\" class=\"sh-screenshot\" src=\"\" alt=\"Portal Screen Part 3\" style=\"display: none;\">\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"ava-modal\" id=\"avatarModal\" onclick=\"handleAvaOverlayClick(event)\">\n <div class=\"ava-box\">\n <div class=\"ava-header\">\n <h3><i class=\"fa-solid fa-palette\" style=\"color: #1697a5;\"><\/i> Customize Avatar<\/h3>\n <button class=\"ava-close\" onclick=\"closeAvatarModal()\"><i class=\"fa-solid fa-xmark\"><\/i><\/button>\n <\/div>\n <p style=\"color: #64748b; font-size: 14px; margin-top: 0; margin-bottom: 20px;\">Select an everyday icon to personalize your workspace. This functions flawlessly in the frontend demo.<\/p>\n <div class=\"ava-grid\">\n <div class=\"ava-opt c-1\" onclick=\"setAvatar('fa-leaf', 'c-1')\"><i class=\"fa-solid fa-leaf\"><\/i><\/div>\n <div class=\"ava-opt c-2\" onclick=\"setAvatar('fa-mug-hot', 'c-2')\"><i class=\"fa-solid fa-mug-hot\"><\/i><\/div>\n <div class=\"ava-opt c-3\" onclick=\"setAvatar('fa-rocket', 'c-3')\"><i class=\"fa-solid fa-rocket\"><\/i><\/div>\n <div class=\"ava-opt c-4\" onclick=\"setAvatar('fa-gem', 'c-4')\"><i class=\"fa-solid fa-gem\"><\/i><\/div>\n <div class=\"ava-opt c-5\" onclick=\"setAvatar('fa-camera', 'c-5')\"><i class=\"fa-solid fa-camera\"><\/i><\/div>\n <div class=\"ava-opt c-6\" onclick=\"setAvatar('fa-code', 'c-6')\"><i class=\"fa-solid fa-code\"><\/i><\/div>\n <div class=\"ava-opt c-7\" onclick=\"setAvatar('fa-fire', 'c-7')\"><i class=\"fa-solid fa-fire\"><\/i><\/div>\n <div class=\"ava-opt c-8\" onclick=\"setAvatar('fa-bolt', 'c-8')\"><i class=\"fa-solid fa-bolt\"><\/i><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"ip-explainer\">\n <button class=\"ip-close-btn\" onclick=\"closePortalModal()\"><i class=\"fa-solid fa-xmark\"><\/i><\/button>\n <div class=\"ip-explainer-kicker\">Module Overview<\/div>\n <h3 class=\"ip-explainer-title\" id=\"exTitle\">Welcome<\/h3>\n <div class=\"ip-explainer-text\" id=\"exText\">\n Click any module on the dark sidebar to your left to explore the Packven OS and read about its capabilities here.\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <script>\n \/\/ ====================================================================\n \/\/ PORTAL DATA & EXPLANATIONS\n \/\/ ====================================================================\n const portalData = {\n dashboard: {\n title: \"Dashboard\", icon: \"fa-house\", bgColor: \"#e5e7eb\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/dashboard_preview_01-scaled.png\",\n imgSrc2: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/dashboard_preview_02-scaled.png\",\n imgSrc3: \"\",\n desc: \"This is your <b>Command Center<\/b>. Here, you can see and interact with all the key data points within your personalized portal. It serves as a centralized hub where you can view exactly how much money you will save by reducing empty air in your boxes (Right Sizing) and following environmental laws.<br><br>You will also find a detailed graph that organizes all your optimized products in one place, allowing you to see which of your current packages are inefficient and which are performing well. Everything here is designed to be hands-on, helping you manage your packaging logistics with ease.\"\n },\n optimizer: {\n title: \"Logistics Optimizer\", icon: \"fa-microchip\", bgColor: \"#e5e7eb\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/optimizer_preview_01-scaled.png\",\n imgSrc2: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/optimizer_preview_02-scaled.png\",\n imgSrc3: \"\",\n desc: \"This is the <b>Mathematical Heart<\/b> of the Packven system. In this section, you select your current boxes to compare them against Packven\u2019s optimized models. The system doesn't just look at the box size; it also analyzes the complex shipping 'tiers' and weight brackets used by carriers across the Nordics and Germany.<br><br>This ensures the data reflects your actual shipping costs in the real market. You can also group specific products together to keep your data organized. We calculate your savings based on three professional metrics: <b>Material<\/b> (the cost to produce the box), <b>Freight<\/b> (the cost to ship based on weight), and <b>Tier Bonuses<\/b> (savings gained by fitting into a smaller, cheaper carrier category).\"\n },\n logger: {\n title: \"Shipment Logger\", icon: \"fa-qrcode\", bgColor: \"#e5e7eb\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/logger_preview_01-scaled.png\",\n imgSrc2: \"\",\n imgSrc3: \"\",\n desc: \"This is your <b>Shipment Registry<\/b>. During this pilot phase, you can manually record your shipments to see how they perform against modern standards. This acts as a simulation of the automated 'Digital Passport' system you will receive with a full subscription.<br><br>You can log both your current boxes and Packven boxes to see if your materials comply with Environmental Producer Responsibility (EPR)\u2014the legal rules that dictate how much 'eco-tax' you must pay for your packaging. By using a Packven box, we provide a guarantee that your shipments will meet these strict 2026 requirements, reducing your tax burden and legal risk.\"\n },\n catalog: {\n title: \"Package Catalog\", icon: \"fa-box-open\", bgColor: \"#e5e7eb\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/catalog_preview_01-scaled.png\",\n imgSrc2: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/catalog_preview_02-scaled.png\",\n imgSrc3: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/catalog_preview_03-scaled.png\",\n desc: \"Inside the <b>Package Catalog<\/b>, you can view the standard range of box models Packven provides to all partners. Based on the tests you run in the Optimizer, the system will highlight which Packven boxes fit the majority of your products.<br><br>From this page, you can select up to two specific box models to be shipped to you as physical samples for your inspection. This is also the place where you upload the details of your current 'legacy' boxes so the system can use them for all cost comparisons.\"\n },\n compliance: {\n title: \"Compliance Passport\", icon: \"fa-shield-halved\", bgColor: \"#e5e7eb\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/compliance_preview_01-scaled.png\",\n imgSrc2: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/compliance_preview_02-scaled.png\",\n imgSrc3: \"\",\n desc: \"This is your <b>Legal Safeguard<\/b>. Here, you monitor your shipment data against the 2026 environmental mandates to determine your exact tax liabilities and avoid potential government penalties. The system handles Sweden\u2019s complex NPA regulations and is ready for Germany\u2019s LUCID system.<br><br>You can generate automated environmental reports and preview a Digital Product Passport, which shows exactly what materials are in your boxes. We measure your success through four key areas: <b>Tax Savings<\/b>, <b>Total Market Weight<\/b> (tracking volume to avoid heavy fines), <b>Average Void Space<\/b>, and <b>Recycled Content<\/b>.\"\n },\n prototype: {\n title: \"Prototype Status\", icon: \"fa-truck-ramp-box\", bgColor: \"#f1f5f9\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/sku_tracker_preview_01-scaled.png\",\n imgSrc2: \"\",\n imgSrc3: \"\",\n desc: \"This section acts as a <b>Live Tracker<\/b> for the physical box samples you have requested. You can follow their journey from our facility to your office for testing.\"\n },\n archives: {\n title: \"Archives\", icon: \"fa-folder-open\", bgColor: \"#e5e7eb\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/archives_preview_01-scaled.png\",\n imgSrc2: \"\",\n imgSrc3: \"\",\n desc: \"The Archives serve as your personal <b>Simulation Library<\/b>. Here, you can review every calculation and comparison you have previously saved.<br><br>This is specifically designed to help you isolate certain parts of your business\u2014for instance, you can look only at your products sold in Norway\u2014to see which shipping strategy yields the highest profit. By comparing these saved tests, you can make strategic decisions about which box sizes work best for each specific market you serve.\"\n },\n settings: {\n title: \"System Settings\", icon: \"fa-gear\", bgColor: \"#e5e7eb\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/settings_preview_01-scaled.png\",\n imgSrc2: \"\",\n imgSrc3: \"\",\n desc: \"In this section, you can tailor the portal to your preferences, such as switching the language between Swedish and English or viewing costs in either Swedish Kronor or Euros.<br><br>Most importantly, you can set your <b>Optimization Strategy<\/b>. You can choose to focus on <b>Net Profit (ROI)<\/b>, where the system prioritizes the lowest cost even if the box is only 'barely' compliant. Alternatively, you can choose <b>Compliance<\/b>, which focuses on using the absolute minimum amount of cardboard. The default setting is <b>Balance<\/b>, which finds the most efficient middle ground.\"\n },\n subscription: {\n title: \"Subscription\", icon: \"fa-credit-card\", bgColor: \"#f8fafc\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/subscription_preview_01-scaled.png\",\n imgSrc2: \"\",\n imgSrc3: \"\",\n desc: \"This section manages your <b>Partnership Level<\/b>. As you move from a pilot user to a permanent partner, you can select the service tier that best fits your company's shipping volume.\"\n },\n help: {\n title: \"Help & FAQ\", icon: \"fa-circle-question\", bgColor: \"#e5e7eb\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/help_and_faq_preview_01-scaled.png\",\n imgSrc2: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/help_and_faq_preview_02-scaled.png\",\n imgSrc3: \"\",\n desc: \"If you ever have a question, need a specific shipping carrier added that is not in our list, or require a custom cardboard thickness (flute size), you can send a request here. We can update your portal to fit your company\u2019s unique needs.<br><br>This page also provides answers to Frequently Asked Questions, serving as a guide to help you navigate and master the Packven interface.\"\n }\n };\n\n \/\/ ====================================================================\n \/\/ MODAL INTERACTION LOGIC\n \/\/ ====================================================================\n function openPortalModal() {\n const modal = document.getElementById('interactivePortal');\n modal.style.display = 'flex';\n document.body.style.overflow = 'hidden';\n setTimeout(() => modal.classList.add('show'), 10);\n }\n\n function closePortalModal() {\n const modal = document.getElementById('interactivePortal');\n modal.classList.remove('show');\n setTimeout(() => {\n modal.style.display = 'none';\n document.body.style.overflow = 'auto';\n }, 300);\n }\n\n function handleOverlayClick(e) {\n if (e.target === document.getElementById('interactivePortal')) {\n closePortalModal();\n }\n }\n\n function switchPortalPage(pageId, btnElement) {\n const data = portalData[pageId];\n if (!data) return;\n\n \/\/ 1. Manage Sidebar active states\n document.querySelectorAll('.sh-nav-item').forEach(btn => btn.classList.remove('active'));\n btnElement.classList.add('active');\n\n \/\/ 2. Update Header\n document.getElementById('shPageTitle').innerText = data.title;\n document.getElementById('shPageIcon').innerHTML = `<i class=\"fa-solid ${data.icon}\"><\/i>`;\n\n \/\/ 3. Update Explainer Panel\n document.getElementById('exTitle').innerText = data.title;\n document.getElementById('exText').innerHTML = data.desc;\n\n \/\/ 4. Update Main Content Container & Background\n const contentArea = document.getElementById('shContentArea');\n const container = document.getElementById('shScreenshotContainer');\n const placeholder = document.getElementById('shPlaceholder');\n const img1 = document.getElementById('shScreenshot1');\n const img2 = document.getElementById('shScreenshot2');\n const img3 = document.getElementById('shScreenshot3');\n \n \/\/ Scroll to top and set seamless background color\n contentArea.scrollTop = 0;\n contentArea.style.background = data.bgColor || \"#e5e7eb\";\n \n placeholder.style.display = 'none';\n container.style.display = 'flex';\n \n \/\/ Fade effect for image swap\n container.style.opacity = '0';\n setTimeout(() => {\n img1.src = data.imgSrc1;\n \n if (data.imgSrc2) {\n img2.src = data.imgSrc2;\n img2.style.display = 'block';\n } else {\n img2.src = \"\";\n img2.style.display = 'none';\n }\n\n if (data.imgSrc3) {\n img3.src = data.imgSrc3;\n img3.style.display = 'block';\n } else {\n img3.src = \"\";\n img3.style.display = 'none';\n }\n \n \/\/ Simple fade in once the source is set\n setTimeout(() => { container.style.opacity = '1'; }, 50);\n }, 150);\n }\n\n \/\/ ====================================================================\n \/\/ AVATAR & DROPDOWN LOGIC\n \/\/ ====================================================================\n function toggleDropdown(e) {\n e.stopPropagation();\n document.getElementById('profileDropdown').classList.toggle('show');\n }\n\n document.addEventListener('click', () => {\n const dd = document.getElementById('profileDropdown');\n if (dd && dd.classList.contains('show')) dd.classList.remove('show');\n });\n\n function openAvatarModal(e) {\n e.stopPropagation();\n document.getElementById('profileDropdown').classList.remove('show');\n const modal = document.getElementById('avatarModal');\n modal.style.display = 'flex';\n setTimeout(() => modal.classList.add('show'), 10);\n }\n\n function closeAvatarModal() {\n const modal = document.getElementById('avatarModal');\n modal.classList.remove('show');\n setTimeout(() => modal.style.display = 'none', 300);\n }\n\n function handleAvaOverlayClick(e) {\n if (e.target === document.getElementById('avatarModal')) closeAvatarModal();\n }\n\n function setAvatar(iconClass, bgClass) {\n const headAva = document.getElementById('headerAvatar');\n const menuAva = document.getElementById('menuAvatar');\n \n [headAva, menuAva].forEach(el => {\n el.innerHTML = `<i class=\"fa-solid ${iconClass}\"><\/i>`;\n el.className = `sh-avatar ${bgClass}`; \/\/ Resets and applies new bg\n if (el.id === 'menuAvatar') el.className = `sh-dd-avatar ${bgClass}`;\n });\n \n closeAvatarModal();\n }\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bdff492 e-con-full e-flex e-con e-parent\" data-id=\"bdff492\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a5eb111 elementor-widget elementor-widget-html\" data-id=\"a5eb111\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Packven Logistics | Engineering Compliance<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:weight@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n \/* --- VARIABLES --- *\/\n :root {\n --pv-blue: #89CFF0;\n --pv-red: #F88379;\n --pv-gold: #f1c40f;\n --pv-dark: #2c3e50;\n --pv-border: #cbd5e1;\n --pv-font: 'Outfit', sans-serif;\n --pv-mono: 'JetBrains Mono', monospace;\n \n --c-blue: #89CFF0;\n --c-blue-dark: #2980b9;\n --c-dark: #1a1a1a;\n --c-red-text: #F88379;\n --c-grey-bg: #f9f9f9;\n --c-border: #e0e0e0;\n --c-grey-text: #555;\n }\n strong {\n font-weight: 700;\n color: var(--c-grey-text);\n padding: 0 4px;\n border-radius: 4px;\n }\n \n * { box-sizing: border-box; margin: 0; padding: 0; }\n \n body {\n font-family: var(--pv-font);\n color: var(--pv-dark);\n background-color: #ffffff;\n line-height: 1.6;\n overflow-x: hidden;\n }\n\n \/* --- MODAL STYLES --- *\/\n .erp-modal-overlay {\n position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh;\n background: rgba(255, 255, 255, 0.98); z-index: 2147483647 !important; \n pointer-events: none; display: none; \n align-items: center; justify-content: center;\n backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.3s ease;\n }\n .erp-modal-overlay.open { display: flex !important; opacity: 1 !important; pointer-events: auto; }\n \n .erp-modal-content {\n background: white; width: 95%; max-width: 550px;\n padding: 40px; border-radius: 12px; position: relative;\n box-shadow: 0 30px 60px rgba(0,0,0,0.1);\n animation: scaleIn 0.3s ease; border: 1px solid var(--c-border);\n text-align: left; pointer-events: auto;\n max-height: 90vh; overflow-y: auto;\n }\n @keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n\n .close-modal {\n position: absolute; top: 20px; right: 20px;\n background-color: transparent !important; border: transparent !important; outline:none!important;\n box-shadow: none !important;\n padding: 0px !important; margin: 0 !important; -webkit-appearance: none;\n font-size: 1.5rem; font-weight: 700; line-height: 1; color: #ccc; \n cursor: pointer; transition: color 0.2s ease; z-index: 10;\n }\n .close-modal:hover { color: var(--c-red-text); }\n\n .form-intro h2 {\n font-size: 1.5rem; font-weight: 700; color: var(--c-dark);\n margin: 0 0 15px 0; letter-spacing: -0.5px;\n }\n .form-intro p {\n font-size: 0.9rem; color: #666; line-height: 1.6;\n margin-bottom: 30px; border-left: 3px solid var(--pv-blue); padding-left: 15px;\n }\n\n .form-group { margin-bottom: 20px; }\n\n .erp-label {\n font-size: 0.8rem; font-weight: 700; color: var(--c-dark);\n display: block; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;\n }\n \n .erp-sub-label {\n font-size: 0.75rem; color: #888; font-weight: 400; display: block; margin-top: -5px; margin-bottom: 8px;\n }\n\n .erp-input, .erp-select {\n width: 100%; padding: 12px 15px;\n border: 1px solid #e0e0e0; border-radius: 6px;\n font-family: var(--pv-mono); font-size: 0.95rem;\n background: #fafafa; color: #333; transition: all 0.2s;\n }\n .erp-input:focus, .erp-select:focus {\n border-color: var(--pv-blue); background: white; outline: none;\n }\n\n .next-step-box {\n background-color: #f1f8ff;\n border: 1px dashed var(--c-blue-dark);\n padding: 20px; border-radius: 8px; margin-top: 30px;\n font-size: 0.85rem; color: var(--c-blue-dark); line-height: 1.5;\n }\n .next-step-header {\n font-weight: 700; text-transform: uppercase; \n font-size: 0.75rem; display: block; margin-bottom: 5px; letter-spacing: 1px;\n }\n\n .submit-btn {\n width: 100%; margin-top: 15px; padding: 16px;\n background-color: transparent;\n border: 1px solid var(--pv-blue); \n color: var(--pv-blue);\n font-weight: 700; text-transform: uppercase; letter-spacing: 1px;\n border-radius: 50px; cursor: pointer; transition: all 0.3s ease;\n }\n .submit-btn:hover { \n background-color: var(--pv-blue); color: white;\n }\n \n .package-txt {font-size: 1rem; text-align: left; }\n .packven-section { padding: 100px 20px; border-bottom: 1px solid var(--pv-border);}\n .pv-container { max-width: 1200px; margin: 0 auto; width: 100%; }\n .pv-header { text-align: center; max-width: 700px; margin: 0 auto 70px; font-family: var(--pv-font);}\n .pv-header h2 { font-size: clamp(2rem, 5vw, 2.5rem); font-weight: 700; margin-bottom: 15px; color: var(--pv-dark); letter-spacing: -0.5px; line-height: 1.2; font-family: var(--pv-font); }\n .pv-header p { font-size: 1.1rem; color: #666; line-height: 1.6; font-family: var(--pv-font); }\n\n .vp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }\n .vp-card {\n padding: 40px 30px; background: #ffffff; border: 1px solid var(--pv-border); border-radius: 16px;\n transition: all 0.3s ease; position: relative; overflow: hidden; display: flex; flex-direction: column;\n }\n .vp-card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 12px; margin-top: 25px; }\n .vp-card p { font-size: 0.95rem; color: #666; line-height: 1.6; }\n .vp-icon-box { width: 50px; height: 50px; margin-bottom: 10px; display: flex; align-items: center; }\n .vp-svg { width: 40px; height: 40px; stroke-width: 1.5; fill: none; stroke: var(--pv-dark); transition: all 0.4s ease; }\n .vp-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.06); }\n .vp-card:hover .vp-svg { transform: scale(1.1); }\n .vp-card:nth-child(1):hover { border-color: var(--pv-blue); } .vp-card:nth-child(1):hover .vp-svg { stroke: var(--pv-blue); }\n .vp-card:nth-child(2):hover { border-color: var(--pv-red); } .vp-card:nth-child(2):hover .vp-svg { stroke: var(--pv-red); }\n .vp-card:nth-child(3):hover { border-color: var(--pv-blue); } .vp-card:nth-child(3):hover .vp-svg { stroke: var(--pv-blue); }\n .vp-card:nth-child(4):hover { border-color: var(--pv-gold); } .vp-card:nth-child(4):hover .vp-svg { stroke: var(--pv-gold); }\n\n .protocol-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 60px 40px;\n margin-top: 50px;\n }\n\n .proto-step { position: relative; padding-left: 25px; border-left: 2px solid #eee; transition: all 0.3s; }\n .proto-step:hover { border-left-color: var(--pv-blue); }\n \n .proto-num {\n font-family: var(--pv-mono); font-size: 0.8rem; color: var(--pv-blue);\n margin-bottom: 8px; display: block; font-weight: 700;\n }\n .proto-h3 { font-size: 1.25rem; font-weight: 700; color: var(--pv-dark); margin: 0 0 10px 0; }\n .proto-p { font-size: 0.95rem; color: #666; margin: 0; line-height: 1.6; }\n\n .protocol-wrapper {\n position: relative;\n background: white;\n border: 1px solid var(--pv-border);\n border-radius: 16px;\n padding: 60px 40px;\n box-shadow: 0 5px 20px rgba(0,0,0,0.03);\n }\n\n .cta-section { \n background-color: #fafafa; \n text-align: center; \n padding: 100px 20px; \n border-top: 1px solid var(--pv-border); \n }\n \n .partner-card {\n background: white;\n border: 1px solid var(--pv-border);\n border-radius: 16px;\n padding: 60px 40px;\n text-align: center;\n box-shadow: 0 10px 40px rgba(0,0,0,0.05);\n }\n \n .partner-grid {\n display: grid;\n grid-template-columns: 1.2fr 0.8fr;\n gap: 60px;\n margin-top: 50px;\n text-align: left;\n }\n\n .cta-badge { \n font-size: 0.75rem; \n text-transform: uppercase; \n letter-spacing: 2px; \n font-weight: 700; \n color: var(--pv-red); \n margin-bottom: 20px; \n display: block; \n }\n\n .cta-btn-ghost-red {\n display: inline-block; padding: 16px 35px;\n background-color: transparent; \n color: var(--pv-red);\n border: 2px solid var(--pv-red);\n border-radius: 8px;\n font-weight: 700; font-size: 1rem;\n text-decoration: none; transition: all 0.2s ease;\n cursor: pointer;\n }\n \n .cta-btn-ghost-red:hover {\n background-color: var(--pv-red);\n color: white;\n transform: translateY(-2px);\n box-shadow: 0 10px 25px rgba(248, 131, 121, 0.3);\n }\n\n @media (max-width: 900px) {\n .protocol-grid { grid-template-columns: 1fr; gap: 40px; }\n .partner-grid { grid-template-columns: 1fr; gap: 40px; }\n .partner-card { padding: 40px 20px; }\n .packven-section { padding: 60px 20px; }\n }\n \n \n<\/style>\n<\/head>\n<body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1>\n\n <div id=\"homepage-pilot-modal\" class=\"erp-modal-overlay\">\n <div class=\"erp-modal-content\">\n <button class=\"close-modal\" onclick=\"closePilotModal()\">\u2715<\/button>\n \n <div class=\"form-intro\">\n <h2>Strategic Logistics Inquiry<\/h2>\n <p>Packven partners with brands to engineer compliance and reduce shipping overhead. Please provide your structural data below to begin the volumetric audit. Sensitive financial data will be requested via secure channel.<\/p>\n <\/div>\n\n <form id=\"audit-form\" action=\"https:\/\/portal.packven.com\/submit-audit\" method=\"POST\">\n \n <div class=\"form-group\">\n <label class=\"erp-label\">Company Name<\/label>\n <input type=\"text\" name=\"company_name\" class=\"erp-input\" placeholder=\"e.g., Your Company\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"erp-label\">Monthly Parcel Volume<\/label>\n <select name=\"monthly_volume\" class=\"erp-select\" required>\n <option value=\"\" disabled selected>Select volume range...<\/option>\n <option value=\"500-2000\">500 \u2013 2,000 pkgs\/mo<\/option>\n <option value=\"2000-10000\">2,000 \u2013 10,000 pkgs\/mo<\/option>\n <option value=\"10000+\">10,000+ pkgs\/mo<\/option>\n <\/select>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"erp-label\">Primary Logistics Partners<\/label>\n <span class=\"erp-sub-label\">Hold Ctrl\/Cmd to select multiple or list below.<\/span>\n <input type=\"text\" name=\"partners\" class=\"erp-input\" placeholder=\"e.g. PostNord, DHL, Budbee...\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"erp-label\">Active Packaging SKUs<\/label>\n <input type=\"number\" name=\"sku_num\" class=\"erp-input\" placeholder=\"e.g. 5 unique box sizes\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"erp-label\">Estimated Void Space<\/label>\n <input type=\"text\" name=\"empty_space\" class=\"erp-input\" placeholder=\"e.g. 30% empty air per box\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"erp-label\">Work Email<\/label>\n <input type=\"email\" name=\"work_email\" class=\"erp-input\" placeholder=\"name@company.com\" required>\n <\/div>\n\n <div class=\"next-step-box\">\n <span class=\"next-step-header\">The Process:<\/span>\n Upon submission, our engineering team will perform a preliminary review of your volume profile. Qualified partners will receive an invitation to the Packven Dashboard to begin the baseline audit.\n <\/div>\n\n <button type=\"submit\" class=\"submit-btn\">Request Audit Access<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <section class=\"packven-section\">\n <div class=\"pv-container\">\n <div class=\"pv-header\">\n <h2>Engineering Over Guesswork<\/h2>\n <p>We bridge the gap between logistics, engineering, and packaging supply.<\/p>\n <\/div>\n <div class=\"vp-grid\">\n <div class=\"vp-card\">\n <div class=\"vp-icon-box\"><svg class=\"vp-svg\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"><\/path><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"><\/polyline><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"><\/line><\/svg><\/div>\n <h3>Right Size Engineering<\/h3>\n <p>We audit your SKU data to recommend right-size formats that stay within volume limits for Varubrev and Instabox where possible.<\/p>\n <\/div>\n <div class=\"vp-card\">\n <div class=\"vp-icon-box\"><svg class=\"vp-svg\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path><path d=\"M9 12l2 2 4-4\"><\/path><\/svg><\/div>\n <h3>Compliance Passport<\/h3>\n <p>Every SKU comes with a digital QR passport containing FSC certifications where available and disposal guidance, with exportable draft EPR outputs.<\/p>\n <\/div>\n <div class=\"vp-card\">\n <div class=\"vp-icon-box\"><svg class=\"vp-svg\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.3\"><\/path><\/svg><\/div>\n <h3>Packaging as a Service<\/h3>\n <p>Forget huge MOQ orders. Our subscription bundles give you predictable spending and automated restocking.<\/p>\n <\/div>\n <div class=\"vp-card\">\n <div class=\"vp-icon-box\"><svg class=\"vp-svg\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg><\/div>\n <h3>Premium Branding<\/h3>\n <p>Sustainable does not have to mean boring. Upgrade your unboxing experience with integrated logo options and design precision.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <section class=\"cta-section\">\n <div class=\"pv-container\">\n <div class=\"partner-card\">\n <span class=\"cta-badge\">Limited Pilot Intake \u2022 2026<\/span>\n <h2 style=\"font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 20px; color: var(--pv-dark); font-weight: 700; line-height: 1.1;\">\n Partnering with<br><span style=\"color:var(--pv-blue);\">Forward Thinking Brands<\/span>.\n <\/h2>\n \n <div class=\"partner-grid\">\n <div style=\"text-align:left;\">\n <h3 style=\"font-size:1.4rem; font-weight:700; margin-bottom:15px; color:var(--pv-dark);\">We are not a catalog.<\/h3>\n <p style=\"font-size:1rem; color:#666; line-height:1.6; margin-bottom:30px;\">Packven combines logistics engineering and packaging supply to reduce dead air and simplify EPR workload. We work from your shipment profile and carrier thresholds to design a packaging system that performs in the real world.\n <\/p>\n \n <h3 style=\"font-size:1.2rem; font-weight:700; margin-bottom:10px; color:var(--pv-dark);\">Engineering requires focus.<\/h3>\n <p style=\"font-size:1rem; color:#666; line-height:1.6;\">\n We keep intake limited so each pilot gets direct technical support. From auditing top SKUs to validating CAD-cut fit, we optimize for measurable outcomes: less empty space, lower shipping cost, and cleaner compliance workflows.\n <\/p>\n <\/div>\n \n <div style=\"background:#f8f9fa; padding:30px; border-radius:12px; text-align:left; border:1px solid #eee; display:flex; flex-direction:column; justify-content:center;\">\n <h3 style=\"font-size:1.2rem; font-weight:700; margin-bottom:15px; color:var(--pv-red);\">Why start now?<\/h3>\n <p style=\"font-size:0.95rem; color:#555; line-height:1.6; margin-bottom:30px;\">\n Carrier pricing and EU packaging requirements are tightening. A pilot now gives you baseline data, fit validation, and a clear rollout path before 2026's regulatory pressure increase.\n <\/p>\n \n <button onclick=\"openPilotModal()\" class=\"cta-btn-ghost-red\" style=\"width:100%;\">Apply for Pilot Access<\/button>\n <p style=\"margin-top:15px; font-size:0.8rem; color:#999; text-align:center;\">No commitment required. Just data.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n<script>\n function teleportModal() {\n const modal = document.getElementById('homepage-pilot-modal');\n if (modal && modal.parentNode !== document.body) { document.body.appendChild(modal); }\n }\n teleportModal(); document.addEventListener(\"DOMContentLoaded\", teleportModal); window.addEventListener(\"load\", teleportModal);\n\n function openPilotModal() {\n const modal = document.getElementById('homepage-pilot-modal');\n if(modal) { modal.style.display = 'flex'; setTimeout(() => { modal.classList.add('open'); }, 10); }\n }\n function closePilotModal() {\n const modal = document.getElementById('homepage-pilot-modal');\n if(modal) { modal.classList.remove('open'); setTimeout(() => { modal.style.display = 'none'; }, 300); }\n }\n<\/script>\n\n<script>\ndocument.getElementById('audit-form').addEventListener('submit', function(e) {\n e.preventDefault(); \/\/ 1. Stop the browser from leaving the page\n \n var form = this;\n var actionUrl = form.getAttribute('action'); \/\/ Get the destination URL\n var formData = new FormData(form);\n\n \/\/ 2. Button Feedback (Optional: Change text to \"Sending...\")\n var submitBtn = form.querySelector('button[type=\"submit\"]');\n var originalText = submitBtn.innerText;\n submitBtn.innerText = \"Sending...\";\n submitBtn.disabled = true;\n\n \/\/ 3. Send the data silently\n fetch(actionUrl, {\n method: 'POST',\n body: formData \/\/ The browser automatically formats this correctly\n })\n .then(response => {\n if (response.ok) {\n \/\/ Success!\n alert(\"Message Sent! We will be in touch shortly.\");\n form.reset(); \/\/ Clear the form fields\n closePilotModal(); \/\/ Close the modal on success\n } else {\n \/\/ Server error\n alert(\"Something went wrong. Please email us directly.\");\n }\n })\n .catch(error => {\n \/\/ Network error\n console.error('Error:', error);\n alert(\"Connection error. Please try again.\");\n })\n .finally(() => {\n \/\/ Reset button\n submitBtn.innerText = originalText;\n submitBtn.disabled = false;\n });\n});\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fdf46f7 e-flex e-con-boxed e-con e-parent\" data-id=\"fdf46f7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0955291 elementor-widget elementor-widget-spacer\" data-id=\"0955291\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9260782 e-con-full e-flex e-con e-parent\" data-id=\"9260782\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5a238a0 elementor-widget elementor-widget-html\" data-id=\"5a238a0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n \/* --- VARIABLES & RESET --- *\/\n :root {\n --pv-blue: #89CFF0;\n --pv-red: #F88379;\n --pv-gold: #f1c40f;\n --pv-dark: #2c3e50;\n --pv-green: #27ae60;\n --pv-border: #e6e6e6;\n --pv-font-main: 'Outfit', sans-serif;\n --pv-font-mono: 'JetBrains Mono', monospace;\n }\n * { box-sizing: border-box; margin: 0; padding: 0; }\n \n body {\n font-family: var(--pv-font-main);\n color: var(--pv-dark);\n background-color: #ffffff;\n line-height: 1.6;\n }\n\n \/* --- SECTION CONTAINER --- *\/\n .problem-section {\n padding: 80px 20px;\n max-width: 1200px;\n margin: 0 auto;\n }\n\n \/* --- HEADER --- *\/\n .prob-header {\n text-align: center;\n max-width: 800px;\n margin: 0 auto 60px;\n }\n .prob-tag {\n font-family: var(--pv-font-mono);\n font-size: 0.8rem;\n color: var(--pv-red);\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 700;\n display: block;\n margin-bottom: 15px;\n }\n .prob-h2 {\n font-size: clamp(2rem, 4vw, 3rem);\n font-weight: 700;\n line-height: 1.1;\n margin-bottom: 20px;\n color: var(--pv-dark);\n }\n .prob-p {\n font-size: 1.15rem;\n color: #666;\n font-weight: 300;\n }\n\n \/* --- GOLDILOCKS THRESHOLDS (TRANSPARENT STYLE) --- *\/\n .threshold-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 20px;\n margin-bottom: 80px;\n }\n .threshold-card {\n border-radius: 12px;\n padding: 30px 20px;\n text-align: center;\n position: relative;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n box-shadow: 0 5px 15px rgba(0,0,0,0.03);\n color: var(--pv-dark); \/* Dark text for readability on light bg *\/\n backdrop-filter: blur(5px); \/* Glass effect *\/\n }\n .threshold-card:hover { \n transform: translateY(-3px); \n box-shadow: 0 10px 25px rgba(0,0,0,0.08);\n }\n \n .t-limit {\n display: inline-block;\n padding: 4px 10px;\n border-radius: 4px;\n font-family: var(--pv-font-mono);\n font-size: 0.85rem;\n margin-bottom: 15px;\n font-weight: 700;\n background: white;\n border: 1px solid rgba(0,0,0,0.05);\n }\n .t-title { font-weight: 700; font-size: 1.25rem; margin-bottom: 8px; display: block;}\n .t-desc { font-size: 0.9rem; opacity: 0.8; font-weight: 400; line-height: 1.4; color: #555; }\n \n \/* Transparent\/Tinted Backgrounds *\/\n .t-gold { \n background: rgba(241, 196, 15, 0.12); \/* 12% opacity gold *\/\n border: 1px solid rgba(241, 196, 15, 0.4);\n }\n .t-gold .t-limit { color: #b7950b; }\n\n .t-blue { \n background: rgba(137, 207, 240, 0.15); \/* 15% opacity blue *\/\n border: 1px solid rgba(137, 207, 240, 0.5);\n }\n .t-blue .t-limit { color: #5dade2; }\n\n .t-red { \n background: rgba(248, 131, 121, 0.12); \/* 12% opacity red *\/\n border: 1px solid rgba(248, 131, 121, 0.4);\n }\n .t-red .t-limit { color: var(--pv-red); \n \n }\n .disclaimer { font-size: 0.9rem; font-style: italic; text-align: center; margin-top: 20px; margin-bottom:-20px;\n }\n\n \/* --- RECEIPT COMPARISON --- *\/\n .comparison-wrapper {\n background: #f9fafb; \n border-radius: 16px;\n padding: 50px 30px;\n margin-bottom: 60px;\n border: 1px solid #eee;\n }\n .comp-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 40px;\n }\n \n .receipt-card {\n background: white;\n padding: 30px;\n border-radius: 8px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.04);\n font-family: var(--pv-font-mono);\n font-size: 0.9rem;\n position: relative;\n border: 1px solid #f0f0f0;\n }\n \n .r-header { \n font-family: var(--pv-font-main); \n font-weight: 700; \n font-size: 1.1rem; \n margin-bottom: 20px; \n display: flex; \n justify-content: space-between; \n align-items: center;\n }\n .r-row {\n display: flex;\n justify-content: space-between;\n margin-bottom: 12px;\n border-bottom: 1px dashed #eee;\n padding-bottom: 6px;\n }\n .r-label { color: #999; }\n .r-val { font-weight: 700; color: var(--pv-dark); }\n \n .r-total {\n margin-top: 20px;\n padding-top: 15px;\n border-top: 2px solid var(--pv-dark);\n display: flex;\n justify-content: space-between;\n font-size: 1.1rem;\n font-weight: 700;\n }\n .text-danger { color: var(--pv-red); }\n .text-success { color: var(--pv-blue); }\n\n \/* --- CSS ICONS --- *\/\n .icon-wrap {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n }\n .icon-x { background: rgba(248, 131, 121, 0.1); }\n .css-x { position: relative; width: 14px; height: 14px; }\n .css-x::before, .css-x::after {\n position: absolute; content: ''; width: 100%; height: 2px;\n background-color: var(--pv-red); top: 50%; left: 0; border-radius: 2px;\n }\n .css-x::before { transform: rotate(45deg); }\n .css-x::after { transform: rotate(-45deg); }\n\n .icon-check { background: rgba(39, 174, 96, 0.1); }\n .css-check {\n width: 7px; height: 12px;\n border-bottom: 2px solid var(--pv-green);\n border-right: 2px solid var(--pv-green);\n transform: rotate(45deg); margin-bottom: 2px;\n }\n\n \/* --- THE BOTTOM LINE (SMALLER) --- *\/\n .bottom-line-sleek {\n text-align: left;\n padding: 10px 0 10px 30px; \/* Reduced padding *\/\n margin-bottom: 50px;\n border-left: 3px solid var(--pv-dark);\n background: transparent;\n color: var(--pv-dark);\n }\n .bl-big { \n font-size: 1.6rem; \/* Reduced from 3.5rem *\/\n font-weight: 700; \n line-height: 1.2;\n margin-bottom: 8px; \n color: var(--pv-dark);\n }\n .bl-sub { \n font-size: 1rem; \/* Reduced size *\/\n color: #666; \n font-weight: 400;\n max-width: 700px;\n }\n .highlight { color: var(--pv-red); font-weight: 700; }\n\n \/* --- REGULATORY THREAT --- *\/\n .reg-alert {\n border: 1px solid rgba(241, 196, 15, 0.5);\n background: #fffdf5;\n padding: 25px;\n border-radius: 8px;\n display: flex;\n gap: 20px;\n align-items: center;\n }\n .reg-icon { font-size: 1.5rem; }\n .reg-content h4 { margin: 0 0 5px 0; font-size: 1.05rem; font-weight: 700; color: var(--pv-dark); }\n .reg-content p { margin: 0; font-size: 0.9rem; color: #555; }\n\n @media (max-width: 768px) {\n .comp-grid { grid-template-columns: 1fr; }\n .problem-section { padding: 50px 20px; }\n .reg-alert { flex-direction: column; text-align: center; }\n .bottom-line-sleek { padding-left: 15px; border-left-width: 3px; }\n }\n <\/style>\n<\/head>\n<body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1>\n\n<section class=\"problem-section\">\n \n <div class=\"prob-header\">\n <span class=\"prob-tag\">The 1-Millimeter Penalty<\/span>\n <h2 class=\"prob-h2\">You are paying for air.<br>And the price is going up.<\/h2>\n <p class=\"prob-p\">\n Standard packaging catalogs sell boxes designed for their manufacturing convenience, not your shipping reality. \n Because of this, many e-merchants fall into higher shipping tiers when the last few millimeters push a parcel over a threshold.\n <\/p>\n <\/div>\n\n <div class=\"threshold-grid\">\n <div class=\"threshold-card t-gold\">\n <span class=\"t-limit\">Max 30 mm<\/span>\n <span class=\"t-title\">Varubrev<\/span>\n <span class=\"t-desc\">Lowest Rate. Ideal for supplements & cosmetics.<\/span>\n <\/div>\n <div class=\"threshold-card t-blue\">\n <span class=\"t-limit\">Max 70 mm<\/span>\n <span class=\"t-title\">Varubrev (skrymmande)<\/span>\n <span class=\"t-desc\">The \"Golden Range\". Standard bulk rate.<\/span>\n <\/div>\n <div class=\"threshold-card t-red\">\n <span class=\"t-limit\">71 mm +<\/span>\n <span class=\"t-title\">Parcel Rate<\/span>\n <span class=\"t-desc\">Over-limit fees applied.<\/span>\n <\/div>\n <\/div>\n\n <div class=\"comparison-wrapper\">\n <div class=\"comp-grid\">\n \n <div class=\"receipt-card\">\n <div class=\"r-header\">\n <span>Standard Box <\/span>\n <div class=\"icon-wrap icon-x\">\n <div class=\"css-x\"><\/div>\n <\/div>\n <\/div>\n <div class=\"r-row\">\n <span class=\"r-label\">Box Height<\/span>\n <span class=\"r-val\">75 mm<\/span>\n <\/div>\n <div class=\"r-row\">\n <span class=\"r-label\">Content Height<\/span>\n <span class=\"r-val\">50 mm<\/span>\n <\/div>\n <div class=\"r-row\">\n <span class=\"r-label\">Empty Air<\/span>\n <span class=\"r-val text-danger\">25 mm<\/span>\n <\/div>\n <div class=\"r-row\">\n <span class=\"r-label\">Carrier Class<\/span>\n <span class=\"r-val\"> Service Point\/ Parcel<\/span>\n <\/div>\n <div class=\"r-total\">\n <span>Est. Cost<\/span>\n <span class=\"text-danger\">~69 SEK<\/span>\n <\/div>\n <\/div>\n\n <div class=\"receipt-card\">\n <div class=\"r-header\">\n <span>Packven Solution<\/span>\n <div class=\"icon-wrap icon-check\">\n <div class=\"css-check\"><\/div>\n <\/div>\n <\/div>\n <div class=\"r-row\">\n <span class=\"r-label\">Box Height<\/span>\n <span class=\"r-val\">69 mm<\/span>\n <\/div>\n <div class=\"r-row\">\n <span class=\"r-label\">Content Height<\/span>\n <span class=\"r-val\">50 mm<\/span>\n <\/div>\n <div class=\"r-row\">\n <span class=\"r-label\">Empty Air<\/span>\n <span class=\"r-val text-success\">19 mm<\/span>\n <\/div>\n <div class=\"r-row\">\n <span class=\"r-label\">Carrier Class<\/span>\n <span class=\"r-val\">Varubrev<\/span>\n <\/div>\n <div class=\"r-total\">\n <span>Est. Cost<\/span>\n <span class=\"text-success\">~49 SEK<\/span>\n \n <\/div>\n <\/div>\n <\/div>\n <p class=\"disclaimer\">~Example thresholds and rates vary by carrier and service level.<\/p>\n <\/div>\n\n <div class=\"bottom-line-sleek\">\n <div class=\"bl-big\">That is a <span class=\"highlight\">20 SEK<\/span> difference per order.<\/div>\n <div class=\"bl-sub\">If you ship 1,000 orders a month, using the wrong box is costing you <strong>240,000 SEK a year.<\/strong><\/div>\n <\/div>\n\n <div class=\"reg-alert\">\n <div class=\"reg-icon\">\u26a0\ufe0f<\/div>\n <div class=\"reg-content\">\n <h4>The Regulatory Threat (EU PPWR)<\/h4>\n <p>Cost isn\u2019t the only issue anymore. Under the EU Packaging and Packaging Waste Regulation (PPWR), packaging efficiency and documentation are moving toward enforceable requirements. Reducing empty space and maintaining exportable packaging data now lowers future compliance risk and avoids expensive surprises later.\n <\/p>\n <\/div>\n <\/div>\n<\/section>\n\n<section class=\"packven-section\">\n <div class=\"pv-container\">\n <div class=\"protocol-wrapper\">\n <div class=\"pv-header\" style=\"margin-bottom:0;\">\n <h2>Packven Packaging OS<\/h2> \n <div> \n <\/div> \n <h3>\n <span style=\"font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(0,0,0,0.6);\">\n Product vision - Post Launch<\/span>\n <\/h3>\n <p>Packven is building a managed packaging system that reduces dimensional\/empty space and produces exportable compliance artifacts for EU shipping.<\/p>\n <\/div>\n <p class=\"package-txt\"><strong>What customers buy:<\/strong><\/p>\n <div class=\"protocol-grid\">\n <div class=\"proto-step\">\n <span class=\"proto-num\">Standardize packaging<\/span>\n <h3 class=\"proto-h3\">Right-Size Packaging Stack (subscription)<\/h3>\n <p class=\"proto-p\"> A small set of winning boxes and mailers + void fill, aligned to carrier thresholds and service levels and replenished automatically.<\/p>\n <\/div>\n <div class=\"proto-step\">\n <span class=\"proto-num\">Quantify savings<\/span>\n <h3 class=\"proto-h3\">Right-Size Profit Engine (Portal)<\/h3>\n <p class=\"proto-p\"> SKU \u2192 recommended format, Right-Size Score, and \u201c\u20ac\/kr saved per 100 shipments\u201d impact view.<\/p>\n <\/div>\n <div class=\"proto-step\">\n <span class=\"proto-num\">Prove compliance<\/span>\n <h3 class=\"proto-h3\">Digital Compliance Passport<\/h3>\n <p class=\"proto-p\"> Living packaging data per format (composition, certificates where available, disposal guidance, labeling), always up to date via QR.<\/p>\n <\/div>\n <div class=\"proto-step\">\n <span class=\"proto-num\">Export reporting<\/span>\n <h3 class=\"proto-h3\">Automation & Reporting\n <\/h3>\n <p class=\"proto-p\"> Get exports, audit trails, and draft country-by-country reporting outputs as integrations mature.<\/p>\n <\/div>\n <\/div>\n\n <p style=\"text-align:center; margin-top: 50px; font-size: 0.9rem; color: #999; font-style: italic;\">\n Entry point: Start with the Pilot Protocol (evaluation only, governed by the LOI).\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d794b87 elementor-widget elementor-widget-html\" data-id=\"d794b87\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n \/* --- SECTION STYLES --- *\/\n .starter-pack-section {\n padding: 100px 20px;\n background-color: #fcfcfc;\n border-bottom: 1px solid #e5e5e5;\n font-family: 'Outfit', sans-serif;\n }\n\n .sp-header {\n text-align: center; max-width: 600px; margin: 0 auto 60px;\n }\n .sp-header h2 { font-size: 2.5rem; margin-bottom: 15px; color: #2c3e50; line-height: 1.1; }\n .sp-header p { font-size: 1.1rem; color: #666; }\n\n .sp-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n gap: 30px;\n max-width: 1100px; margin: 0 auto;\n }\n\n \/* CARD DESIGN *\/\n .sp-card {\n background: white;\n border-radius: 16px;\n overflow: hidden;\n text-decoration: none; color: inherit;\n display: flex; flex-direction: column;\n transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n border: 1px solid rgba(0,0,0,0.06);\n box-shadow: 0 4px 10px rgba(0,0,0,0.03);\n position: relative;\n }\n\n .sp-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 20px 40px rgba(0,0,0,0.08);\n }\n\n \/* Color Strip at Top *\/\n .sp-strip { height: 6px; width: 100%; transition: height 0.3s; }\n .sp-card:hover .sp-strip { height: 8px; }\n\n \/* Content Area *\/\n .sp-body { padding: 30px; flex-grow: 1; display: flex; flex-direction: column; }\n \n .sp-label {\n font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;\n margin-bottom: 12px; color: #999;\n }\n \n .sp-title { font-size: 1.6rem; font-weight: 700; color: #2c3e50; margin-bottom: 15px; line-height: 1.2; }\n .sp-desc { font-size: 1rem; color: #666; line-height: 1.6; margin-bottom: 30px; flex-grow: 1; }\n \n \/* BUTTON STYLES *\/\n .sp-btn {\n font-size: 0.95rem; font-weight: 700; \n padding: 14px 0; border-radius: 50px;\n text-align: center; width: 100%;\n transition: all 0.3s ease;\n border: 2px solid transparent;\n display: block;\n }\n\n \/* --- THEMES --- *\/\n \/* Blue Theme *\/\n .theme-blue .sp-strip { background: #89CFF0; }\n .theme-blue .sp-btn { border-color: #89CFF0; color: #89CFF0; background: transparent; }\n .theme-blue:hover .sp-btn { background: #89CFF0; color: white; }\n\n \/* Red Theme *\/\n .theme-red .sp-strip { background: #F88379; }\n .theme-red .sp-btn { border-color: #F88379; color: #F88379; background: transparent; }\n .theme-red:hover .sp-btn { background: #F88379; color: white; }\n\n \/* RESPONSIVE *\/\n @media (max-width: 768px) {\n .sp-grid { grid-template-columns: 1fr; }\n .sp-header h2 { font-size: 2rem; }\n }\n<\/style>\n\n<section class=\"starter-pack-section\">\n <div class=\"sp-header\">\n <h2>The Logistics Starter Pack<\/h2>\n <p>Three critical guides for 2026. Start here to future-proof your supply chain.<\/p>\n <\/div>\n\n <div class=\"sp-grid\">\n \n <a href=\"https:\/\/packven.com\/eu-ppwr-2026-2030-article\/\" class=\"sp-card theme-blue\">\n <div class=\"sp-strip\"><\/div>\n <div class=\"sp-body\">\n <span class=\"sp-label\">Regulation Research<\/span>\n <h3 class=\"sp-title\">EU PPWR 2026<\/h3>\n <p class=\"sp-desc\">The compliance shift is already underway. Here\u2019s what PPWR changes, when key requirements phase in, and what Swedish producers should start organising now.<\/p>\n <span class=\"sp-btn\">Learn More<\/span>\n <\/div>\n <\/a>\n\n <a href=\"https:\/\/packven.com\/air-tax-article\/\" class=\"sp-card theme-red\">\n <div class=\"sp-strip\"><\/div>\n <div class=\"sp-body\">\n <span class=\"sp-label\">Product Research<\/span>\n <h3 class=\"sp-title\">The Air-Tax<\/h3>\n <p class=\"sp-desc\">How volumetric weight creates a hidden tax on your business. An extremely expensive mistake hidden in plain sight.<\/p>\n <span class=\"sp-btn\">Learn More<\/span>\n <\/div>\n <\/a>\n\n <a href=\"https:\/\/packven.com\/varubrev-article\/\" class=\"sp-card theme-red\">\n <div class=\"sp-strip\"><\/div>\n <div class=\"sp-body\">\n <span class=\"sp-label\">Market Strategy<\/span>\n <h3 class=\"sp-title\">Postnord Varubrev<\/h3>\n <p class=\"sp-desc\">The Swedish sweet spot for small parcels. How to stay within Varubrev limits, reduce empty space, and protect margin.<\/p>\n <span class=\"sp-btn\">Learn More<\/span>\n <\/div>\n <\/a>\n\n <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3312a75 e-flex e-con-boxed e-con e-parent\" data-id=\"3312a75\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd52343 elementor-widget elementor-widget-spacer\" data-id=\"fd52343\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8bfeab4 e-con-full e-flex e-con e-parent\" data-id=\"8bfeab4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-01f1c66 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-html\" data-id=\"01f1c66\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"contact-target\" class=\"swiss-contact-wrapper\">\n <div class=\"contact-inner\">\n <div class=\"contact-header\">\n <h2 class=\"form-headline\">Connect<span class=\"dot\">.<\/span><\/h2>\n <p class=\"form-subline\">Have a question about our protocol or compliance? Reach out directly.<\/p>\n <\/div>\n\n <form id=\"contact-form\" action=\"https:\/\/portal.packven.com\/submit-contact\" method=\"POST\" class=\"contact-form\">\n <div class=\"form-grid\">\n <div class=\"input-wrap accent-blue\">\n <label for=\"full-name\">Your Name<\/label>\n <input type=\"text\" name=\"name\" id=\"full-name\" placeholder=\"Name\" required>\n <\/div>\n <div class=\"input-wrap accent-red\">\n <label for=\"email-address\">Your Email<\/label>\n <input type=\"email\" name=\"email\" id=\"email-address\" placeholder=\"email@company.com\" required>\n <\/div>\n <\/div>\n\n <div class=\"input-wrap accent-yellow\">\n <label for=\"inquiry\">Question Type<\/label>\n <select name=\"subject\" id=\"inquiry\" required>\n <option value=\"\" disabled selected>--Select--<\/option>\n <option value=\"General Inquiry\">General Inquiry<\/option>\n <option value=\"Technical Question\">Technical Question<\/option>\n <option value=\"Pricing\/Partnership\">Pricing\/Partnership<\/option>\n <option value=\"Other\">Other<\/option>\n <\/select>\n <\/div>\n\n <div class=\"input-wrap\">\n <label for=\"message\">Message<\/label>\n <textarea name=\"message\" id=\"message\" rows=\"5\" placeholder=\"How can we help?\" required><\/textarea>\n <\/div>\n\n <div class=\"button-wrap\">\n <button type=\"submit\" class=\"swiss-submit\">\n Send Message <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n<\/section>\n\n<style>\n :root {\n --c-bg: #ffffff;\n --c-text: #333333;\n --c-btn: #585858;\n --c-btn-hover: #333333;\n --c-blue: #75ebfb;\n --c-red: #fa8484;\n --c-yellow: #fbeb9d;\n --c-border: #eeeeee;\n --font-main: 'Outfit', sans-serif;\n }\n\n .swiss-contact-wrapper {\n background-color: var(--c-bg);\n padding: 100px 20px;\n font-family: var(--font-main);\n color: var(--c-text);\n display: flex;\n justify-content: center;\n }\n\n .contact-inner { max-width: 800px; width: 100%; }\n .form-headline { font-size: 3.5rem; font-weight: 700; margin: 0; letter-spacing: -2px; color: var(--c-text); }\n .form-headline .dot { color: var(--c-red); }\n .form-subline { font-size: 1.1rem; margin: 15px 0 60px 0; color: #777; font-weight: 300; max-width: 500px; }\n .contact-form { display: flex; flex-direction: column; gap: 40px; }\n .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }\n .input-wrap { display: flex; flex-direction: column; gap: 10px; }\n .input-wrap label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--c-text); }\n\n .contact-form input, .contact-form select, .contact-form textarea {\n background: transparent; border: none; border-bottom: 2px solid var(--c-border);\n padding: 12px 0; font-family: var(--font-main); font-size: 1.05rem;\n color: var(--c-text); border-radius: 0; transition: border-color 0.3s ease;\n }\n\n .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {\n outline: none; border-bottom-color: var(--c-text);\n }\n\n .accent-blue input:focus { border-bottom-color: var(--c-blue); }\n .accent-red input:focus { border-bottom-color: var(--c-red); }\n .accent-yellow select:focus { border-bottom-color: var(--c-yellow); }\n\n .swiss-submit {\n background-color: var(--c-btn); color: #ffffff; border: none;\n padding: 20px 45px; font-family: var(--font-main); font-size: 1rem;\n font-weight: 600; cursor: pointer; transition: all 0.3s ease;\n display: inline-flex; align-items: center; gap: 15px; border-radius: 4px;\n }\n\n .swiss-submit:hover { background-color: var(--c-btn-hover); transform: translateY(-2px); }\n .arrow { transition: transform 0.3s ease; }\n .swiss-submit:hover .arrow { transform: translateX(8px); }\n\n @media (max-width: 768px) {\n .form-grid { grid-template-columns: 1fr; }\n .form-headline { font-size: 2.5rem; }\n }\n<\/style>\n\n<script>\ndocument.getElementById('contact-form').addEventListener('submit', function(e) {\n e.preventDefault();\n \n const form = this;\n const submitBtn = form.querySelector('button[type=\"submit\"]');\n const originalText = submitBtn.innerText;\n \n submitBtn.innerText = \"Sending...\";\n submitBtn.disabled = true;\n\n const formData = new FormData(form);\n const data = Object.fromEntries(formData.entries());\n\n fetch(form.action, {\n method: 'POST',\n headers: { \n 'Content-Type': 'application\/json',\n 'Accept': 'application\/json'\n },\n body: JSON.stringify(data)\n })\n .then(response => {\n if (response.ok) {\n alert(\"Message sent! We'll get back to you shortly.\");\n form.reset();\n } else {\n \/\/ This is where you see the status code (e.g. 400 or 500)\n console.error(\"Server Status:\", response.status);\n alert(\"Submission failed. Check if Backend is updated to handle JSON and Message import.\");\n }\n })\n .catch(error => {\n console.error('Network Error:', error);\n alert(\"Connection error. Please try again.\");\n })\n .finally(() => {\n submitBtn.innerText = originalText;\n submitBtn.disabled = false;\n });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d835152 e-flex e-con-boxed e-con e-parent\" data-id=\"d835152\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-320a142 elementor-widget elementor-widget-spacer\" data-id=\"320a142\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c07aaf3 e-con-full e-flex e-con e-parent\" data-id=\"c07aaf3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-87c1e64 e-con-full e-flex e-con e-child\" data-id=\"87c1e64\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c0bee84 elementor-widget elementor-widget-html\" data-id=\"c0bee84\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n .about-footer {\n background-color: #333333; \/* Dark Grey from Screenshot *\/\n color: #ffffff;\n padding: 60px 20px;\n font-family: 'Outfit', sans-serif;\n border-top: 1px solid #444; \/* Subtle top border *\/\n }\n\n .footer-container {\n max-width: 600px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 40px;\n text-align: center;\n }\n\n .footer-col h4 {\n font-size: 1.1rem;\n font-weight: 700;\n margin-bottom: 15px;\n color: #ffffff; \/* White Headings *\/\n }\n\n .footer-col p {\n font-size: 0.95rem;\n color: #cccccc; \/* Light Grey text *\/\n margin-bottom: 8px;\n line-height: 1.6;\n }\n\n .footer-bottom {\n border-top: 1px solid #444; \/* Darker border line *\/\n margin-top: 40px;\n padding-top: 20px;\n text-align: center;\n color: #888;\n font-size: 0.85rem;\n }\n\n \/* Mobile Stacking *\/\n @media (max-width: 600px) {\n .footer-container { grid-template-columns: 1fr; gap: 30px; }\n }\n<\/style>\n\n<footer class=\"about-footer\">\n <div class=\"footer-container\">\n <div class=\"footer-col\">\n <h4>Packven (AB under formation) (\u201cPackven\u201d)<\/h4>\n <p>Next-Gen Logistics<\/p>\n <p>Stockholm, Sweden<\/p>\n <\/div>\n \n <div class=\"footer-col\">\n <h4>Contact Support<\/h4>\n <p>+46 73-051 85 17<\/p>\n <p>pilots@packven.com<\/p>\n <\/div>\n <\/div>\n\n <div class=\"footer-bottom\">\n 2026 Packven. All rights reserved.\n <\/div>\n<\/footer>\t\t\t\t<\/div>\n\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>Packven offers optimized logistics packaging for Nordic e-commerce.<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_eb_attr":"","_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t<meta name=\"description\" content=\"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/packven.com\/sv\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"sv_SE\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Packven -\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Home - Packven\" \/>\n\t\t<meta property=\"og:description\" content=\"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/packven.com\/sv\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-01-16T09:47:15+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-08-27T12:35:07+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Home - Packven\" \/>\n\t\t<meta name=\"twitter:description\" content=\"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs.\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/packven.com\\\/sv#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/packven.com\\\/sv\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#listItem\",\"position\":2,\"name\":\"Home\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/packven.com\\\/sv#listItem\",\"name\":\"Home\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#organization\",\"name\":\"Packven\",\"url\":\"https:\\\/\\\/packven.com\\\/sv\\\/\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#webpage\",\"url\":\"https:\\\/\\\/packven.com\\\/sv\\\/\",\"name\":\"Home - Packven\",\"description\":\"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs.\",\"inLanguage\":\"sv-SE\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#breadcrumblist\"},\"datePublished\":\"2026-01-16T09:47:15+00:00\",\"dateModified\":\"2026-08-27T12:35:07+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#website\",\"url\":\"https:\\\/\\\/packven.com\\\/sv\\\/\",\"name\":\"Packven\",\"inLanguage\":\"sv-SE\",\"publisher\":{\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t\n\n","aioseo_head_json":{"title":"Home - Packven","description":"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs.","canonical_url":"https:\/\/packven.com\/sv\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/packven.com\/sv\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/packven.com\/sv#listItem","position":1,"name":"Home","item":"https:\/\/packven.com\/sv","nextItem":{"@type":"ListItem","@id":"https:\/\/packven.com\/sv\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/packven.com\/sv\/#listItem","position":2,"name":"Home","previousItem":{"@type":"ListItem","@id":"https:\/\/packven.com\/sv#listItem","name":"Home"}}]},{"@type":"Organization","@id":"https:\/\/packven.com\/sv\/#organization","name":"Packven","url":"https:\/\/packven.com\/sv\/"},{"@type":"WebPage","@id":"https:\/\/packven.com\/sv\/#webpage","url":"https:\/\/packven.com\/sv\/","name":"Home - Packven","description":"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs.","inLanguage":"sv-SE","isPartOf":{"@id":"https:\/\/packven.com\/sv\/#website"},"breadcrumb":{"@id":"https:\/\/packven.com\/sv\/#breadcrumblist"},"datePublished":"2026-01-16T09:47:15+00:00","dateModified":"2026-08-27T12:35:07+00:00"},{"@type":"WebSite","@id":"https:\/\/packven.com\/sv\/#website","url":"https:\/\/packven.com\/sv\/","name":"Packven","inLanguage":"sv-SE","publisher":{"@id":"https:\/\/packven.com\/sv\/#organization"}}]},"og:locale":"sv_SE","og:site_name":"Packven -","og:type":"article","og:title":"Home - Packven","og:description":"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs.","og:url":"https:\/\/packven.com\/sv\/","article:published_time":"2026-01-16T09:47:15+00:00","article:modified_time":"2026-08-27T12:35:07+00:00","twitter:card":"summary_large_image","twitter:title":"Home - Packven","twitter:description":"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs."},"aioseo_meta_data":{"post_id":"20","title":"Home - Packven","description":"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs.","keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"WebPage","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-01-16 09:47:23","updated":"2026-08-27 13:31:08","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/packven.com\/sv\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHome\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/packven.com\/sv"},{"label":"Home","link":"https:\/\/packven.com\/sv\/"}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/packven.com\/sv\/wp-json\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/packven.com\/sv\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/packven.com\/sv\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/packven.com\/sv\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/packven.com\/sv\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":626,"href":"https:\/\/packven.com\/sv\/wp-json\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":2355,"href":"https:\/\/packven.com\/sv\/wp-json\/wp\/v2\/pages\/20\/revisions\/2355"}],"wp:attachment":[{"href":"https:\/\/packven.com\/sv\/wp-json\/wp\/v2\/media?parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Packven - The Pilot Protocol<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --cBlueSoft: #89CFF0; \n --cDark: #1a1a1a;\n }\n\n body { margin: 0; font-family: 'Outfit', sans-serif; }\n\n \/* --- HEADER CONTAINER --- *\/\n .pvLiveHeader {\n position: fixed;\n top: 0; left: 0; width: 100%;\n padding: 0 30px;\n height: 50px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background-color: rgba(255, 255, 255, 0.98);\n backdrop-filter: blur(5px);\n z-index: 999999;\n border-bottom: 1px solid rgba(0,0,0,0.05);\n box-sizing: border-box;\n }\n\n \/* --- BRAND (Left Side) --- *\/\n .pvBrand {\n display: flex;\n align-items: center;\n text-decoration: none;\n }\n \n #headerLogo {\n height: 32px; \n width: auto;\n display: block;\n object-fit: fill;\n vertical-align: middle;\n transition: opacity 0.2s ease;\n }\n \n .pvBrand:hover #headerLogo { \n opacity: 0.8; \n }\n\n \/* --- DESKTOP NAV (Right Side) --- *\/\n .pvNavDesktop {\n display: flex;\n align-items: center;\n gap: 25px; \n height: 100%;\n }\n\n .navGroup {\n position: relative;\n height: 100%;\n display: flex;\n align-items: center;\n }\n\n .pvLink {\n text-decoration: none;\n color: var(--cDark);\n font-weight: 500;\n font-size: 14px !important;\n transition: color 0.2s ease;\n padding: 10px 0;\n cursor: pointer;\n }\n .pvLink:hover { color: var(--cBlueSoft); }\n\n \/* --- DROPDOWNS (Desktop) --- *\/\n .dropdownContent {\n position: absolute;\n top: 100%; left: 50%;\n transform: translateX(-50%) translateY(10px);\n background-color: white;\n min-width: 140px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n border-radius: 6px;\n padding: 5px 0;\n border: 1px solid #f0f0f0;\n opacity: 0; visibility: hidden;\n transition: all 0.2s ease;\n z-index: 100000;\n }\n\n @media (min-width: 769px) {\n .navGroup:hover .dropdownContent {\n opacity: 1; visibility: visible;\n transform: translateX(-50%) translateY(0);\n }\n }\n\n .dpLink {\n display: block; padding: 8px 15px;\n color: #555; text-decoration: none;\n font-size: 13px !important;\n font-weight: 500; white-space: nowrap;\n }\n\n .dpLink:hover { background-color: #f9f9f9; color: var(--cBlueSoft); }\n\n \/* --- MOBILE MENU --- *\/\n .mobileToggle {\n display: none;\n font-size: 24px;\n cursor: pointer;\n color: var(--cDark);\n }\n\n .mobileMenuContainer {\n display: none; \n position: fixed;\n top: 65px; left: 0; width: 100%;\n background: white;\n border-bottom: 1px solid #eee;\n flex-direction: column;\n padding: 20px;\n box-shadow: 0 10px 20px rgba(0,0,0,0.05);\n z-index: 99998;\n }\n\n \/* --- RESPONSIVENESS --- *\/\n @media (max-width: 768px) {\n .pvNavDesktop { display: none; } \n .mobileToggle { display: block; }\n\n .mobLink {\n display: block;\n padding: 12px 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--cDark);\n text-decoration: none;\n border-bottom: 1px solid #f5f5f5;\n }\n\n .mobSubLink {\n display: block;\n padding: 8px 0 8px 20px; \n font-size: 14px;\n color: #666;\n text-decoration: none;\n background: #fafafa;\n }\n\n .mobLink:hover, .mobSubLink:hover { color: var(--cBlueSoft); }\n }\n <\/style>\n<\/head>\n<body data-rsssl=1 data-rsssl=1 data-rsssl=1>\n\n<header class=\"pvLiveHeader\">\n <a href=\"https:\/\/packven.com\" class=\"pvBrand\">\n <img decoding=\"async\" src=\"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/Packven_App-Icon_Black_2048.png\" alt=\"Packven Logo\" id=\"headerLogo\">\n <\/a>\n\n <nav class=\"pvNavDesktop\">\n <div class=\"navGroup\">\n <a href=\"\/about\" class=\"pvLink\">About<\/a>\n <div class=\"dropdownContent\">\n <a href=\"https:\/\/packven.com\/about-us\/\" class=\"dpLink\">About Us<\/a>\n <a href=\"\/faq\" class=\"dpLink\">FAQ<\/a>\n <\/div>\n <\/div>\n\n <div class=\"navGroup\">\n <a href=\"https:\/\/packven.com\/packven-research\/\" class=\"pvLink\">Research<\/a>\n <\/div>\n\n <div class=\"navGroup\">\n <a href=\"\/#contact-target\" class=\"pvLink\">Contact<\/a>\n <\/div>\n \n <div class=\"navGroup\">\n <a href=\"https:\/\/packven.com\/client-portal\/\" class=\"pvLink\">Pilot Protocol<\/a>\n <\/div>\n <\/nav>\n \n <div class=\"mobileToggle\" id=\"mobileToggleButton\">\u2630<\/div>\n<\/header>\n\n<nav id=\"mobileMenu\" class=\"mobileMenuContainer\">\n <a href=\"\/about\" class=\"mobLink\">About<\/a>\n <a href=\"https:\/\/packven.com\/about-us\/\" class=\"mobSubLink\">\u21b3 About Us<\/a>\n <a href=\"\/faq\" class=\"mobSubLink\">\u21b3 FAQ<\/a>\n <a href=\"https:\/\/packven.com\/packven-research\/\" class=\"mobLink\">Research<\/a>\n <a href=\"\/#contact-target\" class=\"mobLink\">Contact<\/a>\n <a href=\"https:\/\/packven.com\/client-portal\/\" class=\"mobLink\">Pilot Protocol<\/a>\n<\/nav>\n\n<script>\n \/**\n * Packven Header Optimizer\n * Handles navigation interactions and mobile state.\n *\/\n const packvenHeaderOptimizer = {\n domNodes: {},\n\n init: function() {\n this.cacheDom();\n this.bindEvents();\n },\n\n cacheDom: function() {\n this.domNodes = {\n mobileMenu: document.getElementById('mobileMenu'),\n toggleButton: document.getElementById('mobileToggleButton')\n };\n },\n\n bindEvents: function() {\n if (this.domNodes.toggleButton) {\n this.domNodes.toggleButton.addEventListener('click', () => this.toggleMobileMenu());\n }\n },\n\n toggleMobileMenu: function() {\n const isVisible = this.domNodes.mobileMenu.style.display === 'flex';\n this.domNodes.mobileMenu.style.display = isVisible ? 'none' : 'flex';\n }\n };\n\n \/\/ Execute when DOM is ready\n document.addEventListener('DOMContentLoaded', () => packvenHeaderOptimizer.init());\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7d57dbe e-flex e-con-boxed e-con e-parent\" data-id=\"7d57dbe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2049850 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"2049850\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n \/* Scoped to hero container to prevent WordPress conflicts *\/\n .heroClean {\n --cBlueSoft: #89CFF0; \n --cDark: #1a1a1a;\n --cRed: #F88379;\n \/* Seamless pure white background *\/\n background-color: #ffffff !important;\n position: relative;\n width: 100%;\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 5%;\n overflow: hidden;\n font-family: 'Outfit', sans-serif;\n }\n\n .heroClean *, .heroClean *::before, .heroClean *::after { \n box-sizing: border-box; \n }\n\n \/* --- ANIMATED BACKGROUND LAYER --- *\/\n .animatedBgContainer {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n overflow: hidden;\n background-color: #ffffff; \/* Ensures orbs have a pure white canvas to multiply against *\/\n }\n\n .orb {\n position: absolute;\n border-radius: 50%;\n mix-blend-mode: multiply; \/* Multiplies vibrant colors against white for maximum saturation *\/\n z-index: 2;\n }\n\n \/* Brighter, Highly Saturated Colors *\/\n .orb1 {\n width: 600px; height: 600px;\n background: radial-gradient(circle, rgba(255, 42, 85, 0.45) 0%, rgba(255, 42, 85, 0) 70%); \/* Vibrant Magenta\/Red *\/\n filter: blur(60px); top: 15%; left: 10%;\n animation: float1 20s ease-in-out infinite;\n }\n .orb2 {\n width: 700px; height: 700px;\n background: radial-gradient(circle, rgba(255, 153, 0, 0.4) 0%, rgba(255, 153, 0, 0) 70%); \/* Bright Tangerine *\/\n filter: blur(70px); top: 20%; right: 15%;\n animation: float2 18s ease-in-out infinite;\n }\n .orb3 {\n width: 650px; height: 650px;\n background: radial-gradient(circle, rgba(0, 195, 255, 0.45) 0%, rgba(0, 195, 255, 0) 70%); \/* Vibrant Cyan *\/\n filter: blur(65px); bottom: 20%; left: 20%;\n animation: float3 22s ease-in-out infinite;\n }\n .orb4 {\n width: 750px; height: 750px;\n background: radial-gradient(circle, rgba(10, 205, 95, 0.4) 0%, rgba(10, 205, 95, 0) 70%); \/* Electric Green *\/\n filter: blur(80px); bottom: 10%; right: 10%;\n animation: float4 25s ease-in-out infinite;\n }\n .orb5 {\n width: 400px; height: 400px;\n background: radial-gradient(circle, rgba(138, 43, 226, 0.35) 0%, rgba(138, 43, 226, 0) 70%); \/* Bright Violet *\/\n filter: blur(50px); top: 60%; left: 50%;\n animation: float5 16s ease-in-out infinite;\n }\n\n .particlesContainer {\n position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3;\n }\n\n .waveLines {\n position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.4; z-index: 5;\n mix-blend-mode: multiply;\n }\n\n \/* Subtle white fade over the animations behind the text, fading to transparent *\/\n .heroOverlay {\n position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;\n background: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 45%, rgba(255,255,255,0) 100%);\n pointer-events: none;\n }\n\n \/* --- CONTENT LAYER --- *\/\n .heroContent {\n position: relative; z-index: 20;\n max-width: 650px;\n }\n\n .brandTag {\n display: inline-block; font-size: 0.85rem; font-weight: 900;\n letter-spacing: 2px; text-transform: uppercase;\n color: var(--cRed); margin-bottom: 20px;\n }\n\n .heroLogoImg {\n display: block; max-width: 100%; height: auto;\n max-height: clamp(40px, 6vw, 80px); \n margin-bottom: 20px; margin-top: -10px;\n will-change: transform, opacity;\n }\n\n .heroDesc {\n font-size: 1.25rem; line-height: 1.6; color: #334155;\n margin-bottom: 50px; font-weight: 400; max-width: 500px;\n }\n\n .standardsContainer { border-top: 1px solid rgba(0,0,0,0.1); padding-top: 30px; }\n \n .standardsTitle {\n font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px;\n color: #64748b; margin-bottom: 20px; display: block; font-weight: 700;\n }\n \n .logoRow { display: flex; gap: 30px; flex-wrap: wrap; align-items: center; }\n \n .logoText {\n font-size: 1rem; font-weight: 700; color: #64748b;\n transition: color 0.3s ease; cursor: default;\n }\n .logoText:hover { color: var(--cDark); }\n\n \/* RESPONSIVENESS *\/\n @media (max-width: 768px) {\n .heroOverlay {\n background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 100%);\n }\n .heroClean { justify-content: center; text-align: center; }\n .logoRow { justify-content: center; }\n }\n\n \/* --- KEYFRAMES --- *\/\n @keyframes float1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(100px, -80px) scale(1.1); } 66% { transform: translate(-50px, 60px) scale(0.95); } }\n @keyframes float2 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-120px, 70px) scale(1.05); } 66% { transform: translate(80px, -90px) scale(0.9); } }\n @keyframes float3 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(90px, 100px) scale(0.95); } 66% { transform: translate(-70px, -50px) scale(1.08); } }\n @keyframes float4 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-100px, -70px) scale(1.06); } 66% { transform: translate(110px, 80px) scale(0.92); } }\n @keyframes float5 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, -60px) scale(1.15); } }\n @keyframes wave1 { 0%, 100% { d: path(\"M0,300 Q250,200 500,300 T1000,300 T1500,300 T2000,300\"); } 50% { d: path(\"M0,300 Q250,400 500,300 T1000,300 T1500,300 T2000,300\"); } }\n @keyframes wave2 { 0%, 100% { d: path(\"M0,500 Q250,400 500,500 T1000,500 T1500,500 T2000,500\"); } 50% { d: path(\"M0,500 Q250,600 500,500 T1000,500 T1500,500 T2000,500\"); } }\n<\/style>\n\n<div class=\"heroClean\">\n <div class=\"animatedBgContainer\">\n <div class=\"orb orb1\"><\/div>\n <div class=\"orb orb2\"><\/div>\n <div class=\"orb orb3\"><\/div>\n <div class=\"orb orb4\"><\/div>\n <div class=\"orb orb5\"><\/div>\n <div class=\"particlesContainer\" id=\"particlesContainer\"><\/div>\n <svg class=\"waveLines\">\n <defs>\n <linearGradient id=\"waveGrad1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style=\"stop-color: #ff2a55; stop-opacity: 0.7\" \/>\n <stop offset=\"50%\" style=\"stop-color: #ff9900; stop-opacity: 0.7\" \/>\n <stop offset=\"100%\" style=\"stop-color: #ff2a55; stop-opacity: 0.7\" \/>\n <\/linearGradient>\n <linearGradient id=\"waveGrad2\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style=\"stop-color: #00c3ff; stop-opacity: 0.7\" \/>\n <stop offset=\"50%\" style=\"stop-color: #0acd5f; stop-opacity: 0.7\" \/>\n <stop offset=\"100%\" style=\"stop-color: #00c3ff; stop-opacity: 0.7\" \/>\n <\/linearGradient>\n <\/defs>\n <path d=\"M0,300 Q250,200 500,300 T1000,300 T1500,300 T2000,300\" stroke=\"url(#waveGrad1)\" stroke-width=\"4\" fill=\"none\" style=\"animation: wave1 12s ease-in-out infinite\" \/>\n <path d=\"M0,500 Q250,400 500,500 T1000,500 T1500,500 T2000,500\" stroke=\"url(#waveGrad2)\" stroke-width=\"4\" fill=\"none\" style=\"animation: wave2 14s ease-in-out infinite\" \/>\n <\/svg>\n <\/div>\n\n <div class=\"heroOverlay\"><\/div>\n\n <div class=\"heroContent\">\n <span class=\"brandTag\">Logistics Audit Engine<\/span>\n \n <img decoding=\"async\" \n src=\"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/Packven_Lockup_Black_4000w-scaled.png\" \n alt=\"Packven Logo\" \n class=\"heroLogoImg\"\n >\n\n <p class=\"heroDesc\">We re-engineer your shipping volume to fit the exact standards of the Nordic logistics grid. Eliminate air. Eliminate waste.<\/p>\n \n <div class=\"standardsContainer\">\n <span class=\"standardsTitle\">Designed for the Standards of<\/span>\n <div class=\"logoRow\">\n <span class=\"logoText\">PostNord<\/span>\n <span class=\"logoText\">Instabox<\/span>\n <span class=\"logoText\">Budbee<\/span>\n <span class=\"logoText\">Early Bird<\/span>\n <span class=\"logoText\">DHL<\/span>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n\n<script>\nconst packvenHeroOptimizer = {\n domNodes: {},\n\n init: function() {\n this.cacheDom();\n this.generateParticles();\n this.runSequence();\n },\n\n cacheDom: function() {\n this.domNodes = {\n particlesContainer: document.getElementById('particlesContainer'),\n brandTag: document.querySelector('.brandTag'),\n heroLogo: document.querySelector('.heroLogoImg'), \n heroDesc: document.querySelector('.heroDesc'),\n standardsContainer: document.querySelector('.standardsContainer'),\n partnerLogos: document.querySelectorAll('.logoText')\n };\n },\n\n generateParticles: function() {\n \/\/ Highly saturated particles to match the vivid orbs\n const particleColors = ['rgba(255, 42, 85, 0.7)', 'rgba(255, 153, 0, 0.7)', 'rgba(0, 195, 255, 0.7)', 'rgba(10, 205, 95, 0.7)'];\n const particleGlows = ['rgba(255, 42, 85, 0.4)', 'rgba(255, 153, 0, 0.4)', 'rgba(0, 195, 255, 0.4)', 'rgba(10, 205, 95, 0.4)'];\n\n for (let i = 0; i < 30; i++) {\n const particle = document.createElement('div');\n const size = Math.random() * 5 + 3;\n const colorIndex = i % 4;\n\n particle.style.position = 'absolute';\n particle.style.width = `${size}px`;\n particle.style.height = `${size}px`;\n particle.style.borderRadius = '50%';\n particle.style.background = particleColors[colorIndex];\n particle.style.left = `${Math.random() * 100}%`;\n particle.style.top = `${Math.random() * 100}%`;\n particle.style.animation = `float${(i%5)+1} ${Math.random() * 10 + 15}s ease-in-out infinite`;\n particle.style.boxShadow = `0 0 ${Math.random() * 15 + 10}px ${particleGlows[colorIndex]}`;\n\n if(this.domNodes.particlesContainer) {\n this.domNodes.particlesContainer.appendChild(particle);\n }\n }\n },\n\n runSequence: function() {\n if (typeof gsap === 'undefined') {\n console.error(\"GSAP failed to load.\");\n return;\n }\n\n gsap.set([\n this.domNodes.brandTag, \n this.domNodes.heroLogo, \n this.domNodes.heroDesc, \n this.domNodes.standardsContainer\n ], { opacity: 0 });\n\n const scanTimeline = gsap.timeline({ defaults: { ease: \"power3.out\" } });\n\n scanTimeline\n .fromTo(this.domNodes.brandTag, \n { y: 20, opacity: 0 },\n { y: 0, opacity: 1, duration: 0.8, delay: 0.3 }\n )\n .fromTo(this.domNodes.heroLogo,\n { y: 40, opacity: 0 },\n { y: 0, opacity: 1, duration: 1 },\n \"-=0.6\"\n )\n .fromTo(this.domNodes.heroDesc,\n { y: 20, opacity: 0 },\n { y: 0, opacity: 1, duration: 0.8 },\n \"-=0.6\"\n )\n .fromTo(this.domNodes.standardsContainer,\n { opacity: 0 },\n { opacity: 1, duration: 0.6 },\n \"-=0.4\"\n )\n .fromTo(this.domNodes.partnerLogos,\n { y: 15, opacity: 0 },\n { y: 0, opacity: 1, stagger: 0.1, duration: 0.6 },\n \"-=0.3\"\n );\n }\n};\n\n\/\/ Execution hook\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => packvenHeroOptimizer.init());\n} else {\n packvenHeroOptimizer.init();\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f514325 elementor-widget elementor-widget-spacer\" data-id=\"f514325\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ae709fe e-flex e-con-boxed e-con e-parent\" data-id=\"ae709fe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-35b9430 elementor-widget elementor-widget-html\" data-id=\"35b9430\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Packven Packaging OS<\/title>\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n \/* --- Reset & Base --- *\/\n body { margin: 0; padding: 0; background-color: #fff; font-family: 'Outfit', sans-serif; }\n * { box-sizing: border-box; }\n\n \/* --- Packven Hero Styles --- *\/\n .pv-hero { padding: 84px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); background-color: #fff; color: #000; width: 100%; overflow: hidden; }\n .pv-container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }\n .pv-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; }\n\n .pv-content { max-width: 640px; }\n .pv-meta-row { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }\n .pv-meta-tag { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(0, 0, 0, 0.6); font-weight: 500; }\n .pv-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); }\n \n .pv-title { margin: 0 0 14px 0; font-size: 2.5rem; line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; color: #2c3e50; }\n .pv-text { margin: 0 0 14px 0; font-size: 18px; line-height: 1.55; color: #555; font-weight: 300; }\n .pv-text:last-of-type { margin-bottom: 0; }\n\n .pv-pills-row { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }\n .pv-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #0f172a; white-space: nowrap; }\n .pill-blue { background: rgba(22, 151, 165, 0.08); color: #1697a5; border: 1px solid rgba(22, 151, 165, 0.2); }\n .pill-green { background: rgba(75, 157, 39, 0.08); color: #4b9d27; border: 1px solid rgba(75, 157, 39, 0.2); }\n .pill-yellow { background: rgba(231, 180, 72, 0.08); color: #b48a2a; border: 1px solid rgba(231, 180, 72, 0.2); }\n .pill-slate { background: rgba(15, 23, 42, 0.04); color: #0f172a; border: 1px solid rgba(15, 23, 42, 0.1); }\n .pv-note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: rgba(0, 0, 0, 0.62); }\n\n \/* --- THE NEW TRIGGER BOX WITH PHOTO --- *\/\n .pv-visual-wrapper { position: relative; min-height: 400px; display: flex; align-items: center; justify-content: flex-start; }\n .portal-trigger-box {\n width: 100%; min-height: 400px; border: 3px dashed #5f686c; border-radius: 20px;\n \/* Applying your photo as the background *\/\n background-image: url('https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/showcase_placeholder.jpg');\n background-size: cover;\n background-position: center;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n cursor: pointer; transition: all 0.3s ease; color: #5f686c; \/* white text color for contrast *\/\n }\n .portal-trigger-box:hover {\n border-color: #1697a5; \n \/* Light overlay on hover using cyan color *\/\n background-image: linear-gradient(0deg, rgba(22, 151, 165, 0.1), rgba(22, 151, 165, 0.1)), url('https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/showcase_placeholder.jpg');\n color: #1697a5; \/* cyan text color on hover *\/\n transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(22, 151, 165, 0.25);\n }\n \/* Style spans inside the box on hover to increase size *\/\n .portal-trigger-box:hover span { transform: scale(1.05); }\n .portal-trigger-box span { font-size: 1.35rem; font-weight: 600; font-family: 'Outfit', sans-serif; transition: all 0.3s ease; }\n\n \/* ==========================================================================\n INTERACTIVE PORTAL MODAL (SCOPED CSS)\n ========================================================================== *\/\n .ip-overlay {\n position: fixed; inset: 0; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px);\n display: none; align-items: center; justify-content: center; z-index: 9999999;\n font-family: 'Inter', sans-serif;\n opacity: 0; transition: opacity 0.3s ease;\n }\n .ip-overlay.show { display: flex; opacity: 1; }\n\n \/* The 5px Split Layout (Wider Max-Width & Controlled Height) *\/\n .ip-wrapper {\n display: flex; gap: 5px; width: 95vw; max-width: 1650px; \n height: 80vh; max-height: 800px;\n transform: translateY(20px) scale(0.98); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ip-overlay.show .ip-wrapper { transform: translateY(0) scale(1); }\n\n \/* Left: Portal Shell *\/\n .ip-shell {\n flex: 1; background: #f8fafc; border-radius: 16px; overflow: hidden;\n display: flex; flex-direction: column; border: 1px solid #2a3b57;\n position: relative; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);\n }\n\n \/* Right: Explainer Panel *\/\n .ip-explainer {\n width: 360px; background: white; border-radius: 16px; padding: 32px 28px;\n overflow-y: auto; display: flex; flex-direction: column; align-items: center; text-align: left;\n box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); position: relative;\n }\n .ip-close-btn {\n position: absolute; top: 16px; right: 16px; background: #f1f5f9; border: none; width: 32px; height: 32px;\n border-radius: 8px; color: #64748b; font-size: 1.1rem; cursor: pointer; transition: 0.2s;\n display: flex; align-items: center; justify-content: center;\n z-index: 10;\n }\n .ip-close-btn:hover { background: #fee2e2; color: #af2020; transform: rotate(90deg); }\n .ip-explainer-kicker { font-size: 0.75rem; font-weight: 800; color: #1697a5; text-transform: uppercase; letter-spacing: 1px; width: 100%; margin-bottom: 8px; }\n .ip-explainer-title { font-family: 'Outfit', sans-serif; font-size: 1.8rem; font-weight: 700; color: #0f172a; margin: 0 0 20px 0; width: 100%; line-height: 1.1; }\n .ip-explainer-text { font-size: 0.95rem; color: #475569; line-height: 1.6; width: 100%; }\n .ip-explainer-text b { color: #0f172a; font-weight: 700; }\n\n \/* --- SHELL HEADER (Adapted from base.html) --- *\/\n .sh-header { height: 4.625rem; background: #0b1220; border-bottom: 1px solid #2a3b57; display: flex; align-items: center; flex-shrink: 0; }\n .sh-brand-area { width: 16.5rem; height: 100%; display: flex; align-items: center; padding-left: 1.75rem; border-right: 1px solid #2a3b57; flex-shrink: 0; }\n .sh-brand { font-size: 1.5rem; font-weight: 800; color: white; display: flex; align-items: center; gap: 0.4375rem; }\n .sh-main-area { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 1.75rem; position: relative; }\n \n .sh-context { display: flex; align-items: center; gap: 0.875rem; }\n .sh-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.6875rem; background: rgba(22, 151, 165, 0.16); color: #1697a5; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }\n .sh-title { font-size: 1.48rem; font-weight: 700; color: #f8fafc; }\n\n .sh-center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 18rem; }\n .sh-cd-label { font-size: 0.62rem; color: #9fb0c6; font-weight: 700; letter-spacing: 1px; }\n .sh-cd-row { width: 100%; display: flex; align-items: center; gap: 10px; }\n .sh-cd-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; }\n .sh-cd-fill { width: 40%; height: 100%; background: linear-gradient(90deg, #1697a5, #3bbfd0); border-radius: 4px; }\n .sh-cd-text { font-size: 0.72rem; color: #94a3b8; font-weight: 700; }\n\n .sh-right { display: flex; align-items: center; gap: 16px; }\n .sh-notif { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255,255,255,0.09); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; }\n .sh-sep { width: 1px; height: 24px; background: #2a3b57; }\n \n .sh-profile { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 6px; border-radius: 8px; transition: 0.2s; position: relative; }\n .sh-profile:hover { background: rgba(255,255,255,0.1); }\n .sh-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 800; background: #e0f2fe; color: #0369a1; }\n .sh-p-info { display: flex; flex-direction: column; }\n .sh-p-name { font-size: 0.9rem; font-weight: 600; color: white; }\n .sh-p-id { font-size: 0.75rem; color: #94a3b8; }\n\n \/* Dropdown *\/\n .sh-dropdown { position: absolute; top: 100%; right: 0; margin-top: 10px; background: #1a2a42; border: 1px solid #2e3f5d; border-radius: 12px; width: 260px; display: none; flex-direction: column; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.5); z-index: 100;}\n .sh-dropdown.show { display: flex; }\n .sh-dd-hero { padding: 20px 0 12px; display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid #2e3f5d; }\n .sh-dd-avatar { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; cursor: pointer; transition: 0.2s; background: #e0f2fe; color: #0369a1; position: relative; }\n .sh-dd-avatar:hover { transform: scale(1.05); }\n .sh-dd-avatar:hover::after { content: '\\f303'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; bottom: -4px; right: -4px; background: white; color: #0b1220; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }\n .sh-dd-item { padding: 12px 16px; display: flex; align-items: center; gap: 12px; color: #94a3b8; font-size: 0.9rem; cursor: pointer; transition: 0.2s; }\n .sh-dd-item:hover { background: rgba(255,255,255,0.05); color: white; }\n\n \/* --- SHELL BODY & SIDEBAR --- *\/\n .sh-body { display: flex; flex: 1; overflow: hidden; background: #f8fafc; }\n .sh-sidebar { width: 16.5rem; background: #0b1220; border-right: 1px solid #2a3b57; padding: 1.375rem; overflow-y: auto; flex-shrink: 0; }\n \n .sh-nav-group { margin-bottom: 2rem; }\n .sh-nav-label-blue { font-size: 0.75rem; text-transform: uppercase; font-weight: 800; margin-bottom: 15px; letter-spacing: 1.5px; padding-left: 18px; color: #1697a5; }\n .sh-nav-label-red { font-size: 0.75rem; text-transform: uppercase; font-weight: 800; margin-bottom: 15px; letter-spacing: 1.5px; padding-left: 18px; color: #af2020; }\n .sh-nav-label-amber { font-size: 0.75rem; text-transform: uppercase; font-weight: 800; margin-bottom: 15px; letter-spacing: 1.5px; padding-left: 18px; color: #e7b448; }\n \n .sh-nav-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 10px; cursor: pointer; transition: all 0.2s; font-weight: 500; color: #9fb0c6; font-size: 0.9rem; border-left: 3px solid transparent; margin-bottom: 4px; }\n .sh-nav-item i { width: 20px; text-align: center; font-size: 1.1rem; opacity: 0.7; transition: 0.2s; }\n \n \/* Sidebar Hover Logic *\/\n .grp-blue .sh-nav-item:hover { background: rgba(59, 130, 246, 0.05); color: #1697a5; transform: translateX(5px); }\n .grp-blue .sh-nav-item:hover i { color: #1697a5; opacity: 1; }\n .grp-blue .sh-nav-item.active { background: rgba(22, 151, 165, 0.15); color: white; border-left-color: #1697a5; font-weight: 600; }\n .grp-blue .sh-nav-item.active i { color: #1697a5; opacity: 1; text-shadow: 0 0 6px rgba(22, 151, 165, 0.6); }\n\n .grp-green .sh-nav-item:hover { background: rgba(175, 32, 32, 0.05); color: #af2020; transform: translateX(5px); }\n .grp-green .sh-nav-item:hover i { color: #af2020; opacity: 1; }\n .grp-green .sh-nav-item.active { background: rgba(175, 32, 32, 0.15); color: white; border-left-color: #af2020; font-weight: 600; }\n .grp-green .sh-nav-item.active i { color: #af2020; opacity: 1; text-shadow: 0 0 6px rgba(175, 32, 32, 0.6); }\n\n .grp-amber .sh-nav-item:hover { background: rgba(245, 158, 11, 0.05); color: #e7b448; transform: translateX(5px); }\n .grp-amber .sh-nav-item:hover i { color: #e7b448; opacity: 1; }\n .grp-amber .sh-nav-item.active { background: rgba(231, 180, 72, 0.15); color: white; border-left-color: #e7b448; font-weight: 600; }\n .grp-amber .sh-nav-item.active i { color: #e7b448; opacity: 1; text-shadow: 0 0 6px rgba(231, 180, 72, 0.6); }\n\n \/* --- SEAMLESS SHELL CONTENT AREA --- *\/\n .sh-content { \n flex: 1; \n overflow-y: auto; \n overflow-x: hidden; \n background: #e5e7eb; \/* Dynamic background set via JS *\/\n position: relative; \n padding: 0;\n }\n \n .sh-placeholder { \n width: 100%; height: 100%; min-height: 400px;\n display: flex; flex-direction: column; align-items: center; justify-content: center; \n color: #94a3b8; text-align: center; \n }\n .sh-placeholder i { font-size: 4rem; margin-bottom: 20px; opacity: 0.5; animation: bounceHint 2s infinite; }\n @keyframes bounceHint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }\n \n \/* The container for the stacked screenshots *\/\n .sh-screenshot-container {\n display: none; \n flex-direction: column; \n width: 100%; \n padding-bottom: 20px; \/* Provides the 20px color-matched margin at the bottom *\/\n opacity: 0;\n transition: opacity 0.2s ease;\n }\n\n .sh-screenshot { \n width: 100%; \n height: auto; \n vertical-align: top;\n border: none; \n border-radius: 0; \n box-shadow: none; \n }\n\n \/* --- PREMIUM SCROLLBARS --- *\/\n .sh-sidebar::-webkit-scrollbar { width: 6px; display: none; } \/* Hidden on mobile by default, overriden for desktop below *\/\n .sh-sidebar::-webkit-scrollbar-track { background: #0b1220; }\n .sh-sidebar::-webkit-scrollbar-thumb { background: #2a3b57; border-radius: 10px; }\n .sh-sidebar::-webkit-scrollbar-thumb:hover { background: #3b5078; }\n\n .ip-explainer::-webkit-scrollbar, .sh-content::-webkit-scrollbar { width: 8px; }\n .ip-explainer::-webkit-scrollbar-track, .sh-content::-webkit-scrollbar-track { background: transparent; }\n .ip-explainer::-webkit-scrollbar-thumb, .sh-content::-webkit-scrollbar-thumb { \n background: #cbd5e1; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; \n }\n .ip-explainer::-webkit-scrollbar-thumb:hover, .sh-content::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }\n\n \/* --- AVATAR MODAL --- *\/\n .ava-modal { position: absolute; inset: 0; background: rgba(15,23,42,0.8); z-index: 200; display: none; align-items: center; justify-content: center; border-radius: 16px; opacity: 0; transition: 0.3s; }\n .ava-modal.show { display: flex; opacity: 1; }\n .ava-box { background: white; border-radius: 16px; width: 480px; padding: 24px; box-shadow: 0 25px 50px rgba(0,0,0,0.4); transform: scale(0.95); transition: 0.3s; }\n .ava-modal.show .ava-box { transform: scale(1); }\n \n .ava-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }\n .ava-header h3 { margin: 0; color: #0f172a; font-weight: 800; display: flex; align-items: center; gap: 8px;}\n .ava-close { background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; color: #64748b; display: flex; align-items: center; justify-content: center; transition: 0.2s; }\n .ava-close:hover { background: #fee2e2; color: #af2020; transform: rotate(90deg); }\n .ava-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }\n .ava-opt { aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; cursor: pointer; transition: 0.2s; border: 3px solid transparent; }\n .ava-opt:hover { transform: scale(1.1); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }\n\n \/* Avatar Colors *\/\n .c-def { background: #e0f2fe; color: #0369a1; }\n .c-1 { background: #d1fae5; color: #047857; } .c-2 { background: #fef3c7; color: #b45309; }\n .c-3 { background: #fee2e2; color: #b91c1c; } .c-4 { background: #ede9fe; color: #5b21b6; }\n .c-5 { background: #cffafe; color: #0369a1; } .c-6 { background: #ccfbf1; color: #0f766e; }\n .c-7 { background: #fae8ff; color: #be123c; } .c-8 { background: #fce7f3; color: #be185d; }\n\n \/* ==========================================================================\n MOBILE RESPONSIVENESS OVERRIDES\n ========================================================================== *\/\n @media (min-width: 901px) {\n .sh-sidebar::-webkit-scrollbar { display: block; }\n }\n \n @media (max-width: 900px) {\n \/* Hero fixes *\/\n .pv-grid { grid-template-columns: 1fr; gap: 40px; }\n .pv-title { font-size: 36px; }\n .pv-hero { padding: 60px 0; }\n .pv-visual-wrapper { min-height: 0; justify-content: center; }\n\n \/* Modal Wrapper *\/\n .ip-wrapper { \n flex-direction: column; width: 100vw; max-width: 100vw; \n height: 100vh; max-height: 100vh; gap: 0; \n transform: none !important; \/* Allow simple display rather than scaled animation to avoid edge gaps *\/\n }\n .ip-shell { border-radius: 0; flex: 1; border: none; border-bottom: 1px solid #cbd5e1; }\n .ip-explainer { \n width: 100%; flex: none; height: 35vh; border-radius: 0; \n padding: 24px 20px; box-shadow: 0 -10px 25px rgba(0,0,0,0.1); \n }\n \n \/* Move close button out of the explainer and to the top right of the viewport *\/\n .ip-close-btn { \n position: fixed; top: 10px; right: 10px; z-index: 100000;\n background: rgba(15, 23, 42, 0.8); color: white;\n }\n .ip-close-btn:hover { background: #af2020; color: white; }\n\n \/* Shell Header *\/\n .sh-header { height: auto; min-height: 60px; padding: 0 15px; justify-content: space-between; }\n .sh-brand-area { width: auto; padding: 0; border: none; }\n .sh-main-area { padding: 0; justify-content: flex-end; flex: 1; }\n .sh-context, .sh-center, .sh-sep { display: none; }\n .sh-right { gap: 10px; }\n .sh-dropdown { position: fixed; top: 60px; right: 10px; width: calc(100vw - 20px); z-index: 1000000; }\n\n \/* Shell Sidebar (Horizontal Scroll) *\/\n .sh-body { flex-direction: column; }\n .sh-sidebar { \n width: 100%; height: auto; display: flex; flex-direction: row; \n overflow-x: auto; padding: 10px; border-right: none; \n border-bottom: 1px solid #2a3b57; align-items: center;\n -webkit-overflow-scrolling: touch; \/* Smooth iOS scroll *\/\n }\n .sh-nav-group { display: flex; flex-direction: row; margin: 0; }\n .sh-nav-label-blue, .sh-nav-label-red, .sh-nav-label-amber { display: none; }\n .sh-nav-item { \n white-space: nowrap; margin: 0 8px 0 0; padding: 8px 12px; \n border-left: none; border-bottom: 2px solid transparent; border-radius: 8px;\n }\n \n \/* Remove hover translates on mobile *\/\n .grp-blue .sh-nav-item:hover, .grp-green .sh-nav-item:hover, .grp-amber .sh-nav-item:hover { transform: none; }\n \n \/* Fix active states for bottom borders instead of left borders *\/\n .grp-blue .sh-nav-item.active { border-left-color: transparent; border-bottom-color: #1697a5; }\n .grp-green .sh-nav-item.active { border-left-color: transparent; border-bottom-color: #af2020; }\n .grp-amber .sh-nav-item.active { border-left-color: transparent; border-bottom-color: #e7b448; }\n\n \/* Shell Content Mobile *\/\n .sh-content { padding: 0; }\n .sh-placeholder { min-height: 200px; }\n\n \/* Avatar Modal Mobile *\/\n .ava-box { width: 90%; padding: 20px; }\n .ava-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }\n .ava-opt { font-size: 1.4rem; }\n }\n <\/style>\n<\/head>\n<body data-rsssl=1 data-rsssl=1>\n\n <section class=\"pv-hero\">\n <div class=\"pv-container\">\n <div class=\"pv-grid\">\n \n <div class=\"pv-content\">\n <div class=\"pv-meta-row\">\n <span class=\"pv-meta-tag\">Packven Packaging OS<\/span>\n <span class=\"pv-meta-dot\"><\/span>\n <span class=\"pv-meta-tag\">Product vision<\/span>\n <\/div>\n <p class=\"pv-title\">Packaging becomes a controlled system.<\/p>\n <p class=\"pv-text\">Buying packaging isn\u2019t the hard part. The hard part is choosing the right formats, keeping usage consistent, and staying ready for EU-ready documentation and reporting workflows.<\/p>\n <p class=\"pv-text\">Many teams get stuck in guesswork: provisional box sizes, \u201cit works\u201d decisions, and fragmented packaging data that lives in spreadsheets and supplier emails.<\/p>\n <p class=\"pv-text\">Packven brings structure: a managed packaging workflow, right-size recommendations, and exportable compliance artifacts so that operations get control, not noise.<\/p>\n \n <div class=\"pv-pills-row\">\n <span class=\"pv-pill pill-blue\"><i class=\"fa-solid fa-microchip\"><\/i> Right-size intelligence<\/span>\n <span class=\"pv-pill pill-green\"><i class=\"fa-solid fa-shield-halved\"><\/i> Compliance Passport<\/span>\n <span class=\"pv-pill pill-yellow\"><i class=\"fa-solid fa-file-export\"><\/i> Export-ready outputs<\/span>\n <span class=\"pv-pill pill-slate\"><i class=\"fa-solid fa-gears\"><\/i> Designed for ops<\/span>\n <\/div>\n <div class=\"pv-note\">Pilot note: current deliverables are evaluation-only and described under \u201cPilot Protocol.\u201d<\/div>\n <\/div>\n\n <div class=\"pv-visual-wrapper\">\n <div class=\"portal-trigger-box\" onclick=\"openPortalModal()\">\n <span>Click to explore the portal<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n <div id=\"interactivePortal\" class=\"ip-overlay\" onclick=\"handleOverlayClick(event)\">\n <div class=\"ip-wrapper\">\n \n <div class=\"ip-shell\">\n <div class=\"sh-header\">\n <div class=\"sh-brand-area\">\n <div class=\"sh-brand\"><i class=\"fa-solid fa-cube\" style=\"color:var(--c-blue);\"><\/i> Packven OS<\/div>\n <\/div>\n <div class=\"sh-main-area\">\n <div class=\"sh-context\">\n <span class=\"sh-icon\" id=\"shPageIcon\"><i class=\"fa-solid fa-compass\"><\/i><\/span>\n <span class=\"sh-title\" id=\"shPageTitle\">Workspace Portal<\/span>\n <\/div>\n <div class=\"sh-center\">\n <div class=\"sh-cd-label\">TRIAL PROGRESS (12 DAYS REMAINING)<\/div>\n <div class=\"sh-cd-row\">\n <div class=\"sh-cd-bar\"><div class=\"sh-cd-fill\"><\/div><\/div>\n <div class=\"sh-cd-text\">12<\/div>\n <\/div>\n <\/div>\n <div class=\"sh-right\">\n <div class=\"sh-notif\"><i class=\"fa-solid fa-bell\"><\/i><\/div>\n <div class=\"sh-sep\"><\/div>\n <div class=\"sh-profile\" onclick=\"toggleDropdown(event)\">\n <div class=\"sh-avatar c-def\" id=\"headerAvatar\">U<\/div>\n <div class=\"sh-p-info\">\n <div class=\"sh-p-name\">Demo User<\/div>\n <div class=\"sh-p-id\">ID: PV-2026<\/div>\n <\/div>\n <i class=\"fa-solid fa-chevron-down\" style=\"color: #94a3b8; font-size: 12px; margin-left: 4px;\"><\/i>\n \n <div class=\"sh-dropdown\" id=\"profileDropdown\" onclick=\"event.stopPropagation()\">\n <div class=\"sh-dd-hero\">\n <div class=\"sh-dd-avatar c-def\" id=\"menuAvatar\" onclick=\"openAvatarModal(event)\">U<\/div>\n <div style=\"font-size: 12px; font-weight: 700; color: #1697a5; margin-top: 10px; cursor: pointer;\" onclick=\"openAvatarModal(event)\">Edit Avatar<\/div>\n <\/div>\n <div class=\"sh-dd-item\" style=\"opacity: 0.5; cursor: not-allowed;\"><i class=\"fa-solid fa-lock\"><\/i> Account Settings<\/div>\n <div class=\"sh-dd-item\" style=\"color: #fda4af;\" onclick=\"closePortalModal()\"><i class=\"fa-solid fa-right-from-bracket\"><\/i> Exit Sandbox<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"sh-body\">\n <div class=\"sh-sidebar\">\n <div class=\"sh-nav-group grp-blue\">\n <div class=\"sh-nav-label-blue\">Workspace<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('dashboard', this)\"><i class=\"fa-solid fa-house\"><\/i> Dashboard<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('optimizer', this)\"><i class=\"fa-solid fa-microchip\"><\/i> Logistics Optimizer<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('logger', this)\"><i class=\"fa-solid fa-qrcode\"><\/i> Shipment Logger<\/div>\n <\/div>\n <div class=\"sh-nav-group grp-green\">\n <div class=\"sh-nav-label-red\">Resources<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('catalog', this)\"><i class=\"fa-solid fa-box-open\"><\/i> Package Catalog<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('compliance', this)\"><i class=\"fa-solid fa-shield-halved\"><\/i> Compliance Passport<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('prototype', this)\"><i class=\"fa-solid fa-truck-ramp-box\"><\/i> Prototype Status<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('archives', this)\"><i class=\"fa-solid fa-folder-open\"><\/i> Archives<\/div>\n <\/div>\n <div class=\"sh-nav-group grp-amber\">\n <div class=\"sh-nav-label-amber\">Account<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('settings', this)\"><i class=\"fa-solid fa-gear\"><\/i> System Settings<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('subscription', this)\"><i class=\"fa-solid fa-credit-card\"><\/i> Subscription<\/div>\n <div class=\"sh-nav-item\" onclick=\"switchPortalPage('help', this)\"><i class=\"fa-solid fa-circle-question\"><\/i> Help & FAQ<\/div>\n <\/div>\n <\/div>\n\n <div class=\"sh-content\" id=\"shContentArea\">\n <div id=\"shPlaceholder\" class=\"sh-placeholder\">\n <i class=\"fa-solid fa-hand-pointer\"><\/i>\n <h2 style=\"margin: 0 0 10px; color: #0f172a;\">Interact with the Sidebar<\/h2>\n <p style=\"margin: 0;\">Select a module to view its interface.<\/p>\n <\/div>\n <div id=\"shScreenshotContainer\" class=\"sh-screenshot-container\">\n <img decoding=\"async\" id=\"shScreenshot1\" class=\"sh-screenshot\" src=\"\" alt=\"Portal Screen Part 1\">\n <img decoding=\"async\" id=\"shScreenshot2\" class=\"sh-screenshot\" src=\"\" alt=\"Portal Screen Part 2\" style=\"display: none;\">\n <img decoding=\"async\" id=\"shScreenshot3\" class=\"sh-screenshot\" src=\"\" alt=\"Portal Screen Part 3\" style=\"display: none;\">\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"ava-modal\" id=\"avatarModal\" onclick=\"handleAvaOverlayClick(event)\">\n <div class=\"ava-box\">\n <div class=\"ava-header\">\n <h3><i class=\"fa-solid fa-palette\" style=\"color: #1697a5;\"><\/i> Customize Avatar<\/h3>\n <button class=\"ava-close\" onclick=\"closeAvatarModal()\"><i class=\"fa-solid fa-xmark\"><\/i><\/button>\n <\/div>\n <p style=\"color: #64748b; font-size: 14px; margin-top: 0; margin-bottom: 20px;\">Select an everyday icon to personalize your workspace. This functions flawlessly in the frontend demo.<\/p>\n <div class=\"ava-grid\">\n <div class=\"ava-opt c-1\" onclick=\"setAvatar('fa-leaf', 'c-1')\"><i class=\"fa-solid fa-leaf\"><\/i><\/div>\n <div class=\"ava-opt c-2\" onclick=\"setAvatar('fa-mug-hot', 'c-2')\"><i class=\"fa-solid fa-mug-hot\"><\/i><\/div>\n <div class=\"ava-opt c-3\" onclick=\"setAvatar('fa-rocket', 'c-3')\"><i class=\"fa-solid fa-rocket\"><\/i><\/div>\n <div class=\"ava-opt c-4\" onclick=\"setAvatar('fa-gem', 'c-4')\"><i class=\"fa-solid fa-gem\"><\/i><\/div>\n <div class=\"ava-opt c-5\" onclick=\"setAvatar('fa-camera', 'c-5')\"><i class=\"fa-solid fa-camera\"><\/i><\/div>\n <div class=\"ava-opt c-6\" onclick=\"setAvatar('fa-code', 'c-6')\"><i class=\"fa-solid fa-code\"><\/i><\/div>\n <div class=\"ava-opt c-7\" onclick=\"setAvatar('fa-fire', 'c-7')\"><i class=\"fa-solid fa-fire\"><\/i><\/div>\n <div class=\"ava-opt c-8\" onclick=\"setAvatar('fa-bolt', 'c-8')\"><i class=\"fa-solid fa-bolt\"><\/i><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"ip-explainer\">\n <button class=\"ip-close-btn\" onclick=\"closePortalModal()\"><i class=\"fa-solid fa-xmark\"><\/i><\/button>\n <div class=\"ip-explainer-kicker\">Module Overview<\/div>\n <h3 class=\"ip-explainer-title\" id=\"exTitle\">Welcome<\/h3>\n <div class=\"ip-explainer-text\" id=\"exText\">\n Click any module on the dark sidebar to your left to explore the Packven OS and read about its capabilities here.\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <script>\n \/\/ ====================================================================\n \/\/ PORTAL DATA & EXPLANATIONS\n \/\/ ====================================================================\n const portalData = {\n dashboard: {\n title: \"Dashboard\", icon: \"fa-house\", bgColor: \"#e5e7eb\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/dashboard_preview_01-scaled.png\",\n imgSrc2: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/dashboard_preview_02-scaled.png\",\n imgSrc3: \"\",\n desc: \"This is your <b>Command Center<\/b>. Here, you can see and interact with all the key data points within your personalized portal. It serves as a centralized hub where you can view exactly how much money you will save by reducing empty air in your boxes (Right Sizing) and following environmental laws.<br><br>You will also find a detailed graph that organizes all your optimized products in one place, allowing you to see which of your current packages are inefficient and which are performing well. Everything here is designed to be hands-on, helping you manage your packaging logistics with ease.\"\n },\n optimizer: {\n title: \"Logistics Optimizer\", icon: \"fa-microchip\", bgColor: \"#e5e7eb\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/optimizer_preview_01-scaled.png\",\n imgSrc2: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/optimizer_preview_02-scaled.png\",\n imgSrc3: \"\",\n desc: \"This is the <b>Mathematical Heart<\/b> of the Packven system. In this section, you select your current boxes to compare them against Packven\u2019s optimized models. The system doesn't just look at the box size; it also analyzes the complex shipping 'tiers' and weight brackets used by carriers across the Nordics and Germany.<br><br>This ensures the data reflects your actual shipping costs in the real market. You can also group specific products together to keep your data organized. We calculate your savings based on three professional metrics: <b>Material<\/b> (the cost to produce the box), <b>Freight<\/b> (the cost to ship based on weight), and <b>Tier Bonuses<\/b> (savings gained by fitting into a smaller, cheaper carrier category).\"\n },\n logger: {\n title: \"Shipment Logger\", icon: \"fa-qrcode\", bgColor: \"#e5e7eb\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/logger_preview_01-scaled.png\",\n imgSrc2: \"\",\n imgSrc3: \"\",\n desc: \"This is your <b>Shipment Registry<\/b>. During this pilot phase, you can manually record your shipments to see how they perform against modern standards. This acts as a simulation of the automated 'Digital Passport' system you will receive with a full subscription.<br><br>You can log both your current boxes and Packven boxes to see if your materials comply with Environmental Producer Responsibility (EPR)\u2014the legal rules that dictate how much 'eco-tax' you must pay for your packaging. By using a Packven box, we provide a guarantee that your shipments will meet these strict 2026 requirements, reducing your tax burden and legal risk.\"\n },\n catalog: {\n title: \"Package Catalog\", icon: \"fa-box-open\", bgColor: \"#e5e7eb\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/catalog_preview_01-scaled.png\",\n imgSrc2: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/catalog_preview_02-scaled.png\",\n imgSrc3: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/catalog_preview_03-scaled.png\",\n desc: \"Inside the <b>Package Catalog<\/b>, you can view the standard range of box models Packven provides to all partners. Based on the tests you run in the Optimizer, the system will highlight which Packven boxes fit the majority of your products.<br><br>From this page, you can select up to two specific box models to be shipped to you as physical samples for your inspection. This is also the place where you upload the details of your current 'legacy' boxes so the system can use them for all cost comparisons.\"\n },\n compliance: {\n title: \"Compliance Passport\", icon: \"fa-shield-halved\", bgColor: \"#e5e7eb\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/compliance_preview_01-scaled.png\",\n imgSrc2: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/compliance_preview_02-scaled.png\",\n imgSrc3: \"\",\n desc: \"This is your <b>Legal Safeguard<\/b>. Here, you monitor your shipment data against the 2026 environmental mandates to determine your exact tax liabilities and avoid potential government penalties. The system handles Sweden\u2019s complex NPA regulations and is ready for Germany\u2019s LUCID system.<br><br>You can generate automated environmental reports and preview a Digital Product Passport, which shows exactly what materials are in your boxes. We measure your success through four key areas: <b>Tax Savings<\/b>, <b>Total Market Weight<\/b> (tracking volume to avoid heavy fines), <b>Average Void Space<\/b>, and <b>Recycled Content<\/b>.\"\n },\n prototype: {\n title: \"Prototype Status\", icon: \"fa-truck-ramp-box\", bgColor: \"#f1f5f9\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/sku_tracker_preview_01-scaled.png\",\n imgSrc2: \"\",\n imgSrc3: \"\",\n desc: \"This section acts as a <b>Live Tracker<\/b> for the physical box samples you have requested. You can follow their journey from our facility to your office for testing.\"\n },\n archives: {\n title: \"Archives\", icon: \"fa-folder-open\", bgColor: \"#e5e7eb\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/archives_preview_01-scaled.png\",\n imgSrc2: \"\",\n imgSrc3: \"\",\n desc: \"The Archives serve as your personal <b>Simulation Library<\/b>. Here, you can review every calculation and comparison you have previously saved.<br><br>This is specifically designed to help you isolate certain parts of your business\u2014for instance, you can look only at your products sold in Norway\u2014to see which shipping strategy yields the highest profit. By comparing these saved tests, you can make strategic decisions about which box sizes work best for each specific market you serve.\"\n },\n settings: {\n title: \"System Settings\", icon: \"fa-gear\", bgColor: \"#e5e7eb\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/settings_preview_01-scaled.png\",\n imgSrc2: \"\",\n imgSrc3: \"\",\n desc: \"In this section, you can tailor the portal to your preferences, such as switching the language between Swedish and English or viewing costs in either Swedish Kronor or Euros.<br><br>Most importantly, you can set your <b>Optimization Strategy<\/b>. You can choose to focus on <b>Net Profit (ROI)<\/b>, where the system prioritizes the lowest cost even if the box is only 'barely' compliant. Alternatively, you can choose <b>Compliance<\/b>, which focuses on using the absolute minimum amount of cardboard. The default setting is <b>Balance<\/b>, which finds the most efficient middle ground.\"\n },\n subscription: {\n title: \"Subscription\", icon: \"fa-credit-card\", bgColor: \"#f8fafc\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/subscription_preview_01-scaled.png\",\n imgSrc2: \"\",\n imgSrc3: \"\",\n desc: \"This section manages your <b>Partnership Level<\/b>. As you move from a pilot user to a permanent partner, you can select the service tier that best fits your company's shipping volume.\"\n },\n help: {\n title: \"Help & FAQ\", icon: \"fa-circle-question\", bgColor: \"#e5e7eb\",\n imgSrc1: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/help_and_faq_preview_01-scaled.png\",\n imgSrc2: \"https:\/\/packven.com\/wp-content\/uploads\/2026\/04\/help_and_faq_preview_02-scaled.png\",\n imgSrc3: \"\",\n desc: \"If you ever have a question, need a specific shipping carrier added that is not in our list, or require a custom cardboard thickness (flute size), you can send a request here. We can update your portal to fit your company\u2019s unique needs.<br><br>This page also provides answers to Frequently Asked Questions, serving as a guide to help you navigate and master the Packven interface.\"\n }\n };\n\n \/\/ ====================================================================\n \/\/ MODAL INTERACTION LOGIC\n \/\/ ====================================================================\n function openPortalModal() {\n const modal = document.getElementById('interactivePortal');\n modal.style.display = 'flex';\n document.body.style.overflow = 'hidden';\n setTimeout(() => modal.classList.add('show'), 10);\n }\n\n function closePortalModal() {\n const modal = document.getElementById('interactivePortal');\n modal.classList.remove('show');\n setTimeout(() => {\n modal.style.display = 'none';\n document.body.style.overflow = 'auto';\n }, 300);\n }\n\n function handleOverlayClick(e) {\n if (e.target === document.getElementById('interactivePortal')) {\n closePortalModal();\n }\n }\n\n function switchPortalPage(pageId, btnElement) {\n const data = portalData[pageId];\n if (!data) return;\n\n \/\/ 1. Manage Sidebar active states\n document.querySelectorAll('.sh-nav-item').forEach(btn => btn.classList.remove('active'));\n btnElement.classList.add('active');\n\n \/\/ 2. Update Header\n document.getElementById('shPageTitle').innerText = data.title;\n document.getElementById('shPageIcon').innerHTML = `<i class=\"fa-solid ${data.icon}\"><\/i>`;\n\n \/\/ 3. Update Explainer Panel\n document.getElementById('exTitle').innerText = data.title;\n document.getElementById('exText').innerHTML = data.desc;\n\n \/\/ 4. Update Main Content Container & Background\n const contentArea = document.getElementById('shContentArea');\n const container = document.getElementById('shScreenshotContainer');\n const placeholder = document.getElementById('shPlaceholder');\n const img1 = document.getElementById('shScreenshot1');\n const img2 = document.getElementById('shScreenshot2');\n const img3 = document.getElementById('shScreenshot3');\n \n \/\/ Scroll to top and set seamless background color\n contentArea.scrollTop = 0;\n contentArea.style.background = data.bgColor || \"#e5e7eb\";\n \n placeholder.style.display = 'none';\n container.style.display = 'flex';\n \n \/\/ Fade effect for image swap\n container.style.opacity = '0';\n setTimeout(() => {\n img1.src = data.imgSrc1;\n \n if (data.imgSrc2) {\n img2.src = data.imgSrc2;\n img2.style.display = 'block';\n } else {\n img2.src = \"\";\n img2.style.display = 'none';\n }\n\n if (data.imgSrc3) {\n img3.src = data.imgSrc3;\n img3.style.display = 'block';\n } else {\n img3.src = \"\";\n img3.style.display = 'none';\n }\n \n \/\/ Simple fade in once the source is set\n setTimeout(() => { container.style.opacity = '1'; }, 50);\n }, 150);\n }\n\n \/\/ ====================================================================\n \/\/ AVATAR & DROPDOWN LOGIC\n \/\/ ====================================================================\n function toggleDropdown(e) {\n e.stopPropagation();\n document.getElementById('profileDropdown').classList.toggle('show');\n }\n\n document.addEventListener('click', () => {\n const dd = document.getElementById('profileDropdown');\n if (dd && dd.classList.contains('show')) dd.classList.remove('show');\n });\n\n function openAvatarModal(e) {\n e.stopPropagation();\n document.getElementById('profileDropdown').classList.remove('show');\n const modal = document.getElementById('avatarModal');\n modal.style.display = 'flex';\n setTimeout(() => modal.classList.add('show'), 10);\n }\n\n function closeAvatarModal() {\n const modal = document.getElementById('avatarModal');\n modal.classList.remove('show');\n setTimeout(() => modal.style.display = 'none', 300);\n }\n\n function handleAvaOverlayClick(e) {\n if (e.target === document.getElementById('avatarModal')) closeAvatarModal();\n }\n\n function setAvatar(iconClass, bgClass) {\n const headAva = document.getElementById('headerAvatar');\n const menuAva = document.getElementById('menuAvatar');\n \n [headAva, menuAva].forEach(el => {\n el.innerHTML = `<i class=\"fa-solid ${iconClass}\"><\/i>`;\n el.className = `sh-avatar ${bgClass}`; \/\/ Resets and applies new bg\n if (el.id === 'menuAvatar') el.className = `sh-dd-avatar ${bgClass}`;\n });\n \n closeAvatarModal();\n }\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bdff492 e-con-full e-flex e-con e-parent\" data-id=\"bdff492\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a5eb111 elementor-widget elementor-widget-html\" data-id=\"a5eb111\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Packven Logistics | Engineering Compliance<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:weight@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n \/* --- VARIABLES --- *\/\n :root {\n --pv-blue: #89CFF0;\n --pv-red: #F88379;\n --pv-gold: #f1c40f;\n --pv-dark: #2c3e50;\n --pv-border: #cbd5e1;\n --pv-font: 'Outfit', sans-serif;\n --pv-mono: 'JetBrains Mono', monospace;\n \n --c-blue: #89CFF0;\n --c-blue-dark: #2980b9;\n --c-dark: #1a1a1a;\n --c-red-text: #F88379;\n --c-grey-bg: #f9f9f9;\n --c-border: #e0e0e0;\n --c-grey-text: #555;\n }\n strong {\n font-weight: 700;\n color: var(--c-grey-text);\n padding: 0 4px;\n border-radius: 4px;\n }\n \n * { box-sizing: border-box; margin: 0; padding: 0; }\n \n body {\n font-family: var(--pv-font);\n color: var(--pv-dark);\n background-color: #ffffff;\n line-height: 1.6;\n overflow-x: hidden;\n }\n\n \/* --- MODAL STYLES --- *\/\n .erp-modal-overlay {\n position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh;\n background: rgba(255, 255, 255, 0.98); z-index: 2147483647 !important; \n pointer-events: none; display: none; \n align-items: center; justify-content: center;\n backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.3s ease;\n }\n .erp-modal-overlay.open { display: flex !important; opacity: 1 !important; pointer-events: auto; }\n \n .erp-modal-content {\n background: white; width: 95%; max-width: 550px;\n padding: 40px; border-radius: 12px; position: relative;\n box-shadow: 0 30px 60px rgba(0,0,0,0.1);\n animation: scaleIn 0.3s ease; border: 1px solid var(--c-border);\n text-align: left; pointer-events: auto;\n max-height: 90vh; overflow-y: auto;\n }\n @keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n\n .close-modal {\n position: absolute; top: 20px; right: 20px;\n background-color: transparent !important; border: transparent !important; outline:none!important;\n box-shadow: none !important;\n padding: 0px !important; margin: 0 !important; -webkit-appearance: none;\n font-size: 1.5rem; font-weight: 700; line-height: 1; color: #ccc; \n cursor: pointer; transition: color 0.2s ease; z-index: 10;\n }\n .close-modal:hover { color: var(--c-red-text); }\n\n .form-intro h2 {\n font-size: 1.5rem; font-weight: 700; color: var(--c-dark);\n margin: 0 0 15px 0; letter-spacing: -0.5px;\n }\n .form-intro p {\n font-size: 0.9rem; color: #666; line-height: 1.6;\n margin-bottom: 30px; border-left: 3px solid var(--pv-blue); padding-left: 15px;\n }\n\n .form-group { margin-bottom: 20px; }\n\n .erp-label {\n font-size: 0.8rem; font-weight: 700; color: var(--c-dark);\n display: block; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;\n }\n \n .erp-sub-label {\n font-size: 0.75rem; color: #888; font-weight: 400; display: block; margin-top: -5px; margin-bottom: 8px;\n }\n\n .erp-input, .erp-select {\n width: 100%; padding: 12px 15px;\n border: 1px solid #e0e0e0; border-radius: 6px;\n font-family: var(--pv-mono); font-size: 0.95rem;\n background: #fafafa; color: #333; transition: all 0.2s;\n }\n .erp-input:focus, .erp-select:focus {\n border-color: var(--pv-blue); background: white; outline: none;\n }\n\n .next-step-box {\n background-color: #f1f8ff;\n border: 1px dashed var(--c-blue-dark);\n padding: 20px; border-radius: 8px; margin-top: 30px;\n font-size: 0.85rem; color: var(--c-blue-dark); line-height: 1.5;\n }\n .next-step-header {\n font-weight: 700; text-transform: uppercase; \n font-size: 0.75rem; display: block; margin-bottom: 5px; letter-spacing: 1px;\n }\n\n .submit-btn {\n width: 100%; margin-top: 15px; padding: 16px;\n background-color: transparent;\n border: 1px solid var(--pv-blue); \n color: var(--pv-blue);\n font-weight: 700; text-transform: uppercase; letter-spacing: 1px;\n border-radius: 50px; cursor: pointer; transition: all 0.3s ease;\n }\n .submit-btn:hover { \n background-color: var(--pv-blue); color: white;\n }\n \n .package-txt {font-size: 1rem; text-align: left; }\n .packven-section { padding: 100px 20px; border-bottom: 1px solid var(--pv-border);}\n .pv-container { max-width: 1200px; margin: 0 auto; width: 100%; }\n .pv-header { text-align: center; max-width: 700px; margin: 0 auto 70px; font-family: var(--pv-font);}\n .pv-header h2 { font-size: clamp(2rem, 5vw, 2.5rem); font-weight: 700; margin-bottom: 15px; color: var(--pv-dark); letter-spacing: -0.5px; line-height: 1.2; font-family: var(--pv-font); }\n .pv-header p { font-size: 1.1rem; color: #666; line-height: 1.6; font-family: var(--pv-font); }\n\n .vp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }\n .vp-card {\n padding: 40px 30px; background: #ffffff; border: 1px solid var(--pv-border); border-radius: 16px;\n transition: all 0.3s ease; position: relative; overflow: hidden; display: flex; flex-direction: column;\n }\n .vp-card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 12px; margin-top: 25px; }\n .vp-card p { font-size: 0.95rem; color: #666; line-height: 1.6; }\n .vp-icon-box { width: 50px; height: 50px; margin-bottom: 10px; display: flex; align-items: center; }\n .vp-svg { width: 40px; height: 40px; stroke-width: 1.5; fill: none; stroke: var(--pv-dark); transition: all 0.4s ease; }\n .vp-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.06); }\n .vp-card:hover .vp-svg { transform: scale(1.1); }\n .vp-card:nth-child(1):hover { border-color: var(--pv-blue); } .vp-card:nth-child(1):hover .vp-svg { stroke: var(--pv-blue); }\n .vp-card:nth-child(2):hover { border-color: var(--pv-red); } .vp-card:nth-child(2):hover .vp-svg { stroke: var(--pv-red); }\n .vp-card:nth-child(3):hover { border-color: var(--pv-blue); } .vp-card:nth-child(3):hover .vp-svg { stroke: var(--pv-blue); }\n .vp-card:nth-child(4):hover { border-color: var(--pv-gold); } .vp-card:nth-child(4):hover .vp-svg { stroke: var(--pv-gold); }\n\n .protocol-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 60px 40px;\n margin-top: 50px;\n }\n\n .proto-step { position: relative; padding-left: 25px; border-left: 2px solid #eee; transition: all 0.3s; }\n .proto-step:hover { border-left-color: var(--pv-blue); }\n \n .proto-num {\n font-family: var(--pv-mono); font-size: 0.8rem; color: var(--pv-blue);\n margin-bottom: 8px; display: block; font-weight: 700;\n }\n .proto-h3 { font-size: 1.25rem; font-weight: 700; color: var(--pv-dark); margin: 0 0 10px 0; }\n .proto-p { font-size: 0.95rem; color: #666; margin: 0; line-height: 1.6; }\n\n .protocol-wrapper {\n position: relative;\n background: white;\n border: 1px solid var(--pv-border);\n border-radius: 16px;\n padding: 60px 40px;\n box-shadow: 0 5px 20px rgba(0,0,0,0.03);\n }\n\n .cta-section { \n background-color: #fafafa; \n text-align: center; \n padding: 100px 20px; \n border-top: 1px solid var(--pv-border); \n }\n \n .partner-card {\n background: white;\n border: 1px solid var(--pv-border);\n border-radius: 16px;\n padding: 60px 40px;\n text-align: center;\n box-shadow: 0 10px 40px rgba(0,0,0,0.05);\n }\n \n .partner-grid {\n display: grid;\n grid-template-columns: 1.2fr 0.8fr;\n gap: 60px;\n margin-top: 50px;\n text-align: left;\n }\n\n .cta-badge { \n font-size: 0.75rem; \n text-transform: uppercase; \n letter-spacing: 2px; \n font-weight: 700; \n color: var(--pv-red); \n margin-bottom: 20px; \n display: block; \n }\n\n .cta-btn-ghost-red {\n display: inline-block; padding: 16px 35px;\n background-color: transparent; \n color: var(--pv-red);\n border: 2px solid var(--pv-red);\n border-radius: 8px;\n font-weight: 700; font-size: 1rem;\n text-decoration: none; transition: all 0.2s ease;\n cursor: pointer;\n }\n \n .cta-btn-ghost-red:hover {\n background-color: var(--pv-red);\n color: white;\n transform: translateY(-2px);\n box-shadow: 0 10px 25px rgba(248, 131, 121, 0.3);\n }\n\n @media (max-width: 900px) {\n .protocol-grid { grid-template-columns: 1fr; gap: 40px; }\n .partner-grid { grid-template-columns: 1fr; gap: 40px; }\n .partner-card { padding: 40px 20px; }\n .packven-section { padding: 60px 20px; }\n }\n \n \n<\/style>\n<\/head>\n<body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1>\n\n <div id=\"homepage-pilot-modal\" class=\"erp-modal-overlay\">\n <div class=\"erp-modal-content\">\n <button class=\"close-modal\" onclick=\"closePilotModal()\">\u2715<\/button>\n \n <div class=\"form-intro\">\n <h2>Strategic Logistics Inquiry<\/h2>\n <p>Packven partners with brands to engineer compliance and reduce shipping overhead. Please provide your structural data below to begin the volumetric audit. Sensitive financial data will be requested via secure channel.<\/p>\n <\/div>\n\n <form id=\"audit-form\" action=\"https:\/\/portal.packven.com\/submit-audit\" method=\"POST\">\n \n <div class=\"form-group\">\n <label class=\"erp-label\">Company Name<\/label>\n <input type=\"text\" name=\"company_name\" class=\"erp-input\" placeholder=\"e.g., Your Company\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"erp-label\">Monthly Parcel Volume<\/label>\n <select name=\"monthly_volume\" class=\"erp-select\" required>\n <option value=\"\" disabled selected>Select volume range...<\/option>\n <option value=\"500-2000\">500 \u2013 2,000 pkgs\/mo<\/option>\n <option value=\"2000-10000\">2,000 \u2013 10,000 pkgs\/mo<\/option>\n <option value=\"10000+\">10,000+ pkgs\/mo<\/option>\n <\/select>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"erp-label\">Primary Logistics Partners<\/label>\n <span class=\"erp-sub-label\">Hold Ctrl\/Cmd to select multiple or list below.<\/span>\n <input type=\"text\" name=\"partners\" class=\"erp-input\" placeholder=\"e.g. PostNord, DHL, Budbee...\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"erp-label\">Active Packaging SKUs<\/label>\n <input type=\"number\" name=\"sku_num\" class=\"erp-input\" placeholder=\"e.g. 5 unique box sizes\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"erp-label\">Estimated Void Space<\/label>\n <input type=\"text\" name=\"empty_space\" class=\"erp-input\" placeholder=\"e.g. 30% empty air per box\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"erp-label\">Work Email<\/label>\n <input type=\"email\" name=\"work_email\" class=\"erp-input\" placeholder=\"name@company.com\" required>\n <\/div>\n\n <div class=\"next-step-box\">\n <span class=\"next-step-header\">The Process:<\/span>\n Upon submission, our engineering team will perform a preliminary review of your volume profile. Qualified partners will receive an invitation to the Packven Dashboard to begin the baseline audit.\n <\/div>\n\n <button type=\"submit\" class=\"submit-btn\">Request Audit Access<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <section class=\"packven-section\">\n <div class=\"pv-container\">\n <div class=\"pv-header\">\n <h2>Engineering Over Guesswork<\/h2>\n <p>We bridge the gap between logistics, engineering, and packaging supply.<\/p>\n <\/div>\n <div class=\"vp-grid\">\n <div class=\"vp-card\">\n <div class=\"vp-icon-box\"><svg class=\"vp-svg\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"><\/path><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"><\/polyline><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"><\/line><\/svg><\/div>\n <h3>Right Size Engineering<\/h3>\n <p>We audit your SKU data to recommend right-size formats that stay within volume limits for Varubrev and Instabox where possible.<\/p>\n <\/div>\n <div class=\"vp-card\">\n <div class=\"vp-icon-box\"><svg class=\"vp-svg\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path><path d=\"M9 12l2 2 4-4\"><\/path><\/svg><\/div>\n <h3>Compliance Passport<\/h3>\n <p>Every SKU comes with a digital QR passport containing FSC certifications where available and disposal guidance, with exportable draft EPR outputs.<\/p>\n <\/div>\n <div class=\"vp-card\">\n <div class=\"vp-icon-box\"><svg class=\"vp-svg\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.3\"><\/path><\/svg><\/div>\n <h3>Packaging as a Service<\/h3>\n <p>Forget huge MOQ orders. Our subscription bundles give you predictable spending and automated restocking.<\/p>\n <\/div>\n <div class=\"vp-card\">\n <div class=\"vp-icon-box\"><svg class=\"vp-svg\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg><\/div>\n <h3>Premium Branding<\/h3>\n <p>Sustainable does not have to mean boring. Upgrade your unboxing experience with integrated logo options and design precision.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <section class=\"cta-section\">\n <div class=\"pv-container\">\n <div class=\"partner-card\">\n <span class=\"cta-badge\">Limited Pilot Intake \u2022 2026<\/span>\n <h2 style=\"font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 20px; color: var(--pv-dark); font-weight: 700; line-height: 1.1;\">\n Partnering with<br><span style=\"color:var(--pv-blue);\">Forward Thinking Brands<\/span>.\n <\/h2>\n \n <div class=\"partner-grid\">\n <div style=\"text-align:left;\">\n <h3 style=\"font-size:1.4rem; font-weight:700; margin-bottom:15px; color:var(--pv-dark);\">We are not a catalog.<\/h3>\n <p style=\"font-size:1rem; color:#666; line-height:1.6; margin-bottom:30px;\">Packven combines logistics engineering and packaging supply to reduce dead air and simplify EPR workload. We work from your shipment profile and carrier thresholds to design a packaging system that performs in the real world.\n <\/p>\n \n <h3 style=\"font-size:1.2rem; font-weight:700; margin-bottom:10px; color:var(--pv-dark);\">Engineering requires focus.<\/h3>\n <p style=\"font-size:1rem; color:#666; line-height:1.6;\">\n We keep intake limited so each pilot gets direct technical support. From auditing top SKUs to validating CAD-cut fit, we optimize for measurable outcomes: less empty space, lower shipping cost, and cleaner compliance workflows.\n <\/p>\n <\/div>\n \n <div style=\"background:#f8f9fa; padding:30px; border-radius:12px; text-align:left; border:1px solid #eee; display:flex; flex-direction:column; justify-content:center;\">\n <h3 style=\"font-size:1.2rem; font-weight:700; margin-bottom:15px; color:var(--pv-red);\">Why start now?<\/h3>\n <p style=\"font-size:0.95rem; color:#555; line-height:1.6; margin-bottom:30px;\">\n Carrier pricing and EU packaging requirements are tightening. A pilot now gives you baseline data, fit validation, and a clear rollout path before 2026's regulatory pressure increase.\n <\/p>\n \n <button onclick=\"openPilotModal()\" class=\"cta-btn-ghost-red\" style=\"width:100%;\">Apply for Pilot Access<\/button>\n <p style=\"margin-top:15px; font-size:0.8rem; color:#999; text-align:center;\">No commitment required. Just data.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n<script>\n function teleportModal() {\n const modal = document.getElementById('homepage-pilot-modal');\n if (modal && modal.parentNode !== document.body) { document.body.appendChild(modal); }\n }\n teleportModal(); document.addEventListener(\"DOMContentLoaded\", teleportModal); window.addEventListener(\"load\", teleportModal);\n\n function openPilotModal() {\n const modal = document.getElementById('homepage-pilot-modal');\n if(modal) { modal.style.display = 'flex'; setTimeout(() => { modal.classList.add('open'); }, 10); }\n }\n function closePilotModal() {\n const modal = document.getElementById('homepage-pilot-modal');\n if(modal) { modal.classList.remove('open'); setTimeout(() => { modal.style.display = 'none'; }, 300); }\n }\n<\/script>\n\n<script>\ndocument.getElementById('audit-form').addEventListener('submit', function(e) {\n e.preventDefault(); \/\/ 1. Stop the browser from leaving the page\n \n var form = this;\n var actionUrl = form.getAttribute('action'); \/\/ Get the destination URL\n var formData = new FormData(form);\n\n \/\/ 2. Button Feedback (Optional: Change text to \"Sending...\")\n var submitBtn = form.querySelector('button[type=\"submit\"]');\n var originalText = submitBtn.innerText;\n submitBtn.innerText = \"Sending...\";\n submitBtn.disabled = true;\n\n \/\/ 3. Send the data silently\n fetch(actionUrl, {\n method: 'POST',\n body: formData \/\/ The browser automatically formats this correctly\n })\n .then(response => {\n if (response.ok) {\n \/\/ Success!\n alert(\"Message Sent! We will be in touch shortly.\");\n form.reset(); \/\/ Clear the form fields\n closePilotModal(); \/\/ Close the modal on success\n } else {\n \/\/ Server error\n alert(\"Something went wrong. Please email us directly.\");\n }\n })\n .catch(error => {\n \/\/ Network error\n console.error('Error:', error);\n alert(\"Connection error. Please try again.\");\n })\n .finally(() => {\n \/\/ Reset button\n submitBtn.innerText = originalText;\n submitBtn.disabled = false;\n });\n});\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fdf46f7 e-flex e-con-boxed e-con e-parent\" data-id=\"fdf46f7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0955291 elementor-widget elementor-widget-spacer\" data-id=\"0955291\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9260782 e-con-full e-flex e-con e-parent\" data-id=\"9260782\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5a238a0 elementor-widget elementor-widget-html\" data-id=\"5a238a0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n \/* --- VARIABLES & RESET --- *\/\n :root {\n --pv-blue: #89CFF0;\n --pv-red: #F88379;\n --pv-gold: #f1c40f;\n --pv-dark: #2c3e50;\n --pv-green: #27ae60;\n --pv-border: #e6e6e6;\n --pv-font-main: 'Outfit', sans-serif;\n --pv-font-mono: 'JetBrains Mono', monospace;\n }\n * { box-sizing: border-box; margin: 0; padding: 0; }\n \n body {\n font-family: var(--pv-font-main);\n color: var(--pv-dark);\n background-color: #ffffff;\n line-height: 1.6;\n }\n\n \/* --- SECTION CONTAINER --- *\/\n .problem-section {\n padding: 80px 20px;\n max-width: 1200px;\n margin: 0 auto;\n }\n\n \/* --- HEADER --- *\/\n .prob-header {\n text-align: center;\n max-width: 800px;\n margin: 0 auto 60px;\n }\n .prob-tag {\n font-family: var(--pv-font-mono);\n font-size: 0.8rem;\n color: var(--pv-red);\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 700;\n display: block;\n margin-bottom: 15px;\n }\n .prob-h2 {\n font-size: clamp(2rem, 4vw, 3rem);\n font-weight: 700;\n line-height: 1.1;\n margin-bottom: 20px;\n color: var(--pv-dark);\n }\n .prob-p {\n font-size: 1.15rem;\n color: #666;\n font-weight: 300;\n }\n\n \/* --- GOLDILOCKS THRESHOLDS (TRANSPARENT STYLE) --- *\/\n .threshold-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 20px;\n margin-bottom: 80px;\n }\n .threshold-card {\n border-radius: 12px;\n padding: 30px 20px;\n text-align: center;\n position: relative;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n box-shadow: 0 5px 15px rgba(0,0,0,0.03);\n color: var(--pv-dark); \/* Dark text for readability on light bg *\/\n backdrop-filter: blur(5px); \/* Glass effect *\/\n }\n .threshold-card:hover { \n transform: translateY(-3px); \n box-shadow: 0 10px 25px rgba(0,0,0,0.08);\n }\n \n .t-limit {\n display: inline-block;\n padding: 4px 10px;\n border-radius: 4px;\n font-family: var(--pv-font-mono);\n font-size: 0.85rem;\n margin-bottom: 15px;\n font-weight: 700;\n background: white;\n border: 1px solid rgba(0,0,0,0.05);\n }\n .t-title { font-weight: 700; font-size: 1.25rem; margin-bottom: 8px; display: block;}\n .t-desc { font-size: 0.9rem; opacity: 0.8; font-weight: 400; line-height: 1.4; color: #555; }\n \n \/* Transparent\/Tinted Backgrounds *\/\n .t-gold { \n background: rgba(241, 196, 15, 0.12); \/* 12% opacity gold *\/\n border: 1px solid rgba(241, 196, 15, 0.4);\n }\n .t-gold .t-limit { color: #b7950b; }\n\n .t-blue { \n background: rgba(137, 207, 240, 0.15); \/* 15% opacity blue *\/\n border: 1px solid rgba(137, 207, 240, 0.5);\n }\n .t-blue .t-limit { color: #5dade2; }\n\n .t-red { \n background: rgba(248, 131, 121, 0.12); \/* 12% opacity red *\/\n border: 1px solid rgba(248, 131, 121, 0.4);\n }\n .t-red .t-limit { color: var(--pv-red); \n \n }\n .disclaimer { font-size: 0.9rem; font-style: italic; text-align: center; margin-top: 20px; margin-bottom:-20px;\n }\n\n \/* --- RECEIPT COMPARISON --- *\/\n .comparison-wrapper {\n background: #f9fafb; \n border-radius: 16px;\n padding: 50px 30px;\n margin-bottom: 60px;\n border: 1px solid #eee;\n }\n .comp-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 40px;\n }\n \n .receipt-card {\n background: white;\n padding: 30px;\n border-radius: 8px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.04);\n font-family: var(--pv-font-mono);\n font-size: 0.9rem;\n position: relative;\n border: 1px solid #f0f0f0;\n }\n \n .r-header { \n font-family: var(--pv-font-main); \n font-weight: 700; \n font-size: 1.1rem; \n margin-bottom: 20px; \n display: flex; \n justify-content: space-between; \n align-items: center;\n }\n .r-row {\n display: flex;\n justify-content: space-between;\n margin-bottom: 12px;\n border-bottom: 1px dashed #eee;\n padding-bottom: 6px;\n }\n .r-label { color: #999; }\n .r-val { font-weight: 700; color: var(--pv-dark); }\n \n .r-total {\n margin-top: 20px;\n padding-top: 15px;\n border-top: 2px solid var(--pv-dark);\n display: flex;\n justify-content: space-between;\n font-size: 1.1rem;\n font-weight: 700;\n }\n .text-danger { color: var(--pv-red); }\n .text-success { color: var(--pv-blue); }\n\n \/* --- CSS ICONS --- *\/\n .icon-wrap {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n }\n .icon-x { background: rgba(248, 131, 121, 0.1); }\n .css-x { position: relative; width: 14px; height: 14px; }\n .css-x::before, .css-x::after {\n position: absolute; content: ''; width: 100%; height: 2px;\n background-color: var(--pv-red); top: 50%; left: 0; border-radius: 2px;\n }\n .css-x::before { transform: rotate(45deg); }\n .css-x::after { transform: rotate(-45deg); }\n\n .icon-check { background: rgba(39, 174, 96, 0.1); }\n .css-check {\n width: 7px; height: 12px;\n border-bottom: 2px solid var(--pv-green);\n border-right: 2px solid var(--pv-green);\n transform: rotate(45deg); margin-bottom: 2px;\n }\n\n \/* --- THE BOTTOM LINE (SMALLER) --- *\/\n .bottom-line-sleek {\n text-align: left;\n padding: 10px 0 10px 30px; \/* Reduced padding *\/\n margin-bottom: 50px;\n border-left: 3px solid var(--pv-dark);\n background: transparent;\n color: var(--pv-dark);\n }\n .bl-big { \n font-size: 1.6rem; \/* Reduced from 3.5rem *\/\n font-weight: 700; \n line-height: 1.2;\n margin-bottom: 8px; \n color: var(--pv-dark);\n }\n .bl-sub { \n font-size: 1rem; \/* Reduced size *\/\n color: #666; \n font-weight: 400;\n max-width: 700px;\n }\n .highlight { color: var(--pv-red); font-weight: 700; }\n\n \/* --- REGULATORY THREAT --- *\/\n .reg-alert {\n border: 1px solid rgba(241, 196, 15, 0.5);\n background: #fffdf5;\n padding: 25px;\n border-radius: 8px;\n display: flex;\n gap: 20px;\n align-items: center;\n }\n .reg-icon { font-size: 1.5rem; }\n .reg-content h4 { margin: 0 0 5px 0; font-size: 1.05rem; font-weight: 700; color: var(--pv-dark); }\n .reg-content p { margin: 0; font-size: 0.9rem; color: #555; }\n\n @media (max-width: 768px) {\n .comp-grid { grid-template-columns: 1fr; }\n .problem-section { padding: 50px 20px; }\n .reg-alert { flex-direction: column; text-align: center; }\n .bottom-line-sleek { padding-left: 15px; border-left-width: 3px; }\n }\n <\/style>\n<\/head>\n<body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1>\n\n<section class=\"problem-section\">\n \n <div class=\"prob-header\">\n <span class=\"prob-tag\">The 1-Millimeter Penalty<\/span>\n <h2 class=\"prob-h2\">You are paying for air.<br>And the price is going up.<\/h2>\n <p class=\"prob-p\">\n Standard packaging catalogs sell boxes designed for their manufacturing convenience, not your shipping reality. \n Because of this, many e-merchants fall into higher shipping tiers when the last few millimeters push a parcel over a threshold.\n <\/p>\n <\/div>\n\n <div class=\"threshold-grid\">\n <div class=\"threshold-card t-gold\">\n <span class=\"t-limit\">Max 30 mm<\/span>\n <span class=\"t-title\">Varubrev<\/span>\n <span class=\"t-desc\">Lowest Rate. Ideal for supplements & cosmetics.<\/span>\n <\/div>\n <div class=\"threshold-card t-blue\">\n <span class=\"t-limit\">Max 70 mm<\/span>\n <span class=\"t-title\">Varubrev (skrymmande)<\/span>\n <span class=\"t-desc\">The \"Golden Range\". Standard bulk rate.<\/span>\n <\/div>\n <div class=\"threshold-card t-red\">\n <span class=\"t-limit\">71 mm +<\/span>\n <span class=\"t-title\">Parcel Rate<\/span>\n <span class=\"t-desc\">Over-limit fees applied.<\/span>\n <\/div>\n <\/div>\n\n <div class=\"comparison-wrapper\">\n <div class=\"comp-grid\">\n \n <div class=\"receipt-card\">\n <div class=\"r-header\">\n <span>Standard Box <\/span>\n <div class=\"icon-wrap icon-x\">\n <div class=\"css-x\"><\/div>\n <\/div>\n <\/div>\n <div class=\"r-row\">\n <span class=\"r-label\">Box Height<\/span>\n <span class=\"r-val\">75 mm<\/span>\n <\/div>\n <div class=\"r-row\">\n <span class=\"r-label\">Content Height<\/span>\n <span class=\"r-val\">50 mm<\/span>\n <\/div>\n <div class=\"r-row\">\n <span class=\"r-label\">Empty Air<\/span>\n <span class=\"r-val text-danger\">25 mm<\/span>\n <\/div>\n <div class=\"r-row\">\n <span class=\"r-label\">Carrier Class<\/span>\n <span class=\"r-val\"> Service Point\/ Parcel<\/span>\n <\/div>\n <div class=\"r-total\">\n <span>Est. Cost<\/span>\n <span class=\"text-danger\">~69 SEK<\/span>\n <\/div>\n <\/div>\n\n <div class=\"receipt-card\">\n <div class=\"r-header\">\n <span>Packven Solution<\/span>\n <div class=\"icon-wrap icon-check\">\n <div class=\"css-check\"><\/div>\n <\/div>\n <\/div>\n <div class=\"r-row\">\n <span class=\"r-label\">Box Height<\/span>\n <span class=\"r-val\">69 mm<\/span>\n <\/div>\n <div class=\"r-row\">\n <span class=\"r-label\">Content Height<\/span>\n <span class=\"r-val\">50 mm<\/span>\n <\/div>\n <div class=\"r-row\">\n <span class=\"r-label\">Empty Air<\/span>\n <span class=\"r-val text-success\">19 mm<\/span>\n <\/div>\n <div class=\"r-row\">\n <span class=\"r-label\">Carrier Class<\/span>\n <span class=\"r-val\">Varubrev<\/span>\n <\/div>\n <div class=\"r-total\">\n <span>Est. Cost<\/span>\n <span class=\"text-success\">~49 SEK<\/span>\n \n <\/div>\n <\/div>\n <\/div>\n <p class=\"disclaimer\">~Example thresholds and rates vary by carrier and service level.<\/p>\n <\/div>\n\n <div class=\"bottom-line-sleek\">\n <div class=\"bl-big\">That is a <span class=\"highlight\">20 SEK<\/span> difference per order.<\/div>\n <div class=\"bl-sub\">If you ship 1,000 orders a month, using the wrong box is costing you <strong>240,000 SEK a year.<\/strong><\/div>\n <\/div>\n\n <div class=\"reg-alert\">\n <div class=\"reg-icon\">\u26a0\ufe0f<\/div>\n <div class=\"reg-content\">\n <h4>The Regulatory Threat (EU PPWR)<\/h4>\n <p>Cost isn\u2019t the only issue anymore. Under the EU Packaging and Packaging Waste Regulation (PPWR), packaging efficiency and documentation are moving toward enforceable requirements. Reducing empty space and maintaining exportable packaging data now lowers future compliance risk and avoids expensive surprises later.\n <\/p>\n <\/div>\n <\/div>\n<\/section>\n\n<section class=\"packven-section\">\n <div class=\"pv-container\">\n <div class=\"protocol-wrapper\">\n <div class=\"pv-header\" style=\"margin-bottom:0;\">\n <h2>Packven Packaging OS<\/h2> \n <div> \n <\/div> \n <h3>\n <span style=\"font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(0,0,0,0.6);\">\n Product vision - Post Launch<\/span>\n <\/h3>\n <p>Packven is building a managed packaging system that reduces dimensional\/empty space and produces exportable compliance artifacts for EU shipping.<\/p>\n <\/div>\n <p class=\"package-txt\"><strong>What customers buy:<\/strong><\/p>\n <div class=\"protocol-grid\">\n <div class=\"proto-step\">\n <span class=\"proto-num\">Standardize packaging<\/span>\n <h3 class=\"proto-h3\">Right-Size Packaging Stack (subscription)<\/h3>\n <p class=\"proto-p\"> A small set of winning boxes and mailers + void fill, aligned to carrier thresholds and service levels and replenished automatically.<\/p>\n <\/div>\n <div class=\"proto-step\">\n <span class=\"proto-num\">Quantify savings<\/span>\n <h3 class=\"proto-h3\">Right-Size Profit Engine (Portal)<\/h3>\n <p class=\"proto-p\"> SKU \u2192 recommended format, Right-Size Score, and \u201c\u20ac\/kr saved per 100 shipments\u201d impact view.<\/p>\n <\/div>\n <div class=\"proto-step\">\n <span class=\"proto-num\">Prove compliance<\/span>\n <h3 class=\"proto-h3\">Digital Compliance Passport<\/h3>\n <p class=\"proto-p\"> Living packaging data per format (composition, certificates where available, disposal guidance, labeling), always up to date via QR.<\/p>\n <\/div>\n <div class=\"proto-step\">\n <span class=\"proto-num\">Export reporting<\/span>\n <h3 class=\"proto-h3\">Automation & Reporting\n <\/h3>\n <p class=\"proto-p\"> Get exports, audit trails, and draft country-by-country reporting outputs as integrations mature.<\/p>\n <\/div>\n <\/div>\n\n <p style=\"text-align:center; margin-top: 50px; font-size: 0.9rem; color: #999; font-style: italic;\">\n Entry point: Start with the Pilot Protocol (evaluation only, governed by the LOI).\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d794b87 elementor-widget elementor-widget-html\" data-id=\"d794b87\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n \/* --- SECTION STYLES --- *\/\n .starter-pack-section {\n padding: 100px 20px;\n background-color: #fcfcfc;\n border-bottom: 1px solid #e5e5e5;\n font-family: 'Outfit', sans-serif;\n }\n\n .sp-header {\n text-align: center; max-width: 600px; margin: 0 auto 60px;\n }\n .sp-header h2 { font-size: 2.5rem; margin-bottom: 15px; color: #2c3e50; line-height: 1.1; }\n .sp-header p { font-size: 1.1rem; color: #666; }\n\n .sp-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n gap: 30px;\n max-width: 1100px; margin: 0 auto;\n }\n\n \/* CARD DESIGN *\/\n .sp-card {\n background: white;\n border-radius: 16px;\n overflow: hidden;\n text-decoration: none; color: inherit;\n display: flex; flex-direction: column;\n transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n border: 1px solid rgba(0,0,0,0.06);\n box-shadow: 0 4px 10px rgba(0,0,0,0.03);\n position: relative;\n }\n\n .sp-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 20px 40px rgba(0,0,0,0.08);\n }\n\n \/* Color Strip at Top *\/\n .sp-strip { height: 6px; width: 100%; transition: height 0.3s; }\n .sp-card:hover .sp-strip { height: 8px; }\n\n \/* Content Area *\/\n .sp-body { padding: 30px; flex-grow: 1; display: flex; flex-direction: column; }\n \n .sp-label {\n font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;\n margin-bottom: 12px; color: #999;\n }\n \n .sp-title { font-size: 1.6rem; font-weight: 700; color: #2c3e50; margin-bottom: 15px; line-height: 1.2; }\n .sp-desc { font-size: 1rem; color: #666; line-height: 1.6; margin-bottom: 30px; flex-grow: 1; }\n \n \/* BUTTON STYLES *\/\n .sp-btn {\n font-size: 0.95rem; font-weight: 700; \n padding: 14px 0; border-radius: 50px;\n text-align: center; width: 100%;\n transition: all 0.3s ease;\n border: 2px solid transparent;\n display: block;\n }\n\n \/* --- THEMES --- *\/\n \/* Blue Theme *\/\n .theme-blue .sp-strip { background: #89CFF0; }\n .theme-blue .sp-btn { border-color: #89CFF0; color: #89CFF0; background: transparent; }\n .theme-blue:hover .sp-btn { background: #89CFF0; color: white; }\n\n \/* Red Theme *\/\n .theme-red .sp-strip { background: #F88379; }\n .theme-red .sp-btn { border-color: #F88379; color: #F88379; background: transparent; }\n .theme-red:hover .sp-btn { background: #F88379; color: white; }\n\n \/* RESPONSIVE *\/\n @media (max-width: 768px) {\n .sp-grid { grid-template-columns: 1fr; }\n .sp-header h2 { font-size: 2rem; }\n }\n<\/style>\n\n<section class=\"starter-pack-section\">\n <div class=\"sp-header\">\n <h2>The Logistics Starter Pack<\/h2>\n <p>Three critical guides for 2026. Start here to future-proof your supply chain.<\/p>\n <\/div>\n\n <div class=\"sp-grid\">\n \n <a href=\"https:\/\/packven.com\/eu-ppwr-2026-2030-article\/\" class=\"sp-card theme-blue\">\n <div class=\"sp-strip\"><\/div>\n <div class=\"sp-body\">\n <span class=\"sp-label\">Regulation Research<\/span>\n <h3 class=\"sp-title\">EU PPWR 2026<\/h3>\n <p class=\"sp-desc\">The compliance shift is already underway. Here\u2019s what PPWR changes, when key requirements phase in, and what Swedish producers should start organising now.<\/p>\n <span class=\"sp-btn\">Learn More<\/span>\n <\/div>\n <\/a>\n\n <a href=\"https:\/\/packven.com\/air-tax-article\/\" class=\"sp-card theme-red\">\n <div class=\"sp-strip\"><\/div>\n <div class=\"sp-body\">\n <span class=\"sp-label\">Product Research<\/span>\n <h3 class=\"sp-title\">The Air-Tax<\/h3>\n <p class=\"sp-desc\">How volumetric weight creates a hidden tax on your business. An extremely expensive mistake hidden in plain sight.<\/p>\n <span class=\"sp-btn\">Learn More<\/span>\n <\/div>\n <\/a>\n\n <a href=\"https:\/\/packven.com\/varubrev-article\/\" class=\"sp-card theme-red\">\n <div class=\"sp-strip\"><\/div>\n <div class=\"sp-body\">\n <span class=\"sp-label\">Market Strategy<\/span>\n <h3 class=\"sp-title\">Postnord Varubrev<\/h3>\n <p class=\"sp-desc\">The Swedish sweet spot for small parcels. How to stay within Varubrev limits, reduce empty space, and protect margin.<\/p>\n <span class=\"sp-btn\">Learn More<\/span>\n <\/div>\n <\/a>\n\n <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3312a75 e-flex e-con-boxed e-con e-parent\" data-id=\"3312a75\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd52343 elementor-widget elementor-widget-spacer\" data-id=\"fd52343\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8bfeab4 e-con-full e-flex e-con e-parent\" data-id=\"8bfeab4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-01f1c66 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-html\" data-id=\"01f1c66\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"contact-target\" class=\"swiss-contact-wrapper\">\n <div class=\"contact-inner\">\n <div class=\"contact-header\">\n <h2 class=\"form-headline\">Connect<span class=\"dot\">.<\/span><\/h2>\n <p class=\"form-subline\">Have a question about our protocol or compliance? Reach out directly.<\/p>\n <\/div>\n\n <form id=\"contact-form\" action=\"https:\/\/portal.packven.com\/submit-contact\" method=\"POST\" class=\"contact-form\">\n <div class=\"form-grid\">\n <div class=\"input-wrap accent-blue\">\n <label for=\"full-name\">Your Name<\/label>\n <input type=\"text\" name=\"name\" id=\"full-name\" placeholder=\"Name\" required>\n <\/div>\n <div class=\"input-wrap accent-red\">\n <label for=\"email-address\">Your Email<\/label>\n <input type=\"email\" name=\"email\" id=\"email-address\" placeholder=\"email@company.com\" required>\n <\/div>\n <\/div>\n\n <div class=\"input-wrap accent-yellow\">\n <label for=\"inquiry\">Question Type<\/label>\n <select name=\"subject\" id=\"inquiry\" required>\n <option value=\"\" disabled selected>--Select--<\/option>\n <option value=\"General Inquiry\">General Inquiry<\/option>\n <option value=\"Technical Question\">Technical Question<\/option>\n <option value=\"Pricing\/Partnership\">Pricing\/Partnership<\/option>\n <option value=\"Other\">Other<\/option>\n <\/select>\n <\/div>\n\n <div class=\"input-wrap\">\n <label for=\"message\">Message<\/label>\n <textarea name=\"message\" id=\"message\" rows=\"5\" placeholder=\"How can we help?\" required><\/textarea>\n <\/div>\n\n <div class=\"button-wrap\">\n <button type=\"submit\" class=\"swiss-submit\">\n Send Message <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n<\/section>\n\n<style>\n :root {\n --c-bg: #ffffff;\n --c-text: #333333;\n --c-btn: #585858;\n --c-btn-hover: #333333;\n --c-blue: #75ebfb;\n --c-red: #fa8484;\n --c-yellow: #fbeb9d;\n --c-border: #eeeeee;\n --font-main: 'Outfit', sans-serif;\n }\n\n .swiss-contact-wrapper {\n background-color: var(--c-bg);\n padding: 100px 20px;\n font-family: var(--font-main);\n color: var(--c-text);\n display: flex;\n justify-content: center;\n }\n\n .contact-inner { max-width: 800px; width: 100%; }\n .form-headline { font-size: 3.5rem; font-weight: 700; margin: 0; letter-spacing: -2px; color: var(--c-text); }\n .form-headline .dot { color: var(--c-red); }\n .form-subline { font-size: 1.1rem; margin: 15px 0 60px 0; color: #777; font-weight: 300; max-width: 500px; }\n .contact-form { display: flex; flex-direction: column; gap: 40px; }\n .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }\n .input-wrap { display: flex; flex-direction: column; gap: 10px; }\n .input-wrap label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--c-text); }\n\n .contact-form input, .contact-form select, .contact-form textarea {\n background: transparent; border: none; border-bottom: 2px solid var(--c-border);\n padding: 12px 0; font-family: var(--font-main); font-size: 1.05rem;\n color: var(--c-text); border-radius: 0; transition: border-color 0.3s ease;\n }\n\n .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {\n outline: none; border-bottom-color: var(--c-text);\n }\n\n .accent-blue input:focus { border-bottom-color: var(--c-blue); }\n .accent-red input:focus { border-bottom-color: var(--c-red); }\n .accent-yellow select:focus { border-bottom-color: var(--c-yellow); }\n\n .swiss-submit {\n background-color: var(--c-btn); color: #ffffff; border: none;\n padding: 20px 45px; font-family: var(--font-main); font-size: 1rem;\n font-weight: 600; cursor: pointer; transition: all 0.3s ease;\n display: inline-flex; align-items: center; gap: 15px; border-radius: 4px;\n }\n\n .swiss-submit:hover { background-color: var(--c-btn-hover); transform: translateY(-2px); }\n .arrow { transition: transform 0.3s ease; }\n .swiss-submit:hover .arrow { transform: translateX(8px); }\n\n @media (max-width: 768px) {\n .form-grid { grid-template-columns: 1fr; }\n .form-headline { font-size: 2.5rem; }\n }\n<\/style>\n\n<script>\ndocument.getElementById('contact-form').addEventListener('submit', function(e) {\n e.preventDefault();\n \n const form = this;\n const submitBtn = form.querySelector('button[type=\"submit\"]');\n const originalText = submitBtn.innerText;\n \n submitBtn.innerText = \"Sending...\";\n submitBtn.disabled = true;\n\n const formData = new FormData(form);\n const data = Object.fromEntries(formData.entries());\n\n fetch(form.action, {\n method: 'POST',\n headers: { \n 'Content-Type': 'application\/json',\n 'Accept': 'application\/json'\n },\n body: JSON.stringify(data)\n })\n .then(response => {\n if (response.ok) {\n alert(\"Message sent! We'll get back to you shortly.\");\n form.reset();\n } else {\n \/\/ This is where you see the status code (e.g. 400 or 500)\n console.error(\"Server Status:\", response.status);\n alert(\"Submission failed. Check if Backend is updated to handle JSON and Message import.\");\n }\n })\n .catch(error => {\n console.error('Network Error:', error);\n alert(\"Connection error. Please try again.\");\n })\n .finally(() => {\n submitBtn.innerText = originalText;\n submitBtn.disabled = false;\n });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d835152 e-flex e-con-boxed e-con e-parent\" data-id=\"d835152\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-320a142 elementor-widget elementor-widget-spacer\" data-id=\"320a142\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c07aaf3 e-con-full e-flex e-con e-parent\" data-id=\"c07aaf3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-87c1e64 e-con-full e-flex e-con e-child\" data-id=\"87c1e64\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c0bee84 elementor-widget elementor-widget-html\" data-id=\"c0bee84\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n .about-footer {\n background-color: #333333; \/* Dark Grey from Screenshot *\/\n color: #ffffff;\n padding: 60px 20px;\n font-family: 'Outfit', sans-serif;\n border-top: 1px solid #444; \/* Subtle top border *\/\n }\n\n .footer-container {\n max-width: 600px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 40px;\n text-align: center;\n }\n\n .footer-col h4 {\n font-size: 1.1rem;\n font-weight: 700;\n margin-bottom: 15px;\n color: #ffffff; \/* White Headings *\/\n }\n\n .footer-col p {\n font-size: 0.95rem;\n color: #cccccc; \/* Light Grey text *\/\n margin-bottom: 8px;\n line-height: 1.6;\n }\n\n .footer-bottom {\n border-top: 1px solid #444; \/* Darker border line *\/\n margin-top: 40px;\n padding-top: 20px;\n text-align: center;\n color: #888;\n font-size: 0.85rem;\n }\n\n \/* Mobile Stacking *\/\n @media (max-width: 600px) {\n .footer-container { grid-template-columns: 1fr; gap: 30px; }\n }\n<\/style>\n\n<footer class=\"about-footer\">\n <div class=\"footer-container\">\n <div class=\"footer-col\">\n <h4>Packven (AB under formation) (\u201cPackven\u201d)<\/h4>\n <p>Next-Gen Logistics<\/p>\n <p>Stockholm, Sweden<\/p>\n <\/div>\n \n <div class=\"footer-col\">\n <h4>Contact Support<\/h4>\n <p>+46 73-051 85 17<\/p>\n <p>pilots@packven.com<\/p>\n <\/div>\n <\/div>\n\n <div class=\"footer-bottom\">\n 2026 Packven. All rights reserved.\n <\/div>\n<\/footer>\t\t\t\t<\/div>\n\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>Packven offers optimized logistics packaging for Nordic e-commerce.<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_eb_attr":"","_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t<meta name=\"description\" content=\"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/packven.com\/sv\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"sv_SE\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Packven -\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Home - Packven\" \/>\n\t\t<meta property=\"og:description\" content=\"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/packven.com\/sv\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-01-16T09:47:15+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-08-27T12:35:07+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Home - Packven\" \/>\n\t\t<meta name=\"twitter:description\" content=\"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs.\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/packven.com\\\/sv#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/packven.com\\\/sv\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#listItem\",\"position\":2,\"name\":\"Home\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/packven.com\\\/sv#listItem\",\"name\":\"Home\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#organization\",\"name\":\"Packven\",\"url\":\"https:\\\/\\\/packven.com\\\/sv\\\/\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#webpage\",\"url\":\"https:\\\/\\\/packven.com\\\/sv\\\/\",\"name\":\"Home - Packven\",\"description\":\"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs.\",\"inLanguage\":\"sv-SE\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#breadcrumblist\"},\"datePublished\":\"2026-01-16T09:47:15+00:00\",\"dateModified\":\"2026-08-27T12:35:07+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#website\",\"url\":\"https:\\\/\\\/packven.com\\\/sv\\\/\",\"name\":\"Packven\",\"inLanguage\":\"sv-SE\",\"publisher\":{\"@id\":\"https:\\\/\\\/packven.com\\\/sv\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t\n\n","aioseo_head_json":{"title":"Home - Packven","description":"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs.","canonical_url":"https:\/\/packven.com\/sv\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/packven.com\/sv\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/packven.com\/sv#listItem","position":1,"name":"Home","item":"https:\/\/packven.com\/sv","nextItem":{"@type":"ListItem","@id":"https:\/\/packven.com\/sv\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/packven.com\/sv\/#listItem","position":2,"name":"Home","previousItem":{"@type":"ListItem","@id":"https:\/\/packven.com\/sv#listItem","name":"Home"}}]},{"@type":"Organization","@id":"https:\/\/packven.com\/sv\/#organization","name":"Packven","url":"https:\/\/packven.com\/sv\/"},{"@type":"WebPage","@id":"https:\/\/packven.com\/sv\/#webpage","url":"https:\/\/packven.com\/sv\/","name":"Home - Packven","description":"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs.","inLanguage":"sv-SE","isPartOf":{"@id":"https:\/\/packven.com\/sv\/#website"},"breadcrumb":{"@id":"https:\/\/packven.com\/sv\/#breadcrumblist"},"datePublished":"2026-01-16T09:47:15+00:00","dateModified":"2026-08-27T12:35:07+00:00"},{"@type":"WebSite","@id":"https:\/\/packven.com\/sv\/#website","url":"https:\/\/packven.com\/sv\/","name":"Packven","inLanguage":"sv-SE","publisher":{"@id":"https:\/\/packven.com\/sv\/#organization"}}]},"og:locale":"sv_SE","og:site_name":"Packven -","og:type":"article","og:title":"Home - Packven","og:description":"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs.","og:url":"https:\/\/packven.com\/sv\/","article:published_time":"2026-01-16T09:47:15+00:00","article:modified_time":"2026-08-27T12:35:07+00:00","twitter:card":"summary_large_image","twitter:title":"Home - Packven","twitter:description":"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs."},"aioseo_meta_data":{"post_id":"20","title":"Home - Packven","description":"We bridge the gap between logistics engineering and packaging supply. No fluff, just calculated geometry. Right-Size Engineering. We audit your SKUs.","keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"WebPage","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-01-16 09:47:23","updated":"2026-08-27 13:31:08","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/packven.com\/sv\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHome\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/packven.com\/sv"},{"label":"Home","link":"https:\/\/packven.com\/sv\/"}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/packven.com\/sv\/wp-json\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/packven.com\/sv\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/packven.com\/sv\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/packven.com\/sv\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/packven.com\/sv\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":626,"href":"https:\/\/packven.com\/sv\/wp-json\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":2355,"href":"https:\/\/packven.com\/sv\/wp-json\/wp\/v2\/pages\/20\/revisions\/2355"}],"wp:attachment":[{"href":"https:\/\/packven.com\/sv\/wp-json\/wp\/v2\/media?parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}