html {scroll-behavior:smooth;}
* {margin:0;padding:0;box-sizing:border-box;font-family:"Segoe UI",Arial,sans-serif;}

body {
    background:#0d1117;
    color:#c9d1d9;
}

/* Header */
header {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
    background:#0a0f14;
    color:white;
}

header h1 {
    font-size:2.4rem;
    margin:0;
}

header h2 {
    font-size:1.1rem;
    font-weight:300;
    color:#d0d7de;
    margin-top:8px;
}

/* Navbar */
nav {
    background:#0a0f14;
    display:flex;
    justify-content:center;
    gap:32px;
    padding:14px 0;
    position:sticky;
    top:0;
    z-index:100;
    border-bottom:1px solid #21262d;
}

nav a {
    color:#c9d1d9;
    text-decoration:none;
    font-weight:500;
    font-size:0.95rem;
}

nav a:hover {
    color:#58a6ff;
}

/* Layout */
.container {
    width:90%;
    max-width:900px;
    margin:36px auto 40px auto;
}

/* Sections */
section {
    margin-bottom:52px;
    background:#161b22;
    padding:26px 32px 30px 32px;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.6);
    scroll-margin-top:140px;

    opacity:0;
    transform:translateY(12px);
    animation:fadeUp 0.5s ease-out forwards;
}

/* Staggered animation delays */
section:nth-of-type(1) {animation-delay:0.05s;}
section:nth-of-type(2) {animation-delay:0.12s;}
section:nth-of-type(3) {animation-delay:0.19s;}
section:nth-of-type(4) {animation-delay:0.26s;}
section:nth-of-type(5) {animation-delay:0.33s;}

/* Section separator effect */
section + section {
    margin-top:32px;
    border-top:1px solid #30363d;
}

/* Headings */
h2 {
    font-size:1.4rem;
    color:#58a6ff;
    margin-bottom:16px;
}

h3 {
    margin-top:18px;
    font-size:1.1rem;
    color:#79c0ff;
}

h4 {
    margin-top:16px;
    font-size:1rem;
    color:#c9d1d9;
}

/* Lists & bullets */
ul {
    list-style:none;
    margin-left:0;
    margin-top:8px;
    padding-left:0;
}

ul li {
    position:relative;
    padding-left:18px;
    margin-bottom:6px;
    color:#c9d1d9;
}

ul li::before {
    content:"";
    position:absolute;
    left:4px;
    top:8px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#58a6ff;
}

/* Certifications grid */
.cert-grid {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:32px;
    margin-top:8px;
}

.cert-card {
    background:#161b22;
    padding:16px;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.6);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.cert-card:hover {
    transform:translateY(-4px);
    box-shadow:0 6px 16px rgba(0,0,0,0.8);
}

.cert-card img {
    width:150px;
    height:auto;
}

/* Footer */
footer {
    background:#0a0f14;
    color:#c9d1d9;
    text-align:center;
    padding:18px 0;
    border-top:1px solid #21262d;
}

footer a {color:#58a6ff;text-decoration:none;}
footer a:hover {text-decoration:underline;}

/* Back to top button */
#backToTop {
    position:fixed;
    bottom:24px;
    right:24px;
    width:40px;
    height:40px;
    border-radius:999px;
    border:none;
    background:#21262d;
    color:#f0f6fc;
    font-size:20px;
    cursor:pointer;
    box-shadow:0 4px 10px rgba(0,0,0,0.7);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

#backToTop.show {
    opacity:1;
    pointer-events:auto;
}

#backToTop:hover {
    background:#30363d;
    transform:translateY(-2px);
}

/* Animations */
@keyframes fadeUp {
    from {
        opacity:0;
        transform:translateY(14px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

/* Responsive tweaks */
@media (max-width:600px) {
    nav {
        flex-wrap:wrap;
        gap:16px;
        padding:10px 8px;
    }

    section {
        padding:22px 18px 24px 18px;
    }
}