/* Dark-first, sleek base. Easy to customize later. */

:root{
    --bg: #0b0f14;
    --surface: #0f1620;
    --surface-2: #111b27;
    --text: #e6edf3;
    --muted: #9aa7b2;
    --accent: #6ee7ff;   /* icy cyan */
    --accent-2: #a78bfa; /* subtle violet */
    --border: rgba(255,255,255,.10);
    --shadow: 0 12px 30px rgba(0,0,0,.45);
}

html, body { height: 100%; }

body{
    background:
        radial-gradient(1200px 800px at 20% -10%, rgba(110,231,255,.10), transparent 55%),
        radial-gradient(900px 700px at 90% 10%, rgba(167,139,250,.10), transparent 60%),
        var(--bg);
    color: var(--text);
}

.letterspace{ letter-spacing: .02em; }

/* Header / footer */
.site-header .navbar{
    background: rgba(15, 22, 32, 0.55);
    backdrop-filter: blur(10px);
}

.site-footer{
    background: rgba(15, 22, 32, 0.35);
}

.border-top, .border-bottom{
    border-color: var(--border) !important;
}

/* Glassy card */
.card-glass{
    background: linear-gradient(180deg, rgba(17, 27, 39, 0.75), rgba(15, 22, 32, 0.55));
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 1rem;
}

/* Nav active underline */
.navbar .nav-link{
    color: rgba(230,237,243,.80);
}

.navbar .nav-link:hover{
    color: rgba(230,237,243,1);
}

.navbar .nav-link.active{
    color: var(--text);
    position: relative;
}

.navbar .nav-link.active::after{
    content:"";
    display:block;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 2px;
    margin-top: .35rem;
    opacity: .9;
}