/* Base styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0f172a; /* slate-900 */
    color: #cbd5e1; /* slate-300 */
}

/* Custom gradient for headings */
.gradient-text {
    background: linear-gradient(to right, #34d399, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* Navigation styles */
.nav-scrolled {
    background-color: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Underline effect for nav links */
.nav-link-underline {
    position: relative;
    transition: color 0.3s ease;
}
.nav-link-underline::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #34d399; /* emerald-400 */
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}
.nav-link-underline:hover {
    color: #ffffff;
}
.nav-link-underline:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Card styles */
.phase-card {
    border: 1px solid #1e293b; /* slate-800 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.phase-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: #34d399;
}