:root {
            --primary-color: #2563eb;
            --primary-hover: #1d4ed8;
            --secondary-color: #64748b;
            --accent-color: #f59e0b;
            --success-color: #10b981;
            --bg-light: #f8fafc;
            --bg-white: #ffffff;
            --text-dark: #1e293b;
            --text-muted: #64748b;
            --border-color: #e2e8f0;
            --taal-color: #0ea5e9;
            --taal-bg: #e0f2fe;
            --vak-color: #8b5cf6;
            --vak-bg: #ede9fe;
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
            --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
        }

        * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
        body { color: var(--text-dark); background-color: var(--bg-light); line-height: 1.6; }

        .navbar { background: var(--bg-white); box-shadow: var(--shadow-sm); padding: 0.75rem 0; }
        .navbar-brand { font-weight: 700; font-size: 1.5rem; color: var(--primary-color) !important; }
        .nav-link { font-weight: 500; color: var(--text-dark) !important; padding: 0.5rem 1rem !important; transition: color 0.2s ease; }
        .nav-link:hover, .nav-link.active { color: var(--primary-color) !important; }

        .hero-section {
            background: linear-gradient(135deg, var(--primary-color) 0%, #1e40af 100%);
            color: white; padding: 5rem 0 4rem; position: relative; overflow: hidden;
        }
        .hero-section::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            opacity: 0.5;
        }
        .hero-content { position: relative; z-index: 1; }
        .hero-title { font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.2; }
        .hero-subtitle { font-size: 1.25rem; font-weight: 400; opacity: 0.95; margin-bottom: 2rem; max-width: 600px; }
        .hero-badge {
            display: inline-flex; align-items: center; gap: 0.5rem;
            background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px);
            padding: 0.5rem 1rem; border-radius: 50px; font-size: 0.875rem; font-weight: 500; margin-bottom: 1.5rem;
        }
        .hero-stats { display: flex; gap: 2.5rem; margin-top: 2.5rem; }
        .hero-stat { text-align: center; }
        .hero-stat-number { font-size: 2rem; font-weight: 700; display: block; }
        .hero-stat-label { font-size: 0.875rem; opacity: 0.85; }

        .filter-section {
            background: var(--bg-white); padding: 1.5rem 0; border-bottom: 1px solid var(--border-color);
            position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm);
        }
        .filter-btn {
            padding: 0.5rem 1.25rem; border-radius: 50px; font-weight: 500; font-size: 0.875rem;
            transition: all 0.2s ease; border: 2px solid var(--border-color);
            background: var(--bg-white); color: var(--text-dark);
        }
        .filter-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
        .filter-btn.active { background: var(--primary-color); border-color: var(--primary-color); color: white; }
        .filter-btn[data-filter="taal"].active { background: var(--taal-color); border-color: var(--taal-color); }
        .filter-btn[data-filter="vak"].active { background: var(--vak-color); border-color: var(--vak-color); }

        .courses-section { padding: 3rem 0 5rem; }
        .section-title { font-size: 2rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.5rem; }
        .section-subtitle { color: var(--text-muted); font-size: 1rem; margin-bottom: 2rem; }

        .course-card {
            background: var(--bg-white); border-radius: 16px; overflow: hidden;
            box-shadow: var(--shadow-sm); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            height: 100%; display: flex; flex-direction: column; border: 1px solid var(--border-color);
        }
        .course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
        .course-image-wrapper { position: relative; padding-top: 56.25%; overflow: hidden; background: var(--bg-light); }
        .course-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
        .course-card:hover .course-image { transform: scale(1.05); }
        .course-badge {
            position: absolute; top: 1rem; left: 1rem; padding: 0.375rem 0.875rem;
            border-radius: 50px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em;
        }
        .course-badge.taal { background: var(--taal-bg); color: var(--taal-color); }
        .course-badge.vak { background: var(--vak-bg); color: var(--vak-color); }
        .course-content { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
        .course-title { font-size: 1.125rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.75rem; line-height: 1.4; }
        .course-description { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.25rem; flex: 1; }
        .course-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; font-size: 0.8125rem; color: var(--text-muted); }
        .course-meta-item { display: flex; align-items: center; gap: 0.375rem; }
        .course-meta-item i { color: var(--primary-color); }
        .course-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--border-color); }
        .btn-course { padding: 0.625rem 1.25rem; border-radius: 8px; font-weight: 600; font-size: 0.875rem; transition: all 0.2s ease; }
        .btn-course-primary { background: var(--primary-color); border: none; color: white; }
        .btn-course-primary:hover { background: var(--primary-hover); color: white; transform: translateX(2px); }

        .contact-section { background: var(--bg-white); padding: 4rem 0; border-top: 1px solid var(--border-color); }
        .contact-card { background: var(--bg-light); border-radius: 16px; padding: 2rem; height: 100%; border: 1px solid var(--border-color); text-align: center; }
        .contact-icon { width: 56px; height: 56px; background: var(--primary-color); color: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 1.25rem; }
        .contact-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; }
        .contact-text { color: var(--text-muted); font-size: 0.9375rem; margin-bottom: 0; }
        .contact-link { color: var(--primary-color); text-decoration: none; font-weight: 500; }
        .contact-link:hover { text-decoration: underline; }

        .footer { background: var(--text-dark); color: white; padding: 3rem 0 2rem; }
        .footer-logo { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; display: inline-block; color: white; text-decoration: none; }
        .footer-text { color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; line-height: 1.7; }
        .footer-title { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.9); }
        .footer-links { list-style: none; padding: 0; margin: 0; }
        .footer-links li { margin-bottom: 0.5rem; }
        .footer-links a { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 0.875rem; transition: color 0.2s ease; }
        .footer-links a:hover { color: white; }
        .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 2rem; padding-top: 2rem; text-align: center; color: rgba(255, 255, 255, 0.5); font-size: 0.8125rem; }

        .skip-link { position: absolute; top: -40px; left: 0; background: var(--primary-color); color: white; padding: 8px; text-decoration: none; z-index: 1000; }
        .skip-link:focus { top: 0; }
        .course-card.hidden { display: none; }

        @media (max-width: 991.98px) {
            .hero-title { font-size: 2.25rem; }
            .hero-stats { gap: 1.5rem; }
            .hero-stat-number { font-size: 1.5rem; }
        }
        @media (max-width: 767.98px) {
            .hero-section { padding: 3rem 0 2.5rem; }
            .hero-title { font-size: 1.875rem; }
            .hero-subtitle { font-size: 1rem; }
            .hero-stats { flex-wrap: wrap; gap: 1rem; justify-content: center; }
            .section-title { font-size: 1.5rem; }
        }