{"id":12,"date":"2025-11-30T18:45:27","date_gmt":"2025-11-30T18:45:27","guid":{"rendered":"https:\/\/purrit.net\/?page_id=12"},"modified":"2025-11-30T18:49:38","modified_gmt":"2025-11-30T18:49:38","slug":"elementor-12","status":"publish","type":"page","link":"http:\/\/purrit.net\/","title":{"rendered":""},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n \n \n \n \n PURRIT - AI-Powered Feline Health Platform<\/title>\n <meta name=\"description\" content=\"Revolutionary AI-powered feline healthcare platform and smart litter box technology\" \/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-primary: #0a0a0a;\n --bg-secondary: #111111;\n --bg-card: #1a1a1a;\n --text-primary: #ffffff;\n --text-secondary: #a0a0a0;\n --text-muted: #6b7280;\n --accent-primary: #00d4aa;\n --accent-secondary: #7c3aed;\n --accent-gradient: linear-gradient(135deg, #00d4aa 0%, #7c3aed 100%);\n --warning: #f59e0b;\n --danger: #ef4444;\n --success: #10b981;\n --border-color: #262626;\n --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);\n --shadow-md: 0 4px 25px rgba(0, 0, 0, 0.15);\n --shadow-lg: 0 10px 50px rgba(0, 0, 0, 0.25);\n --shadow-xl: 0 25px 100px rgba(0, 0, 0, 0.35);\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--bg-primary);\n color: var(--text-primary);\n line-height: 1.6;\n overflow-x: hidden;\n }\n\n \/* Navigation *\/\n nav {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n background: rgba(10, 10, 10, 0.8);\n backdrop-filter: blur(20px);\n border-bottom: 1px solid var(--border-color);\n padding: 16px 0;\n }\n\n .nav-container {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 24px;\n }\n\n .scubic-logo{\n font-family: 'Nunito', sans-serif;\n }\n\n .nav-logo {\n font-size: 24px;\n font-weight: 800;\n background: var(--accent-gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n letter-spacing: -0.5px;\n }\n\n .nav-links {\n display: flex;\n gap: 32px;\n align-items: center;\n }\n\n .nav-links a {\n color: var(--text-secondary);\n text-decoration: none;\n font-weight: 500;\n font-size: 15px;\n transition: all 0.3s ease;\n position: relative;\n }\n\n .nav-links a:hover {\n color: var(--text-primary);\n }\n\n .nav-links a::after {\n content: '';\n position: absolute;\n width: 0;\n height: 2px;\n bottom: -4px;\n left: 0;\n background: var(--accent-gradient);\n transition: width 0.3s ease;\n }\n\n .nav-links.mobile-active {\n display: flex !important; \n flex-direction: column;\n gap: 16px;\n position: absolute;\n top: 64px;\n right: 24px;\n background: var(--bg-secondary);\n padding: 16px;\n border-radius: 12px;\n z-index: 999;\n box-shadow: var(--shadow-lg);\n }\n\n .nav-links a:hover::after {\n width: 100%;\n }\n\n .nav-cta {\n background: var(--accent-gradient);\n color: white;\n padding: 12px 24px;\n border-radius: 8px;\n font-weight: 600;\n text-decoration: none;\n transition: all 0.3s ease;\n box-shadow: var(--shadow-md);\n }\n\n .nav-cta:hover {\n transform: translateY(-2px);\n box-shadow: var(--shadow-lg);\n }\n\n .mobile-menu-toggle {\n display: none;\n background: none;\n border: none;\n color: var(--text-primary);\n font-size: 24px;\n cursor: pointer;\n }\n\n \/* Hero Section *\/\n .hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n position: relative;\n background: radial-gradient(ellipse at center, rgba(0, 212, 170, 0.1) 0%, transparent 70%);\n }\n\n .hero-container {\n max-width: 900px;\n padding: 0 24px;\n z-index: 10;\n }\n\n .hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: rgba(124, 58, 237, 0.1);\n border: 1px solid rgba(124, 58, 237, 0.2);\n color: #a855f7;\n padding: 8px 16px;\n border-radius: 50px;\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 32px;\n animation: float 3s ease-in-out infinite;\n }\n\n @keyframes float {\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-10px); }\n }\n\n .hero h1 {\n font-size: clamp(48px, 8vw, 84px);\n font-weight: 900;\n line-height: 1.1;\n margin-bottom: 24px;\n letter-spacing: -2px;\n }\n\n .hero h1 .gradient-text {\n background: var(--accent-gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .hero-subtitle {\n font-size: 24px;\n color: var(--text-secondary);\n margin-bottom: 48px;\n font-weight: 400;\n line-height: 1.5;\n }\n\n .hero-cta {\n display: flex;\n gap: 20px;\n justify-content: center;\n flex-wrap: wrap;\n }\n\n .btn {\n padding: 16px 32px;\n border-radius: 12px;\n font-weight: 600;\n font-size: 16px;\n text-decoration: none;\n transition: all 0.3s ease;\n cursor: pointer;\n border: none;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n }\n\n .btn-primary {\n background: var(--accent-gradient);\n color: white;\n box-shadow: var(--shadow-md);\n }\n\n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: var(--shadow-lg);\n }\n\n .btn-secondary {\n background: var(--bg-card);\n color: var(--text-primary);\n border: 1px solid var(--border-color);\n }\n\n .btn-secondary:hover {\n background: var(--bg-secondary);\n border-color: var(--accent-primary);\n }\n\n \/* Sections *\/\n .section {\n padding: 120px 24px;\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .section-header {\n text-align: center;\n margin-bottom: 80px;\n }\n\n .section-badge {\n display: inline-block;\n background: rgba(0, 212, 170, 0.1);\n color: var(--accent-primary);\n padding: 8px 16px;\n border-radius: 50px;\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 24px;\n border: 1px solid rgba(0, 212, 170, 0.2);\n }\n\n .section h2 {\n font-size: clamp(36px, 5vw, 56px);\n font-weight: 800;\n margin-bottom: 24px;\n line-height: 1.2;\n letter-spacing: -1px;\n }\n\n .section-subtitle {\n font-size: 20px;\n color: var(--text-secondary);\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.6;\n }\n\n \/* Product Cards *\/\n .products-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));\n gap: 40px;\n margin-top: 80px;\n }\n\n .product-card {\n background: var(--bg-card);\n border: 1px solid var(--border-color);\n border-radius: 24px;\n padding: 40px;\n position: relative;\n overflow: hidden;\n transition: all 0.3s ease;\n }\n\n .product-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: var(--accent-gradient);\n }\n\n .product-card:hover {\n transform: translateY(-8px);\n box-shadow: var(--shadow-xl);\n border-color: rgba(0, 212, 170, 0.3);\n }\n\n .product-icon {\n width: 64px;\n height: 64px;\n background: var(--accent-gradient);\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 28px;\n margin-bottom: 24px;\n }\n\n .product-card h3 {\n font-size: 28px;\n font-weight: 700;\n margin-bottom: 16px;\n color: var(--text-primary);\n }\n\n .product-card p {\n color: var(--text-secondary);\n font-size: 16px;\n line-height: 1.6;\n margin-bottom: 24px;\n }\n\n .product-media {\n width: 100%;\n border-radius: 16px;\n margin-top: 24px;\n box-shadow: var(--shadow-lg);\n }\n\n \/* Features Grid *\/\n .features-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 32px;\n margin-top: 80px;\n }\n\n .feature-item {\n text-align: center;\n padding: 32px 24px;\n background: var(--bg-card);\n border: 1px solid var(--border-color);\n border-radius: 20px;\n transition: all 0.3s ease;\n }\n\n .feature-item:hover {\n transform: translateY(-4px);\n border-color: rgba(0, 212, 170, 0.3);\n box-shadow: var(--shadow-lg);\n }\n\n .feature-icon {\n width: 56px;\n height: 56px;\n background: var(--accent-gradient);\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n margin: 0 auto 20px;\n }\n\n .feature-item h3 {\n font-size: 20px;\n font-weight: 600;\n margin-bottom: 12px;\n color: var(--text-primary);\n }\n\n .feature-item p {\n color: var(--text-secondary);\n font-size: 15px;\n line-height: 1.5;\n }\n\n \/* Demo Section *\/\n .demo-section {\n background: var(--bg-secondary);\n border-radius: 32px;\n padding: 80px 40px;\n text-align: center;\n margin: 120px 0;\n border: 1px solid var(--border-color);\n position: relative;\n overflow: hidden;\n }\n\n .demo-section::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.1) 0%, transparent 70%);\n pointer-events: none;\n }\n\n .demo-section .section-header {\n position: relative;\n z-index: 10;\n }\n\n .demo-trigger-btn {\n background: var(--accent-gradient);\n color: white;\n border: none;\n padding: 20px 40px;\n font-size: 18px;\n font-weight: 600;\n border-radius: 16px;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: var(--shadow-lg);\n position: relative;\n z-index: 10;\n }\n\n .demo-trigger-btn:hover {\n transform: translateY(-3px);\n box-shadow: var(--shadow-xl);\n }\n\n \/* Veterinary Demo *\/\n .vet-demo-section {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 10000;\n background: var(--bg-primary);\n }\n\n .demo-container {\n width: 100%;\n height: 100%;\n position: relative;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n cursor: pointer;\n overflow: hidden;\n }\n\n .demo-container.playing {\n cursor: default;\n }\n\n .demo-scene {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity 0.15s ease-in-out;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px;\n }\n\n .demo-scene.active {\n opacity: 1;\n }\n\n \/* Scene 1: Opening Hook *\/\n .scene-1 {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n }\n\n .split-screen {\n display: flex;\n width: 100%;\n max-width: 1200px;\n height: 70vh;\n border-radius: 16px;\n overflow: hidden;\n box-shadow: var(--shadow-xl);\n }\n\n .traditional-vet, .modern-dashboard {\n flex: 1;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: white;\n padding: 40px;\n }\n\n .traditional-vet {\n background: linear-gradient(45deg, #8B5CF6, #EC4899);\n }\n\n .modern-dashboard {\n background: #ffffff;\n color: #2c3e50;\n }\n\n .traditional-vet h3, .modern-dashboard h3 {\n font-size: clamp(24px, 4vw, 32px);\n font-weight: 700;\n margin-bottom: 16px;\n }\n\n .traditional-vet p, .modern-dashboard p {\n font-size: clamp(16px, 2.5vw, 20px);\n opacity: 0.9;\n }\n\n \/* Login Screen *\/\n .login-container {\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px;\n }\n\n .login-card {\n background: white;\n border-radius: 20px;\n padding: clamp(30px, 6vw, 50px);\n box-shadow: var(--shadow-xl);\n width: 100%;\n max-width: 400px;\n text-align: center;\n }\n\n .login-logo {\n font-size: clamp(36px, 8vw, 48px);\n font-weight: bold;\n color: #2E5BBA;\n margin-bottom: 10px;\n letter-spacing: 2px;\n }\n\n .login-subtitle {\n color: #6c757d;\n font-size: clamp(14px, 3vw, 18px);\n font-weight: 500;\n margin-bottom: 32px;\n }\n\n .login-form {\n text-align: left;\n }\n\n .form-group {\n margin-bottom: 20px;\n }\n\n .form-group label {\n display: block;\n margin-bottom: 8px;\n color: #2c3e50;\n font-weight: 500;\n font-size: 14px;\n }\n\n .form-group input {\n width: 100%;\n padding: 15px;\n border: 2px solid #e9ecef;\n border-radius: 8px;\n font-size: 16px;\n transition: border-color 0.3s ease;\n }\n\n .form-group input:focus {\n outline: none;\n border-color: #2E5BBA;\n }\n\n .login-btn {\n width: 100%;\n background: #2E5BBA;\n color: white;\n border: none;\n padding: 15px;\n border-radius: 8px;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: background 0.3s ease;\n margin-bottom: 20px;\n }\n\n .login-btn:hover {\n background: #1e3f8a;\n }\n\n .login-footer {\n color: #28a745;\n font-size: 14px;\n font-weight: 500;\n }\n\n \/* Dashboard *\/\n .dashboard {\n width: 95%;\n max-width: 1400px;\n height: 85vh;\n background: white;\n border-radius: 16px;\n box-shadow: var(--shadow-xl);\n position: relative;\n overflow: hidden;\n }\n\n .dashboard-header {\n background: #2E5BBA;\n color: white;\n padding: 20px 30px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .logo {\n font-size: clamp(20px, 4vw, 28px);\n font-weight: bold;\n }\n\n .user-profile {\n display: flex;\n align-items: center;\n gap: 15px;\n position: relative;\n font-size: clamp(14px, 2.5vw, 16px);\n }\n\n .notification-badge {\n position: absolute;\n top: -8px;\n right: -8px;\n background: #FF6B35;\n color: white;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n font-weight: bold;\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n 100% { transform: scale(1); }\n }\n\n .dashboard-content {\n padding: clamp(20px, 4vw, 30px);\n height: calc(100% - 80px);\n overflow-y: auto;\n align-items: center; \n }\n\n .patient-list {\n display: grid;\n gap: 16px;\n }\n\n .patient-card {\n background: #f8f9fa;\n border: 1px solid #e9ecef;\n border-radius: 12px;\n padding: clamp(16px, 3vw, 20px);\n display: flex;\n justify-content: space-between;\n align-items: center;\n transition: all 0.3s ease;\n }\n\n .patient-card:hover {\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n transform: translateY(-2px);\n }\n\n .patient-info h3 {\n color: #2c3e50;\n margin-bottom: 5px;\n font-size: clamp(16px, 3vw, 18px);\n }\n\n .patient-info p {\n color: #6c757d;\n font-size: clamp(12px, 2.5vw, 14px);\n }\n\n .status-indicator {\n padding: 6px 12px;\n border-radius: 20px;\n font-size: clamp(10px, 2vw, 12px);\n font-weight: 600;\n white-space: nowrap;\n }\n\n .status-normal {\n background: #d4edda;\n color: #155724;\n }\n\n .status-alert {\n background: #fff3cd;\n color: #856404;\n }\n\n .status-critical {\n background: #f8d7da;\n color: #721c24;\n }\n\n \/* Notification Dropdown *\/\n .notification-dropdown {\n position: absolute;\n top: 100%;\n right: 0;\n background: white;\n border-radius: 12px;\n box-shadow: var(--shadow-xl);\n min-width: clamp(300px, 50vw, 350px);\n opacity: 0;\n transform: translateY(-10px);\n transition: all 0.3s ease;\n z-index: 1000;\n }\n\n .notification-dropdown.show {\n opacity: 1;\n transform: translateY(0);\n }\n\n .notification-item {\n padding: 20px;\n border-bottom: 1px solid #e9ecef;\n }\n\n .notification-item:last-child {\n border-bottom: none;\n }\n\n .notification-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n }\n\n .notification-title {\n font-weight: 600;\n color: #2c3e50;\n font-size: clamp(14px, 2.5vw, 16px);\n }\n\n .notification-time {\n font-size: clamp(10px, 2vw, 12px);\n color: #6c757d;\n }\n\n .notification-message {\n color: #495057;\n font-size: clamp(12px, 2.5vw, 14px);\n margin-bottom: 15px;\n line-height: 1.4;\n }\n\n .view-profile-btn {\n background: #2E5BBA;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 6px;\n cursor: pointer;\n font-weight: 500;\n transition: background 0.3s ease;\n font-size: clamp(12px, 2vw, 14px);\n }\n\n .view-profile-btn:hover {\n background: #1e3f8a;\n }\n\n \/* Patient Profile *\/\n .patient-profile {\n width: 95%;\n max-width: 1400px;\n height: 85vh;\n background: white;\n border-radius: 16px;\n box-shadow: var(--shadow-xl);\n display: flex;\n flex-direction: column;\n }\n\n .profile-header {\n background: #2E5BBA;\n color: white;\n padding: 20px 30px;\n display: flex;\n align-items: center;\n gap: 15px;\n }\n\n .cat-icon {\n width: clamp(40px, 8vw, 50px);\n height: clamp(40px, 8vw, 50px);\n background: rgba(255,255,255,0.2);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: clamp(20px, 4vw, 24px);\n }\n\n .profile-header h2 {\n font-size: clamp(18px, 4vw, 24px);\n margin-bottom: 5px;\n }\n\n .profile-header p {\n font-size: clamp(12px, 2.5vw, 14px);\n opacity: 0.9;\n }\n\n .profile-content {\n display: flex;\n flex: 1;\n overflow: hidden;\n }\n\n .sidebar {\n width: clamp(250px, 30vw, 300px);\n background: #f8f9fa;\n padding: 20px;\n border-right: 1px solid #e9ecef;\n overflow-y: auto;\n }\n\n .message-card {\n background: white;\n border-radius: 12px;\n padding: clamp(16px, 3vw, 20px);\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n margin-bottom: 15px;\n }\n\n .message-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n\n .sender-name {\n font-weight: 600;\n color: #2c3e50;\n font-size: clamp(12px, 2.5vw, 14px);\n }\n\n .message-time {\n font-size: clamp(10px, 2vw, 12px);\n color: #6c757d;\n }\n\n .message-content {\n color: #495057;\n line-height: 1.5;\n font-size: clamp(12px, 2.5vw, 14px);\n }\n\n .main-content {\n flex: 1;\n padding: 20px;\n overflow-y: auto;\n }\n\n .tabs {\n display: flex;\n border-bottom: 2px solid #e9ecef;\n margin-bottom: 20px;\n overflow-x: auto;\n }\n\n .tab {\n padding: 12px 20px;\n cursor: pointer;\n border-bottom: 2px solid transparent;\n color: #6c757d;\n font-weight: 500;\n transition: all 0.3s ease;\n font-size: clamp(12px, 2.5vw, 14px);\n white-space: nowrap;\n }\n\n .tab.active {\n color: #2E5BBA;\n border-bottom-color: #2E5BBA;\n }\n\n \/* Analysis Sections - Mobile Optimized *\/\n .analysis-section {\n margin-bottom: 30px;\n }\n\n .section-title {\n font-size: clamp(16px, 3vw, 20px);\n font-weight: 600;\n color: #2c3e50;\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .section-icon {\n background: #2E5BBA;\n color: white;\n width: clamp(24px, 5vw, 30px);\n height: clamp(24px, 5vw, 30px);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: clamp(12px, 2.5vw, 14px);\n }\n\n .feces-analysis-container {\n display: grid;\n grid-template-columns: 1fr;\n gap: 20px;\n margin-bottom: 30px;\n }\n\n .feces-image-panel, .ai-analysis-panel {\n background: #f8f9fa;\n border-radius: 12px;\n padding: clamp(16px, 3vw, 20px);\n border: 2px solid #e9ecef;\n }\n\n .ai-analysis-panel {\n background: white;\n border-color: #FF6B35;\n }\n\n .image-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n\n .image-title {\n font-weight: 600;\n color: #2c3e50;\n font-size: clamp(14px, 2.5vw, 16px);\n }\n\n .timestamp {\n font-size: clamp(10px, 2vw, 12px);\n color: #6c757d;\n }\n\n .feces-image {\n width: 100%;\n height: clamp(150px, 30vw, 200px);\n background: linear-gradient(45deg, #8B0000, #DC143C, #A0522D);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n margin-bottom: 15px;\n position: relative;\n overflow: hidden;\n }\n\n .feces-image::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: repeating-linear-gradient(\n 45deg,\n rgba(139, 0, 0, 0.8) 0px,\n rgba(220, 20, 60, 0.8) 10px,\n rgba(160, 82, 45, 0.8) 20px\n );\n }\n\n .feces-image-content {\n position: relative;\n aspect-ratio: 4 \/ 3; \/* \ud83d\udfe2 \uc774\ubbf8\uc9c0 \ube44\uc728\uc5d0 \ub9de\uac8c \uc870\uc815 (\uc608: 800x600\uc774\uba74 4:3) *\/\n width: 100%;\n max-width: 600px;\n margin: 0 auto;\n background: #f9f9f9;\n}\n\n.feces-image-content img {\n width: 100%;\n height: 100%;\n object-fit: contain; \/* \ud83d\udfe2 \ube44\uc728 \uc720\uc9c0\ud558\uba70 \uaf49 \ucc44\uc6c0 *\/\n display: block;\n}\n\n.bbox-overlay {\n position: absolute;\n top: 61%;\n left: 30%;\n width: 7%;\n height: 11%;\n border: 1px solid #28a745;\n pointer-events: none;\n box-sizing: border-box;\n}\n\n @media (min-width: 768px) {\n .feces-analysis-container {\n grid-template-columns: 1fr 1fr;\n }\n }\n\n .segmentation-overlay {\n position: absolute;\n top: 10px;\n right: 10px;\n background: rgba(255, 255, 255, 0.9);\n padding: 4px 8px;\n border-radius: 4px;\n font-size: clamp(10px, 2vw, 12px);\n color: #2c3e50;\n z-index: 2;\n }\n\n .image-metrics {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n }\n\n .metric {\n background: white;\n padding: clamp(8px, 2vw, 10px);\n border-radius: 6px;\n text-align: center;\n border: 1px solid #e9ecef;\n }\n\n .metric-value {\n font-size: clamp(14px, 3vw, 18px);\n font-weight: 600;\n color: #FF6B35;\n }\n\n .metric-label {\n font-size: clamp(10px, 2vw, 12px);\n color: #6c757d;\n margin-top: 5px;\n }\n\n .ai-header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 15px;\n flex-wrap: wrap;\n }\n\n .ai-badge {\n background: #FF6B35;\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: clamp(10px, 2vw, 12px);\n font-weight: 600;\n }\n\n .ai-title {\n font-weight: 600;\n color: #FF6B35;\n font-size: clamp(14px, 2.5vw, 16px);\n }\n\n .finding, .implications {\n border-radius: 8px;\n padding: clamp(12px, 3vw, 15px);\n margin-bottom: 15px;\n }\n\n .finding {\n background: #fff3cd;\n border-left: 4px solid #FF6B35;\n }\n\n .finding-title, .implications-title {\n font-weight: 600;\n margin-bottom: 8px;\n font-size: clamp(12px, 2.5vw, 14px);\n }\n\n .finding-title {\n color: #856404;\n }\n\n .implications-title {\n color: #721c24;\n }\n\n .finding-description, .implications-list {\n line-height: 1.5;\n font-size: clamp(11px, 2vw, 14px);\n }\n\n .finding-description {\n color: #856404;\n }\n\n .implications {\n background: #f8d7da;\n border-left: 4px solid #dc3545;\n }\n\n .implications-list {\n color: #721c24;\n }\n\n \/* Audio Analysis *\/\n .audio-analysis-container {\n background: white;\n border-radius: 12px;\n padding: clamp(20px, 4vw, 25px);\n border: 2px solid #28a745;\n }\n\n .audio-waveform {\n height: clamp(100px, 20vw, 150px);\n background: #f8f9fa;\n border-radius: 8px;\n margin-bottom: 20px;\n display: flex;\n align-items: end;\n padding: 10px;\n position: relative;\n }\n\n .waveform-section {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: end;\n justify-content: center;\n gap: 2px;\n position: relative;\n }\n\n .section-label {\n position: absolute;\n top: 5px;\n left: 50%;\n transform: translateX(-50%);\n font-size: clamp(9px, 2vw, 11px);\n font-weight: 600;\n color: #6c757d;\n background: white;\n padding: 2px 6px;\n border-radius: 4px;\n }\n\n .wave-bar {\n width: clamp(2px, 0.5vw, 3px);\n background: #2E5BBA;\n border-radius: 2px;\n animation: wave 3s ease-in-out infinite;\n }\n\n .digging .wave-bar {\n background: #17a2b8;\n }\n\n .pooping .wave-bar {\n background: #dc3545;\n }\n\n .burying .wave-bar {\n background: #28a745;\n }\n\n @keyframes wave {\n 0%, 100% { height: 20px; }\n 50% { height: var(--wave-height, 60px); }\n }\n\n .audio-ai-analysis {\n background: #d4edda;\n border-left: 4px solid #28a745;\n padding: clamp(16px, 3vw, 20px);\n border-radius: 4px;\n }\n\n .audio-ai-title {\n font-weight: 600;\n color: #155724;\n margin-bottom: 15px;\n font-size: clamp(14px, 2.5vw, 16px);\n }\n\n .audio-findings {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n margin-bottom: 15px;\n }\n\n .audio-finding {\n background: white;\n padding: clamp(12px, 3vw, 15px);\n border-radius: 6px;\n border: 1px solid #c3e6cb;\n }\n\n .audio-finding-title {\n font-weight: 600;\n color: #155724;\n margin-bottom: 8px;\n font-size: clamp(12px, 2.5vw, 14px);\n }\n\n .audio-finding-status {\n color: #155724;\n font-size: clamp(11px, 2vw, 14px);\n line-height: 1.4;\n }\n\n .recommendations {\n background: #d1ecf1;\n border: 1px solid #bee5eb;\n border-radius: 8px;\n padding: clamp(16px, 3vw, 20px);\n margin-top: 25px;\n }\n\n .rec-title {\n font-weight: 600;\n color: #0c5460;\n margin-bottom: 15px;\n font-size: clamp(14px, 2.5vw, 16px);\n }\n\n .action-buttons {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n }\n\n .btn-demo {\n padding: clamp(8px, 2vw, 10px) clamp(16px, 3vw, 20px);\n border-radius: 6px;\n border: none;\n cursor: pointer;\n font-weight: 500;\n transition: all 0.3s ease;\n font-size: clamp(11px, 2vw, 14px);\n }\n\n .btn-primary {\n background: #2E5BBA;\n color: white;\n }\n\n .btn-primary:hover {\n background: #1e3f8a;\n }\n\n .btn-secondary {\n background: #6c757d;\n color: white;\n }\n\n .btn-secondary:hover {\n background: #495057;\n }\n\n .btn-warning {\n background: #ffc107;\n color: #212529;\n }\n\n .btn-warning:hover {\n background: #e0a800;\n }\n\n \/* Final Scene *\/\n .final-scene {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n text-align: center;\n color: white;\n padding: 40px 20px;\n }\n\n .final-logo {\n font-size: clamp(48px, 10vw, 72px);\n font-weight: bold;\n margin-bottom: 30px;\n opacity: 0;\n animation: fadeInUp 1s ease-out 0.5s forwards;\n }\n\n .tagline {\n font-size: clamp(20px, 5vw, 32px);\n margin-bottom: 40px;\n opacity: 0;\n animation: fadeInUp 1s ease-out 1s forwards;\n }\n\n .cta-button {\n background: white;\n color: #2E5BBA;\n padding: clamp(16px, 4vw, 20px) clamp(32px, 6vw, 40px);\n border-radius: 50px;\n font-size: clamp(16px, 3vw, 20px);\n font-weight: 600;\n border: none;\n cursor: pointer;\n opacity: 0;\n animation: fadeInUp 1s ease-out 1.5s forwards;\n transition: transform 0.3s ease;\n }\n\n .cta-button:hover {\n transform: scale(1.05);\n }\n\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .play-indicator {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n color: white;\n z-index: 150;\n cursor: pointer;\n transition: opacity 0.3s ease;\n padding: 20px;\n }\n\n .play-indicator.hidden {\n opacity: 0;\n pointer-events: none;\n }\n\n .play-icon {\n font-size: clamp(48px, 10vw, 64px);\n margin-bottom: 20px;\n opacity: 0.9;\n transition: transform 0.3s ease;\n }\n\n .play-indicator:hover .play-icon {\n transform: scale(1.1);\n }\n\n .play-text {\n font-size: clamp(14px, 3vw, 18px);\n font-weight: 500;\n opacity: 0.8;\n }\n\n \/* Progressive Animation *\/\n .analysis-section.animate .feces-analysis-container {\n animation: slideInLeft 0.8s ease-out 0.5s forwards;\n opacity: 0;\n }\n\n .analysis-section.animate .ai-analysis-panel {\n animation: slideInRight 0.8s ease-out 1s forwards;\n opacity: 0;\n }\n\n .audio-analysis-container.animate {\n animation: slideInUp 0.8s ease-out 0.5s forwards;\n opacity: 0;\n }\n\n @keyframes slideInLeft {\n from {\n opacity: 0;\n transform: translateX(-30px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n @keyframes slideInRight {\n from {\n opacity: 0;\n transform: translateX(30px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n @keyframes slideInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Footer *\/\n .footer {\n background: var(--bg-secondary);\n border-top: 1px solid var(--border-color);\n padding: 80px 24px 40px;\n text-align: center;\n }\n\n .footer-content {\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .footer-logo {\n font-size: 32px;\n font-weight: 800;\n \n background: var(--accent-gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n margin-bottom: 24px;\n }\n\n .footer-text {\n color: var(--text-secondary);\n font-size: 16px;\n margin-bottom: 32px;\n }\n\n .footer-links {\n display: flex;\n justify-content: center;\n gap: 32px;\n margin-bottom: 40px;\n flex-wrap: wrap;\n }\n\n .footer-links a {\n color: var(--text-secondary);\n text-decoration: none;\n font-weight: 500;\n transition: color 0.3s ease;\n }\n\n .footer-links a:hover {\n color: var(--accent-primary);\n }\n\n .footer-copyright {\n color: var(--text-muted);\n font-size: 14px;\n padding-top: 32px;\n border-top: 1px solid var(--border-color);\n }\n\n \/* Mobile Optimizations *\/\n @media (max-width: 768px) {\n .nav-links {\n display: none !important;\n }\n\n .mobile-menu-toggle {\n display: block;\n }\n\n .hero {\n min-height: 90vh;\n padding-top: 80px;\n }\n\n .hero-cta {\n flex-direction: column;\n align-items: center;\n }\n\n .btn {\n width: 100%;\n max-width: 280px;\n justify-content: center;\n }\n\n .section {\n padding: 80px 10px;\n }\n\n .products-grid {\n grid-template-columns: 1fr;\n }\n\n .features-grid {\n grid-template-columns: 1fr;\n }\n\n .demo-section {\n padding: 60px 24px;\n margin: 80px 0;\n }\n\n \/* Mobile Demo Optimizations *\/\n .split-screen {\n flex-direction: column;\n height: 80vh;\n }\n\n .profile-content {\n flex-direction: column;\n }\n\n .sidebar {\n width: 100%;\n border-right: none;\n border-bottom: 1px solid #e9ecef;\n max-height: 200px;\n }\n\n .feces-analysis-container {\n grid-template-columns: 1fr;\n }\n\n .audio-findings {\n grid-template-columns: 1fr;\n }\n\n .action-buttons {\n flex-direction: column;\n align-items: stretch;\n }\n\n .btn-demo {\n width: 100%;\n }\n\n .tabs {\n gap: 8px;\n }\n\n .tab {\n padding: 10px 16px;\n font-size: 12px;\n }\n }\n\n @media (max-width: 480px) {\n .demo-container {\n padding: 10px;\n }\n\n .dashboard, .patient-profile {\n width: 100%;\n height: 100vh;\n border-radius: 0;\n }\n\n .notification-dropdown {\n min-width: 280px;\n left: 0;\n right: 0;\n margin: 0 10px;\n }\n\n .login-card {\n margin: 20px;\n border-radius: 16px;\n }\n }\n\n \/* High DPI Displays *\/\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n .feces-image {\n background-size: contain;\n }\n }\n\n \/* Reduced Motion *\/\n @media (prefers-reduced-motion: reduce) {\n * {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n\n .wave-bar {\n animation: none;\n height: 40px;\n }\n }\n\n .product-media {\n display: block;\n margin: 0 auto;\n width: 100%; \/* \ub370\uc2a4\ud06c\ud0d1 \uae30\ubcf8: \uc808\ubc18 \ud06c\uae30 *\/\n max-width: 100%; \/* \ubd80\ubaa8 \uc601\uc5ed \ub118\uc9c0 \uc54a\ub3c4\ub85d *\/\n }\n\n @media (max-width: 768px) {\n .product-media {\n width: 100%;\n height: auto;\n max-height: none; \/* \ud639\uc2dc \uc0c1\uc704\uc5d0\uc11c \uc81c\ud55c\ud588\uc73c\uba74 \ud574\uc81c *\/\n }\n \n .product-card {\n padding-left: 10px;\n padding-right: 10px;\n padding-top: 20px;\n padding-bottom: 20px;\n \n }\n }\n <\/style>\n<\/head>\n\n<body>\n <!-- Navigation -->\n <nav>\n <div class=\"nav-container\">\n <div class=\"nav-logo\">PURRIT<\/div>\n <div class=\"nav-links\">\n <a href=\"#platform\">Platform<\/a>\n <a href=\"#scubic\">Technology<\/a> \n <a href=\"#features\">Features<\/a>\n <!--a href=\"#demo\">Demo<\/a>\n <a href=\"#contact\" class=\"nav-cta\">Get Started<\/a-->\n <\/div>\n <button class=\"mobile-menu-toggle\">\u2630<\/button>\n <\/div>\n <\/nav>\n\n <!-- Hero Section -->\n <section class=\"hero\">\n <div class=\"hero-container\">\n <div class=\"hero-badge\">\n \ud83d\ude80 <span>Revolutionary AI-Powered Pet Health<\/span>\n <\/div>\n <h1>\n The Future of <span class=\"gradient-text\">Feline Care<\/span> is Here\n <\/h1>\n <p class=\"hero-subtitle\">\n Smart litter box technology meets advanced AI analytics for comprehensive feline health monitoring and preventative care.\n <\/p>\n <!--div class=\"hero-cta\">\n <a href=\"#demo\" class=\"btn btn-primary\">\n \ud83c\udfaf Experience Live Demo\n <\/a>\n <a href=\"#platform\" class=\"btn btn-secondary\">\n \ud83d\udcda Learn More\n <\/a>\n <\/div-->\n <\/div>\n <\/section>\n\n\n <!-- Platform Section -->\n <section class=\"section\" id=\"platform\">\n <div class=\"section-header\">\n <div class=\"section-badge\">AI Platform<\/div>\n <h2>PURRIT Healthcare Platform<\/h2>\n\n <p class=\"section-subtitle\">\n Multi-modal AI analysis combining computer vision, audio processing, and behavioral pattern recognition for comprehensive feline health insights.\n <\/p>\n <\/div>\n \n <div class=\"products-grid\">\n <div class=\"product-card\">\n <div class=\"product-icon\">\ud83e\udde0<\/div>\n <h3>AI-Powered Analysis<\/h3>\n <p>\n Our proprietary AI algorithms analyze stool samples, monitor behavioral patterns, and detect early health indicators with veterinary-grade accuracy.\n <\/p>\n <!--img src=\"healthcare_platform.png\" alt=\"PURRIT Healthcare Platform\" class=\"product-media\" \/-->\n <video controls class=\"product-media\" poster=\"https:\/\/d3pc248mp96p4b.cloudfront.net\/purrit_demo_poster.png\" autoplay playsinline loop>\n <source src=\"https:\/\/d3pc248mp96p4b.cloudfront.net\/purrit_demo.mp4\" type=\"video\/mp4\">\n Your browser does not support the video tag.\n <\/video>\n <\/div>\n <\/div>\n <\/section>\n\n\n <!-- SCUBIC Section -->\n <!--section-- class=\"section\" id=\"scubic\">\n <div class=\"section-header\">\n <div class=\"section-badge\">Hardware Innovation<\/div>\n <h2>SCUBIC: Smart Litter Box<\/h2>\n <p class=\"section-subtitle\">\n Autonomous cleaning meets intelligent health monitoring in our next-generation smart litter box system.\n <\/p>\n <\/div>\n \n <div class=\"products-grid\">\n <div class=\"product-card\">\n <div class=\"product-icon\">\ud83e\udd16<\/div>\n <h3>Automated Cleaning<\/h3>\n <p>\n Self-cleaning mechanism activates after each use, maintaining optimal hygiene without human intervention. Advanced sensors detect usage patterns and optimize cleaning cycles.\n <\/p>\n <img decoding=\"async\" src=\"scubic.jpg\" alt=\"SCUBIC Smart Litter Box\" class=\"product-media\" \/>\n <video controls class=\"product-media\" poster=\"https:\/\/purrit.net\/purrit_scubic_poster.png\" playsinline loop>\n <source src=\"https:\/\/purrit.net\/SCUBIC_final.mp4\" type=\"video\/mp4\">\n Your browser does not support the video tag.\n <\/video>\n <\/div>\n <\/div>\n <\/section-->\n\n <!-- SCUBIC Section -->\n <section class=\"section\" id=\"scubic\">\n <div class=\"section-header\">\n <div class=\"section-badge\">Hardware Innovation<\/div>\n <h2>SCUBIC Plus: The Biggest Self-Cleaning Litter Box<\/h2>\n <p class=\"section-subtitle\">\n A cube-shaped, vertically scooping smart litter box that combines advanced mechanics,\n deodorization, and AI-powered health monitoring for both cats and their humans.\n <\/p>\n <br\/>\n <video controls class=\"product-media\" poster=\"https:\/\/d3pc248mp96p4b.cloudfront.net\/purrit_scubic_poster.png\" playsinline loop>\n <source src=\"https:\/\/d3pc248mp96p4b.cloudfront.net\/SCUBIC_final.mp4\" type=\"video\/mp4\">\n Your browser does not support the video tag.\n <\/video>\n <\/div>\n \n <div class=\"products-grid\">\n <!-- Overview \/ Story -->\n <div class=\"product-card\">\n <div class=\"product-icon\">\ud83d\udc31<\/div>\n <h3>Are You Tired of Scooping Poop?<\/h3>\n <p>\n SCUBIC Plus is the largest self-cleaning cat litter box, designed to free cat owners\n from daily scooping. Unlike traditional drum-style litter boxes that often break down\n or fail to clean thoroughly, SCUBIC Plus uses a cube-shaped design and a patented\n vertical scooping mechanism that keeps litter clean while removing only the waste.\n <\/p>\n <p>\n With plasma deodorization technology and a built-in camera connected to the PURRIT app,\n SCUBIC Plus lets you enjoy a cleaner home and easily track your cat\u2019s bathroom habits every day.\n <\/p>\n <!--a \n href=\"https:\/\/www.kickstarter.com\/projects\/purrair\/scubic-plus-the-biggest-self-cleaning-cat-litter-box\"\n target=\"_blank\"\n class=\"btn btn-primary\"\n >\n \ud83d\udd17 View SCUBIC Plus on Kickstarter\n <\/a-->\n <!--video controls class=\"product-media\" poster=\"https:\/\/purrit.net\/purrit_scubic_poster.png\" playsinline loop>\n <source src=\"https:\/\/purrit.net\/SCUBIC_final.mp4\" type=\"video\/mp4\">\n Your browser does not support the video tag.\n <\/video-->\n <\/div>\n\n <!-- Vertical Scooping vs Drum-Type -->\n <div class=\"product-card\">\n <div class=\"product-icon\">\u2699\ufe0f<\/div>\n <h3>Vertical Scooping vs Rotating Drum<\/h3>\n <p>\n Most drum-type litter boxes rotate both litter and waste together, which is inefficient\n and not ideal for hygiene or cat comfort. The internal structure is often complex,\n harder to clean, and mechanically fragile.\n <\/p>\n <p>\n SCUBIC Plus takes a different approach. Its patented vertical scooping system simply\n scoops out the clumped waste while leaving the clean litter behind. This simple and\n robust motion, powered by a unique robotic mechanical structure, is patented in\n multiple countries and offers a reliable, cat-friendly cleaning experience.\n <\/p>\n <p>\n Self-cleaning litter boxes used to be designed mostly for humans. SCUBIC Plus is built\n to benefit both cats and their human companions.\n <\/p>\n <\/div>\n\n <!-- Spacious Cube Interior -->\n <div class=\"product-card\">\n <div class=\"product-icon\">\ud83d\udce6<\/div>\n <h3>5.3 ft\u00b3 Ultra-Spacious Interior<\/h3>\n <p>\n SCUBIC Plus provides a 5.3 ft\u00b3 interior, giving cats the space they need to move,\n turn, and eliminate comfortably. No more crouching in a tight drum or having paws\n hanging outside the entrance.\n <\/p>\n <p>\n The cubical shape maximizes interior volume relative to its footprint and offers\n more internal space than the combined interiors of three well-known drum-type litter boxes.\n This larger space supports cats\u2019 natural bathroom posture and psychological comfort.\n <\/p>\n <p>\n SCUBIC Plus also supports an optimal litter depth of about 2\u20133.5 inches, with a tray\n that holds up to 8L of litter so cats can fully cover their waste and feel secure.\n <\/p>\n <\/div>\n\n <!-- Waste Container & Deodorization -->\n <div class=\"product-card\">\n <div class=\"product-icon\">\ud83d\uddd1\ufe0f<\/div>\n <h3>8L Waste Container & Monthly Emptying<\/h3>\n <p>\n The 8L large-capacity waste container dramatically reduces how often you need\n to dispose of waste bags. Thanks to the vertical scooping method, waste is distributed\n evenly and horizontally, allowing you to use the full capacity of the container.\n <\/p>\n <p>\n For households with two cats, SCUBIC Plus can hold up to a month\u2019s worth of waste.\n When it\u2019s time to clean, simply open the compartment and lift out the bag. There\u2019s\n no need for proprietary consumable bags \u2013 any standard 3-gallon bag will work.\n <\/p>\n <p>\n Integrated plasma deodorization and optional PurrAir2 add-on help neutralize odors\n from cat waste, wet food, and other strong smells, while reducing harmful substances\n like ammonia and formaldehyde for a fresher environment.\n <\/p>\n <\/div>\n\n <!-- Camera & App Health Monitoring -->\n <div class=\"product-card\">\n <div class=\"product-icon\">\ud83d\udcf8<\/div>\n <h3>Built-in Camera & Health Tracking App<\/h3>\n <p>\n Traditional self-cleaning litter boxes hide your cat\u2019s waste, making it hard\n to monitor their health without manually scooping. SCUBIC Plus changes this with\n a built-in camera module and a companion app that lets you monitor waste patterns\n 24\/7.\n <\/p>\n <p>\n You can track how often your cat uses the litter box, how long each session lasts,\n and what the waste looks like. If something seems off, simply show the app\u2019s stats\n and videos to your veterinarian for faster, data-driven assessment.\n <\/p>\n <p>\n The app supports multiple cats and multiple SCUBIC Plus units, connects over Wi-Fi,\n and provides real-time monitoring and detailed statistics so you can care for your\n cats anytime, anywhere.\n <\/p>\n <\/div>\n\n <!-- Safety & Controls -->\n <div class=\"product-card\">\n <div class=\"product-icon\">\ud83d\udee1\ufe0f<\/div>\n <h3>Smart Safety & Intuitive Controls<\/h3>\n <p>\n Once your cat exits SCUBIC Plus, the system waits 3 minutes to ensure no further\n movement inside. Then the self-cleaning cycle automatically begins\u2014no manual\n scooping required.\n <\/p>\n <p>\n An IR sensor detects motion inside the box to prevent operation when a cat\n is present. In addition, if the motor detects torque pressure beyond a safe\n threshold, it immediately stops to avoid obstruction and protect your cat.\n <\/p>\n <p>\n Four front-facing buttons make it easy to start cleaning, adjust rake position,\n toggle the internal light, or stop operations instantly. SCUBIC Plus is compatible\n with most clumping litters and crystal litter, so you can keep using your preferred\n litter type.\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n\n\n <!-- Features Section -->\n <section class=\"section\" id=\"features\">\n <div class=\"section-header\">\n <div class=\"section-badge\">Key Benefits<\/div>\n <h2>Why Veterinarians Choose PURRIT<\/h2>\n\n <p class=\"section-subtitle\">\n Transforming reactive pet care into proactive health management through advanced AI technology.\n <\/p>\n <\/div>\n \n <div class=\"features-grid\">\n <div class=\"feature-item\">\n <div class=\"feature-icon\">\ud83d\udd2c<\/div>\n <h3>Early Detection<\/h3>\n <p>Identify health issues weeks before symptoms become visible, enabling proactive treatment and better outcomes.<\/p>\n <\/div>\n <div class=\"feature-item\">\n <div class=\"feature-icon\">\ud83d\udcf1<\/div>\n <h3>Real-time Monitoring<\/h3>\n <p>24\/7 health tracking with instant alerts sent directly to pet owners and veterinary professionals.<\/p>\n <\/div>\n <div class=\"feature-item\">\n <div class=\"feature-icon\">\ud83d\udcb0<\/div>\n <h3>Cost Reduction<\/h3>\n <p>Reduce emergency vet visits by up to 60% through preventative care and early intervention strategies.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Demo Section -->\n <!--section class=\"demo-section\" id=\"demo\">\n <div class=\"section-header\">\n <div class=\"section-badge\">Interactive Experience<\/div>\n <h2>See PURRIT in Action<\/h2>\n <p class=\"section-subtitle\">\n Experience our complete veterinary dashboard with real AI analysis, patient monitoring, and diagnostic workflows.\n <\/p>\n <\/div>\n <button class=\"demo-trigger-btn\" onclick=\"startVetDemo()\">\n \ud83d\ude80 Launch Vet Dashboard Demo\n <\/button>\n <\/section-->\n\n <!-- Veterinary Demo Section -->\n <div class=\"vet-demo-section\" id=\"vetDemoSection\" style=\"display: none;\">\n <div class=\"demo-container\" id=\"demoContainer\">\n <!-- Scene 1: Opening Hook -->\n <div class=\"demo-scene scene-1 active\" id=\"demoScene1\">\n <div class=\"split-screen\">\n <div class=\"traditional-vet\">\n <div>\n <h3>Traditional Veterinary Care<\/h3>\n <p>\ud83c\udfe5 Reactive \u2022 Crisis-based \u2022 Limited data<\/p>\n <\/div>\n <\/div>\n <div class=\"modern-dashboard\">\n <div>\n <h3>AI-Powered Prevention<\/h3>\n <p>\ud83e\udd16 Proactive \u2022 Data-driven \u2022 Continuous monitoring<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <!-- Scene 2: Login Screen -->\n <div class=\"demo-scene\" id=\"demoScene2\">\n <div class=\"login-container\">\n <div class=\"login-card\">\n <div class=\"login-header\">\n <div class=\"login-logo\">PURRIT<\/div>\n <div class=\"login-subtitle\">Veterinary Dashboard<\/div>\n <\/div>\n \n <div class=\"login-form\">\n <div class=\"form-group\">\n <label>Email<\/label>\n <input type=\"email\" placeholder=\"dr.chen@veterinary.com\" readonly>\n <\/div>\n \n <div class=\"form-group\">\n <label>Password<\/label>\n <input type=\"password\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" readonly>\n <\/div>\n \n <button class=\"login-btn\">Sign In<\/button>\n \n <div class=\"login-footer\">\n <span>\u2713 Secure veterinary access<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <!-- Scene 3: Dashboard Overview -->\n <div class=\"demo-scene\" id=\"demoScene3\">\n <div class=\"dashboard\">\n <div class=\"dashboard-header\">\n <div class=\"logo\">PURRIT<\/div>\n <div class=\"user-profile\">\n <span>Dr. Sarah Chen<\/span>\n <div class=\"notification-badge\">2<\/div>\n <\/div>\n <\/div>\n <div class=\"dashboard-content\">\n <div class=\"patient-list\">\n <div class=\"patient-card\">\n <div class=\"patient-info\">\n <h3>Whiskers | British Shorthair<\/h3>\n <p>Last monitored: 30 minutes ago<\/p>\n <\/div>\n <div class=\"status-indicator status-normal\">Normal<\/div>\n <\/div>\n <div class=\"patient-card\">\n <div class=\"patient-info\">\n <h3>Chloe | Ragdoll<\/h3>\n <p>Last monitored: 2 minutes ago \u2022 Blood detected<\/p>\n <\/div>\n <div class=\"status-indicator status-critical\">Critical<\/div>\n <\/div>\n <div class=\"patient-card\">\n <div class=\"patient-info\">\n <h3>Max | Maine Coon<\/h3>\n <p>Last monitored: 1 hour ago<\/p>\n <\/div>\n <div class=\"status-indicator status-normal\">Normal<\/div>\n <\/div>\n <div class=\"patient-card\">\n <div class=\"patient-info\">\n <h3>Luna | Persian<\/h3>\n <p>Last monitored: 45 minutes ago \u2022 Behavioral changes<\/p>\n <\/div>\n <div class=\"status-indicator status-alert\">Monitor<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <!-- Scene 4: Notification Interaction -->\n <div class=\"demo-scene\" id=\"demoScene4\">\n <div class=\"dashboard\">\n <div class=\"dashboard-header\">\n <div class=\"logo\">PURRIT<\/div>\n <div class=\"user-profile\">\n <span>Dr. Sarah Chen<\/span>\n <div class=\"notification-dropdown show\">\n <div class=\"notification-item\">\n <div class=\"notification-header\">\n <span class=\"notification-title\">\ud83d\udea8 Critical Alert: Chloe<\/span>\n <span class=\"notification-time\">1 min ago<\/span>\n <\/div>\n <div class=\"notification-message\">\n <AI detected blood in feces - immediate attention required>\n <\/div>\n <button class=\"view-profile-btn\">View Patient Profile<\/button>\n <\/div>\n <div class=\"notification-item\">\n <div class=\"notification-header\">\n <span class=\"notification-title\">Message from Lisa M.<\/span>\n <span class=\"notification-time\">2 min ago<\/span>\n <\/div>\n <div class=\"notification-message\">\n \"Chloe seems to be straining when using the litter box...\"\n <\/div>\n <button class=\"view-profile-btn\">View Message<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"dashboard-content\">\n <div class=\"patient-list\">\n <div class=\"patient-card\">\n <div class=\"patient-info\">\n <h3>Whiskers | British Shorthair<\/h3>\n <p>Last monitored: 30 minutes ago<\/p>\n <\/div>\n <div class=\"status-indicator status-normal\">Normal<\/div>\n <\/div>\n <div class=\"patient-card\" style=\"border: 2px solid #dc3545; background: #f8d7da;\">\n <div class=\"patient-info\">\n <h3>Chloe | Ragdoll<\/h3>\n <p>Last monitored: 2 minutes ago \u2022 Blood detected<\/p>\n <\/div>\n <div class=\"status-indicator status-critical\">Critical<\/div>\n <\/div>\n <div class=\"patient-card\">\n <div class=\"patient-info\">\n <h3>Max | Maine Coon<\/h3>\n <p>Last monitored: 1 hour ago<\/p>\n <\/div>\n <div class=\"status-indicator status-normal\">Normal<\/div>\n <\/div>\n <div class=\"patient-card\">\n <div class=\"patient-info\">\n <h3>Luna | Persian<\/h3>\n <p>Last monitored: 45 minutes ago \u2022 Behavioral changes<\/p>\n <\/div>\n <div class=\"status-indicator status-alert\">Monitor<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <!-- Scene 5: Patient Profile Overview -->\n <div class=\"demo-scene\" id=\"demoScene5\">\n <div class=\"patient-profile\">\n <div class=\"profile-header\">\n <div class=\"cat-icon\">\ud83d\udc31<\/div>\n <div>\n <h2>Chloe | Ragdoll | 4 years old<\/h2>\n <p>Owner: Lisa Martinez \u2022 Weight: 4.2kg \u2022 Last visit: 3 months ago<\/p>\n <\/div>\n <\/div>\n <div class=\"profile-content\">\n <div class=\"sidebar\">\n <div class=\"message-card\">\n <div class=\"message-header\">\n <span class=\"sender-name\">Lisa M.<\/span>\n <span class=\"message-time\">2 min ago<\/span>\n <\/div>\n <div class=\"message-content\">\n Hi Dr. Chen, Chloe has been straining in the litter box for the past 2 days and seems uncomfortable. I noticed some concerning changes in her stool today. Should I be worried?\n <\/div>\n <\/div>\n \n <div class=\"message-card\" style=\"border-left: 4px solid #dc3545;\">\n <div class=\"message-header\">\n <span class=\"sender-name\">\ud83d\udea8 AI Alert<\/span>\n <span class=\"message-time\">1 min ago<\/span>\n <\/div>\n <div class=\"message-content\" style=\"color: #721c24;\">\n <strong>Critical Finding:<\/strong> Blood detected in fecal sample. Immediate veterinary assessment recommended.\n <\/div>\n <\/div>\n <\/div>\n <div class=\"main-content\">\n <div class=\"tabs\">\n <div class=\"tab active\">Feces Analysis<\/div>\n <div class=\"tab\">Audio Analysis<\/div>\n <div class=\"tab\">Behavior<\/div>\n <div class=\"tab\">History<\/div>\n <\/div>\n \n <div style=\"text-align: center; padding: 40px; color: #6c757d;\">\n <div style=\"font-size: 48px; margin-bottom: 20px;\">\ud83d\udd04<\/div>\n <h3>Loading comprehensive AI analysis...<\/h3>\n <p>Processing multi-modal data from SCUBIC device<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <!-- Scene 6: Feces Analysis Section -->\n <div class=\"demo-scene\" id=\"demoScene6\">\n <div class=\"patient-profile\">\n <div class=\"profile-header\">\n <div class=\"cat-icon\">\ud83d\udc31<\/div>\n <div>\n <h2>Chloe | Ragdoll | 4 years old<\/h2>\n <p>Owner: Lisa Martinez \u2022 Weight: 4.2kg \u2022 Last visit: 3 months ago<\/p>\n <\/div>\n <\/div>\n <div class=\"profile-content\">\n <div class=\"sidebar\">\n <div class=\"message-card\">\n <div class=\"message-header\">\n <span class=\"sender-name\">Lisa M.<\/span>\n <span class=\"message-time\">2 min ago<\/span>\n <\/div>\n <div class=\"message-content\">\n Hi Dr. Chen, Chloe has been straining in the litter box for the past 2 days and seems uncomfortable. I noticed some concerning changes in her stool today. Should I be worried?\n <\/div>\n <\/div>\n \n <div class=\"message-card\" style=\"border-left: 4px solid #dc3545;\">\n <div class=\"message-header\">\n <span class=\"sender-name\">\ud83d\udea8 AI Alert<\/span>\n <span class=\"message-time\">1 min ago<\/span>\n <\/div>\n <div class=\"message-content\" style=\"color: #721c24;\">\n <strong>Critical Finding:<\/strong> Blood detected in fecal sample. Immediate veterinary assessment recommended.\n <\/div>\n <\/div>\n <\/div>\n <div class=\"main-content\">\n <div class=\"tabs\">\n <div class=\"tab active\">Feces Analysis<\/div>\n <div class=\"tab\">Audio Analysis<\/div>\n <div class=\"tab\">Behavior<\/div>\n <div class=\"tab\">History<\/div>\n <\/div>\n \n <div class=\"analysis-section animate\">\n <div class=\"section-title\">\n <div class=\"section-icon\">\ud83d\udcf8<\/div>\n Fecal Sample Analysis - Computer Vision\n <\/div>\n \n <div class=\"feces-analysis-container\">\n <div class=\"feces-image-panel\">\n <div class=\"image-header\">\n <span class=\"image-title\">Latest Sample<\/span>\n <span class=\"timestamp\">Today 09:23 AM<\/span>\n <\/div>\n \n <div class=\"feces-image\">\n <div class=\"segmentation-overlay\">AI Segmented<\/div>\n <div class=\"feces-image-content\">\n <!--div>Dark red coloration indicating<br\/>possible blood presence<\/div-->\n <img decoding=\"async\" src=\"blood_poop.jpeg\" alt=\"Fecal Sample\">\n <div style=\"\n position: absolute;\n top: 59%;\n left: 30%;\n width: 7%;\n height: 11%;\n border: 1px solid #28a745;\n box-sizing: border-box;\n pointer-events: none;\n \"><\/div>\n <\/div>\n <\/div>\n \n <div class=\"image-metrics\">\n <div class=\"metric\">\n <div class=\"metric-value\">73%<\/div>\n <div class=\"metric-label\">Moisture Content<\/div>\n <\/div>\n <div class=\"metric\">\n <div class=\"metric-value\">2.8cm<\/div>\n <div class=\"metric-label\">Avg Diameter<\/div>\n <\/div>\n <div class=\"metric\">\n <div class=\"metric-value\">8.2g<\/div>\n <div class=\"metric-label\">Total Weight<\/div>\n <\/div>\n <div class=\"metric\">\n <div class=\"metric-value\">+15%<\/div>\n <div class=\"metric-label\">Red Pixels<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"ai-analysis-panel\">\n <div class=\"ai-header\">\n <span class=\"ai-badge\">AI ANALYSIS<\/span>\n <span class=\"ai-title\">Critical Findings Detected<\/span>\n <\/div>\n \n <div class=\"analysis-content\">\n <div class=\"finding\">\n <div class=\"finding-title\">\ud83e\ude78 Blood Detection<\/div>\n <div class=\"finding-description\">\n Computer vision algorithms detected 15% increase in red pigmentation compared to baseline. Spectral analysis confirms hemoglobin presence with 94% confidence.\n <\/div>\n <\/div>\n \n <div class=\"finding\">\n <div class=\"finding-title\">\ud83d\udccf Morphological Changes<\/div>\n <div class=\"finding-description\">\n Sample shows 23% reduction in normal cylindrical shape. Irregular surface texture suggests inflammation or irritation of intestinal lining.\n <\/div>\n <\/div>\n \n <div class=\"implications\">\n <div class=\"implications-title\">\u2695\ufe0f Clinical Implications<\/div>\n <div class=\"implications-list\">\n \u2022 Possible gastrointestinal bleeding<br\/>\n \u2022 Inflammatory bowel condition<br\/>\n \u2022 Potential colorectal irritation<br\/>\n \u2022 Requires immediate diagnostic workup\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <!-- Scene 7: Audio Analysis Section -->\n <div class=\"demo-scene\" id=\"demoScene7\">\n <div class=\"patient-profile\">\n <div class=\"profile-header\">\n <div class=\"cat-icon\">\ud83d\udc31<\/div>\n <div>\n <h2>Chloe | Ragdoll | 4 years old<\/h2>\n <p>Owner: Lisa Martinez \u2022 Weight: 4.2kg \u2022 Last visit: 3 months ago<\/p>\n <\/div>\n <\/div>\n <div class=\"profile-content\">\n <div class=\"sidebar\">\n <div class=\"message-card\">\n <div class=\"message-header\">\n <span class=\"sender-name\">Lisa M.<\/span>\n <span class=\"message-time\">2 min ago<\/span>\n <\/div>\n <div class=\"message-content\">\n Hi Dr. Chen, Chloe has been straining in the litter box for the past 2 days and seems uncomfortable. I noticed some concerning changes in her stool today. Should I be worried?\n <\/div>\n <\/div>\n \n <div class=\"message-card\" style=\"border-left: 4px solid #dc3545;\">\n <div class=\"message-header\">\n <span class=\"sender-name\">\ud83d\udea8 AI Alert<\/span>\n <span class=\"message-time\">1 min ago<\/span>\n <\/div>\n <div class=\"message-content\" style=\"color: #721c24;\">\n <strong>Critical Finding:<\/strong> Blood detected in fecal sample. Immediate veterinary assessment recommended.\n <\/div>\n <\/div>\n <\/div>\n <div class=\"main-content\">\n <div class=\"tabs\">\n <div class=\"tab\">Feces Analysis<\/div>\n <div class=\"tab active\">Audio Analysis<\/div>\n <div class=\"tab\">Behavior<\/div>\n <div class=\"tab\">History<\/div>\n <\/div>\n \n <div class=\"analysis-section\">\n <div class=\"section-title\">\n <div class=\"section-icon\">\ud83d\udd0a<\/div>\n Audio Pattern Analysis - Behavioral Monitoring\n <\/div>\n \n <div class=\"audio-analysis-container animate\">\n <div style=\"margin-bottom: 20px;\">\n <h4 style=\"color: #2c3e50; margin-bottom: 10px;\">Latest Litter Box Session - Today 09:23 AM<\/h4>\n <p style=\"color: #6c757d; font-size: 14px;\">Duration: 4:32 minutes \u2022 Audio quality: Excellent<\/p>\n <\/div>\n \n <div class=\"audio-waveform\">\n <div class=\"waveform-section digging\">\n <div class=\"section-label\">DIGGING<\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 45px; animation-delay: 0s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 55px; animation-delay: 0.1s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 40px; animation-delay: 0.2s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 50px; animation-delay: 0.3s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 35px; animation-delay: 0.4s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 45px; animation-delay: 0.5s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 60px; animation-delay: 0.6s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 40px; animation-delay: 0.7s;\"><\/div>\n <\/div>\n \n <div class=\"waveform-section pooping\">\n <div class=\"section-label\">ELIMINATION<\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 25px; animation-delay: 0.8s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 30px; animation-delay: 0.9s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 35px; animation-delay: 1s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 20px; animation-delay: 1.1s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 25px; animation-delay: 1.2s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 30px; animation-delay: 1.3s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 15px; animation-delay: 1.4s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 20px; animation-delay: 1.5s;\"><\/div>\n <\/div>\n \n <div class=\"waveform-section burying\">\n <div class=\"section-label\">BURYING<\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 50px; animation-delay: 1.6s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 45px; animation-delay: 1.7s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 55px; animation-delay: 1.8s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 40px; animation-delay: 1.9s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 60px; animation-delay: 2s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 35px; animation-delay: 2.1s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 50px; animation-delay: 2.2s;\"><\/div>\n <div class=\"wave-bar\" style=\"--wave-height: 45px; animation-delay: 2.3s;\"><\/div>\n <\/div>\n <\/div>\n \n <div class=\"audio-ai-analysis\">\n <div class=\"audio-ai-title\">\ud83e\udd16 AI Audio Analysis Results<\/div>\n \n <div class=\"audio-findings\">\n <div class=\"audio-finding\">\n <div class=\"audio-finding-title\">Digging Phase<\/div>\n <div class=\"audio-finding-status\">\n <strong>\u2705 Normal<\/strong><br\/>\n Duration: 1:45min<br\/>\n Intensity: Standard<br\/>\n Pattern: Regular scratching\n <\/div>\n <\/div>\n \n <div class=\"audio-finding\">\n <div class=\"audio-finding-title\">Elimination Phase<\/div>\n <div class=\"audio-finding-status\">\n <strong>\u2705 Normal<\/strong><br\/>\n Duration: 1:12min<br\/>\n Strain indicators: None<br\/>\n Completion: Successful\n <\/div>\n <\/div>\n \n <div class=\"audio-finding\">\n <div class=\"audio-finding-title\">Burying Phase<\/div>\n <div class=\"audio-finding-status\">\n <strong>\u2705 Normal<\/strong><br\/>\n Duration: 1:35min<br\/>\n Intensity: Thorough<br\/>\n Pattern: Complete coverage\n <\/div>\n <\/div>\n <\/div>\n \n <div style=\"background: #fff; padding: 15px; border-radius: 6px; border: 1px solid #c3e6cb; margin-top: 15px;\">\n <strong style=\"color: #155724;\">\ud83c\udfaf Audio Analysis Summary:<\/strong>\n <p style=\"color: #155724; margin-top: 8px; font-size: 14px;\">\n All behavioral audio patterns are within normal ranges. No signs of straining, distress, or abnormal elimination behavior detected. The blood found in visual analysis is not reflected in behavioral changes during elimination process.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <!-- Scene 8: Comprehensive Assessment & Recommendations -->\n <div class=\"demo-scene\" id=\"demoScene8\">\n <div class=\"patient-profile\">\n <div class=\"profile-header\">\n <div class=\"cat-icon\">\ud83d\udc31<\/div>\n <div>\n <h2>Chloe | Ragdoll | 4 years old<\/h2>\n <p>Owner: Lisa Martinez \u2022 Weight: 4.2kg \u2022 Last visit: 3 months ago<\/p>\n <\/div>\n <\/div>\n <div class=\"profile-content\">\n <div class=\"sidebar\">\n <div class=\"message-card\">\n <div class=\"message-header\">\n <span class=\"sender-name\">Lisa M.<\/span>\n <span class=\"message-time\">2 min ago<\/span>\n <\/div>\n <div class=\"message-content\">\n Hi Dr. Chen, Chloe has been straining in the litter box for the past 2 days and seems uncomfortable. I noticed some concerning changes in her stool today. Should I be worried?\n <\/div>\n <\/div>\n \n <div class=\"message-card\" style=\"border-left: 4px solid #dc3545;\">\n <div class=\"message-header\">\n <span class=\"sender-name\">\ud83d\udea8 AI Alert<\/span>\n <span class=\"message-time\">1 min ago<\/span>\n <\/div>\n <div class=\"message-content\" style=\"color: #721c24;\">\n <strong>Critical Finding:<\/strong> Blood detected in fecal sample. Immediate veterinary assessment recommended.\n <\/div>\n <\/div>\n <\/div>\n <div class=\"main-content\">\n <div class=\"tabs\">\n <div class=\"tab\">Feces Analysis<\/div>\n <div class=\"tab\">Audio Analysis<\/div>\n <div class=\"tab\">Behavior<\/div>\n <div class=\"tab active\">Comprehensive<\/div>\n <\/div>\n \n <div style=\"background: #f8f9fa; border-radius: 12px; padding: 25px; margin-bottom: 20px;\">\n <h3 style=\"color: #2c3e50; margin-bottom: 20px; display: flex; align-items: center; gap: 10px;\">\n <span style=\"background: #dc3545; color: white; padding: 8px; border-radius: 50%; font-size: 16px;\">\u2695\ufe0f<\/span>\n AI-Powered Clinical Assessment\n <\/h3>\n \n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 25px;\">\n <div style=\"background: #fff3cd; border-left: 4px solid #ffc107; padding: 20px; border-radius: 6px;\">\n <h4 style=\"color: #856404; margin-bottom: 15px;\">\ud83d\udd2c Visual Analysis Results<\/h4>\n <ul style=\"color: #856404; font-size: 14px; line-height: 1.6; margin: 0; padding-left: 16px;\">\n <li>Blood presence confirmed (94% confidence)<\/li>\n <li>Morphological irregularities detected<\/li>\n <li>15% increase in red pigmentation<\/li>\n <li>Surface texture indicates inflammation<\/li>\n <\/ul>\n <\/div>\n \n <div style=\"background: #d4edda; border-left: 4px solid #28a745; padding: 20px; border-radius: 6px;\">\n <h4 style=\"color: #155724; margin-bottom: 15px;\">\ud83d\udd0a Audio Analysis Results<\/h4>\n <ul style=\"color: #155724; font-size: 14px; line-height: 1.6; margin: 0; padding-left: 16px;\">\n <li>Normal elimination behavior patterns<\/li>\n <li>No straining or distress indicators<\/li>\n <li>Complete 3-phase behavioral sequence<\/li>\n <li>Duration and intensity within range<\/li>\n <\/ul>\n <\/div>\n <\/div>\n \n <div style=\"background: #f8d7da; border-left: 4px solid #dc3545; padding: 20px; border-radius: 6px; margin-bottom: 20px;\">\n <h4 style=\"color: #721c24; margin-bottom: 15px;\">\ud83c\udfaf Differential Diagnosis Considerations<\/h4>\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;\">\n <div style=\"color: #721c24; font-size: 14px;\">\n <strong>High Probability:<\/strong><br\/>\n \u2022 Lower GI bleeding<br\/>\n \u2022 Inflammatory bowel disease<br\/>\n \u2022 Colorectal irritation\n <\/div>\n <div style=\"color: #721c24; font-size: 14px;\">\n <strong>Consider:<\/strong><br\/>\n \u2022 Dietary indiscretion<br\/>\n \u2022 Parasitic infection<br\/>\n \u2022 Stress-related colitis\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"recommendations\">\n <div class=\"rec-title\">\ud83c\udfaf Immediate Action Plan<\/div>\n <div style=\"margin-bottom: 20px;\">\n <div style=\"background: white; padding: 15px; border-radius: 6px; margin-bottom: 15px; border-left: 4px solid #dc3545;\">\n <strong style=\"color: #721c24;\">Priority 1 - Urgent (Within 24 hours):<\/strong>\n <p style=\"color: #721c24; margin-top: 8px; font-size: 14px;\">Schedule emergency examination for blood work, fecal analysis, and abdominal imaging to rule out serious GI conditions.<\/p>\n <\/div>\n \n <div style=\"background: white; padding: 15px; border-radius: 6px; margin-bottom: 15px; border-left: 4px solid #ffc107;\">\n <strong style=\"color: #856404;\">Priority 2 - Important:<\/strong>\n <p style=\"color: #856404; margin-top: 8px; font-size: 14px;\">Dietary modification to bland diet, increased monitoring frequency, and owner education on warning signs.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"action-buttons\">\n <button class=\"btn-demo btn-primary\">\ud83d\udcc5 Schedule Emergency Appointment<\/button>\n <button class=\"btn-demo btn-warning\">\ud83d\udccb Order Diagnostic Tests<\/button>\n <button class=\"btn-demo btn-secondary\">\ud83d\udce7 Send Care Instructions<\/button>\n <button class=\"btn-demo btn-secondary\">\ud83d\udd14 Set Monitoring Alerts<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <!-- Scene 9: Final Scene -->\n <div class=\"demo-scene final-scene\" id=\"demoScene9\">\n <div>\n <div class=\"final-logo\">PURRIT<\/div>\n <div class=\"tagline\">Preventative Health, Powered by Data<\/div>\n <button class=\"cta-button\" onclick=\"exitVetDemo()\">Return to Main Site<\/button>\n <\/div>\n <\/div>\n \n <!-- Click to play indicator -->\n <div class=\"play-indicator\" id=\"playIndicator\">\n <div class=\"play-icon\">\u25b6<\/div>\n <div class=\"play-text\">Click anywhere to start demo<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Footer -->\n <footer class=\"footer\" id=\"contact\">\n <div class=\"footer-content\">\n <div class=\"footer-logo\">PURRIT<\/div>\n <p class=\"footer-text\">\n Revolutionizing feline healthcare through AI-powered monitoring and preventative care solutions.\n <\/p>\n <div class=\"footer-links\">\n <a href=\"#scubic\">Technology<\/a>\n <a href=\"#platform\">Platform<\/a>\n <a href=\"#features\">Features<\/a>\n <!--a href=\"#demo\">Demo<\/a-->\n <\/div>\n <div class=\"footer-copyright\">\n <p>Contact: <a href=\"mailto:info@purrit.net\" style=\"color: var(--accent-primary);\">info@purrit.net<\/a><\/p>\n <p>© 2025 PURRIT. All rights reserved.<\/p>\n <\/div>\n <\/div>\n <\/footer>\n\n <script>\n \/\/ Mobile menu toggle\n document.querySelector('.mobile-menu-toggle')?.addEventListener('click', function() {\n const navLinks = document.querySelector('.nav-links');\n navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';\n });\n\n \/\/ Smooth scrolling for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n\n \/\/ Veterinary Demo Variables\n let currentDemoScene = 1;\n const totalDemoScenes = 9;\n let isDemoPlaying = false;\n let demoPlayTimeout;\n \n \/\/ Start Veterinary Demo\n function startVetDemo() {\n const vetDemoSection = document.getElementById('vetDemoSection');\n const demoContainer = document.getElementById('demoContainer');\n const playIndicator = document.getElementById('playIndicator');\n \n \/\/ Show demo section\n vetDemoSection.style.display = 'block';\n document.body.style.overflow = 'hidden'; \/\/ Prevent background scrolling\n \n \/\/ Initialize first scene\n showDemoScene(1);\n }\n \n \/\/ Exit Veterinary Demo\n function exitVetDemo() {\n const vetDemoSection = document.getElementById('vetDemoSection');\n \n \/\/ Stop demo\n stopDemoPlayback();\n \n \/\/ Hide demo section\n vetDemoSection.style.display = 'none';\n document.body.style.overflow = 'auto'; \/\/ Restore scrolling\n }\n\n function showDemoScene(sceneNumber) {\n \/\/ Hide all demo scenes\n document.querySelectorAll('.demo-scene').forEach(scene => {\n scene.classList.remove('active');\n });\n \n \/\/ Show current scene\n const currentScene = document.getElementById(`demoScene${sceneNumber}`);\n if (currentScene) {\n currentScene.classList.add('active');\n currentDemoScene = sceneNumber;\n }\n \n \/\/ Trigger animations for specific scenes\n if (sceneNumber === 6) {\n setTimeout(() => {\n const section = document.querySelector('#demoScene6 .analysis-section');\n if (section) section.classList.add('animate');\n }, 100);\n }\n \n if (sceneNumber === 7) {\n setTimeout(() => {\n const container = document.querySelector('#demoScene7 .audio-analysis-container');\n if (container) container.classList.add('animate');\n }, 100);\n }\n \n }\n \n function playDemoSequence() {\n if (isDemoPlaying) return;\n \n const demoContainer = document.getElementById('demoContainer');\n const playIndicator = document.getElementById('playIndicator');\n \n isDemoPlaying = true;\n demoContainer.classList.add('playing');\n playIndicator.classList.add('hidden');\n \n \/\/ Scene durations in seconds\n const sceneDurations = [3, 3, 3, 3, 3, 3, 3, 3, 3];\n let sceneIndex = 0;\n \n \/\/ Start with first scene\n showDemoScene(1);\n \n function playNextDemoScene() {\n if (sceneIndex < totalDemoScenes - 1 && isDemoPlaying) {\n sceneIndex++;\n showDemoScene(sceneIndex + 1);\n demoPlayTimeout = setTimeout(playNextDemoScene, sceneDurations[sceneIndex] * 1000);\n } else {\n stopDemoPlayback();\n }\n }\n \n \/\/ Start sequence\n demoPlayTimeout = setTimeout(playNextDemoScene, sceneDurations[sceneIndex] * 1000);\n }\n \n function stopDemoPlayback() {\n const demoContainer = document.getElementById('demoContainer');\n const playIndicator = document.getElementById('playIndicator');\n \n isDemoPlaying = false;\n demoContainer.classList.remove('playing');\n playIndicator.classList.remove('hidden');\n playIndicator.innerHTML = '<div class=\"play-icon\">\u25b6<\/div><div class=\"play-text\">Click anywhere to restart demo<\/div>';\n \n if (demoPlayTimeout) {\n clearTimeout(demoPlayTimeout);\n }\n \n \n }\n \n \/\/ Demo container click event\n document.addEventListener('DOMContentLoaded', () => {\n const demoContainer = document.getElementById('demoContainer');\n playDemoSequence();\n \n if (demoContainer) {\n demoContainer.addEventListener('click', function(e) {\n \/\/ Ignore button clicks\n if (e.target.tagName === 'BUTTON' || e.target.closest('button')) {\n return;\n }\n \n if (isDemoPlaying) {\n stopDemoPlayback();\n } else {\n playDemoSequence();\n }\n });\n }\n });\n \n \/\/ Keyboard controls (Space\/Enter to play\/pause, ESC to exit)\n document.addEventListener('keydown', function(e) {\n const vetDemoSection = document.getElementById('vetDemoSection');\n \n \/\/ Only activate keyboard controls when demo is open\n if (vetDemoSection.style.display !== 'block') {\n return;\n }\n \n if (e.key === ' ' || e.key === 'Enter') {\n e.preventDefault();\n if (isDemoPlaying) {\n stopDemoPlayback();\n } else {\n playDemoSequence();\n }\n }\n \n if (e.key === 'Escape') {\n e.preventDefault();\n exitVetDemo();\n }\n });\n \n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Hide demo section initially\n const vetDemoSection = document.getElementById('vetDemoSection');\n if (vetDemoSection) {\n vetDemoSection.style.display = 'none';\n }\n \n \/\/ Initialize first demo scene\n showDemoScene(1);\n });\n\n \/\/ Intersection Observer for animations\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, observerOptions);\n\n \/\/ Observe elements for scroll animations\n document.addEventListener('DOMContentLoaded', () => {\n const animateElements = document.querySelectorAll('.product-card, .feature-item');\n animateElements.forEach(el => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(30px)';\n el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\n observer.observe(el);\n });\n });\n <\/script>\n <script>\n const menuToggle = document.querySelector('.mobile-menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n\n menuToggle.addEventListener('click', () => {\n navLinks.classList.toggle('mobile-active');\n });\n\n document.querySelectorAll('.nav-links a').forEach(link => {\n link.addEventListener('click', () => {\n navLinks.classList.remove('mobile-active');\n });\n});\n<\/script>\n\n<\/body>\n\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>PURRIT – AI-Powered Feline Health Platform PURRIT Platform Technology Features \u2630 \ud83d\ude80 Revolutionary AI-Powered Pet Health The Future of Feline Care is Here Smart litter box technology meets advanced AI analytics for comprehensive feline health monitoring and preventative care. AI Platform PURRIT Healthcare Platform Multi-modal AI analysis combining computer vision, audio processing, and behavioral pattern […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/purrit.net\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/purrit.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/purrit.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/purrit.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/purrit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":5,"href":"http:\/\/purrit.net\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":18,"href":"http:\/\/purrit.net\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/18"}],"wp:attachment":[{"href":"http:\/\/purrit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}