@charset "utf-8";
/* CSS Document */

        :root {
            /* Colors */
            --slate-50: #f8fafc;
            --slate-100: #f1f5f9;
            --slate-200: #e2e8f0;
            --slate-300: #cbd5e1;
            --slate-400: #94a3b8;
            --slate-500: #64748b;
            --slate-600: #475569;
            --slate-700: #334155;
            --slate-800: #1e293b;
            --slate-900: #0f172a;
            
            --brand-50: #f0f9ff;
            --brand-100: #e0f2fe;
            --brand-500: #0ea5e9;
            --brand-600: #0284c7;
            
            --indigo-100: #e0e7ff;
            --indigo-500: #6366f1;
            --indigo-600: #4f46e5;
            --indigo-700: #4338ca;
            
            --emerald-50: #ecfdf5;
            --emerald-100: #d1fae5;
            --emerald-500: #10b981;
            --emerald-700: #047857;
            
            --green-100: #dcfce7;
            --green-400: #4ade80;
            --green-500: #22c55e;
            --green-700: #15803d;

            --red-100: #fee2e2;
            --red-500: #ef4444;
            --red-700: #b91c1c;
            --red-900: #7f1d1d;
            
            --rose-50: #fff1f2;
            --rose-100: #ffe4e6;
            --rose-400: #fb7185;
            --rose-500: #f43f5e;
            --rose-700: #be123c;
            
            --amber-50: #fffbeb;
            --amber-100: #fef3c7;
            --amber-700: #b45309;

            --cyan-50: #ecfeff;
            --cyan-600: #0891b2;

            --blue-500: #3b82f6;

            /* Dark Mode Variables */
            --dm-bg: #0f172a;
            --dm-card-bg: rgba(30, 41, 59, 0.7);
            --dm-border: rgba(255, 255, 255, 0.1);
            --dm-text-main: #f1f5f9;
            --dm-text-sub: #94a3b8;
        }

        /* Dark Mode Overrides */
        body.dark-mode {
            background-color: var(--dm-bg);
            background-image: radial-gradient(at 0% 0%, rgba(14, 165, 233, 0.15) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(99, 102, 241, 0.15) 0px, transparent 50%);
            color: var(--dm-text-main);
        }
        body.dark-mode .navbar { background: rgba(15, 23, 42, 0.9); border-bottom: 1px solid var(--dm-border); }
        body.dark-mode .logo-3d { color: white; text-shadow: none; }
        body.dark-mode .logo-tagline, body.dark-mode .tm { color: var(--slate-400); }
        body.dark-mode .navbar-links a { color: var(--slate-300); }
        body.dark-mode .navbar-links a:hover { color: var(--brand-500); }
        body.dark-mode .nav-toggle-icon, body.dark-mode .nav-toggle-icon::before, body.dark-mode .nav-toggle-icon::after { background-color: white; }
        
        body.dark-mode .hero-title { color: white; }
        body.dark-mode .hero-sub { color: var(--slate-400); }
        
        body.dark-mode .glass-card { background: var(--dm-card-bg); border-color: var(--dm-border); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); }
        body.dark-mode .simulator-topbar { background-color: rgba(30, 41, 59, 0.5); border-bottom: 1px solid var(--dm-border); }
        body.dark-mode .visual-area { background: linear-gradient(to bottom, #1e293b, #0f172a); }
        body.dark-mode .grid-pattern { background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); }
        body.dark-mode .control-panel { background-color: rgba(30, 41, 59, 0.4); }
        body.dark-mode .status-header { border-bottom-color: var(--dm-border); }
        body.dark-mode .status-header h3 { color: var(--slate-200); }
        body.dark-mode .status-card { background-color: #1e293b; border-color: var(--dm-border); }
        body.dark-mode .stat-title { color: var(--slate-400); }
        body.dark-mode .stat-card { background-color: #1e293b; border-color: var(--dm-border); color: white; }
        body.dark-mode footer p { color: var(--slate-400) !important; }
        body.dark-mode .icon-box.bg-slate-100 { background-color: #334155; color: #cbd5e1; }
        body.dark-mode .system-action-box { background-color: #020617; border: 1px solid var(--dm-border); }
        body.dark-mode .control-box-inner { background-color: rgba(30, 41, 59, 0.8); border-color: var(--dm-border); }
        body.dark-mode .control-box-voltage > div:first-child, body.dark-mode .control-box-sump span, body.dark-mode .control-box-oh span { color: var(--slate-300) !important; }
        body.dark-mode .pump-box { border-color: var(--brand-500); box-shadow: 0 0 15px rgba(14, 165, 233, 0.1); }
        body.dark-mode .demo-controls { background: rgba(30, 41, 59, 0.95); border-color: var(--dm-border); }
        body.dark-mode #demo-play-btn { color: white; }
        
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding-bottom: 2.5rem;
            font-family: var(--font-sans);
            color: var(--slate-800);
            background-color: #F8FAFC;
            background-image: 
                radial-gradient(at 0% 0%, rgba(14, 165, 233, 0.1) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(99, 102, 241, 0.1) 0px, transparent 50%);
            background-attachment: fixed;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
        }

        ::selection {
            background-color: var(--brand-100);
            color: var(--slate-900);
        }

        /* --- Utilities --- */
        .hidden { display: none !important; }
        .flex { display: flex; }
        .flex-col { flex-direction: column; }
        .items-center { align-items: center; }
        .justify-between { justify-content: space-between; }
        .justify-center { justify-content: center; }
        .gap-1 { gap: 0.25rem; }
        .gap-2 { gap: 0.5rem; }
        .gap-3 { gap: 0.75rem; }
        .gap-4 { gap: 1rem; }
        .gap-6 { gap: 1.5rem; }
        .w-full { width: 100%; }
        .h-full { height: 100%; }
        .relative { position: relative; }
        .absolute { position: absolute; }
        /* ADDED: Missing inset-0 utility */
        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
        
        .text-center { text-align: center; }
        .font-bold { font-weight: 700; }
        .font-black { font-weight: 900; }
        .uppercase { text-transform: uppercase; }
        .tracking-wider { letter-spacing: 0.05em; }
        .tracking-widest { letter-spacing: 0.1em; }
        .rounded-full { border-radius: 9999px; }
        .cursor-pointer { cursor: pointer; }
        .pointer-events-none { pointer-events: none; }
        .transition-all { transition: all 0.3s ease; }
        .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
        .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
        .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
        
        /* --- Component Classes --- */
        .glass-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), inset 0 0 20px rgba(255, 255, 255, 0.8);
        }

        .container {
            max-width: 80rem; /* max-w-7xl */
            margin-left: auto;
            margin-right: auto;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        /* --- Updated Navbar Styles --- */
        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1rem;
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--slate-200);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .navbar-left {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .logo-icon {
            height: 36px;
            width: auto;
        }

        .logo-block {
            display: flex;
            flex-direction: column;
        }

        .logo-3d {
            font-family: var(--font-sans);
            font-weight: 900;
            font-size: 1.25rem;
            line-height: 1;
            color: var(--slate-900);
            text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
        }

        .k-wrap {
            color: var(--brand-600);
            position: relative;
        }

        .tm {
            font-size: 0.4em;
            vertical-align: top;
            margin-left: 1px;
            color: var(--slate-500);
        }

        .logo-tagline {
            font-size: 0.55rem;
            letter-spacing: 0.1em;
            color: var(--slate-500);
            margin-top: 2px;
            font-weight: 600;
        }

        .navbar-links {
            display: flex;
            gap: 1.5rem;
            align-items: center;
        }

        .navbar-links a {
            text-decoration: none;
            color: var(--slate-600);
            font-weight: 600;
            font-size: 0.9rem;
            transition: color 0.2s;
        }

        .navbar-links a:hover {
            color: var(--brand-600);
        }

        .nav-toggle {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
        }
        
        /* Menu Icon (Hamburger) using simple CSS */
        .nav-toggle-icon {
            display: block;
            width: 24px;
            height: 2px;
            background-color: var(--slate-700);
            position: relative;
        }
        .nav-toggle-icon::before, .nav-toggle-icon::after {
            content: '';
            position: absolute;
            width: 24px;
            height: 2px;
            background-color: var(--slate-700);
            left: 0;
        }
        .nav-toggle-icon::before { top: -6px; }
        .nav-toggle-icon::after { top: 6px; }

        @media (max-width: 900px) {
            .navbar-links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: white;
                flex-direction: column;
                padding: 1.5rem;
                box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
                border-bottom: 1px solid var(--slate-200);
                align-items: flex-start; /* Left align links in mobile */
            }
            .navbar-links.active {
                display: flex;
            }
            
            .navbar-links a {
                padding: 0.5rem 0;
                width: 100%;
                border-bottom: 1px solid var(--slate-50);
            }

            .nav-toggle {
                display: block;
            }
        }

        /* Generic Button Styles */
        .btn {
            display: flex;
            color: white;
            padding: 0.5rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 700;
            align-items: center;
            gap: 0.375rem;
            border: none;
            transition: all 0.2s;
            text-decoration: none; /* For links */
            line-height: 1.2;
        }
        .btn:active { transform: scale(0.95); }

        /* Button Variants */
        .btn-demo { background-color: var(--indigo-600); }
        .btn-demo:hover { background-color: var(--indigo-700); }

        .btn-whatsapp { background-color: #25D366; }
        .btn-whatsapp:hover { background-color: #20bd5a; }

        .btn-call { background-color: var(--slate-700); }
        .btn-call:hover { background-color: var(--slate-800); }

        /* Hide text on very small screens if needed, or adjust padding */
        @media (max-width: 400px) {
            .btn { padding: 0.5rem; }
        }

        /* Main Sections */
        .hero-section {
            text-align: center;
            max-width: 48rem;
            margin: 0 auto;
            padding: 0 0.5rem;
        }
        .hero-title {
            font-size: 1.875rem;
            font-weight: 800;
            color: var(--slate-900);
            margin-bottom: 1rem;
            letter-spacing: -0.025em;
            line-height: 1.25;
        }
        .text-gradient {
            background: linear-gradient(to right, var(--brand-500), var(--indigo-600));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .hero-sub {
            font-size: 0.875rem;
            color: var(--slate-600);
        }

        /* Simulator Card */
        .simulator-wrapper {
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(15, 23, 42, 0.05);
            scroll-margin-top: 80px; /* Adjusted to align top of simulator with bottom of header */
        }

        .simulator-topbar {
            background-color: var(--slate-50);
            border-bottom: 1px solid var(--slate-200);
            padding: 0.75rem 1rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 0.75rem;
        }

        .status-badge {
            padding: 0.375rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.625rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.5s;
        }
        .badge-standby { background-color: var(--slate-200); color: var(--slate-500); border: 1px solid var(--slate-300); }
        .badge-running { background-color: var(--green-500); color: white; border: 1px solid var(--green-700); box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.3); }

        .simulator-grid {
            display: grid;
            grid-template-columns: 1fr;
        }

        /* Visual Area */
        .visual-area {
            position: relative;
            width: 100%;
            height: 400px;
            background: linear-gradient(to bottom, #ffffff, var(--slate-50));
            overflow: hidden;
            touch-action: pan-y;
        }

        .grid-pattern {
            position: absolute;
            inset: 0;
            opacity: 0.4;
            background-image: linear-gradient(var(--slate-200) 1px, transparent 1px), linear-gradient(90deg, var(--slate-200) 1px, transparent 1px);
            background-size: 40px 40px;
        }

        /* Scaler & Device */
        #diagram-scaler {
            position: absolute;
            left: 50%; top: 50%;
            transform: translate(-50%, -50%);
            width: 500px; height: 550px;
            transform-origin: center;
            transition: transform 0.3s;
        }

        .device-container {
            position: absolute;
            top: 0;
            left: -50px;
            z-index: 40;
            width: 22em;
        }

        .device-wrapper {
            position: relative;
            padding: 0.25rem;
        }

        #device-img {
            width: 100%;
            height: auto;
            border-radius: 0.25rem;
            mix-blend-mode: multiply;
        }

        /* LEDs */
        .led-dot {
            width: 0.625rem; /* 2.5 */
            height: 0.625rem;
            border-radius: 50%;
            box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
            opacity: 0.4;
        }
        .bg-green-500 { background-color: var(--green-500); color: var(--green-400); }
        .bg-red-500 { background-color: var(--red-500); color: var(--red-500); }
        .bg-blue-500 { background-color: var(--blue-500); color: var(--blue-500); }

        /* Specific LED Positions using IDs instead of inline CSS */
        #img-led-volt-high-device { position: absolute; left: 61%; top: 45%; }
        #img-led-power            { position: absolute; left: 61%; top: 48%; }
        #img-led-volt-low-device  { position: absolute; left: 61%; top: 52%; }
        #img-led-motor            { position: absolute; left: 48.5%; top: 42%; }
        
        /* Flow LEDs (Rising from Motor) */
        /* Group selector for Flow LEDs to add black outline/border for visibility */
        #img-led-flow-1, #img-led-flow-2, #img-led-flow-3, #img-led-flow-4, #img-led-flow-5, #img-led-flow-6 {
            border: 1px solid #000000;
            opacity: 0.6;
            z-index: 50;
        }

        #img-led-flow-1           { position: absolute; left: 38.5%; top: 48.5%; }
        #img-led-flow-2           { position: absolute; left: 41.5%; top: 42%; }
        #img-led-flow-3           { position: absolute; left: 44%; top: 35%; }
        #img-led-flow-4           { position: absolute; left: 44%; top: 30%; }
        #img-led-flow-5           { position: absolute; left: 44%; top: 25%; }
        #img-led-flow-6           { position: absolute; left: 41%; top: 21%; }
        
        #img-led-oh-100           { position: absolute; right: 63.5%; top: 27%; }
        #img-led-oh-75            { position: absolute; right: 63.5%; top: 31%; }
        #img-led-oh-50            { position: absolute; right: 63.5%; top: 35%; }
        #img-led-oh-25            { position: absolute; right: 63.5%; top: 39%; }
        
        #img-led-sump-100         { position: absolute; left: 33.5%; bottom: 53%; }
        #img-led-sump-50          { position: absolute; left: 33.5%; bottom: 49%; }
        #img-led-sump-25          { position: absolute; left: 33.5%; bottom: 45%; }

        /* Auto/Manual Controls */
        #btn-mode-switch {
            position: absolute;
            right: 38.7%;
            bottom: 70.5%;
            width: 1.6rem;
            height: 1rem;
            cursor: pointer;
            z-index: 60;
            background-color: transparent; /* Default: Transparent */
            border: 1px solid transparent; /* Default: No visible border */
            border-radius: 2px;
            transition: all 0.1s; /* Smooth animation */
        }

        #btn-lower-switch {
            position: absolute;
            right: 38.7%;
            bottom: 64.5%; /* Positioned below the Auto/Manual button */
            width: 1.6rem;
            height: 1rem;
            cursor: pointer;
            z-index: 60;
            background-color: transparent; /* Default: Transparent */
            border: 1px solid transparent; /* Default: No visible border */
            border-radius: 2px;
            transition: all 0.1s; /* Smooth animation */
        }

        /* Press Effect: Visible Red background, Border, and Glow ONLY when pressed or simulated */
        #btn-mode-switch:active, #btn-lower-switch:active, .btn-sim-press {
            background-color: #ef4444; /* Brighter red on press */
            border: 1px solid #000000; /* Black outer line on press */
            transform: scale(0.95);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 5px rgba(220, 38, 38, 1); /* Strong Glow */
        }
        
        #img-led-mode-auto   { position: absolute; right: 47%; bottom: 72.5%; } /* Green LED (Left of button) */
        #img-led-mode-manual { position: absolute; right: 47%; bottom: 69.5%; } /* Red LED (Left of Auto) */

        /* SVG */
        .svg-layer {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
        }
        .svg-content { width: 100%; height: 100%; overflow: visible; }
        
        /* Controls within Diagram */
        .control-box-voltage {
            position: absolute; bottom: calc(3rem - 10px); left: 0.5rem; width: 4rem; height: 12rem; z-index: 20;
            display: flex; flex-direction: column; align-items: center;
        }
        .control-box-inner {
            width: 100%; height: 100%;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 0.5rem;
            border: 1px solid var(--slate-200);
            display: flex; flex-direction: column; justify-content: space-between;
            padding: 0.5rem;
            position: relative;
            backdrop-filter: blur(4px);
        }
        .led-small { width: 0.75rem; height: 0.75rem; border-radius: 50%; background-color: var(--slate-300); transition: all 0.3s; }
        .led-label { font-size: 8px; color: var(--slate-400); font-weight: 700; margin-top: 2px; }

        .control-box-sump { position: absolute; bottom: 3rem; left: 7rem; width: 9rem; height: 12rem; z-index: 10; }
        /* UPDATED: Brought OH Tank down 10px (top: 6rem -> calc(6rem + 10px)) */
        .control-box-oh { position: absolute; top: calc(6rem + 10px); right: 1rem; width: 9rem; height: 15rem; z-index: 10; }
        
        .tank-container {
            background: rgba(255, 255, 255, 0.4);
            border: 2px solid rgba(203, 213, 225, 0.6);
            box-shadow: inset 10px 0 20px rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(4px);
            width: 100%; height: 100%; border-radius: 0.5rem; position: relative; overflow: hidden;
        }

        .water-fill {
            position: absolute; bottom: 0; width: 100%;
            transition: height 0.7s ease-in-out;
        }
        .sump-surface { background: linear-gradient(180deg, #22D3EE 0%, #0891B2 100%); }
        .water-surface { background: linear-gradient(180deg, #38BDF8 0%, #0284C7 100%); }
        
        .tank-scale {
            position: absolute; right: 0; top: 0; height: 100%; width: 1.25rem;
            display: flex; flex-direction: column; justify-content: space-between;
            padding: 0.5rem 0.125rem;
            border-left: 1px solid rgba(255,255,255,0.2);
            font-size: 8px; color: var(--slate-400); font-family: var(--font-mono);
        }

        .sensor-point {
            position: absolute; left: 0.5rem;
            width: 0.375rem; height: 0.375rem;
            border-radius: 50%;
            background-color: var(--slate-800);
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
            z-index: 20;
        }

        .pump-unit {
            position: absolute; bottom: 6rem; left: 255px; z-index: 20;
            transform: translateX(50%);
        }
        .pump-box {
            position: relative;
            background-color: var(--slate-800);
            border-radius: 0.75rem;
            padding: 0.625rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border: 1px solid var(--slate-700);
            color: var(--slate-500);
        }

        /* Right Panel */
        .control-panel {
            background-color: rgba(255, 255, 255, 0.5);
            padding: 1rem;
            display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
            backdrop-filter: blur(4px);
        }

        .status-header {
            display: flex; justify-content: space-between; align-items: center;
            border-bottom: 1px solid var(--slate-200);
            padding-bottom: 0.5rem;
        }

        .status-card {
            display: flex; align-items: center; justify-content: space-between;
            padding: 0.75rem;
            background-color: white;
            border-radius: 0.75rem;
            border: 1px solid var(--slate-100);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        }
        
        .icon-box { padding: 0.5rem; border-radius: 0.5rem; }
        .bg-slate-100 { background-color: var(--slate-100); color: var(--slate-600); }
        .bg-cyan-50 { background-color: var(--cyan-50); color: var(--cyan-600); }
        .bg-brand-50 { background-color: var(--brand-50); color: var(--brand-600); }
        
        .logic-tag { padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.625rem; font-weight: 700; }
        .bg-green-100 { background-color: var(--green-100); color: var(--green-700); }
        .bg-red-100 { background-color: var(--red-100); color: var(--red-700); }
        .bg-rose-100 { background-color: var(--rose-100); color: var(--rose-700); }
        .bg-emerald-100 { background-color: var(--emerald-100); color: var(--emerald-700); }

        .system-action-box {
            margin-top: 0.5rem; padding: 1rem;
            background-color: var(--slate-900);
            border-radius: 0.75rem;
            color: white;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        /* Footer Stats */
        .stats-grid {
            display: grid; grid-template-columns: 1fr;
            gap: 1rem;
        }
        .stat-card {
            background-color: white;
            padding: 1.25rem;
            border-radius: 1rem;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            border: 1px solid var(--slate-100);
            display: flex; align-items: center; justify-content: space-between;
            text-align: center;
        }
        .stat-title { font-size: 0.875rem; font-weight: 600; color: var(--slate-600); }
        .stat-value { font-size: 1.5rem; font-weight: 900; }
        .text-brand-500 { color: var(--brand-500); }
        .text-indigo-500 { color: var(--indigo-500); }
        .text-emerald-500 { color: var(--emerald-500); }

        /* Toast */
        #toast-container {
            position: absolute; top: 0.5rem; left: 50%; transform: translateX(-50%);
            display: flex; flex-direction: column; align-items: center;
            pointer-events: none; 
            z-index: 100; /* Increased from 60 to 100 to ensure visibility over splash/pipe */
            width: 100%; max-width: 24rem; gap: 0.5rem; padding: 0 1rem;
        }
        .toast {
            display: flex; align-items: center; gap: 0.75rem;
            padding: 0.75rem 1rem;
            border-radius: 0.75rem;
            border-width: 1px; border-style: solid;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(12px);
            transition: all 0.5s;
            opacity: 0; transform: translateY(1rem);
        }
        .toast-visible { opacity: 1; transform: translateY(0); }
        .bg-emerald-50 { background-color: var(--emerald-50); color: var(--emerald-700); border-color: var(--emerald-100); }
        .bg-rose-50 { background-color: var(--rose-50); color: var(--rose-700); border-color: var(--rose-100); }
        .bg-amber-50 { background-color: var(--amber-50); color: var(--amber-700); border-color: var(--amber-100); }

        /* Animations */
        .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
        .animate-spin { animation: spin 1s linear infinite; }
        .animate-rise { animation: rise 2s infinite ease-in; }
        
        @keyframes pulse { 50% { opacity: .5; } }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes rise { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(-100px) scale(1.2); opacity: 0; } }

        /* Sliders */
        input[type=range] { -webkit-appearance: none; background: transparent; cursor: pointer; touch-action: none; }
        input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 12px; background: var(--slate-200); border-radius: 99px; border: 1px solid var(--slate-300); }
        input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 28px; width: 28px; border-radius: 50%; background: #ffffff; border: 2px solid var(--brand-500); margin-top: -9px; transition: transform 0.1s; }
        input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); background: var(--brand-50); }

        .slider-wrapper { display: flex; align-items: center; justify-content: center; pointer-events: auto; }
        .slider-rotated { transform: rotate(-90deg); transform-origin: center; width: 200px; }

        @keyframes wave-move { 0% { transform: translateX(0) skewY(0deg); } 50% { transform: translateX(-20px) skewY(2deg); } 100% { transform: translateX(0) skewY(0deg); } }
        .wave { animation: wave-move 4s ease-in-out infinite; }
        .wire-flow { stroke-dasharray: 6; animation: flow 0.8s linear infinite; }
        @keyframes flow { 0% { stroke-dashoffset: 24; } 100% { stroke-dashoffset: 0; } }

        .led-active {
            opacity: 1 !important;
            filter: brightness(1.3) contrast(1.2);
            box-shadow: 0 0 8px currentColor, inset 0 0 4px rgba(255,255,255,0.8) !important;
        }
        .led-indicator { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

        /* Flow Animation */
        @keyframes flow-blink {
            0%, 100% { opacity: 0.4; transform: scale(1); }
            50% { 
                opacity: 1; 
                transform: scale(1.4); 
                box-shadow: 0 0 15px var(--blue-500), 0 0 5px #fff; 
                filter: brightness(2.5); 
            }
        }
        .flow-anim {
            animation: flow-blink 1s infinite ease-in-out;
        }

        /* --- Visual Polish: Water, Splash, Vibration --- */
        
        /* Splash Animation */
        .splash-particle {
            position: absolute;
            background-color: var(--brand-500);
            border-radius: 50%;
            pointer-events: none;
            opacity: 0;
        }
        
        @keyframes splash-jump {
            0% { transform: translate(-50%, 0) scale(1); opacity: 0.8; }
            50% { opacity: 0.6; }
            100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
        }

        .splashing .splash-particle {
            animation: splash-jump 0.6s infinite ease-out;
        }

        /* Pump Vibration */
        @keyframes pump-vibrate {
            0% { transform: translateX(50%) translate(0, 0); }
            25% { transform: translateX(50%) translate(-2px, 2px); }
            50% { transform: translateX(50%) translate(0, -2px); }
            75% { transform: translateX(50%) translate(2px, 2px); }
            100% { transform: translateX(50%) translate(0, 0); }
        }
        .pump-vibrating {
            animation: pump-vibrate 0.1s infinite linear;
        }

        /* Active Sensor Glow */
        .sensor-active {
            fill: #facc15; /* Yellow/Gold */
            /* UPDATED: Increased glow intensity with double shadow */
            filter: drop-shadow(0 0 6px #facc15) drop-shadow(0 0 12px #eab308);
            stroke: #facc15;
            transition: all 0.2s ease-in-out;
        }
        .sensor-wire {
            stroke: var(--slate-400);
            stroke-width: 2;
            fill: none;
            transition: stroke 0.3s;
        }
        .sensor-tip {
            fill: var(--slate-800);
            transition: fill 0.3s, filter 0.3s;
        }

        /* Enhanced Water Stream */
        .stream-core {
            opacity: 0;
            transition: opacity 0.3s;
        }
        .stream-sheen {
            stroke-dasharray: 20 10;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .is-flowing .stream-core { opacity: 1; }
        .is-flowing .stream-sheen { opacity: 0.8; animation: flow 0.5s linear infinite; }

        /* Pipe Internal Flow Animation */
        @keyframes pipe-flow {
            to { stroke-dashoffset: -20; }
        }
        .pipe-water-flow {
            stroke-dasharray: 10 5;
            animation: pipe-flow 0.5s linear infinite;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .is-flowing .pipe-water-flow { opacity: 0.8; }

        /* ADDED: Flow Arrow Animation using CSS Motion Path */
        @keyframes move-arrow {
            0% { offset-distance: 0%; opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { offset-distance: 100%; opacity: 0; }
        }
        
        .flow-arrow {
            /* Path matches the pipe coordinates */
            offset-path: path("M 218 470 L 258 470 L 258 60 L 430 60 L 430 100");
            offset-rotate: auto; /* Aligns arrow with path */
            animation: move-arrow 2.5s linear infinite;
            fill: #fff; /* White arrows */
            filter: drop-shadow(0 0 1px rgba(0,0,0,0.5));
            opacity: 0; /* Hidden by default until animation runs */
        }
        
        /* Visibility Classes for Group */
        .arrows-hidden { opacity: 0; transition: opacity 0.3s; }
        .arrows-visible { opacity: 1; transition: opacity 0.3s; }

        /* Increase Slider Touch Area for Mobile UX */
        input[type=range]::-webkit-slider-thumb {
            box-shadow: 0 0 0 10px rgba(14, 165, 233, 0.1); /* Invisible larger hit area */
        }

        /* Power Switch Hover Effect */
        #btn-power-switch:hover {
            background-color: rgba(239, 68, 68, 0.3) !important;
            border-color: rgba(239, 68, 68, 1) !important;
            box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
        }

        /* UPDATED: Rocker Switch Hover Effect (Red Glow) */
        #btn-rocker-switch:hover {
            filter: brightness(1.2);
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.8), 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        /* Rocker Switch States (3D Tilt) */
        .rocker-auto {
            background: linear-gradient(to bottom, #ef4444 0%, #b91c1c 100%) !important;
            transform: perspective(100px) rotateX(20deg); /* Top pressed in */
            box-shadow: 0 4px 0 #7f1d1d, 0 5px 5px rgba(0,0,0,0.3) !important;
            border-bottom: 1px solid rgba(0,0,0,0.5) !important;
        }
        .rocker-off {
            background: linear-gradient(to bottom, #b91c1c 0%, #ef4444 50%, #b91c1c 100%) !important;
            transform: perspective(100px) rotateX(0deg); /* Flat */
            box-shadow: 2px 2px 5px rgba(0,0,0,0.4) !important;
        }
        .rocker-bypass {
            background: linear-gradient(to bottom, #b91c1c 0%, #ef4444 100%) !important;
            transform: perspective(100px) rotateX(-20deg); /* Bottom pressed in */
            box-shadow: 0 -4px 0 #7f1d1d, 0 -5px 5px rgba(0,0,0,0.3) !important;
            border-top: 1px solid rgba(0,0,0,0.5) !important;
        }

        /* --- Tooltip Styles --- */
        #global-tooltip {
            position: fixed;
            background: rgba(15, 23, 42, 0.95);
            color: #fff;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            font-size: 0.75rem;
            font-weight: 600;
            pointer-events: none;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.15s ease, transform 0.15s ease;
            transform: translate(-50%, -10px); /* Start slightly lower */
            white-space: nowrap;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255,255,255,0.1);
            backdrop-filter: blur(4px);
            top: 0; left: 0;
        }
        #global-tooltip.visible { 
            opacity: 1; 
            transform: translate(-50%, -130%); /* Move up above cursor */
        }
        /* Tiny arrow for tooltip */
        #global-tooltip::after {
            content: ''; position: absolute; top: 100%; left: 50%; margin-left: -4px;
            border-width: 4px; border-style: solid;
            border-color: rgba(15, 23, 42, 0.95) transparent transparent transparent;
        }

        /* Active Sensor Glow */
        .sensor-active {
            fill: #facc15; /* Yellow/Gold */
            filter: drop-shadow(0 0 4px #facc15);
            stroke: #facc15;
        }
        .sensor-wire {
            stroke: var(--slate-400);
            stroke-width: 2;
            fill: none;

            transition: stroke 0.3s;
        }
        .sensor-tip {
            fill: var(--slate-800);
            transition: fill 0.3s, filter 0.3s;
        }

        /* --- Assistant Styles --- */
        .assistant-container {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            display: flex;
            align-items: flex-end;
            gap: 1rem;
            z-index: 100;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateY(150%); /* Hidden by default */
        }
        .assistant-visible {
            transform: translateY(0);
        }
        
        .assistant-avatar {
            width: 6rem;
            height: 6rem;
            border-radius: 50%;
            border: 3px solid white;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            background-color: #fff;
            position: relative;
            transition: transform 0.2s;
        }
        
        .assistant-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Lip Sync Simulation Animation */
        @keyframes talk-pulse {
            0% { transform: scale(1); }
            25% { transform: scale(1.05); }
            50% { transform: scale(1); }
            75% { transform: scale(1.03); }
            100% { transform: scale(1); }
        }

        .avatar-speaking {
            animation: talk-pulse 0.3s infinite;
            border-color: var(--brand-500);
            box-shadow: 0 0 15px var(--brand-500);
        }

        .speech-bubble {
            background-color: white;
            padding: 1rem 1.25rem;
            border-radius: 1.25rem;
            border-bottom-right-radius: 0;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            max-width: 250px;
            position: relative;
            margin-bottom: 2rem;
            opacity: 0;
            transform: scale(0.9);
            transform-origin: bottom right;
            transition: all 0.3s ease;
            font-size: 0.875rem;
            color: var(--slate-700);
            font-weight: 500;
            line-height: 1.4;
            border: 1px solid var(--slate-100);
        }
        
        .speech-visible {
            opacity: 1;
            transform: scale(1);
        }

        /* Demo Controls Style */
        .demo-slider-track {
            -webkit-appearance: none;
            width: 100%;
            height: 4px;
            background: var(--slate-200);
            border-radius: 2px;
            outline: none;
            margin: 0;
            padding: 0;
            border: none;
        }
        .demo-slider-track::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--brand-600);
            cursor: pointer;
            border: 2px solid white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
            margin-top: -4px; /* (height 4px - thumb 12px) / 2 */
        }

        /* Responsive */
        @media (min-width: 400px) {
            .visual-area { height: 450px; }
        }
        @media (min-width: 640px) { /* sm */
            .container { padding-left: 1.5rem; padding-right: 1.5rem; }
            .logo-box { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; }
            .header-text h1 { font-size: 1.25rem; }
            /* Updated to use generic btn class */
            .btn { padding: 0.5rem 1.25rem; font-size: 0.875rem; } 
            .btn span { display: inline; } /* Ensure text shows on desktop */
            .hero-title { font-size: 3rem; }
            .hero-sub { font-size: 1.125rem; }
            .simulator-wrapper { border-radius: 1.5rem; }
            .visual-area { height: 550px; }
            .simulator-topbar { padding: 1rem 1.5rem; }
            .status-badge { padding: 0.5rem 1.25rem; font-size: 0.75rem; }
            .status-grid { grid-template-columns: repeat(2, 1fr); }
            .stats-grid { grid-template-columns: repeat(3, 1fr); }
            .stat-card { flex-direction: column; justify-content: center; }
            .stat-title { margin-bottom: 0.25rem; }
            .stat-value { font-size: 2.25rem; }
            .control-panel { padding: 1.5rem; }
        }
        @media (min-width: 1024px) { /* lg */
            .visual-area { height: 600px; }
            .simulator-grid { grid-template-columns: 1.5fr 1fr; }
            .status-grid { grid-template-columns: 1fr; }
        }
		
	/* =========================================================
   CONTACT SUMMARY (index)
   ========================================================= */

#contact-section {
  max-width: 900px;
  margin: 0 auto 60px;
  padding: 20px 18px 22px;
  border-radius: 18px;
  background: rgba(5, 8, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
}

#contact-section h2 {
  margin-top: 0;
  font-size: 20px;
  color: #ffb74d;
}

#contact-section p {
  margin: 4px 0;
  font-size: 14px;
  color: var(--text-muted);
}
	
 /* =========================================================
   CONTACT SUMMARY (index)
   ========================================================= */

#contact-section {
  max-width: 900px;
  margin: 0 auto 60px;
  padding: 20px 18px 22px;
  border-radius: 18px;
  background: rgba(5, 8, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
}

#contact-section h2 {
  margin-top: 0;
  font-size: 28px;
  color: #ffb74d;
}

#contact-section p {
  margin: 4px 0;
  font-size: 24px;
  color:#ffffff;
}

/* =========================================================
   FLOATING WHATSAPP BUTTON (global)
   ========================================================= */

.floating-contact {
  position: fixed;
  right: 18px;
  bottom: 18px;
  padding: 11px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.8);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.floating-contact:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}