/* Base styles and variables */
 :root {
     --primary-bg: #0F0F0F;
     /* A deep, rich black */
     --secondary-bg: #1A1A1A;
     /* A dark charcoal for cards */
     --accent-gold: #FFD700;
     /* Richer gold */
     --accent-orange: #FF8C00;
     /* Dark orange, subtle secondary accent */
     --text-light: #E0E0E0;
     --text-medium: #A0A0A0;
 }

 body {
     font-family: 'Inter', sans-serif;
     background-color: var(--primary-bg);
     color: var(--text-light);
     min-height: 100vh;
     overflow-x: hidden;
     line-height: 1.6;
 }

 html {
     scroll-behavior: smooth;
 }

 /* Gradient and Animation for Hero Section */
 @keyframes glowing-gradient {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }

 .hero-gradient {
     background: linear-gradient(270deg, var(--secondary-bg), var(--primary-bg), var(--secondary-bg), var(--primary-bg));
     background-size: 800% 800%;
     animation: glowing-gradient 20s ease infinite;
 }

 /* Fade-in Animation for Sections */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

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

 .fade-in-up {
     animation: fadeInUp 0.8s ease-out forwards;
 }

 /* Typing Animation */
 @keyframes typing {
     from {
         width: 0;
     }

     to {
         width: 100%;
     }
 }

 @keyframes blink-caret {

     from,
     to {
         border-color: transparent
     }

     50% {
         border-color: var(--accent-gold);
     }
 }

 .typing-effect {
     overflow: hidden;
     border-right: 0.15em solid var(--accent-gold);
     white-space: nowrap;
     font-family: 'Inter', monospace;
     display: inline-block;
     vertical-align: top;
     animation:
         typing 3.5s steps(30, end) forwards,
         blink-caret .75s step-end infinite;
     width: 0;
 }

 /* Custom Styles for Components */
 .card-hover-glow {
     transition: all 0.3s ease-in-out;
     box-shadow: 0 0 0px rgba(255, 215, 0, 0);
 }

 .card-hover-glow:hover {
     box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
     transform: translateY(-5px) scale(1.02);
 }

 .card-hover-glow:hover h3,
 .card-hover-glow:hover i,
 .card-hover-glow:hover p {
     color: var(--accent-gold);
 }