html {
    scroll-behavior: smooth;
}

/* Tailwind utility fallbacks (highlight visibility) */
.bg-slate-50 {
    background-color: #f8fafc;
    color: #0a1a2f;
}

.text-orange {
    color: #f97316;
}

.text-navy {
    color: #0a1a2f;
}

/* Navbar button */
.nav-btn {
    padding: 0.2rem 0;
    font-size: 0.95rem;
    color: white;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}

.nav-btn::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 3px;
    background: #f97316;
    transform: scaleX(0);
    opacity: 0;
    box-shadow: 0 0 18px rgba(249, 115, 22, 0.9);
    transition: all 0.35s ease;
    border-radius: 9999px;
}

.nav-btn:hover,
.nav-btn:focus-visible {
    color: #f97316;
}

.nav-btn:hover::after,
.nav-btn:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
    box-shadow: 0 0 28px rgba(249, 115, 22, 1);
}

/* Repo stat cards */
.repo-stat {
    background: rgba(10, 26, 47, 0.7);
    border: 1px solid #f97316;
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 0 24px rgba(249, 115, 22, 0.25);
}

.repo-stat h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #22d3ee;
}

.repo-stat p {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Repo card hover */
.repo-card {
    transition: all 0.35s ease;
}

.repo-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 26px rgba(249, 115, 22, 0.45);
}

/* Repo buttons */
.repo-btn {
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    border: 1px solid #f97316;
    color: #f97316;
    font-size: 0.85rem;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.repo-btn:hover,
.repo-btn:focus-visible {
    background: #f97316;
    box-shadow: 0 0 16px rgba(249, 115, 22, 0.7);
    color: #fff;
    transform: scale(1.06);
}

/* Social button */
.social-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(249, 115, 22, 0.6);
    transition: all 0.3s ease;
}

.social-btn:hover,
.social-btn:active,
.social-btn:focus,
.social-btn:focus-visible,
.social-btn.is-active {
    background: rgba(249, 115, 22, 0.15);
    box-shadow: 0 0 18px rgba(249, 115, 22, 0.7);
    color: #f97316;
}

.repo-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 26px rgba(249, 115, 22, 0.45);
}

/* Section title underline effect (always on) */
.section-title {
    position: relative;
    display: inline-block;
    padding-bottom: 0.5rem;
    transition: transform 0.3s ease;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 60%;
    height: 3px;
    background: #f97316;
    transform: translateX(-50%) scaleX(1.15);
    opacity: 1;
    box-shadow: 0 0 28px rgba(249, 115, 22, 1);
    border-radius: 9999px;
}

.section-title:hover {
    transform: translateY(-4px) scale(1.05);
}

/* Navbar outline grow */
#navInner {
    border: 1px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    border-color: #f97316;
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.7);
}

#navInner:hover {
    border-color: #f97316;
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.7);
    transform: scale(1.02);
}

/* Project cards */
.project-card {
    border: 1px solid rgba(249, 115, 22, 0.6);
    border-radius: 0.75rem;
    background: rgba(10, 26, 47, 0.7);
    transition: all 0.35s ease;
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 28px rgba(249, 115, 22, 0.45);
}

.project-demo {
    border: 1px solid rgba(249, 115, 22, 0.7);
    color: #f97316;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.project-demo:hover,
.project-demo:focus-visible {
    background: #f97316;
    box-shadow: 0 0 16px rgba(249, 115, 22, 0.7);
    color: #fff;
    transform: scale(1.06);
}

.project-btn-show {
    border: 1px solid rgba(249, 115, 22, 0.7);
    color: #f97316;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}