:root {
    --sg-primary: #2563eb;
    --sg-primary-2: #0ea5e9;
    --sg-dark: #0f172a;
    --sg-muted: #64748b;
    --sg-soft: #eff6ff;
    --sg-border: rgba(148, 163, 184, .28);
    --sg-shadow: 0 24px 80px rgba(15, 23, 42, .12);
}

.sg-brand-card {
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.36), transparent 28%),
        linear-gradient(135deg, #0f172a 0%, #1d4ed8 55%, #0ea5e9 100%);
    color: white;
    box-shadow: 0 24px 70px rgba(37, 99, 235, .24);
    border: 1px solid rgba(255,255,255,.16);
}

.sg-logo-mark {
    width: 62px;
    height: 62px;
    border-radius: 21px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), transparent 28%),
        linear-gradient(135deg, var(--sg-primary), var(--sg-primary-2));
    color: white;
    font-weight: 950;
    letter-spacing: -.08em;
    box-shadow: 0 18px 35px rgba(37, 99, 235, .28);
}

.sg-brand-title {
    color: inherit;
    font-weight: 950;
    letter-spacing: -.04em;
}

.sg-brand-subtitle {
    color: rgba(255,255,255,.78);
    font-weight: 650;
}

.sg-brand-pill {
    border-radius: 999px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.24);
    color: white;
    font-weight: 850;
}