@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@600;700&family=Playfair+Display:wght@600;700&display=swap');

:root {
    --bg:           #0a0a0a;
    --bg-card:      #111111;
    --text:         #c8cdd8;
    --text-muted:   #606672;
    --accent:       #5fd3c4;
    --accent-hover: #86e8dc;
    --strong:       #eef5f4;
    --border:       #1c1c1c;
    --separator:    #2a2a2a;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: "Inter", Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.75;
}

/* ── Navigation (sticky) ── */
.nav-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 2px solid var(--accent);
    padding: 28px 0 0;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.nav-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.6rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--strong);
    letter-spacing: 0.02em;
}

.nav-links {
    font-size: 0.82rem;
    padding-bottom: 20px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    margin: 0 14px;
    transition: color 0.18s;
}

.nav-links a.active {
    color: var(--accent);
    font-weight: 600;
}

.nav-links a:hover {
    color: var(--accent-hover);
    text-decoration: none;
}

.nav-separator {
    color: var(--separator);
}

/* ── Main content ── */
main {
    width: 90%;
    max-width: 780px;
    margin: 52px auto 90px;
    font-size: 1.05rem;
}

/* ── Hero (homepage) ── */
.hero {
    padding: 36px 0 32px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 36px;
}

.hero-role {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 14px;
}

.hero-desc {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: var(--strong);
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
    max-width: 560px;
    letter-spacing: 0.01em;
}

/* ── Cards (left border style) ── */
.card {
    border-left: 2px solid var(--accent);
    padding: 4px 0 4px 24px;
    margin-bottom: 28px;
}

.card h3 {
    margin-top: 0;
}

/* ── Custom bullet dots ── */
main ul {
    list-style: none;
    padding-left: 0;
}

main ul li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 14px;
}

main ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 5px;
    height: 5px;
    background: var(--accent);
    border-radius: 50%;
}

/* ── Headings ── */
h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin-top: 52px;
    margin-bottom: 20px;
    color: var(--accent);
    letter-spacing: -0.2px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 4px;
    color: var(--strong);
}

/* ── Links ── */
a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.18s;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* ── Text ── */
strong {
    color: var(--strong);
    font-weight: 600;
}

em {
    color: var(--text-muted);
    font-style: normal;
    font-size: 0.9rem;
}

p {
    margin-top: 6px;
    margin-bottom: 0;
}