:root {
        --ludy-primary: #1a365d;
        --ludy-accent: #d69e2e;
        --ludy-gray: #718096;
    }
    .ludy-hero {
        background: linear-gradient(135deg, var(--ludy-primary) 0%, #2c5282 100%);
        color: white;
        padding: 4rem 0;
    }
    .ludy-badge {
        display: inline-block;
        padding: 0.5rem 1rem;
        background: rgba(255,255,255,0.15);
        border-radius: 20px;
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
    }
    .ludy-hero__cta { margin-bottom: 2rem; }
    .ludy-stats { display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; }
    .ludy-stat { text-align: center; }
    .ludy-stat__value { font-size: 2rem; font-weight: 700; color: var(--ludy-accent); }
    .ludy-stat__label { font-size: 0.875rem; opacity: 0.8; }
    .ludy-metaphor {
        background: #f7fafc;
        border-radius: 16px;
        padding: 2rem;
        margin: 2rem 0;
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }
    .ludy-metaphor__icon {
        width: 64px; height: 64px;
        background: var(--ludy-primary);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .ludy-metaphor__icon svg { width: 32px; height: 32px; color: white; }
    .ludy-metaphor__text { font-style: italic; font-size: 1.125rem; color: var(--ludy-gray); }
    .ludy-problem-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
        margin: 2rem 0;
    }
    .ludy-problem-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border-left: 4px solid #e53e3e;
    }
    .ludy-solution-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border-left: 4px solid var(--ludy-accent);
    }
    .ludy-zones {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        margin: 2rem 0;
    }
    .ludy-zone { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
    .ludy-zone--blue { border-top: 4px solid #3182ce; }
    .ludy-zone--green { border-top: 4px solid #38a169; }
    .ludy-zone--yellow { border-top: 4px solid var(--ludy-accent); }
    .ludy-process { background: #f7fafc; border-radius: 16px; padding: 2rem; margin: 2rem 0; }
    .ludy-process-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
    .ludy-process-tab { padding: 0.75rem 1.25rem; background: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; color: var(--ludy-gray); }
    .ludy-process-tab--active { background: var(--ludy-primary); color: white; }
    .ludy-process-content { display: none; background: white; border-radius: 12px; padding: 1.5rem; }
    .ludy-process-content--active { display: block; }
    .ludy-results { background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%); border-radius: 16px; padding: 2rem; margin: 2rem 0; }
    .ludy-results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
    .ludy-result-item { text-align: center; padding: 1.5rem; background: white; border-radius: 12px; }
    .ludy-result-item__value { font-size: 2.5rem; font-weight: 700; color: var(--ludy-accent); }
    @media (max-width: 768px) {
        .ludy-zones { grid-template-columns: 1fr; }
        .ludy-results-grid { grid-template-columns: repeat(2, 1fr); }
    }
    .ludy-address-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        max-width: 400px;
        margin: 1rem auto;
    }
    .ludy-address-cell {
        aspect-ratio: 1;
        background: #e2e8f0;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        position: relative;
    }
    .ludy-address-cell--filled { background: var(--ludy-accent); color: white; }
    .ludy-address-cell--empty { background: #e2e8f0; }
    .ludy-address-cell__label { position: absolute; top: 2px; left: 2px; font-size: 0.6rem; opacity: 0.7; }
    .ludy-address-demo {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
    }
    .ludy-address-stack {
        display: flex;
        flex-direction: column-reverse;
        gap: 4px;
        width: 80px;
    }
    .ludy-address-buhta {
        height: 40px;
        background: linear-gradient(135deg, var(--ludy-primary) 0%, #2c5282 100%);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 0.75rem;
        font-weight: 600;
        position: relative;
    }
    .ludy-address-buhta--moved {
        background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
        animation: slideDown 0.5s ease;
    }
    @keyframes slideDown {
        from { transform: translateY(-44px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    .ludy-integration {
        background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
        border-radius: 16px;
        padding: 2rem;
        margin: 2rem 0;
    }
    .ludy-integration-grid {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 1rem;
        align-items: center;
        margin: 2rem 0;
    }
    .ludy-integration-block {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        text-align: center;
    }
    .ludy-integration-block__icon {
        width: 64px;
        height: 64px;
        margin: 0 auto 1rem;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ludy-integration-block--wms .ludy-integration-block__icon { background: linear-gradient(135deg, var(--ludy-primary) 0%, #2c5282 100%); color: white; }
    .ludy-integration-block--1c .ludy-integration-block__icon { background: linear-gradient(135deg, #c53030 0%, #9b2c2c 100%); color: white; }
    .ludy-integration-arrow {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    .ludy-integration-arrow__line {
        width: 2px;
        height: 40px;
        background: linear-gradient(to bottom, var(--ludy-accent), var(--ludy-primary));
        position: relative;
    }
    .ludy-integration-arrow__line::after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 8px solid var(--ludy-primary);
    }
    .ludy-integration-arrow--reverse .ludy-integration-arrow__line {
        background: linear-gradient(to top, var(--ludy-accent), var(--ludy-primary));
    }
    .ludy-integration-arrow--reverse .ludy-integration-arrow__line::after {
        bottom: auto;
        top: -6px;
        border-top: none;
        border-bottom: 8px solid var(--ludy-primary);
    }
    .ludy-integration-data {
        font-size: 0.75rem;
        color: var(--ludy-gray);
        background: white;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        white-space: nowrap;
    }
    .ludy-tsd-demo {
        background: #1a202c;
        border-radius: 24px;
        padding: 1rem;
        max-width: 320px;
        margin: 0 auto;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }
    .ludy-tsd-screen {
        background: white;
        border-radius: 16px;
        overflow: hidden;
        min-height: 400px;
    }
    .ludy-tsd-header {
        background: var(--ludy-primary);
        color: white;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
    }
    .ludy-tsd-content {
        padding: 1rem;
    }
    .ludy-tsd-scan-area {
        border: 2px dashed #cbd5e0;
        border-radius: 12px;
        padding: 2rem;
        text-align: center;
        margin: 1rem 0;
        cursor: pointer;
        transition: all 0.2s;
    }
    .ludy-tsd-scan-area:hover {
        border-color: var(--ludy-primary);
        background: #ebf8ff;
    }
    .ludy-tsd-scan-area--success {
        border-color: #38a169;
        background: #f0fff4;
    }
    .ludy-tsd-btn {
        width: 100%;
        padding: 0.75rem;
        background: var(--ludy-primary);
        color: white;
        border: none;
        border-radius: 8px;
        font-weight: 500;
        cursor: pointer;
        margin-top: 0.5rem;
    }
    .ludy-tsd-btn:disabled {
        background: #a0aec0;
        cursor: not-allowed;
    }
    .ludy-demo-tabs {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1rem;
        justify-content: center;
    }
    .ludy-demo-tab {
        padding: 0.5rem 1rem;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    .ludy-demo-tab--active {
        background: var(--ludy-primary);
        color: white;
        border-color: var(--ludy-primary);
    }
    /* TSD Demo hints and animations */
    .ludy-tsd-hint {
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--ludy-accent);
        color: #1a202c;
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
        animation: ludy-pulse 2s infinite;
        z-index: 10;
    }
    .ludy-tsd-hint::after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid var(--ludy-accent);
    }
    .ludy-tsd-scan-area {
        position: relative;
        border: 2px dashed #cbd5e0;
        border-radius: 12px;
        padding: 2rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
    }
    .ludy-tsd-scan-area:hover {
        border-color: var(--ludy-primary);
        background: #ebf8ff;
    }
    .ludy-tsd-scan-area--pulse {
        animation: ludy-border-pulse 2s infinite;
    }
    @keyframes ludy-pulse {
        0%, 100% { transform: translateX(-50%) scale(1); }
        50% { transform: translateX(-50%) scale(1.05); }
    }
    @keyframes ludy-border-pulse {
        0%, 100% { border-color: #cbd5e0; box-shadow: 0 0 0 0 rgba(95, 211, 209, 0); }
        50% { border-color: var(--ludy-primary); box-shadow: 0 0 0 4px rgba(95, 211, 209, 0.3); }
    }
    /* Operator Dashboard Styles */
    .ludy-operator-demo {
        background: white;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    }
    .ludy-operator-header {
        background: linear-gradient(135deg, var(--ludy-primary) 0%, #2c5282 100%);
        color: white;
        padding: 1rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .ludy-operator-tabs {
        display: flex;
        background: #f7fafc;
        border-bottom: 1px solid #e2e8f0;
    }
    .ludy-operator-tab {
        flex: 1;
        padding: 0.75rem;
        text-align: center;
        font-size: 0.875rem;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: all 0.2s;
    }
    .ludy-operator-tab:hover {
        background: #edf2f7;
    }
    .ludy-operator-tab--active {
        color: var(--ludy-primary);
        border-bottom-color: var(--ludy-primary);
        font-weight: 500;
    }
    .ludy-operator-content {
        padding: 1.5rem;
        min-height: 300px;
    }
    .ludy-order-card {
        background: #f7fafc;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 0.75rem;
        border-left: 3px solid var(--ludy-primary);
        cursor: pointer;
        transition: all 0.2s;
    }
    .ludy-order-card:hover {
        background: #edf2f7;
        transform: translateX(4px);
    }
    .ludy-order-card--urgent {
        border-left-color: #e53e3e;
    }
    .ludy-order-card--done {
        border-left-color: #38a169;
        opacity: 0.7;
    }
    .ludy-status-badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 500;
    }
    .ludy-status-badge--new { background: #ebf8ff; color: #3182ce; }
    .ludy-status-badge--progress { background: #fef5e7; color: #d69e2e; }
    .ludy-status-badge--done { background: #f0fff4; color: #38a169; }
    .ludy-arrow-hint {
        position: absolute;
        right: -40px;
        top: 50%;
        transform: translateY(-50%);
        animation: ludy-arrow-bounce 1.5s infinite;
    }
    @keyframes ludy-arrow-bounce {
        0%, 100% { transform: translateY(-50%) translateX(0); }
        50% { transform: translateY(-50%) translateX(8px); }
    }