:root {
    --jf-hero-bg-start: #0d1b2a;
    --jf-hero-bg-end: #1b263b;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 4rem;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-rendering: optimizeLegibility;
}

.hero {
    background: linear-gradient(135deg, var(--jf-hero-bg-start) 0%, var(--jf-hero-bg-end) 100%);
    color: #f8f9fa;
}

.hero h1 {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.hero .lead {
    color: #e9ecef;
    font-weight: 400;
    opacity: 1;
}

.hero .text-info-emphasis {
    color: #ffb703 !important;
    letter-spacing: 0.12em;
    font-weight: 700 !important;
    font-size: 0.95rem;
}

.profile-img {
    max-width: 240px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.15);
}

a {
    text-underline-offset: 0.15em;
}

main :focus-visible,
.navbar :focus-visible,
footer :focus-visible {
    outline: 3px solid #ffb703;
    outline-offset: 2px;
    border-radius: 2px;
}

section {
    scroll-margin-top: 4rem;
}