/* Developer credit — last strip at the very bottom of every public page */
.dev-credit {
    --dev-credit-bg: #0a0a0a;
    --dev-credit-border: rgba(255, 255, 255, 0.08);
    --dev-credit-muted: #8a8a8a;
    --dev-credit-text: #fff;
    --dev-credit-accent: #f06f16;
    --dev-credit-accent-soft: rgba(240, 111, 22, 0.35);
    --dev-credit-duration: 350ms;
    --dev-credit-ease: cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;
    align-self: stretch;
    background: var(--dev-credit-bg);
    border-top: 1px solid var(--dev-credit-border);
    padding: 1.25rem 1rem;
    text-align: center;
    font-family: var(--font-text, 'Montserrat'), 'Segoe UI', system-ui, sans-serif;
}

/* Thin accent glow centred on the top border */
.dev-credit::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    width: min(260px, 60%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--dev-credit-accent), transparent);
    opacity: 0.7;
}

.dev-credit__text {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem 0.6rem;
    margin: 0;
    color: var(--dev-credit-muted);
    line-height: 1.4;
}

.dev-credit__icon {
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--dev-credit-accent);
}

.dev-credit__label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.dev-credit__link {
    position: relative;
    padding-bottom: 2px;
    font-family: var(--font-display, 'Oswald'), 'Segoe UI', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--dev-credit-text);
    text-decoration: none;
    border-bottom: 1px solid var(--dev-credit-accent-soft);
    transition: color var(--dev-credit-duration) var(--dev-credit-ease);
}

/* Solid accent line that sweeps in over the soft underline */
.dev-credit__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--dev-credit-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dev-credit-duration) var(--dev-credit-ease);
}

.dev-credit__link:hover,
.dev-credit__link:focus-visible {
    color: var(--dev-credit-accent);
}

.dev-credit__link:hover::after,
.dev-credit__link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

.dev-credit__link:focus-visible {
    outline: 1px dashed var(--dev-credit-accent);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .dev-credit__link,
    .dev-credit__link::after {
        transition: none;
    }
}