/* Original Lagoon One product appearance, scoped to its preview. */
#lagoon-one .browser-mockup{
    --brand-primary: #0f5c43;
    --brand-dark-forest: #10302e;
    --brand-light-green: #61d571;
    --brand-teal-med: #196950;
    --brand-teal-bright: #19ad7e;
    --brand-green-vibrant: #06b44d;
    --brand-sage-muted: #71b079;
    --brand-emerald-light: #208c68;

    --bg-light: #f5f7f6;
    --surface-light: #ffffff;
    --border-light: #e0e6e4;
    --text-light-main: #14211e;
    --text-light-muted: #1f2e2b;

    --bg-dark: #0a1413;
    --surface-dark: #0d2220;
    --border-dark: #196950;
    --text-dark-main: #ffffff;
    --text-dark-muted: #a3c2ba;

    --bg: var(--bg-light);
    --surface: var(--surface-light);
    --border: var(--border-light);
    --text-main: var(--text-light-main);
    --text-muted: var(--text-light-muted);

    --success: #06b44d;
    --success-bg: rgba(6, 180, 77, 0.1);
    --warning: #f1a00a;
    --warning-bg: rgba(241, 160, 10, 0.1);
    --error: #e03131;
    --error-bg: rgba(224, 49, 49, 0.1);

    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-pill: 9999px;

    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 40px;
    --s-9: 48px;
    --s-10: 64px;

    --shadow-xs: 0px 1px 2px rgba(10, 20, 19, 0.05);
    --shadow-sm: 0px 2px 4px rgba(10, 20, 19, 0.06), 0px 0px 0px 1px rgba(10, 20, 19, 0.02);
    --shadow-md: 0px 8px 16px -4px rgba(10, 20, 19, 0.1), 0px 0px 0px 1px rgba(10, 20, 19, 0.03);
    --shadow-lg: 0px 16px 32px -8px rgba(10, 20, 19, 0.15), 0px 0px 0px 1px rgba(10, 20, 19, 0.04);
    --shadow-hover: 0px 25px 50px -12px rgba(10, 20, 19, 0.2);

    --font-sans: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    --bg-main: var(--bg);
    --bg-sec: var(--surface);
    --bg-card: var(--surface);
    --bg-card-hover: var(--surface);
    --border-color: var(--border);
    --border-hover: var(--brand-teal-bright);
    --color-blue: var(--brand-teal-bright);
    --color-green: var(--brand-light-green);
    --color-red: var(--error);
    --text-primary: var(--text-main);
    --text-secondary: var(--text-muted);
    --grad-omni: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-teal-bright) 100%);
    --grad-blue-green: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-teal-bright) 100%);
