/* =========================================
   ET CERTIFICACIONES - Enterprise Design System
   ========================================= */

    /* =========================================
   1. CSS VARIABLES & DESIGN TOKENS
   ========================================= */
    :root {
        /* Primary Colors */
        --color-primary: #FFD700;
        /* Safety Yellow - CTAs, Highlights */
        --color-primary-hover: #F59E0B;
        /* Amber - Hover state */
        --color-primary-dark: #E0AD04;
        /* Original Gold - Fallback */

        /* Surface Colors */
        --color-surface-dark: #0A0A0B;
        /* Near Black - Hero backgrounds */
        --color-surface-card: #141416;
        /* Card backgrounds */
        --color-surface-light: #F8F9FA;
        /* Light sections */
        --color-surface-white: #FFFFFF;

        /* Text Colors */
        --color-text-primary: #FFFFFF;
        --color-text-secondary: rgba(255, 255, 255, 0.7);
        --color-text-muted: rgba(255, 255, 255, 0.5);
        --color-text-dark: #1A1A1A;
        --color-text-dark-secondary: #4A4A4A;

        /* Accent & Feedback */
        --color-accent: #F59E0B;
        /* Industrial Orange */
        --color-success: #10B981;
        --color-warning: #F59E0B;
        --color-error: #EF4444;

        /* Glassmorphism */
        --glass-bg: rgba(255, 255, 255, 0.05);
        --glass-border: rgba(255, 255, 255, 0.1);
        --glass-blur: blur(20px);

        /* Spacing Scale */
        --space-xs: 0.25rem;
        --space-sm: 0.5rem;
        --space-md: 1rem;
        --space-lg: 1.5rem;
        --space-xl: 2rem;
        --space-2xl: 3rem;
        --space-3xl: 4rem;
        --space-4xl: 6rem;

        /* Typography Scale */
        --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        --font-family-body: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;

        --font-size-xs: 0.75rem;
        --font-size-sm: 0.875rem;
        --font-size-base: 1rem;
        --font-size-lg: 1.125rem;
        --font-size-xl: 1.25rem;
        --font-size-2xl: 1.5rem;
        --font-size-3xl: 2rem;
        --font-size-4xl: 2.5rem;
        --font-size-5xl: 3.5rem;
        --font-size-6xl: 4.5rem;

        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-extrabold: 800;

        --line-height-tight: 1.1;
        --line-height-snug: 1.25;
        --line-height-normal: 1.5;
        --line-height-relaxed: 1.75;

        /* Border Radius */
        --radius-sm: 0.25rem;
        --radius-md: 0.5rem;
        --radius-lg: 1rem;
        --radius-xl: 1.5rem;
        --radius-full: 9999px;

        /* Shadows */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
        --shadow-glow: 0 0 40px rgba(255, 215, 0, 0.3);

        /* Transitions */
        --transition-fast: 150ms ease;
        --transition-base: 250ms ease;
        --transition-slow: 350ms ease;

        /* Container */
        --container-max: 1280px;
        --container-padding: 1.5rem;
    }

    /* =========================================
   2. RESET & BASE STYLES
   ========================================= */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        font-family: var(--font-family-body);
        font-size: var(--font-size-base);
        line-height: var(--line-height-normal);
        color: var(--color-text-dark);
        background-color: var(--color-surface-white);
        overflow-x: hidden;
    }

    img,
    video {
        max-width: 100%;
        height: auto;
        display: block;
    }

    a {
        text-decoration: none;
        color: inherit;
        transition: color var(--transition-fast);
    }

    ul,
    ol {
        list-style: none;
    }

    button {
        cursor: pointer;
        border: none;
        background: none;
        font: inherit;
    }

    /* =========================================
   3. TYPOGRAPHY
   ========================================= */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--font-family-heading);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-tight);
    }

    .heading-1 {
        font-size: clamp(2.5rem, 5vw, var(--font-size-6xl));
        font-weight: var(--font-weight-extrabold);
        letter-spacing: -0.02em;
    }

    .heading-2 {
        font-size: clamp(2rem, 4vw, var(--font-size-4xl));
        font-weight: var(--font-weight-bold);
    }

    .heading-3 {
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-semibold);
    }

    .text-gradient {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* =========================================
   4. LAYOUT UTILITIES
   ========================================= */
    .container {
        width: 100%;
        max-width: var(--container-max);
        margin: 0 auto;
        padding: 0 var(--container-padding);
    }

    .section {
        padding: var(--space-4xl) 0;
    }

    .section--dark {
        background-color: var(--color-surface-dark);
        color: var(--color-text-primary);
    }

    .section--light {
        background-color: var(--color-surface-light);
    }

    .grid {
        display: grid;
        gap: var(--space-lg);
    }

    .grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }

    @media (max-width: 768px) {

        .grid--2,
        .grid--3,
        .grid--4 {
            grid-template-columns: 1fr;
        }
    }

    .flex {
        display: flex;
    }

    .flex--center {
        align-items: center;
        justify-content: center;
    }

    .flex--between {
        align-items: center;
        justify-content: space-between;
    }

    /* =========================================
   5. COMPONENTS - BUTTONS
   ========================================= */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-sm);
        padding: var(--space-md) var(--space-xl);
        font-family: var(--font-family-heading);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-radius: var(--radius-md);
        transition: all var(--transition-base);
    }

    .btn--primary {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
        color: var(--color-surface-dark);
        box-shadow: var(--shadow-md), var(--shadow-glow);
    }

    .btn--primary:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg), 0 0 60px rgba(255, 215, 0, 0.4);
    }

    .btn--outline {
        background: transparent;
        color: var(--color-text-primary);
        border: 2px solid var(--glass-border);
    }

    .btn--outline:hover {
        background: var(--glass-bg);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    /* =========================================
   6. COMPONENTS - NAVIGATION
   ========================================= */
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        padding: var(--space-md) 0;
        background: rgba(10, 10, 11, 0.8);
        backdrop-filter: var(--glass-blur);
        border-bottom: 1px solid var(--glass-border);
        transition: all var(--transition-base);
    }

    .navbar__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .navbar__logo {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        font-family: var(--font-family-heading);
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-primary);
    }

    .navbar__logo-icon {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: var(--font-weight-extrabold);
        color: var(--color-surface-dark);
    }

    .navbar__menu {
        display: flex;
        align-items: center;
        gap: var(--space-xl);
    }

    .navbar__link {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary);
        transition: color var(--transition-fast);
    }

    .navbar__link:hover,
    .navbar__link--active {
        color: var(--color-primary);
    }

    .navbar__toggle {
        display: none;
        flex-direction: column;
        gap: 5px;
        padding: var(--space-sm);
    }

    .navbar__toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--color-text-primary);
        transition: all var(--transition-fast);
    }

    @media (max-width: 768px) {
        .navbar__menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            flex-direction: column;
            padding: var(--space-lg);
            background: var(--color-surface-dark);
            border-bottom: 1px solid var(--glass-border);
        }

        .navbar__menu.active {
            display: flex;
        }

        .navbar__toggle {
            display: flex;
        }
    }

    /* =========================================
   7. HERO SECTION
   ========================================= */
    .hero {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        background: var(--color-surface-dark);
        overflow: hidden;
    }

    .hero__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .hero__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.4;
    }

    .hero__bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,
                rgba(10, 10, 11, 0.95) 0%,
                rgba(10, 10, 11, 0.7) 50%,
                rgba(10, 10, 11, 0.9) 100%);
    }

    .hero__content {
        position: relative;
        z-index: 1;
        max-width: 800px;
        padding: var(--space-4xl) 0;
    }

    .hero__badge {
        display: inline-flex;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
        margin-bottom: var(--space-lg);
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-full);
        font-size: var(--font-size-sm);
        color: var(--color-primary);
    }

    .hero__badge::before {
        content: '';
        width: 8px;
        height: 8px;
        background: var(--color-primary);
        border-radius: 50%;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: 0.5;
            transform: scale(1.2);
        }
    }

    .hero__title {
        margin-bottom: var(--space-lg);
        color: var(--color-text-primary);
    }

    .hero__subtitle {
        font-size: var(--font-size-xl);
        color: var(--color-text-secondary);
        margin-bottom: var(--space-2xl);
        max-width: 600px;
    }

    .hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-md);
    }

    .hero__stats {
        display: flex;
        gap: var(--space-3xl);
        margin-top: var(--space-4xl);
        padding-top: var(--space-2xl);
        border-top: 1px solid var(--glass-border);
    }

    .hero__stat {
        text-align: left;
    }

    .hero__stat-value {
        font-family: var(--font-family-heading);
        font-size: var(--font-size-4xl);
        font-weight: var(--font-weight-extrabold);
        color: var(--color-primary);
    }

    .hero__stat-label {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* Floating Elements */
    .hero__float {
        position: absolute;
        right: 10%;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
    }

    .hero__float-card {
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-xl);
        padding: var(--space-xl);
        animation: float 6s ease-in-out infinite;
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-20px);
        }
    }

    /* =========================================
   8. COURSE CARDS
   ========================================= */
    .courses {
        padding: var(--space-4xl) 0;
    }

    .courses__header {
        text-align: center;
        margin-bottom: var(--space-3xl);
    }

    .courses__header .heading-2 {
        margin-bottom: var(--space-md);
    }

    .courses__header p {
        color: var(--color-text-dark-secondary);
        max-width: 600px;
        margin: 0 auto;
    }

    .course-card {
        position: relative;
        background: var(--color-surface-white);
        border-radius: var(--radius-xl);
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.05);
        transition: all var(--transition-base);
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .course-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-xl);
    }

    .course-card__image {
        position: relative;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: var(--color-surface-light);
    }

    .course-card__image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        transition: transform var(--transition-slow);
        background: var(--color-surface-light);
    }

    .course-card:hover .course-card__image img {
        transform: scale(1.05);
    }

    .course-card__badge {
        position: absolute;
        top: var(--space-md);
        left: var(--space-md);
        padding: var(--space-xs) var(--space-md);
        background: var(--color-primary);
        color: var(--color-surface-dark);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        border-radius: var(--radius-full);
        z-index: 2;
    }

    .course-card__badge--new {
        background: var(--color-success);
        color: white;
    }

    .course-card__badge--popular {
        background: var(--color-primary);
    }

    /* Category tag in top-right */
    .course-card__category {
        position: absolute;
        top: var(--space-md);
        right: var(--space-md);
        padding: var(--space-xs) var(--space-sm);
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        color: white;
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
        border-radius: var(--radius-sm);
        z-index: 2;
    }

    .course-card__content {
        padding: var(--space-xl);
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .course-card__title {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        margin-bottom: var(--space-sm);
        color: var(--color-text-dark);
        line-height: var(--line-height-snug);
    }

    .course-card__description {
        font-size: var(--font-size-sm);
        color: var(--color-text-dark-secondary);
        line-height: var(--line-height-relaxed);
        margin-bottom: var(--space-lg);
        flex: 1;
    }

    .course-card__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-md);
        padding-top: var(--space-md);
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        margin-top: auto;
    }

    .course-card__meta-item {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        font-size: var(--font-size-xs);
        color: var(--color-text-dark-secondary);
    }

    .course-card__meta-item svg {
        width: 16px;
        height: 16px;
        opacity: 0.6;
        flex-shrink: 0;
    }

    /* =========================================
   9. FEATURES / WHY US SECTION
   ========================================= */
    .features {
        background: var(--color-surface-dark);
        color: var(--color-text-primary);
        padding: var(--space-4xl) 0;
    }

    .features__header {
        text-align: center;
        margin-bottom: var(--space-3xl);
    }

    .features__header .heading-2 {
        margin-bottom: var(--space-md);
    }

    .feature-card {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-xl);
        padding: var(--space-2xl);
        text-align: center;
        transition: all var(--transition-base);
    }

    .feature-card:hover {
        background: rgba(255, 255, 255, 0.08);
        transform: translateY(-4px);
    }

    .feature-card__icon {
        width: 64px;
        height: 64px;
        margin: 0 auto var(--space-lg);
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .feature-card__icon svg {
        width: 32px;
        height: 32px;
        color: var(--color-surface-dark);
    }

    .feature-card__title {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        margin-bottom: var(--space-sm);
    }

    .feature-card__description {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
    }

    /* =========================================
   10. INSTRUCTORS
   ========================================= */
    .instructors {
        padding: var(--space-4xl) 0;
    }

    .instructors__header {
        text-align: center;
        margin-bottom: var(--space-3xl);
    }

    .instructor-card {
        text-align: center;
    }

    .instructor-card__image {
        width: 180px;
        height: 180px;
        margin: 0 auto var(--space-lg);
        border-radius: 50%;
        overflow: hidden;
        border: 4px solid var(--color-primary);
        position: relative;
    }

    .instructor-card__image::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        box-shadow: inset 0 0 0 4px rgba(255, 215, 0, 0.3);
    }

    .instructor-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .instructor-card__name {
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-semibold);
        margin-bottom: var(--space-xs);
    }

    .instructor-card__role {
        font-size: var(--font-size-sm);
        color: var(--color-text-dark-secondary);
    }

    /* =========================================
   11. FOOTER
   ========================================= */
    .footer {
        background: #FFFFFF;
        color: var(--color-text-dark);
        padding: var(--space-4xl) 0 var(--space-xl);
        border-top: 1px solid #E5E7EB;
    }

    .footer__grid {
        display: grid;
        grid-template-columns: 2fr repeat(3, 1fr);
        gap: var(--space-3xl);
        margin-bottom: var(--space-3xl);
    }

    @media (max-width: 768px) {
        .footer__grid {
            grid-template-columns: 1fr;
            gap: var(--space-2xl);
        }
    }

    .footer__brand {
        max-width: 350px;
    }

    @media (max-width: 768px) {
        .footer__brand {
            max-width: 100%;
            width: 100%;
            margin: 0 auto;
        }
    }

    .footer__logo {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        font-family: var(--font-family-heading);
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--space-md);
    }

    .footer__logo img {
        height: 80px;
        width: auto;
    }

    .footer__description {
        font-size: var(--font-size-sm);
        color: #6B7280;
        margin-bottom: var(--space-lg);
        line-height: 1.7;
    }

    .footer__social {
        display: flex;
        gap: var(--space-sm);
    }

    .footer__social a {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #F3F4F6;
        border: 1px solid #E5E7EB;
        border-radius: var(--radius-md);
        color: #6B7280;
        transition: all var(--transition-fast);
    }

    .footer__social a:hover {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-text-dark);
    }

    .footer__column h4 {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: var(--space-lg);
        color: #1A1A1A;
    }

    .footer__links {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }

    .footer__links a {
        font-size: var(--font-size-sm);
        color: #6B7280;
        transition: color var(--transition-fast);
    }

    .footer__links a:hover {
        color: #B8860B;
    }

    .footer__bottom {
        padding-top: var(--space-xl);
        border-top: 1px solid #E5E7EB;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-md);
    }

    .footer__copyright {
        font-size: var(--font-size-sm);
        color: #9CA3AF;
    }

    /* =========================================
   12. ANIMATIONS & EFFECTS
   ========================================= */
    .fade-in {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Scroll-triggered animations */
    [data-animate] {
        opacity: 0;
        transform: translateY(40px);
    }

    [data-animate].animated {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    /* =========================================
   13. RESPONSIVE ADJUSTMENTS
   ========================================= */
    @media (max-width: 1024px) {
        .hero__float {
            display: none;
        }

        .hero__stats {
            flex-wrap: wrap;
            gap: var(--space-xl);
        }
    }

    @media (max-width: 768px) {
        :root {
            --container-padding: 1rem;
        }

        .section {
            padding: var(--space-3xl) 0;
        }

        .hero__actions {
            flex-direction: column;
        }

        .hero__stats {
            flex-direction: column;
            gap: var(--space-lg);
        }

        .footer__bottom {
            flex-direction: column;
            text-align: center;
        }
    }

    /* =========================================
   14. TABLET BREAKPOINTS
   ========================================= */
    @media (max-width: 1024px) {
        .grid--4 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 900px) {
        .grid--3 {
            grid-template-columns: repeat(2, 1fr);
        }

        .footer__grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* =========================================
   15. BLOG CARD VARIATIONS
   ========================================= */
    .course-card--blog .course-card__image {
        aspect-ratio: 16 / 9;
    }

    .course-card--blog .course-card__image img {
        object-fit: cover;
    }

    .course-card--blog .course-card__content {
        padding: var(--space-lg);
    }

    .course-card--blog .course-card__title {
        font-size: var(--font-size-base);
    }

    /* =========================================
   16. TOPBAR
   ========================================= */
    .topbar {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
        color: var(--color-surface-dark);
        padding: var(--space-xs) 0;
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
    }

    .topbar__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .topbar__left,
    .topbar__right {
        display: flex;
        align-items: center;
        gap: var(--space-lg);
    }

    .topbar__item {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
    }

    .topbar__item svg {
        width: 14px;
        height: 14px;
    }

    .topbar__item a {
        color: var(--color-surface-dark);
        font-weight: var(--font-weight-semibold);
        transition: opacity var(--transition-fast);
    }

    .topbar__item a:hover {
        opacity: 0.8;
    }

    @media (max-width: 768px) {
        .topbar {
            display: none;
        }
    }

    /* =========================================
   17. NAVBAR LOGO FIX FOR DARK BACKGROUND
   ========================================= */
    .navbar__logo-img {
        filter: brightness(0) invert(1);
        transition: filter var(--transition-fast);
    }

    /* When scrolled or on light sections, could remove filter */
    .navbar--scrolled .navbar__logo-img {
        filter: none;
    }

    /* Alternative: Add a light background behind logo */
    .navbar__logo-wrapper {
        background: rgba(255, 255, 255, 0.1);
        padding: var(--space-xs) var(--space-sm);
        border-radius: var(--radius-md);
    }

    /* Hero adjustment for topbar */
    .hero {
        padding-top: 40px;
        /* Account for topbar height */
    }

    /* =========================================
   18. FIXED LOGO & TOPBAR STYLES
   ========================================= */

    /* Remove the filter, add white background instead */
    .navbar__logo-img {
        filter: none !important;
        height: 55px !important;
        width: auto;
        background: white;
        padding: 8px 12px;
        border-radius: 8px;
    }

    /* Make topbar more prominent */
    .topbar {
        background: var(--color-surface-dark) !important;
        color: var(--color-text-secondary);
        padding: var(--space-sm) 0;
        font-size: var(--font-size-sm);
        border-bottom: 2px solid var(--color-primary);
    }

    .topbar__item a {
        color: var(--color-primary) !important;
    }

    .topbar__item svg {
        color: var(--color-primary);
    }

    /* Adjust navbar position for topbar */
    .navbar {
        top: 42px;
    }

    /* Adjust hero for both topbar and navbar */
    .hero {
        padding-top: 120px !important;
    }

    /* =========================================
   19. ENTERPRISE HEADER REDESIGN
   ========================================= */

    /* Light/White Navbar */
    .navbar {
        background: white !important;
        backdrop-filter: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        top: 42px;
    }

    .navbar__link {
        color: var(--color-text-dark) !important;
        font-weight: var(--font-weight-medium);
    }

    .navbar__link:hover,
    .navbar__link--active {
        color: var(--color-primary) !important;
    }

    .navbar__toggle span {
        background: var(--color-text-dark);
    }

    /* Logo - restore natural, bigger */
    .navbar__logo-img {
        filter: none !important;
        height: 50px !important;
        width: auto;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    /* Enterprise Topbar */
    .topbar {
        background: #1A1A1A !important;
        color: rgba(255, 255, 255, 0.8);
        padding: var(--space-sm) 0;
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
        border-bottom: none !important;
    }

    .topbar__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .topbar__left {
        display: flex;
        align-items: center;
        gap: var(--space-xl);
    }

    .topbar__right {
        display: flex;
        align-items: center;
        gap: var(--space-lg);
    }

    .topbar__item {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        color: rgba(255, 255, 255, 0.7);
    }

    .topbar__item svg {
        width: 14px;
        height: 14px;
        color: var(--color-primary);
        stroke: var(--color-primary);
    }

    .topbar__item a {
        color: white !important;
        font-weight: var(--font-weight-medium);
        transition: color var(--transition-fast);
    }

    .topbar__item a:hover {
        color: var(--color-primary) !important;
    }

    /* Social icons in topbar */
    .topbar__social {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
    }

    .topbar__social a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        color: rgba(255, 255, 255, 0.6);
        transition: color var(--transition-fast);
    }

    .topbar__social a:hover {
        color: var(--color-primary);
    }

    .topbar__social svg {
        width: 14px;
        height: 14px;
    }

    /* Divider between items */
    .topbar__divider {
        width: 1px;
        height: 14px;
        background: rgba(255, 255, 255, 0.2);
        margin: 0 var(--space-sm);
    }

    /* Mobile navbar adjustments */
    @media (max-width: 768px) {
        .navbar__menu {
            background: white;
            border-top: 1px solid rgba(0, 0, 0, 0.08);
        }

        .navbar__menu .navbar__link {
            color: var(--color-text-dark) !important;
        }
    }

    /* =========================================
   20. BIGGER LOGO
   ========================================= */
    .navbar__logo-img {
        height: 70px !important;
        width: auto;
    }

    /* Adjust navbar padding for bigger logo */
    .navbar {
        padding: var(--space-sm) 0;
    }

    /* =========================================
   21. HEADER STICKY FIX & COLOR ADJUSTMENTS
   ========================================= */

    /* Fix sticky header position - topbar should be fixed too */
    .topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1001;
    }

    .navbar {
        position: fixed;
        top: 38px !important;
        /* Height of topbar */
        left: 0;
        right: 0;
        z-index: 1000;
    }

    /* Hero padding to account for both topbar and navbar */
    .hero {
        padding-top: 160px !important;
    }

    /* Darker gold/amber color for better contrast on white */
    .text-gradient {
        background: linear-gradient(135deg, #D4A500 0%, #B8860B 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }

    /* Darker buttons with WHITE text */
    .btn--primary {
        background: linear-gradient(135deg, #C9960A 0%, #A67B00 100%) !important;
        color: white !important;
        box-shadow: 0 4px 15px rgba(201, 150, 10, 0.3);
    }

    .btn--primary:hover {
        background: linear-gradient(135deg, #B8860B 0%, #8B6914 100%) !important;
        box-shadow: 0 6px 20px rgba(201, 150, 10, 0.4);
    }

    /* Navbar link hover - darker gold */
    .navbar__link:hover,
    .navbar__link--active {
        color: #B8860B !important;
    }

    /* Topbar link colors - darker gold */
    .topbar__item a:hover {
        color: #D4A500 !important;
    }

    .topbar__social a:hover {
        color: #D4A500 !important;
    }

    .topbar__social a:hover svg {
        stroke: #D4A500;
    }

    /* Course card badge - darker gold */
    .course-card__badge--popular {
        background: #C9960A !important;
        color: white !important;
    }

    /* Hero badge - darker gold text */
    .hero__badge {
        color: #C9960A !important;
    }

    /* Stats - darker gold */
    .hero__stat-value {
        color: #D4A500 !important;
    }

    /* Feature card icon - darker gradient */
    .feature-card__icon {
        background: linear-gradient(135deg, #D4A500 0%, #B8860B 100%) !important;
    }

    /* =========================================
   22. VIBRANT GRADIENT - MORE EYE-CATCHING
   ========================================= */

    /* More vibrant button gradient - gold to orange */
    .btn--primary {
        background: linear-gradient(135deg, #F5A623 0%, #E68A00 50%, #D97706 100%) !important;
        color: white !important;
        box-shadow: 0 4px 20px rgba(245, 166, 35, 0.4);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .btn--primary:hover {
        background: linear-gradient(135deg, #FFBA42 0%, #F5A623 50%, #E68A00 100%) !important;
        box-shadow: 0 6px 25px rgba(245, 166, 35, 0.5);
        transform: translateY(-2px);
    }

    /* Vibrant text gradient */
    .text-gradient {
        background: linear-gradient(135deg, #F5A623 0%, #E68A00 50%, #D97706 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }

    /* Vibrant feature icons */
    .feature-card__icon {
        background: linear-gradient(135deg, #F5A623 0%, #E68A00 50%, #D97706 100%) !important;
    }

    /* Vibrant stats */
    .hero__stat-value {
        color: #F5A623 !important;
    }

    /* Vibrant badge */
    .hero__badge {
        color: #F5A623 !important;
        border-color: rgba(245, 166, 35, 0.3) !important;
    }

    /* Vibrant links hover */
    .navbar__link:hover,
    .navbar__link--active {
        color: #E68A00 !important;
    }

    /* Course badges */
    .course-card__badge--popular {
        background: linear-gradient(135deg, #F5A623 0%, #E68A00 100%) !important;
        color: white !important;
    }

    /* Instructor card border */
    .instructor-card__image {
        border-color: #F5A623 !important;
    }

    /* =========================================
   23. TOPBAR NOT STICKY - ONLY NAVBAR STICKY
   ========================================= */

    /* Topbar - static, not sticky */
    .topbar {
        position: relative !important;
        top: auto !important;
    }

    /* Navbar - sticky at top when scrolling */
    .navbar {
        position: fixed !important;
        top: 0 !important;
    }

    /* Hero padding adjustment */
    .hero {
        padding-top: 140px !important;
    }

    /* =========================================
   24. BRAND-ALIGNED GRADIENT (Original Yellow)
   ========================================= */

    /* Using brand yellow #FFCC29 with darker shade */
    .btn--primary {
        background: linear-gradient(135deg, #FFCC29 0%, #E0AD04 50%, #C99B00 100%) !important;
        color: #1A1A1A !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 20px rgba(255, 204, 41, 0.35);
        text-shadow: none !important;
    }

    .btn--primary:hover {
        background: linear-gradient(135deg, #FFD54F 0%, #FFCC29 50%, #E0AD04 100%) !important;
        box-shadow: 0 6px 25px rgba(255, 204, 41, 0.5);
    }

    /* Text gradient with brand colors */
    .text-gradient {
        background: linear-gradient(135deg, #FFCC29 0%, #E0AD04 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }

    /* Feature icons with brand gradient */
    .feature-card__icon {
        background: linear-gradient(135deg, #FFCC29 0%, #E0AD04 100%) !important;
    }

    /* Stats with brand color */
    .hero__stat-value {
        color: #FFCC29 !important;
    }

    /* Badge with brand color */
    .hero__badge {
        color: #FFCC29 !important;
    }

    /* Course badges */
    .course-card__badge--popular {
        background: linear-gradient(135deg, #FFCC29 0%, #E0AD04 100%) !important;
        color: #1A1A1A !important;
    }

    /* Instructor card border */
    .instructor-card__image {
        border-color: #FFCC29 !important;
    }

    /* Links hover */
    .navbar__link:hover,
    .navbar__link--active {
        color: #E0AD04 !important;
    }

    /* =========================================
   25. FINAL FIX - TOPBAR/NAVBAR OVERLAP
   ========================================= */

    /* Topbar - completely static, flows normally */
    .topbar {
        position: static !important;
        z-index: auto !important;
    }

    /* Navbar - sticky, starts below topbar content */
    .navbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }

    /* No extra hero padding needed since topbar flows naturally */
    .hero {
        padding-top: 80px !important;
    }

    /* When navbar becomes sticky (scrolled), it covers from top */
    body {
        scroll-padding-top: 80px;
    }

    /* =========================================
   26. ANIMATED HERO TEXT (TYPEWRITER EFFECT)
   ========================================= */

    /* Container for rotating words */
    .hero__rotating-text {
        display: inline-block;
        position: relative;
        min-width: 300px;
    }

    .hero__rotating-word {
        display: inline-block;
        opacity: 0;
        position: absolute;
        left: 0;
        animation: rotateWord 9s infinite;
    }

    .hero__rotating-word:nth-child(1) {
        animation-delay: 0s;
    }

    .hero__rotating-word:nth-child(2) {
        animation-delay: 3s;
    }

    .hero__rotating-word:nth-child(3) {
        animation-delay: 6s;
    }

    @keyframes rotateWord {

        0%,
        2% {
            opacity: 0;
            transform: translateY(20px);
        }

        5%,
        30% {
            opacity: 1;
            transform: translateY(0);
        }

        33%,
        100% {
            opacity: 0;
            transform: translateY(-20px);
        }
    }

    /* Cursor blink effect */
    .hero__cursor {
        display: inline-block;
        width: 3px;
        height: 1em;
        background: var(--color-primary);
        margin-left: 4px;
        animation: blink 1s infinite;
        vertical-align: text-bottom;
    }

    @keyframes blink {

        0%,
        50% {
            opacity: 1;
        }

        51%,
        100% {
            opacity: 0;
        }
    }

    /* Static fallback for first word */
    .hero__rotating-text .hero__rotating-word:first-child {
        position: relative;
    }

    /* =========================================
   27. IMPROVED ROTATING TEXT STYLE
   ========================================= */

    /* Smoother animation with underline effect */
    .hero__rotating-text {
        display: inline-block;
        position: relative;
        padding-bottom: 8px;
    }

    .hero__rotating-text::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #FFCC29, #E0AD04);
        border-radius: 2px;
    }

    .hero__rotating-word {
        display: inline-block;
        opacity: 0;
        position: absolute;
        left: 0;
        white-space: nowrap;
        animation: rotateWordSmooth 12s infinite;
    }

    .hero__rotating-word:nth-child(1) {
        animation-delay: 0s;
    }

    .hero__rotating-word:nth-child(2) {
        animation-delay: 4s;
    }

    .hero__rotating-word:nth-child(3) {
        animation-delay: 8s;
    }

    @keyframes rotateWordSmooth {

        0%,
        3% {
            opacity: 0;
            transform: translateY(30px) rotateX(-20deg);
            filter: blur(4px);
        }

        8%,
        28% {
            opacity: 1;
            transform: translateY(0) rotateX(0);
            filter: blur(0);
        }

        33%,
        100% {
            opacity: 0;
            transform: translateY(-30px) rotateX(20deg);
            filter: blur(4px);
        }
    }

    /* First word visible by default */
    .hero__rotating-text .hero__rotating-word:first-child {
        position: relative;
    }

    /* Remove old cursor style */
    .hero__cursor {
        display: none !important;
    }

    /* =========================================
   28. ENTERPRISE HERO - TWO COLUMN LAYOUT
   ========================================= */

    /* Hero with flex layout for text + image */
    .hero__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3xl);
        min-height: calc(100vh - 120px);
    }

    .hero__content {
        flex: 1;
        max-width: 600px;
        padding: 0 !important;
    }

    .hero__image {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .hero__image img {
        max-width: 100%;
        height: auto;
        border-radius: var(--radius-xl);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    }

    /* Glassmorphism card around image */
    .hero__image-wrapper {
        position: relative;
        padding: var(--space-lg);
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-xl);
    }

    .hero__image-wrapper::before {
        content: '';
        position: absolute;
        top: -20px;
        right: -20px;
        width: 100px;
        height: 100px;
        background: linear-gradient(135deg, #FFCC29, #E0AD04);
        border-radius: 50%;
        opacity: 0.3;
        filter: blur(40px);
    }

    /* Stats below content, not full width */
    .hero__stats {
        margin-top: var(--space-2xl) !important;
        padding-top: var(--space-xl) !important;
    }

    /* Responsive */
    @media (max-width: 1024px) {
        .hero__inner {
            flex-direction: column;
            text-align: center;
        }

        .hero__content {
            max-width: 100%;
        }

        .hero__image {
            justify-content: center;
            margin-top: var(--space-2xl);
        }

        .hero__actions {
            justify-content: center;
        }

        .hero__stats {
            justify-content: center;
        }
    }

    /* =========================================
   29. ENTERPRISE HERO IMAGE EFFECTS
   ========================================= */

    /* Floating particles/bubbles around image */
    .hero__image-wrapper {
        position: relative;
    }

    .hero__image-wrapper::before,
    .hero__image-wrapper::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(255, 204, 41, 0.3), rgba(224, 173, 4, 0.1));
        animation: float 6s ease-in-out infinite;
    }

    .hero__image-wrapper::before {
        width: 120px;
        height: 120px;
        top: -30px;
        right: -30px;
        filter: blur(30px);
        animation-delay: 0s;
    }

    .hero__image-wrapper::after {
        width: 80px;
        height: 80px;
        bottom: -20px;
        left: -20px;
        filter: blur(20px);
        animation-delay: 3s;
    }

    /* Extra floating elements */
    .hero__bubble {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.1);
        animation: float 8s ease-in-out infinite;
    }

    .hero__bubble--1 {
        width: 60px;
        height: 60px;
        top: 20%;
        right: -40px;
        animation-delay: 1s;
    }

    .hero__bubble--2 {
        width: 40px;
        height: 40px;
        bottom: 30%;
        left: -30px;
        animation-delay: 2s;
    }

    .hero__bubble--3 {
        width: 30px;
        height: 30px;
        top: 60%;
        right: -20px;
        animation-delay: 4s;
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0) scale(1);
        }

        50% {
            transform: translateY(-15px) scale(1.05);
        }
    }

    /* Smaller hero title */
    .hero__title {
        font-size: clamp(2rem, 4vw, 3rem) !important;
        line-height: 1.2 !important;
    }

    /* Badge with icon instead of emoji */
    .hero__badge {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
    }

    .hero__badge svg {
        width: 16px;
        height: 16px;
        color: inherit;
    }

    /* =========================================
   30. DARKER HERO BACKGROUND OVERLAY
   ========================================= */

    /* Dark overlay on hero background to improve contrast */
    .hero__bg::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        /* Increased darkness */
        backdrop-filter: contrast(0.8) brightness(0.8);
        /* Lower contrast of the image itself */
        z-index: 1;
    }

    .hero__bg img {
        /* Ensure image is behind overlay */
        z-index: 0;
    }

    /* =========================================
   31. LIGHTER HERO OVERLAY & STATS PADDING
   ========================================= */

    /* Reduce darkness - make background more visible */
    .hero__bg::after {
        background: rgba(0, 0, 0, 0.5) !important;
        /* Lighter overlay (was 0.7) */
        backdrop-filter: brightness(0.9) !important;
        /* Less darkening */
    }

    /* Add balanced padding below stats */
    .hero__stats {
        padding-bottom: var(--space-3xl) !important;
        margin-bottom: var(--space-2xl) !important;
    }

    /* Hero section bottom padding */
    .hero {
        padding-bottom: var(--space-4xl) !important;
    }

    /* Ensure proper spacing between hero and next section */
    .hero+.section {
        margin-top: 0;
    }

    /* =========================================
   32. REDUCED HERO PADDING (HALF)
   ========================================= */

    .hero__stats {
        padding-bottom: var(--space-xl) !important;
        margin-bottom: var(--space-lg) !important;
    }

    .hero {
        padding-bottom: var(--space-2xl) !important;
    }

    /* =========================================
   33. BLOG CARDS VISIBILITY FIX
   ========================================= */

    /* Blog section background */
    .section--light {
        background: var(--color-surface-light) !important;
    }

    /* Blog cards - white background with shadow for contrast */
    .course-card--blog {
        background: white !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .course-card--blog:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18) !important;
    }

    /* Blog card text - dark for light background */
    .course-card--blog .course-card__title {
        color: var(--color-text-dark) !important;
        font-size: var(--font-size-lg) !important;
        font-weight: 600;
    }

    .course-card--blog .course-card__description {
        color: var(--color-text-secondary-dark) !important;
        font-size: var(--font-size-sm);
        line-height: 1.6;
    }

    /* Blog card image styling */
    .course-card--blog .course-card__image {
        aspect-ratio: 16 / 9 !important;
        overflow: hidden;
    }

    .course-card--blog .course-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover !important;
        transition: transform 0.4s ease;
    }

    .course-card--blog:hover .course-card__image img {
        transform: scale(1.05);
    }

    /* Blog card content padding */
    .course-card--blog .course-card__content {
        padding: var(--space-lg) !important;
    }

    /* Blog section header text */
    .section--light .courses__header h2 {
        color: var(--color-text-dark) !important;
    }

    .section--light .courses__header p {
        color: var(--color-text-secondary-dark) !important;
    }

    /* =========================================
   34. FIX BLOG CARDS VISIBILITY - ANIMATION
   ========================================= */

    /* Force blog cards to be visible */
    .section--light .grid--3 {
        opacity: 1 !important;
        transform: none !important;
    }

    .section--light .course-card--blog {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Ensure grid displays properly */
    .section--light .grid--3 article {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* Remove animation delay that may be hiding cards */
    [data-animate] {
        animation: none !important;
    }

    .section--light [data-animate] {
        opacity: 1 !important;
        transform: none !important;
    }

    /* =========================================
   35. FILTER TABS FOR SPECIALIZATIONS
   ========================================= */

    .filter-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
        justify-content: center;
        margin-bottom: var(--space-2xl);
        padding: var(--space-md) 0;
    }

    .filter-tab {
        padding: var(--space-sm) var(--space-lg);
        background: #FFFFFF;
        border: 2px solid #E5E7EB;
        border-radius: var(--radius-full);
        color: #4A4A4A;
        font-size: var(--font-size-sm);
        font-weight: 500;
        cursor: pointer;
        transition: all var(--transition-fast);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .filter-tab:hover {
        background: rgba(255, 204, 41, 0.15);
        border-color: #FFCC29;
        color: #1A1A1A;
    }

    .filter-tab--active {
        background: linear-gradient(135deg, #FFCC29 0%, #E0AD04 100%) !important;
        border-color: transparent !important;
        color: var(--color-text-dark) !important;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(255, 204, 41, 0.4);
    }

    /* Course card filter states */
    .course-card[data-category] {
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .course-card.filtered-out {
        display: none !important;
    }

    /* Ensure all cards visible by default */
    .course-card {
        opacity: 1 !important;
        visibility: visible !important;
    }


    /* =========================================
   GLOBAL FILTER TABS - ROOT LEVEL
   ========================================= */

    .filter-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
        justify-content: center;
        margin-bottom: var(--space-2xl);
        padding: var(--space-md) 0;
    }

    .filter-tab {
        padding: 0.75rem 1.5rem;
        background: #FFFFFF;
        border: 2px solid #D1D5DB;
        border-radius: 9999px;
        color: #374151;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .filter-tab:hover {
        background: #FEF3C7;
        border-color: #FFCC29;
        color: #1F2937;
    }

    .filter-tab--active {
        background: linear-gradient(135deg, #FFCC29 0%, #E0AD04 100%) !important;
        border-color: #E0AD04 !important;
        color: #1A1A1A !important;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(255, 204, 41, 0.4);
    }

    /* Course card filter states - global */
    .course-card[data-category] {
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .course-card.filtered-out {
        display: none !important;
    }

    /* =========================================
   INSTRUCTOR CARDS - OVAL STYLE
   ========================================= */

    .instructor-card {
        background: #FFFFFF;
        border-radius: 16px;
        padding: 2rem;
        text-align: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .instructor-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

    /* Oval image container */
    .instructor-card--oval .instructor-card__image {
        width: 180px;
        height: 240px;
        margin: 0 auto 1.5rem;
        border-radius: 50% / 40%;
        overflow: hidden;
        border: 4px solid #FFCC29;
        box-shadow: 0 8px 24px rgba(255, 204, 41, 0.3);
    }

    .instructor-card--oval .instructor-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        transition: transform 0.4s ease;
    }

    .instructor-card:hover .instructor-card__image img {
        transform: scale(1.05);
    }

    /* Instructor info text */
    .instructor-card__info {
        padding-top: 0.5rem;
    }

    .instructor-card__name {
        font-size: 1.25rem;
        font-weight: 700;
        color: #1A1A1A;
        margin-bottom: 0.5rem;
    }

    .instructor-card__role {
        font-size: 0.875rem;
        font-weight: 600;
        color: #FFCC29;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 1rem;
    }

    .instructor-card__description {
        font-size: 0.875rem;
        color: #6B7280;
        line-height: 1.6;
        margin: 0;
    }

    /* Instructors section background */
    .instructors {
        background: linear-gradient(180deg, #F8F9FA 0%, #FFFFFF 100%);
    }

    .instructors__header h2 {
        color: #1A1A1A;
    }

    .instructors__header p {
        color: #6B7280;
    }

    /* =========================================
   PAGE HERO - INTERNAL PAGES
   ========================================= */

    .page-hero {
        background: linear-gradient(135deg, #0A0A0B 0%, #1A1A1A 100%);
        padding: 120px 0 60px;
        text-align: center;
    }

    .page-hero .heading-1 {
        color: #FFFFFF;
        margin-bottom: 1rem;
    }

    .page-hero__subtitle {
        color: rgba(255, 255, 255, 0.7);
        font-size: 1.125rem;
        max-width: 600px;
        margin: 0 auto;
    }

    /* =========================================
   ABOUT SECTION
   ========================================= */

    .about-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
    }

    .about-content h2 {
        color: #1A1A1A;
        margin-bottom: 1.5rem;
    }

    .about-content p {
        color: #6B7280;
        line-height: 1.8;
        margin-bottom: 1rem;
    }

    .about-image img {
        width: 100%;
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    }

    @media (max-width: 768px) {
        .about-grid {
            grid-template-columns: 1fr;
            gap: 2rem;
        }
    }

    /* =========================================
   MISSION & VISION CARDS
   ========================================= */

    .mission-card {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 2.5rem;
        text-align: center;
    }

    .mission-card__icon {
        color: #FFCC29;
        margin-bottom: 1.5rem;
    }

    .mission-card .heading-3 {
        color: #FFFFFF;
        margin-bottom: 1rem;
    }

    .mission-card p {
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.7;
    }

    /* =========================================
   STATS GRID
   ========================================= */

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }

    .stat-card {
        background: #FFFFFF;
        border-radius: 16px;
        padding: 2rem;
        text-align: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .stat-card__number {
        display: block;
        font-size: 3rem;
        font-weight: 800;
        background: linear-gradient(135deg, #FFCC29 0%, #E0AD04 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 0.5rem;
    }

    .stat-card__label {
        color: #6B7280;
        font-size: 0.875rem;
        font-weight: 500;
    }

    @media (max-width: 768px) {
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* =========================================
   SERVICES GRID
   ========================================= */

    .services-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .service-card {
        background: #FFFFFF;
        border-radius: 20px;
        padding: 2.5rem;
        text-align: center;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
        border: 1px solid #E5E7EB;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
    }

    .service-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    }

    .service-card--featured {
        border: 2px solid #FFCC29;
        background: linear-gradient(180deg, rgba(255, 204, 41, 0.05) 0%, #FFFFFF 100%);
    }

    .service-card__badge {
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, #FFCC29 0%, #E0AD04 100%);
        color: #1A1A1A;
        padding: 0.5rem 1.5rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .service-card__icon {
        color: #FFCC29;
        margin-bottom: 1.5rem;
    }

    .service-card__title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1A1A1A;
        margin-bottom: 1rem;
    }

    .service-card__description {
        color: #6B7280;
        line-height: 1.7;
        margin-bottom: 1.5rem;
    }

    .service-card__features {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: left;
    }

    .service-card__features li {
        color: #4B5563;
        padding: 0.5rem 0;
        padding-left: 1.5rem;
        position: relative;
    }

    .service-card__features li::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: #FFCC29;
        font-weight: 700;
    }

    @media (max-width: 1024px) {
        .services-grid {
            grid-template-columns: 1fr;
            max-width: 500px;
            margin: 0 auto;
        }
    }

    /* =========================================
   METHODOLOGY STEPS
   ========================================= */

    .methodology-steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        margin-top: 3rem;
    }

    .methodology-step {
        text-align: center;
        padding: 1.5rem;
    }

    .methodology-step__number {
        display: inline-block;
        font-size: 2.5rem;
        font-weight: 800;
        color: #FFCC29;
        margin-bottom: 1rem;
    }

    .methodology-step__title {
        color: #FFFFFF;
        font-size: 1.125rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
    }

    .methodology-step p {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.875rem;
        line-height: 1.6;
    }

    @media (max-width: 768px) {
        .methodology-steps {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* =========================================
   BLOG CARDS
   ========================================= */

    .blog-card {
        background: #FFFFFF;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .blog-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }

    .blog-card__image {
        position: relative;
        aspect-ratio: 16 / 10;
        overflow: hidden;
    }

    .blog-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .blog-card:hover .blog-card__image img {
        transform: scale(1.05);
    }

    .blog-card__category {
        position: absolute;
        top: 1rem;
        left: 1rem;
        background: #FFCC29;
        color: #1A1A1A;
        padding: 0.375rem 0.75rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .blog-card__content {
        padding: 1.5rem;
    }

    .blog-card__date {
        color: #9CA3AF;
        font-size: 0.75rem;
        display: block;
        margin-bottom: 0.75rem;
    }

    .blog-card__title {
        font-size: 1.125rem;
        font-weight: 700;
        color: #1A1A1A;
        margin-bottom: 0.75rem;
        line-height: 1.4;
    }

    .blog-card__excerpt {
        color: #6B7280;
        font-size: 0.875rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .blog-card__link {
        color: #FFCC29;
        font-weight: 600;
        font-size: 0.875rem;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .blog-card__link:hover {
        color: #E0AD04;
    }

    /* =========================================
   NEWSLETTER
   ========================================= */

    .newsletter {
        text-align: center;
        max-width: 600px;
        margin: 0 auto;
    }

    .newsletter .heading-2 {
        color: #FFFFFF;
        margin-bottom: 1rem;
    }

    .newsletter p {
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 2rem;
    }

    .newsletter__form {
        display: flex;
        gap: 1rem;
        max-width: 500px;
        margin: 0 auto;
    }

    .newsletter__input {
        flex: 1;
        padding: 1rem 1.5rem;
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 9999px;
        background: rgba(255, 255, 255, 0.1);
        color: #FFFFFF;
        font-size: 1rem;
    }

    .newsletter__input::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }

    .newsletter__input:focus {
        outline: none;
        border-color: #FFCC29;
    }

    @media (max-width: 480px) {
        .newsletter__form {
            flex-direction: column;
        }
    }

    /* =========================================
   CONTACT PAGE
   ========================================= */

    .contact-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 4rem;
    }

    .contact-form-wrapper h2 {
        color: #1A1A1A;
        margin-bottom: 2rem;
    }

    .contact-form {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .form-group label {
        color: #374151;
        font-weight: 500;
        font-size: 0.875rem;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.875rem 1rem;
        border: 2px solid #E5E7EB;
        border-radius: 12px;
        font-size: 1rem;
        transition: border-color 0.2s ease;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: #FFCC29;
    }

    .btn--full {
        width: 100%;
    }

    /* Contact Info */
    .contact-info {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .contact-info__card {
        background: #F9FAFB;
        border-radius: 16px;
        padding: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .contact-info__icon {
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, rgba(255, 204, 41, 0.15) 0%, rgba(255, 204, 41, 0.05) 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFCC29;
    }

    .contact-info__card h4 {
        color: #1A1A1A;
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .contact-info__card a,
    .contact-info__card p {
        color: #6B7280;
        font-size: 0.875rem;
        text-decoration: none;
    }

    .contact-info__card a:hover {
        color: #FFCC29;
    }

    .contact-info__card--whatsapp {
        background: linear-gradient(135deg, rgba(37, 211, 102, 0.1) 0%, rgba(37, 211, 102, 0.05) 100%);
        border: 1px solid rgba(37, 211, 102, 0.2);
    }

    .contact-info__card--whatsapp .contact-info__icon {
        background: #25D366;
        color: #FFFFFF;
    }

    .contact-info__note {
        color: #25D366 !important;
        font-weight: 500;
    }

    /* Contact Social */
    .contact-social {
        margin-top: 1rem;
        padding: 1.5rem;
        background: #F9FAFB;
        border-radius: 16px;
    }

    .contact-social h4 {
        color: #1A1A1A;
        margin-bottom: 1rem;
    }

    .contact-social__links {
        display: flex;
        gap: 1rem;
    }

    .contact-social__link {
        width: 48px;
        height: 48px;
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6B7280;
        transition: all 0.2s ease;
    }

    .contact-social__link:hover {
        background: #FFCC29;
        border-color: #FFCC29;
        color: #1A1A1A;
    }

    @media (max-width: 768px) {
        .contact-grid {
            grid-template-columns: 1fr;
            gap: 3rem;
        }
    }

    /* =========================================
   GRID 2 COLUMNS
   ========================================= */

    .grid--2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    @media (max-width: 768px) {
        .grid--2 {
            grid-template-columns: 1fr;
        }
    }

    /* =========================================
   COURSE CARD LINKS
   ========================================= */
    .course-card-link {
        text-decoration: none;
        color: inherit;
        display: block;
    }

    .course-card-link:hover .course-card {
        transform: translateY(-8px);
        box-shadow: var(--shadow-xl);
    }

    /* =========================================
   BREADCRUMBS
   ========================================= */
    .breadcrumb {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        margin-bottom: var(--space-lg);
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
    }

    .breadcrumb a {
        color: var(--color-text-secondary);
        transition: color var(--transition-fast);
    }

    .breadcrumb a:hover {
        color: var(--color-primary);
    }

    .breadcrumb span {
        color: var(--color-primary);
    }

    /* =========================================
   COURSE DETAIL PAGE
   ========================================= */
    .course-detail {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: var(--space-3xl);
        align-items: start;
    }

    @media (max-width: 968px) {
        .course-detail {
            grid-template-columns: 1fr;
        }
    }

    .course-detail__main {
        display: flex;
        flex-direction: column;
        gap: var(--space-2xl);
    }

    .course-detail__image {
        width: 100%;
        border-radius: var(--radius-xl);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
        background: var(--color-surface-light);
    }

    .course-detail__content {
        color: var(--color-text-dark);
    }

    .course-detail__content h2 {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--space-lg);
        color: var(--color-text-dark);
        position: relative;
        padding-bottom: var(--space-md);
    }

    .course-detail__content h2::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 60px;
        height: 4px;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
        border-radius: 2px;
    }

    .course-detail__content h3 {
        font-size: var(--font-size-lg);
        margin: var(--space-xl) 0 var(--space-md);
        color: var(--color-text-dark);
    }

    .course-detail__content p {
        font-size: var(--font-size-base);
        line-height: var(--line-height-relaxed);
        color: var(--color-text-dark-secondary);
        margin-bottom: var(--space-md);
    }

    .course-detail__content ul {
        list-style: none;
        padding: 0;
        margin: var(--space-md) 0;
    }

    .course-detail__content ul li {
        position: relative;
        padding-left: var(--space-xl);
        margin-bottom: var(--space-sm);
        font-size: var(--font-size-base);
        color: var(--color-text-dark-secondary);
        line-height: var(--line-height-relaxed);
    }

    .course-detail__content ul li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 10px;
        width: 8px;
        height: 8px;
        background: var(--color-primary);
        border-radius: 50%;
    }

    .course-detail__content ul li strong {
        color: var(--color-text-dark);
    }

    /* Sidebar Card */
    .course-detail__sidebar {
        position: sticky;
        top: 100px;
    }

    .course-detail__card {
        background: var(--color-surface-white);
        border-radius: var(--radius-xl);
        padding: var(--space-2xl);
        box-shadow: var(--shadow-lg);
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .course-detail__card h3 {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-lg);
        color: var(--color-text-dark);
        text-align: center;
    }

    .course-detail__info {
        list-style: none;
        padding: 0;
        margin: 0 0 var(--space-xl);
    }

    .course-detail__info li {
        display: flex;
        justify-content: space-between;
        padding: var(--space-md) 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        font-size: var(--font-size-sm);
        color: var(--color-text-dark-secondary);
    }

    .course-detail__info li:last-child {
        border-bottom: none;
    }

    .course-detail__info li strong {
        color: var(--color-text-dark);
    }

    .btn--block {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* Page Hero for Internal Pages */
    .page-hero {
        background: var(--color-surface-dark);
        padding: calc(80px + var(--space-3xl)) 0 var(--space-3xl);
        color: var(--color-text-primary);
    }

    .page-hero .heading-1 {
        margin-bottom: var(--space-md);
    }

    .page-hero__subtitle {
        font-size: var(--font-size-lg);
        color: var(--color-text-secondary);
        max-width: 600px;
    }

    /* =========================================
   BLOG POST DETAIL
   ========================================= */
    .blog-post {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: var(--space-3xl);
        align-items: start;
    }

    @media (max-width: 968px) {
        .blog-post {
            grid-template-columns: 1fr;
        }
    }

    .blog-post__main {
        display: flex;
        flex-direction: column;
        gap: var(--space-2xl);
    }

    .blog-post__image {
        width: 100%;
        border-radius: var(--radius-xl);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
    }

    .blog-post__image img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .blog-post__meta {
        display: flex;
        align-items: center;
        gap: var(--space-lg);
        padding-bottom: var(--space-lg);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        font-size: var(--font-size-sm);
        color: var(--color-text-dark-secondary);
    }

    .blog-post__meta-item {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
    }

    .blog-post__meta-item svg {
        width: 16px;
        height: 16px;
        opacity: 0.6;
    }

    .blog-post__content {
        color: var(--color-text-dark);
    }

    .blog-post__content h2 {
        font-size: var(--font-size-2xl);
        margin: var(--space-xl) 0 var(--space-md);
        color: var(--color-text-dark);
        position: relative;
    }

    .blog-post__content h3 {
        font-size: var(--font-size-lg);
        margin: var(--space-xl) 0 var(--space-md);
        color: var(--color-text-dark);
    }

    .blog-post__content p {
        font-size: var(--font-size-base);
        line-height: var(--line-height-relaxed);
        color: var(--color-text-dark-secondary);
        margin-bottom: var(--space-lg);
    }

    .blog-post__content ul,
    .blog-post__content ol {
        list-style: none;
        padding: 0;
        margin: var(--space-md) 0 var(--space-lg);
    }

    .blog-post__content ul li,
    .blog-post__content ol li {
        position: relative;
        padding-left: var(--space-xl);
        margin-bottom: var(--space-sm);
        font-size: var(--font-size-base);
        color: var(--color-text-dark-secondary);
        line-height: var(--line-height-relaxed);
    }

    .blog-post__content ul li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 10px;
        width: 8px;
        height: 8px;
        background: var(--color-primary);
        border-radius: 50%;
    }

    .blog-post__content ul li strong,
    .blog-post__content ol li strong {
        color: var(--color-text-dark);
    }

    /* Blog Sidebar */
    .blog-post__sidebar {
        position: sticky;
        top: 100px;
    }

    .blog-post__sidebar-card {
        background: var(--color-surface-white);
        border-radius: var(--radius-xl);
        padding: var(--space-2xl);
        box-shadow: var(--shadow-lg);
        border: 1px solid rgba(0, 0, 0, 0.05);
        margin-bottom: var(--space-xl);
    }

    .blog-post__sidebar-card h3 {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-lg);
        color: var(--color-text-dark);
    }

    .blog-post__sidebar-card p {
        font-size: var(--font-size-sm);
        color: var(--color-text-dark-secondary);
        margin-bottom: var(--space-lg);
        line-height: var(--line-height-relaxed);
    }

    /* Article Card Link */
    .article-card-link {
        text-decoration: none;
        color: inherit;
        display: block;
    }

    .article-card-link:hover .blog-card {
        transform: translateY(-8px);
        box-shadow: var(--shadow-xl);
    }

    /* Related Posts */
    .related-posts {
        margin-top: var(--space-xl);
    }

    .related-posts h3 {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-lg);
        color: var(--color-text-dark);
    }

    .related-posts__item {
        display: flex;
        gap: var(--space-md);
        padding: var(--space-md) 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        text-decoration: none;
    }

    .related-posts__item:last-child {
        border-bottom: none;
    }

    .related-posts__item:hover h4 {
        color: var(--color-primary-hover);
    }

    .related-posts__img {
        width: 80px;
        height: 60px;
        border-radius: var(--radius-md);
        overflow: hidden;
        flex-shrink: 0;
    }

    .related-posts__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .related-posts__item h4 {
        font-size: var(--font-size-sm);
        color: var(--color-text-dark);
        line-height: var(--line-height-snug);
        margin-bottom: var(--space-xs);
        transition: color var(--transition-fast);
    }

    .related-posts__item span {
        font-size: var(--font-size-xs);
        color: var(--color-text-dark-secondary);
    }
/* =========================================
   FLOATING CONTACT BUTTONS
   ========================================= */
.floating-contact {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1000;
}

.floating-contact__btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-base);
    color: white;
}

.floating-contact__btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.floating-contact__btn--whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}

.floating-contact__btn--phone {
    background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
}

.floating-contact__btn--email {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.floating-contact__btn svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .floating-contact {
        right: 15px;
        bottom: 15px;
    }
    
    .floating-contact__btn {
        width: 48px;
        height: 48px;
    }
    
    .floating-contact__btn svg {
        width: 20px;
        height: 20px;
    }
}

/* =========================================
   MOBILE OPTIMIZATIONS
   ========================================= */
@media (max-width: 576px) {
    /* Cards en una columna */
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr !important;
        gap: var(--space-md);
    }
    
    /* Footer en una columna */
    .footer__grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-xl);
        text-align: center;
    }
    
    .footer__column {
        text-align: center;
    }
    
    .footer__social {
        justify-content: center;
    }
    
    .footer__links {
        align-items: center;
    }
    
    /* Hero responsive */
    .hero__inner {
        flex-direction: column;
        text-align: center;
    }
    
    .hero__content {
        text-align: center;
    }
    
    .hero__actions {
        justify-content: center;
    }
    
    .hero__stats {
        justify-content: center;
        text-align: center;
    }
    
    .hero__stat {
        text-align: center;
    }
    
    .hero__image {
        margin-top: var(--space-xl);
    }
    
    /* Cards más compactas */
    .course-card__content {
        padding: var(--space-md);
    }
    
    .course-card__title {
        font-size: var(--font-size-base);
    }
    
    .course-card__description {
        font-size: var(--font-size-sm);
    }
    
    /* Feature cards */
    .feature-card {
        padding: var(--space-lg);
    }
    
    .feature-card__icon {
        width: 56px;
        height: 56px;
    }
    
    /* Instructor cards */
    .instructor-card__image {
        width: 140px;
        height: 140px;
    }
    
    /* Headings más pequeños */
    .heading-1 {
        font-size: clamp(2rem, 6vw, 3rem);
    }
    
    .heading-2 {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
    
    /* Botones más pequeños */
    .btn {
        padding: var(--space-sm) var(--space-lg);
        font-size: var(--font-size-xs);
    }
    
    /* Filter tabs scroll horizontal */
    .filter-tabs {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: var(--space-sm);
        -webkit-overflow-scrolling: touch;
    }
    
    .filter-tab {
        font-size: var(--font-size-xs);
        padding: var(--space-sm) var(--space-md);
    }
    
    /* CTA section */
    .cta__inner {
        padding: var(--space-xl);
    }
    
    .cta__content h2 {
        font-size: var(--font-size-xl);
    }
    
    /* Breadcrumbs */
    .breadcrumbs {
        font-size: var(--font-size-xs);
    }
    
    /* Course detail responsive */
    .course-detail {
        flex-direction: column;
    }
    
    .course-detail__sidebar {
        order: -1;
        margin-bottom: var(--space-xl);
    }
}

/* Tablet optimizations */
@media (max-width: 768px) {
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
    
    /* Instructor cards en 2 columnas tablet */
    .instructors .grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Course detail sidebar arriba en tablet */
    .course-detail {
        flex-direction: column;
    }
    
    .course-detail__sidebar {
        width: 100%;
        max-width: 400px;
        margin: 0 auto var(--space-xl);
    }
}

/* Footer centrado en mobile */
@media (max-width: 576px) {
    .footer__brand {
        text-align: center;
    }
    
    .footer__logo {
        display: flex;
        justify-content: center;
    }
    
    .footer__description {
        text-align: center;
    }
    
    .footer__column h4 {
        text-align: center;
    }
    
    .footer__bottom {
        text-align: center;
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .footer__copyright {
        text-align: center;
    }
}

/* Fix para animaciones - asegurar visibilidad del contenido */
@media (max-width: 768px) {
    [data-animate] {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    .course-card,
    .feature-card,
    .instructor-card {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Footer completamente centrado en mobile */
@media (max-width: 576px) {
    .footer__brand,
    .footer__column {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center !important;
    }
    
    .footer__logo {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: var(--space-md);
    }
    
    .footer__logo img {
        margin: 0 auto;
    }
    
    .footer__description {
        text-align: center !important;
        max-width: 100%;
    }
    
    .footer__links {
        align-items: center;
        text-align: center;
    }
    
    .footer__links a {
        text-align: center;
    }
}

/* Footer 100% centrado en mobile - fix final */
@media (max-width: 768px) {
    .footer__grid {
        text-align: center;
    }
    
    .footer__brand {
        align-items: center;
        text-align: center;
    }
    
    .footer__logo {
        justify-content: center;
        text-align: center;
    }
    
    .footer__logo img {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    
    .footer__description {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .footer__column {
        align-items: center;
    }
    
    .footer__column h4 {
        text-align: center;
        width: 100%;
    }
    
    .footer__links {
        align-items: center;
        width: 100%;
    }
    
    .footer__links a {
        text-align: center;
        display: block;
        width: 100%;
    }
    
    .footer__social {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }
}