:root {
    --sipduct-primary: #0d4d8c;
    --sipduct-primary-dark: #093662;
    --sipduct-accent: #1b9aaa;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1f2933;
}

.bg-primary { background-color: var(--sipduct-primary) !important; }
.text-primary { color: var(--sipduct-primary) !important; }
.btn-primary { background-color: var(--sipduct-primary); border-color: var(--sipduct-primary); }
.btn-primary:hover { background-color: var(--sipduct-primary-dark); border-color: var(--sipduct-primary-dark); }

.sipduct-navbar {
    background: linear-gradient(90deg, var(--sipduct-primary-dark), var(--sipduct-primary));
}
.sipduct-navbar .nav-link { color: rgba(255,255,255,.85); }
.sipduct-navbar .nav-link:hover { color: #fff; }

.hero {
    background: linear-gradient(120deg, var(--sipduct-primary-dark), var(--sipduct-primary) 55%, var(--sipduct-accent));
}
.hero-icon { font-size: 11rem; color: rgba(255,255,255,.85); }

.feature-card {
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(13,77,140,.06);
    transition: transform .15s ease, box-shadow .15s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(13,77,140,.12); }
.feature-icon { font-size: 2.25rem; color: var(--sipduct-accent); }

.service-item { text-align: center; padding: 1rem; }
.service-item i { font-size: 2rem; color: var(--sipduct-primary); }
.service-item h6 { margin-top: .75rem; font-weight: 600; }

.stat-card {
    background: #f4f8fc;
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
}
.stat-num { display: block; font-size: 1.6rem; font-weight: 700; color: var(--sipduct-primary); }
.stat-label { color: #6b7785; font-size: .85rem; }

.sipduct-footer {
    background: var(--sipduct-primary-dark);
    color: #fff;
}

.auth-card {
    max-width: 420px;
    margin: 4rem auto;
    border: none;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(13,77,140,.12);
}

.tenant-card {
    border: 1px solid #eef1f4;
    border-radius: 14px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.tenant-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(13,77,140,.12); }