:root {
     --sp-white: #ffffff;
     --sp-dark: #1f2937;
     --sp-green: #07ab4e;
     --sp-lgreen: #83d5a7;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Source Sans', system-ui, sans-serif;
     color: var(--sp-dark);
     background-color: #f9fafb;
 }

 .font-kelson {
     font-family: 'Kelson Sans', system-ui, sans-serif;
 }

 .nav-active {
     color: var(--sp-green) !important;
     border-bottom: 2px solid var(--sp-green);
 }

 .page {
     display: none;
     scroll-margin-top: 4em;
     scroll-snap-margin-top: 4em;
 }

 .page.active {
     display: block;
     animation: fadeIn 0.45s ease-in-out;
 }

 .mobile-menu {
     display: none;
 }

 .mobile-menu.open {
     display: block;
 }

 .soft-card {
     background: rgba(255, 255, 255, 0.92);
     border: 1px solid rgba(229, 231, 235, 0.9);
     box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }