/* Modern visual refresh — layered on top of the existing template */

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

:root {
   --accent: #2DD4BF;
   --accent-dark: #0D9488;
   --ink: #1E293B;
   --muted: #64748B;
   --surface: #FFFFFF;
   --surface-alt: #F8FAFC;
   --border: #E2E8F0;
   --shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.18);
}

body {
   font-family: 'Inter', 'opensans-regular', sans-serif;
   color: var(--ink);
   background-color: var(--surface-alt);
}

h1, h2, h3, h4, h5, h6 {
   font-family: 'Poppins', 'opensans-bold', sans-serif;
   color: var(--ink);
   letter-spacing: -0.02em;
}

a { color: var(--accent-dark); }
a:hover, a:focus { color: var(--ink); }

/* Navigation */
#nav-wrap {
   background-color: rgba(30, 41, 59, 0.92) !important;
   backdrop-filter: blur(8px);
}

ul#nav li a {
   font-family: 'Inter', sans-serif;
   font-weight: 500;
   letter-spacing: 0.02em;
   transition: color 0.2s ease, opacity 0.2s ease;
}

ul#nav li.current a,
ul#nav li a:hover {
   color: var(--accent) !important;
   opacity: 1;
}

/* Banner / hero */
.banner-text h1 {
   font-weight: 700;
   text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.banner-text h2 {
   color: var(--accent) !important;
   font-weight: 600;
}

.banner .social a {
   transition: transform 0.2s ease, color 0.2s ease;
}

.banner .social a:hover {
   transform: translateY(-3px);
   color: var(--accent) !important;
}

.scrolldown a i {
   color: var(--accent) !important;
   transition: transform 0.3s ease;
}

.scrolldown a:hover i {
   transform: translateY(6px);
}

/* About */
#about {
   background-color: var(--surface);
}

#about h2,
#about p,
#about p span {
   color: var(--ink) !important;
}

#about .main-col p a {
   color: var(--accent-dark);
}

.profile-pic {
   border-radius: 50%;
   box-shadow: var(--shadow);
   border: 4px solid var(--surface);
}

.libutton {
   background-color: var(--accent-dark) !important;
   box-shadow: 0 8px 20px -8px rgba(13, 148, 136, 0.6);
   transition: background-color 0.2s ease, transform 0.2s ease;
}

.libutton:hover {
   background-color: var(--accent) !important;
   transform: translateY(-2px);
}

/* Resume / Work cards */
#resume {
   background-color: var(--surface-alt);
}

#resume .row.item,
#resume .row.item > .twelve {
   background-color: var(--surface);
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 24px;
   margin-bottom: 18px;
   box-shadow: 0 4px 14px -8px rgba(15, 23, 42, 0.12);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#resume .row.item:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow);
}

#resume h3 {
   color: var(--ink);
   font-size: 19px;
}

#resume .info {
   color: var(--muted);
   font-weight: 500;
}

#resume .info .date {
   color: var(--accent-dark);
   font-style: normal;
   font-weight: 600;
}

#resume ul li {
   color: var(--muted);
   line-height: 1.6;
}

#resume h1 span {
   border-bottom: 3px solid var(--accent);
   padding-bottom: 4px;
}

/* Footer */
footer {
   background-color: var(--ink) !important;
}

footer .social-links a,
footer .copyright a,
footer h6 {
   color: #CBD5E1 !important;
   transition: color 0.2s ease;
}

footer .social-links a:hover,
footer .copyright a:hover {
   color: var(--accent) !important;
}

#go-top a {
   background-color: var(--accent-dark) !important;
}

#go-top a:hover {
   background-color: var(--accent) !important;
}