font-family:var(--font-sans);color:var(--text-main)}
#lagoon-one .browser-mockup{ border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; overflow: hidden !important; box-shadow: var(--shadow-lg) !important; background-color: var(--surface) !important; display: flex !important; flex-direction: column !important; height: 480px !important; width: 100% !important; transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.5s ease !important; transform: rotateX(2deg) !important; }#lagoon-one .browser-mockup:hover{ box-shadow: var(--shadow-hover) !important; transform: rotateX(0deg) translateY(-4px) !important; }#lagoon-one .browser-header{ height: 38px !important; background-color: var(--bg) !important; border-bottom: 1px solid var(--border) !important; display: flex !important; align-items: center !important; padding: 0 16px !important; gap: 16px !important; flex-shrink: 0 !important; }#lagoon-one .browser-dots{ display: flex !important; gap: 6px !important; }#lagoon-one .browser-dots .dot{ width: 10px !important; height: 10px !important; border-radius: 50% !important; display: inline-block !important; }#lagoon-one .browser-dots .dot.red{ background-color: #ff5f56 !important; }#lagoon-one .browser-dots .dot.yellow{ background-color: #ffbd2e !important; }#lagoon-one .browser-dots .dot.green{ background-color: #27c93f !important; }#lagoon-one .browser-address{ flex: 1 !important; max-width: 480px !important; background-color: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-xs) !important; height: 24px !important; font-family: var(--font-mono) !important; font-size: 11px !important; color: var(--text-muted) !important; display: flex !important; align-items: center !important; padding: 0 12px !important; }#lagoon-one .browser-content{ flex: 1 !important; overflow: hidden !important; position: relative !important; }#lagoon-one .platform-mockup{ display: grid !important; grid-template-columns: 64px 280px 1fr !important; height: 100% !important; width: 100% !important; background-color: var(--bg) !important; }#lagoon-one .pf-side-nav{ background-color: var(--surface) !important; border-right: 1px solid var(--border) !important; display: flex !important; flex-direction: column !important; align-items: center !important; padding: var(--s-4) 0 !important; gap: 24px !important; }#lagoon-one .pf-mini-logo{ max-width: 40px !important; height: auto !important; object-fit: contain !important; }#lagoon-one .pf-nav-icons{ display: flex !important; flex-direction: column !important; gap: var(--s-4) !important; align-items: center !important; }#lagoon-one .pf-nav-icon-link{ color: var(--text-muted) !important; font-size: 20px !important; width: 40px !important; height: 40px !important; border-radius: var(--r-sm) !important; display: grid !important; place-items: center !important; transition: all 0.2s ease !important; text-decoration: none !important; }#lagoon-one .pf-nav-icon-link:hover,#lagoon-one .pf-nav-icon-link.active{ background-color: rgba(15, 92, 67, 0.1) !important; color: var(--brand-teal-bright) !important; }#lagoon-one .pf-nav-icon-link.active{ background-color: var(--brand-primary) !important; color: #ffffff !important; }#lagoon-one .pf-chat-list{ background-color: var(--surface) !important; border-right: 1px solid var(--border) !important; display: flex !important; flex-direction: column !important; text-align: left !important; }#lagoon-one .pf-list-title{ font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: var(--text-muted) !important; padding: var(--s-4) !important; border-bottom: 1px solid var(--border) !important; }#lagoon-one .pf-chat-card-items{ flex: 1 !important; overflow-y: auto !important; }#lagoon-one .pf-chat-list-card{ display: flex !important; gap: 12px !important; padding: var(--s-4) var(--s-3) !important; border-bottom: 1px solid var(--border) !important; cursor: default !important; transition: background-color 0.2s ease !important; }#lagoon-one .pf-chat-list-card.active{ background-color: rgba(15, 92, 67, 0.05) !important; border-left: 3px solid var(--brand-teal-bright) !important; }#lagoon-one .pf-avatar-circle{ width: 40px !important; height: 40px !important; border-radius: 50% !important; background-color: var(--brand-primary) !important; color: #ffffff !important; font-weight: 700 !important; font-size: 13px !important; display: grid !important; place-items: center !important; position: relative !important; flex-shrink: 0 !important; }#lagoon-one .pf-avatar-circle-sm{ width: 32px !important; height: 32px !important; border-radius: 50% !important; background-color: var(--brand-primary) !important; color: #ffffff !important; font-weight: 700 !important; font-size: 12px !important; display: grid !important; place-items: center !important; flex-shrink: 0 !important; }#lagoon-one .pf-channel-badge{ position: absolute !important; bottom: -2px !important; right: -2px !important; width: 16px !important; height: 16px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; font-size: 10px !important; color: #ffffff !important; border: 1.5px solid var(--surface) !important; }#lagoon-one .pf-channel-badge.whatsapp{ background-color: #25d366 !important; }#lagoon-one .pf-channel-badge.instagram{ background-color: #e1306c !important; }#lagoon-one .pf-chat-meta-info{ flex: 1 !important; min-width: 0 !important; }#lagoon-one .pf-chat-name-row{ display: flex !important; justify-content: space-between !important; align-items: baseline !important; margin-bottom: 4px !important; }#lagoon-one .pf-chat-user-name{ font-size: 13.5px !important; font-weight: 700 !important; color: var(--text-main) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }#lagoon-one .pf-chat-card-time{ font-size: 10px !important; color: var(--text-muted) !important; font-family: var(--font-mono) !important; }#lagoon-one .pf-chat-tags-list{ display: flex !important; gap: 4px !important; margin-bottom: 6px !important; }#lagoon-one .pf-tag-pill{ font-size: 9px !important; font-weight: 700 !important; padding: 2px 6px !important; border-radius: var(--r-xs) !important; text-transform: uppercase !important; font-family: var(--font-mono) !important; }#lagoon-one .pf-tag-pill.lead{ background-color: rgba(25, 173, 126, 0.1) !important; color: var(--brand-teal-bright) !important; }#lagoon-one .pf-tag-pill.urgent{ background-color: rgba(224, 49, 49, 0.1) !important; color: var(--error) !important; }#lagoon-one .pf-tag-pill.active-tag{ background-color: rgba(6, 180, 77, 0.1) !important; color: var(--brand-light-green) !important; }#lagoon-one .pf-chat-msg-preview{ font-size: 11.5px !important; color: var(--text-muted) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }#lagoon-one .pf-active-chat-pane{ background-color: var(--bg) !important; display: flex !important; flex-direction: column !important; height: 100% !important; }#lagoon-one .pf-pane-header{ height: 56px !important; background-color: var(--surface) !important; border-bottom: 1px solid var(--border) !important; padding: 0 var(--s-5) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; flex-shrink: 0 !important; }#lagoon-one .pf-pane-user-profile{ display: flex !important; align-items: center !important; gap: 10px !important; }#lagoon-one .pf-pane-meta{ display: flex !important; flex-direction: column !important; }#lagoon-one .pf-pane-name{ font-size: 13.5px !important; font-weight: 700 !important; color: var(--text-main) !important; display: flex !important; align-items: center !important; gap: 6px !important; }#lagoon-one .pf-meta-phone{ font-size: 11px !important; font-weight: 400 !important; color: var(--text-muted) !important; font-family: var(--font-mono) !important; }#lagoon-one .pf-channel-indicator{ font-size: 10.5px !important; color: var(--text-muted) !important; display: flex !important; align-items: center !important; gap: 4px !important; }#lagoon-one .pf-chat-messages{ flex: 1 !important; padding: var(--s-4) !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }#lagoon-one .pf-chat-messages .pf-bubble{ max-width: 75% !important; padding: 10px 14px !important; font-size: 12.5px !important; line-height: 1.45 !important; position: relative !important; display: flex !important; flex-direction: column !important; box-shadow: var(--shadow-xs) !important; animation: bubbleFadeIn 0.3s ease-out forwards !important; }
@keyframes bubbleFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }#lagoon-one .pf-chat-messages .pf-bubble.incoming{ align-self: flex-start !important; background-color: var(--surface) !important; color: var(--text-main) !important; border-radius: 0 var(--r-md) var(--r-md) var(--r-md) !important; border: 1.5px solid var(--border) !important; }#lagoon-one .pf-chat-messages .pf-bubble.outgoing{ align-self: flex-end !important; background-color: var(--brand-primary) !important; color: #ffffff !important; border-radius: var(--r-md) 0 var(--r-md) var(--r-md) !important; }#lagoon-one .pf-bubble-text{ word-break: break-word !important; }#lagoon-one .pf-bubble-meta{ font-size: 9px !important; color: var(--text-muted) !important; align-self: flex-end !important; margin-top: 4px !important; font-family: var(--font-mono) !important; }#lagoon-one .pf-chat-messages .pf-bubble.outgoing .pf-bubble-meta{ color: rgba(255, 255, 255, 0.7) !important; }#lagoon-one .pf-pane-footer{ padding: var(--s-4) !important; background-color: var(--surface) !important; border-top: 1px solid var(--border) !important; flex-shrink: 0 !important; }#lagoon-one .pf-simulated-input-box{ height: 40px !important; background-color: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: var(--r-pill) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 var(--s-4) !important; }#lagoon-one .pf-input-placeholder{ font-size: 12px !important; color: var(--text-muted) !important; }#lagoon-one .pf-send-btn{ background: none !important; border: none !important; color: var(--brand-teal-bright) !important; font-size: 16px !important; display: grid !important; place-items: center !important; cursor: default !important; }


