@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&family=Outfit:wght@200;900&display=swap');

    :root {
        --deep-slate: #0f172a;
        --electric-blue: #00f2ff;
        --site-slate: #94a3b8;
    }

    body {
        font-family: 'Inter', sans-serif;
        background-color: #cbd5e1;
        background-image: 
            linear-gradient(rgba(203, 213, 225, 0.94), rgba(203, 213, 225, 0.94)),
            url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2394a3b8' fill-opacity='0.12'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .kromet-online-logo {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin-bottom: 2.5rem;
    }

    .brand-text-row {
        display: flex;
        align-items: baseline;
        text-transform: uppercase;
        font-family: 'Outfit', sans-serif;
    }

    .kromet-title-text {
        color: #ffffff;
        font-size: 5rem;
        line-height: 1;
        font-weight: 900;
        letter-spacing: -0.04em;
    }

    .online-title-text {
        color: var(--site-slate);
        font-size: 5rem;
        line-height: 1;
        font-weight: 200; 
        letter-spacing: -0.02em;
    }
    
.zoo-title-text {
    color: var(--site-slate);
    font-family: 'Raleway', sans-serif;
    font-size: 3rem;
    line-height: 1.2;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.05em;
    margin-left: 0.25em; /* Add space between 'to' and the span */
}

    .intranet-module {
        background: linear-gradient(145deg, rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.9));
        border: 1px solid rgba(255, 255, 255, 1);
        border-left: 5px solid #475569;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 1.25rem;
        height: 120px;
    }

    .intranet-module:hover {
        background: #ffffff;
        transform: translateY(-4px);
        border-left: 5px solid var(--site-slate);
        box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.15), 0 15px 15px -5px rgba(0, 0, 0, 0.08);
    }

    .module-icon {
        width: 60px; 
        height: 60px; 
        background: #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: #475569;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        font-size: 1.5rem; 
        flex-shrink: 0;
    }

    .intranet-module:hover .module-icon {
        background: #1e293b;
        color: var(--electric-blue); 
        transform: scale(1.1) rotate(-5deg);
        box-shadow: 0 0 15px rgba(0, 242, 255, 0.3);
    }

    .module-content-area {
        position: relative;
        z-index: 2;
        flex-grow: 1;
        min-width: 0;
    }

    .module-title {
        font-family: 'Inter', sans-serif;
        font-weight: 1000;
        font-size: 1.3rem;
        text-transform: uppercase;
        letter-spacing: -0.01em;
        color: #0f172a;
        line-height: 1.1;
        margin-bottom: 4px;
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .module-subtitle {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--site-slate);
        white-space: nowrap;
    }

    .node-tag {
        position: absolute;
        top: 0.6rem;
        right: 0.6rem;
        font-size: 7px;
        font-weight: 900;
        color: #cbd5e1;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    #login-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: #0f172a;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .login-card {
        background: #ffffff;
        width: 100%;
        max-width: 440px;
        padding: 2.5rem;
        border-radius: 4px;
        box-shadow: 12px 12px 0px var(--site-slate);
        border: 2px solid #0f172a;
    }

    .login-input {
        width: 100%;
        padding: 12px;
        margin-bottom: 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 4px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 1px;
    }

    .public-notice-box {
        background: #f8fafc;
        border: 1px dashed #cbd5e1;
        padding: 1.25rem;
        margin-top: 2rem;
        border-radius: 4px;
    }