:root {
     --primary-color: #3F51B5;
     --secondary-color: #FF4081;
     --background-color: #FFFFFF;
     --text-color: #333333;
     --card-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 body {
     font-family: 'Roboto', Arial, sans-serif;
     line-height: 1.6;
     color: var(--text-color);
     background-color: #F5F5F5;
}
 header {
     background-color: var(--primary-color);
     color: white;
     padding: 20px;
     text-align: center;
     box-shadow: var(--card-shadow);
}
 .header-content nav {
     margin-top: 15px;
}
 .nav-link {
     color: white;
     text-decoration: none;
     margin: 0 10px;
     font-weight: 500;
     transition: color 0.3s ease;
}
 #hero {
     background-color: var(--background-color);
     text-align: center;
     padding: 50px 20px;
}
 .cta-buttons {
     margin-top: 20px;
}
 .btn {
     display: inline-block;
     padding: 12px 24px;
     margin: 0 10px;
     text-decoration: none;
     border-radius: 4px;
     transition: all 0.3s ease;
}
 .btn.primary {
     background-color: var(--primary-color);
     color: white;
}
 .btn.secondary {
     border: 2px solid var(--primary-color);
     color: var(--primary-color);
}
 .grid-section, #resources, #community {
     padding: 40px 20px;
     text-align: center;
}
 .feature-grid, .resource-grid, .community-stats {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     margin-top: 30px;
}
 .feature-card, .resource-card, .stat-card {
     background-color: white;
     border-radius: 8px;
     padding: 25px;
     box-shadow: var(--card-shadow);
     transition: transform 0.3s ease;
}
 .feature-card:hover, .resource-card:hover {
     transform: translateY(-10px);
}
 .resource-meta {
     display: flex;
     justify-content: space-between;
     margin-top: 15px;
     font-size: 0.9em;
     color: #666;
}
 footer {
     background-color: var(--primary-color);
     color: white;
     text-align: center;
     padding: 20px;
}
 .footer-links a {
     color: white;
     text-decoration: none;
     margin: 0 10px;
}
 @keyframes float {
     0% {
         transform: translateY(0px);
    }
     50% {
         transform: translateY(-15px);
    }
     100% {
         transform: translateY(0px);
    }
}
 @keyframes pulse {
     0% {
         transform: scale(1);
    }
     50% {
         transform: scale(1.05);
    }
     100% {
         transform: scale(1);
    }
}
 @keyframes slideIn {
     from {
         opacity: 0;
         transform: translateY(20px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
 .svg-illustration {
     max-width: 300px;
     animation: float 4s ease-in-out infinite;
}
 .feature-card {
     animation: slideIn 0.6s ease-out;
     opacity: 0;
     animation-fill-mode: forwards;
}
 .feature-card:nth-child(1) {
     animation-delay: 0.2s;
}
 .feature-card:nth-child(2) {
     animation-delay: 0.4s;
}
 .feature-card:nth-child(3) {
     animation-delay: 0.6s;
}
 .feature-card:nth-child(4) {
     animation-delay: 0.8s;
}
 .cta-buttons .btn {
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
 .cta-buttons .btn:hover {
     transform: scale(1.05);
     box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
 .resource-card {
     position: relative;
     overflow: hidden;
}
 .resource-card::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: linear-gradient( 115deg, transparent 0%, var(--primary-color) 50%, transparent 100% );
     transform: rotate(-45deg);
     opacity: 0;
     transition: opacity 0.5s;
}
 .resource-card:hover::before {
     opacity: 0.1;
}