@media(max-width:1100px){#lagoon-one .platform-mockup{grid-template-columns:56px 210px 1fr!important}}
@media(max-width:767px){#lagoon-one .platform-mockup{grid-template-columns:48px minmax(0,1fr)!important}#lagoon-one .pf-chat-list{display:none!important}#lagoon-one .pf-meta-phone{display:none!important}#lagoon-one .pf-mini-logo{max-width:30px!important}}/* Fit the original software preview within the homepage's narrower column. */
#lagoon-one .browser-mockup{container-type:inline-size}
@media(min-width:768px){@container(max-width:650px){#lagoon-one .platform-mockup{grid-template-columns:48px 180px minmax(0,1fr)!important}#lagoon-one .pf-chat-list-card{padding:12px 8px!important;gap:8px!important}#lagoon-one .pf-mini-logo{max-width:30px!important}#lagoon-one .pf-pane-header{padding:0 12px!important}#lagoon-one .pf-meta-phone{display:none!important}#lagoon-one .pf-chat-messages{padding:12px!important}#lagoon-one .pf-chat-messages .pf-bubble{max-width:92%!important}#lagoon-one .pf-pane-name{flex-wrap:nowrap!important}}}
@container(max-width:400px){#lagoon-one .platform-mockup{grid-template-columns:44px minmax(0,1fr)!important}#lagoon-one .pf-chat-list{display:none!important}}