/* ============================================
   PREMIUM REDESIGN v2 - Higher Specificity
   EduMaster Learning Platform
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --pr-indigo-50: #eef2ff;
    --pr-indigo-100: #e0e7ff;
    --pr-indigo-200: #c7d2fe;
    --pr-indigo-300: #a5b4fc;
    --pr-indigo-400: #818cf8;
    --pr-indigo-500: #6366f1;
    --pr-indigo-600: #4f46e5;
    --pr-indigo-700: #4338ca;
    --pr-indigo-800: #3730a3;
    --pr-indigo-900: #312e81;
    --pr-cyan: #06b6d4;
    --pr-emerald: #10b981;
    --pr-amber: #f59e0b;
    --pr-rose: #f43f5e;
    --pr-violet: #8b5cf6;
    --pr-surface-0: #ffffff;
    --pr-surface-50: #f8fafc;
    --pr-surface-100: #f1f5f9;
    --pr-surface-200: #e2e8f0;
    --pr-surface-300: #cbd5e1;
    --pr-text-900: #0f172a;
    --pr-text-800: #1e293b;
    --pr-text-700: #334155;
    --pr-text-600: #475569;
    --pr-text-500: #64748b;
    --pr-text-400: #94a3b8;
}

/* ---- NAVBAR ---- */
body.frontend-page .navbar.navbar-light.bg-white.sticky-top,
body.frontend-page .navbar {
    background: rgba(255, 255, 255, .88) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(226, 232, 240, .5) !important;
    box-shadow: none !important;
    padding: .65rem 0 !important;
    transition: all 250ms cubic-bezier(.4, 0, .2, 1) !important;
}

body.frontend-page .navbar .navbar-brand,
body.frontend-page .navbar-brand {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.3rem !important;
    background: linear-gradient(135deg, var(--pr-indigo-600), var(--pr-violet)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    letter-spacing: -.02em !important;
}

/* Logo image: reset gradient text so image displays correctly */
body.frontend-page .navbar-brand.navbar-brand-logo-only {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

body.frontend-page .navbar-brand.navbar-brand-logo-only img.navbar-logo {
    display: block !important;
    max-height: 42px !important;
    max-width: 220px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
}

/* Icon fallback: keep icon visible (gradient text would hide it) */
body.frontend-page .navbar-brand.navbar-brand-icon-only {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: var(--pr-indigo-600) !important;
    font-size: 1.65rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.frontend-page .navbar .nav-link,
body.frontend-page .nav-link {
    font-weight: 500 !important;
    font-size: .875rem !important;
    color: var(--pr-text-700) !important;
    padding: .45rem .85rem !important;
    border-radius: 10px !important;
    transition: all 250ms ease !important;
}

body.frontend-page .navbar .nav-link:hover,
body.frontend-page .nav-link:hover {
    color: var(--pr-indigo-600) !important;
    background: var(--pr-indigo-50) !important;
}

body.frontend-page .navbar .dropdown-menu,
body.frontend-page .dropdown-menu {
    border: 1px solid var(--pr-surface-200) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 8px 10px -6px rgba(0, 0, 0, .04) !important;
    padding: .5rem !important;
    animation: prDropIn .2s ease !important;
}

@keyframes prDropIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

body.frontend-page .navbar .dropdown-item,
body.frontend-page .dropdown-item {
    border-radius: 10px !important;
    padding: .55rem 1rem !important;
    font-size: .85rem !important;
    font-weight: 500 !important;
    transition: all 150ms ease !important;
}

body.frontend-page .navbar .dropdown-item:hover,
body.frontend-page .dropdown-item:hover {
    background: linear-gradient(135deg, var(--pr-indigo-500), var(--pr-violet)) !important;
    color: #fff !important;
}

/* ---- HERO ---- */
body.frontend-page .hero-section {
    position: relative !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 40%, #312e81 70%, #3730a3 100%) !important;
}

body.frontend-page .hero-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(99, 102, 241, .3), transparent),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(139, 92, 246, .2), transparent),
        radial-gradient(ellipse 50% 50% at 60% 80%, rgba(6, 182, 212, .12), transparent) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

body.frontend-page .hero-background,
body.frontend-page .hero-gradient,
body.frontend-page .hero-particles {
    display: none !important;
}

body.frontend-page .hero-content {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3rem !important;
    padding: 6rem 0 !important;
    text-align: left !important;
}

body.frontend-page .hero-text {
    flex: 1 !important;
    text-align: left !important;
}

body.frontend-page .hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    background: rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    padding: .5rem 1.25rem !important;
    border-radius: 9999px !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    margin-bottom: 1.5rem !important;
    color: #fff !important;
}

body.frontend-page .hero-badge * {
    color: #fff !important;
}

body.frontend-page .hero-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: clamp(2.5rem, 5vw, 3.75rem) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -.03em !important;
    margin-bottom: 1.5rem !important;
    color: #fff !important;
}

body.frontend-page .hero-title .gradient-text,
body.frontend-page .gradient-text {
    background: linear-gradient(135deg, #818cf8, #06b6d4, #34d399) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body.frontend-page .hero-description {
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, .75) !important;
    max-width: 540px !important;
    margin-bottom: 2rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.frontend-page .hero-actions {
    display: flex !important;
    gap: 1rem !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
    flex-wrap: wrap !important;
}

body.frontend-page .hero-stats {
    display: flex !important;
    gap: 2rem !important;
    margin-top: 2.5rem !important;
    padding-top: 2rem !important;
    border-top: 1px solid rgba(255, 255, 255, .12) !important;
    justify-content: flex-start !important;
}

body.frontend-page .hero-stats .stat-item {
    text-align: left !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

body.frontend-page .hero-stats .stat-number {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    display: block !important;
}

body.frontend-page .hero-stats .stat-label {
    font-size: .78rem !important;
    color: rgba(255, 255, 255, .55) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    opacity: 1 !important;
}

/* Hero Visual (Dashboard) */
body.frontend-page .hero-visual {
    flex: 1 !important;
    max-width: 520px !important;
}

body.frontend-page .hero-dashboard {
    background: rgba(255, 255, 255, .06) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .3), 0 0 40px rgba(99, 102, 241, .12) !important;
}

body.frontend-page .dashboard-header {
    background: rgba(255, 255, 255, .06) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    padding: 1rem 1.25rem !important;
}

body.frontend-page .window-dots span {
    background: rgba(255, 255, 255, .3) !important;
}

body.frontend-page .dashboard-title {
    color: rgba(255, 255, 255, .9) !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

body.frontend-page .dashboard-content {
    padding: 1.5rem !important;
    background: transparent !important;
}

body.frontend-page .progress-section-title,
body.frontend-page .course-name,
body.frontend-page .course-percent {
    color: rgba(255, 255, 255, .85) !important;
}

body.frontend-page .progress-bar-bg,
body.frontend-page .progress-bar {
    background: rgba(255, 255, 255, .1) !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
    height: 6px !important;
}

body.frontend-page .progress-fill {
    background: linear-gradient(90deg, var(--pr-indigo-400), var(--pr-cyan)) !important;
    border-radius: 9999px !important;
    height: 100% !important;
}

body.frontend-page .floating-card {
    background: rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 14px !important;
    padding: .5rem .85rem !important;
    color: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .15) !important;
}

body.frontend-page .floating-card * {
    color: rgba(255, 255, 255, .9) !important;
}

body.frontend-page .achievement-badge {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 10px !important;
    padding: .4rem .7rem !important;
    color: rgba(255, 255, 255, .8) !important;
}

body.frontend-page .achievement-badge * {
    color: rgba(255, 255, 255, .8) !important;
}

body.frontend-page .user-avatar {
    opacity: .7 !important;
}

/* ---- GLOBAL BUTTONS ---- */
body.frontend-page .btn-gradient,
body.frontend-page button.btn-gradient,
body.frontend-page .hero-actions .btn-gradient {
    background: linear-gradient(135deg, var(--pr-indigo-500), var(--pr-violet)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, .3) !important;
    border-radius: 14px !important;
    font-weight: 600 !important;
}

body.frontend-page .btn-gradient:hover,
body.frontend-page button.btn-gradient:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(99, 102, 241, .4) !important;
}

body.frontend-page .btn-primary,
body.frontend-page button.btn-primary {
    background: linear-gradient(135deg, var(--pr-indigo-500), var(--pr-indigo-700)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, .25) !important;
    border-radius: 14px !important;
}

body.frontend-page .btn-primary:hover,
body.frontend-page button.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(99, 102, 241, .35) !important;
    color: #fff !important;
}

body.frontend-page .hero-actions .btn-secondary,
body.frontend-page .hero-section .btn-secondary {
    background: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 14px !important;
}

body.frontend-page .hero-actions .btn-secondary:hover,
body.frontend-page .hero-section .btn-secondary:hover {
    background: rgba(255, 255, 255, .18) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
}

/* ---- TRUSTED SECTION ---- */
body.frontend-page .trusted-section {
    background: var(--pr-surface-50) !important;
    border-top: 1px solid var(--pr-surface-200) !important;
    border-bottom: 1px solid var(--pr-surface-200) !important;
    padding: 2.5rem 0 !important;
}

body.frontend-page .trusted-title {
    color: var(--pr-text-400) !important;
    font-size: .8rem !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    font-weight: 600 !important;
}

body.frontend-page .trusted-logos {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3rem !important;
    flex-wrap: wrap !important;
}

body.frontend-page .logo-item {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    color: var(--pr-text-400) !important;
    opacity: .5 !important;
    transition: opacity 250ms ease !important;
}

body.frontend-page .logo-item:hover {
    opacity: .8 !important;
}

/* ---- TUTOR CTA ---- */
body.frontend-page .tutor-cta-section {
    padding: 5rem 0 !important;
    background: linear-gradient(135deg, var(--pr-surface-50), #eef2ff) !important;
}

body.frontend-page .tutor-cta-content {
    background: var(--pr-surface-0) !important;
    border-radius: 24px !important;
    padding: 3rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .06), 0 4px 6px -4px rgba(0, 0, 0, .04) !important;
    border: 1px solid var(--pr-surface-200) !important;
}

body.frontend-page .tutor-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    background: linear-gradient(135deg, #059669, #10b981) !important;
    color: #fff !important;
    padding: .4rem 1rem !important;
    border-radius: 9999px !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
}

body.frontend-page .tutor-badge,
body.frontend-page .tutor-badge * {
    color: #fff !important;
}

body.frontend-page .tutor-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--pr-text-900) !important;
}

body.frontend-page .tutor-description {
    color: var(--pr-text-600) !important;
}

body.frontend-page .benefit-item {
    color: var(--pr-text-700) !important;
    font-weight: 500 !important;
    font-size: .9rem !important;
}

body.frontend-page .benefit-item i,
body.frontend-page .benefit-item svg {
    color: var(--pr-emerald) !important;
}

body.frontend-page .tutor-stats .stat-number {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--pr-indigo-600) !important;
}

body.frontend-page .tutor-stats .stat-label {
    font-size: .78rem !important;
    color: var(--pr-text-500) !important;
}

/* ---- FEATURES ---- */
body.frontend-page .features-section {
    padding: 5.5rem 0 !important;
    background: var(--pr-surface-0) !important;
}

body.frontend-page .features-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 1.5rem !important;
}

body.frontend-page .feature-card {
    background: var(--pr-surface-0) !important;
    border: 1px solid var(--pr-surface-200) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    transition: all 400ms cubic-bezier(.4, 0, .2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

body.frontend-page .feature-background,
body.frontend-page .feature-pattern {
    display: none !important;
}

body.frontend-page .feature-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 8px 10px -6px rgba(0, 0, 0, .04) !important;
    border-color: var(--pr-indigo-200) !important;
}

body.frontend-page .feature-icon {
    width: 3.5rem !important;
    height: 3.5rem !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1.25rem !important;
    font-size: 1.4rem !important;
}

body.frontend-page .feature-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--pr-text-900) !important;
    margin-bottom: .75rem !important;
}

body.frontend-page .feature-description {
    color: var(--pr-text-500) !important;
    font-size: .875rem !important;
    line-height: 1.7 !important;
}

body.frontend-page .feature-stats .stat-number {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--pr-indigo-600) !important;
}

body.frontend-page .feature-stats .stat-label {
    font-size: .75rem !important;
    color: var(--pr-text-400) !important;
}

/* ---- SECTION HEADERS ---- */
body.frontend-page .section-header {
    text-align: center !important;
    margin-bottom: 3rem !important;
}

body.frontend-page .section-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    background: var(--pr-indigo-50) !important;
    color: var(--pr-indigo-600) !important;
    padding: .4rem 1.2rem !important;
    border-radius: 9999px !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
    border: 1px solid var(--pr-indigo-100) !important;
}

body.frontend-page .section-header .section-title,
body.frontend-page h2.section-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: clamp(1.75rem, 3vw, 1.4rem) !important;
    font-weight: 700 !important;
    color: var(--pr-text-900) !important;
    letter-spacing: -.02em !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    border: none !important;
   
    display: block !important;
    margin-bottom: 20px !important;
}

body.frontend-page .section-description {
    font-size: 1rem !important;
    color: var(--pr-text-500) !important;
    max-width: 600px !important;
    margin: .75rem auto 0 !important;
    line-height: 1.7 !important;
}

/* ---- CATEGORIES ---- */
body.frontend-page .categories-section {
    padding: 0rem 0 !important;
    background: var(--pr-surface-50) !important;
}

body.frontend-page .categories-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
}

body.frontend-page .category-card {
    background: var(--pr-surface-0) !important;
    border: 1px solid var(--pr-surface-200) !important;
    border-radius: 20px !important;
    padding: 1.75rem !important;
    transition: all 400ms cubic-bezier(.4, 0, .2, 1) !important;
    text-decoration: none !important;
}

body.frontend-page .category-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 8px 10px -6px rgba(0, 0, 0, .04) !important;
    border-color: var(--pr-indigo-200) !important;
}

body.frontend-page .category-icon {
    width: 3.25rem !important;
    height: 3.25rem !important;
    background: linear-gradient(135deg, var(--pr-indigo-500), var(--pr-violet)) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 1.2rem !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, .25) !important;
}

body.frontend-page .category-icon * {
    color: #fff !important;
}

body.frontend-page .category-name {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--pr-text-900) !important;
}

body.frontend-page .category-description {
    color: var(--pr-text-500) !important;
    font-size: .85rem !important;
    line-height: 1.6 !important;
}

body.frontend-page .course-count {
    background: var(--pr-surface-100) !important;
    color: var(--pr-text-500) !important;
    padding: .3rem .75rem !important;
    border-radius: 10px !important;
    font-size: .8rem !important;
    font-weight: 500 !important;
}

body.frontend-page .category-arrow {
    color: var(--pr-indigo-500) !important;
    transition: transform 250ms ease !important;
}

body.frontend-page .category-card:hover .category-arrow {
    transform: translateX(4px) !important;
}

/* ---- COURSE CARDS ---- */
body.frontend-page .courses-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 1.75rem !important;
}

body.frontend-page .course-card {
    background: var(--pr-surface-0) !important;
    border: 1px solid var(--pr-surface-200) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    transition: all 400ms cubic-bezier(.4, 0, .2, 1) !important;
}

body.frontend-page .course-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 0 40px rgba(99, 102, 241, .1) !important;
    border-color: var(--pr-indigo-200) !important;
}

body.frontend-page .course-card .course-image {
    position: relative !important;
    height: 200px !important;
    overflow: hidden !important;
    width: auto !important;
    border-radius: 0 !important;
    flex-shrink: unset !important;
}

body.frontend-page .course-card .course-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 400ms ease !important;
}

body.frontend-page .course-card:hover .course-image img {
    transform: scale(1.05) !important;
}

body.frontend-page .course-content {
    padding: 1.5rem !important;
}

body.frontend-page .course-card .course-title {
    font-size: 1rem !important;
}

body.frontend-page .course-card .course-title a {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--pr-text-900) !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}

body.frontend-page .course-card .course-title a:hover {
    color: var(--pr-indigo-600) !important;
}

body.frontend-page .course-card .course-description {
    color: var(--pr-text-500) !important;
    font-size: .85rem !important;
}

body.frontend-page .course-card .course-instructor {
    color: var(--pr-text-400) !important;
    font-size: .8rem !important;
}

body.frontend-page .course-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--pr-surface-200) !important;
}

body.frontend-page .course-card .current-price {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--pr-indigo-600) !important;
}

body.frontend-page .course-card .original-price {
    text-decoration: line-through !important;
    color: var(--pr-text-400) !important;
    font-size: .85rem !important;
}

body.frontend-page .course-rating .stars {
    color: var(--pr-amber) !important;
}

/* Course Badges */
body.frontend-page .category-tag {
    background: linear-gradient(135deg, var(--pr-indigo-50), var(--pr-indigo-100)) !important;
    color: var(--pr-indigo-700) !important;
    padding: .25rem .6rem !important;
    border-radius: 10px !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
}

body.frontend-page .featured-badge {
    background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
    color: #92400e !important;
    padding: .3rem .75rem !important;
    border-radius: 40px !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
}

body.frontend-page .difficulty-badge {
    padding: .3rem .75rem !important;
    border-radius: 40px !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
}

body.frontend-page .difficulty-beginner {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
    color: #065f46 !important;
}

body.frontend-page .difficulty-intermediate {
    background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
    color: #92400e !important;
}

body.frontend-page .difficulty-advanced {
    background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
    color: #991b1b !important;
}

/* ---- PAGE HEADERS ---- */
body.frontend-page .page-header {
    background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%) !important;
    padding: 1rem 0 !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

body.frontend-page .page-header::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(99, 102, 241, .2), transparent) !important;
    pointer-events: none !important;
}

body.frontend-page .page-header * {
    position: relative !important;
    z-index: 1 !important;
}

body.frontend-page .page-header .page-title,
body.frontend-page .page-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: clamp(2rem, 4vw, 2.75rem) !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: -.02em !important;
}

  .page-description,
body.frontend-page .page-description {
    color: rgba(255, 255, 255, .65) !important;
    font-size: 1.05rem !important;
}

/* ---- FILTERS ---- */
body.frontend-page .filters-section {
    background: var(--pr-surface-0) !important;
    padding: 2rem 0 !important;
    border-bottom: 1px solid var(--pr-surface-200) !important;
}

body.frontend-page .filters-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1fr auto !important;
    gap: 1rem !important;
    align-items: end !important;
}

body.frontend-page .filter-label {
    font-size: .8rem !important;
    font-weight: 600 !important;
    color: var(--pr-text-700) !important;
}

/* ---- HOW IT WORKS ---- */
body.frontend-page .how-it-works-section {
    padding: 5.5rem 0 !important;
    background: var(--pr-surface-0) !important;
}

body.frontend-page .steps-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 2rem !important;
}

body.frontend-page .step-card {
    text-align: center !important;
    padding: 2.5rem 2rem !important;
    background: var(--pr-surface-0) !important;
    border: 1px solid var(--pr-surface-200) !important;
    border-radius: 20px !important;
    transition: all 400ms ease !important;
}

body.frontend-page .step-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .08) !important;
    border-color: var(--pr-indigo-200) !important;
}

body.frontend-page .step-number {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 3rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, var(--pr-indigo-200), var(--pr-indigo-100)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

body.frontend-page .step-icon {
    width: 4rem !important;
    height: 4rem !important;
    background: linear-gradient(135deg, var(--pr-indigo-500), var(--pr-violet)) !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 1.5rem !important;
    margin: 0 auto 1.25rem !important;
    box-shadow: 0 8px 20px rgba(99, 102, 241, .25) !important;
}

body.frontend-page .step-icon * {
    color: #fff !important;
}

body.frontend-page .step-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--pr-text-900) !important;
}

body.frontend-page .step-description {
    color: var(--pr-text-500) !important;
    font-size: .875rem !important;
    line-height: 1.7 !important;
}

/* ---- CTA ---- */
body.frontend-page .cta-section {
    background: linear-gradient(160deg, #0f172a, #1e1b4b, #312e81) !important;
    padding: 5.5rem 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

body.frontend-page .cta-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(ellipse 60% 50% at 30% 50%, rgba(99, 102, 241, .2), transparent),
        radial-gradient(ellipse 50% 50% at 70% 50%, rgba(139, 92, 246, .15), transparent) !important;
    pointer-events: none !important;
}

body.frontend-page .cta-gradient {
    display: none !important;
}

body.frontend-page .cta-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
    font-weight: 800 !important;
    color: #fff !important;
}

body.frontend-page .cta-description {
    color: rgba(255, 255, 255, .7) !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
}

body.frontend-page .cta-feature {
    color: rgba(255, 255, 255, .8) !important;
}

body.frontend-page .cta-feature i {
    color: var(--pr-emerald) !important;
}

body.frontend-page .cta-content {
    position: relative !important;
    z-index: 1 !important;
    text-align: center !important;
}

body.frontend-page .cta-text {
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* ---- NEWSLETTER SECTION ---- */
body.frontend-page .newsletter-section {
    padding: 5.5rem 0 !important;
    background: var(--pr-surface-0) !important;
}

body.frontend-page .newsletter-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 1.75rem !important;
}

body.frontend-page .newsletter-card {
    background: var(--pr-surface-0) !important;
    border: 1px solid var(--pr-surface-200) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    transition: all 400ms ease !important;
}

body.frontend-page .newsletter-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .08) !important;
}

body.frontend-page .newsletter-card .newsletter-title a {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    color: var(--pr-text-900) !important;
    text-decoration: none !important;
}

body.frontend-page .newsletter-card .newsletter-title a:hover {
    color: var(--pr-indigo-600) !important;
}

body.frontend-page .newsletter-card .newsletter-excerpt {
    color: var(--pr-text-500) !important;
    font-size: .85rem !important;
}

body.frontend-page .newsletter-link {
    color: var(--pr-indigo-600) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* ---- FOOTER ---- */
body.frontend-page .professional-footer {
    background: linear-gradient(160deg, #0f172a, #1e293b) !important;
}

body.frontend-page .footer-newsletter {
    background: linear-gradient(135deg, var(--pr-indigo-600), var(--pr-violet)) !important;
}

/* ---- ANIMATIONS ---- */
body.frontend-page .animate-on-scroll {
    opacity: 0 !important;
    transform: translateY(24px) !important;
    transition: all .7s cubic-bezier(.4, 0, .2, 1) !important;
}

body.frontend-page .animate-on-scroll.animated {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--pr-surface-100);
}

::-webkit-scrollbar-thumb {
    background: var(--pr-indigo-300);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--pr-indigo-500);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 992px) {
    body.frontend-page .hero-content {
        flex-direction: column !important;
        text-align: center !important;
    }

    body.frontend-page .hero-text {
        text-align: center !important;
    }

    body.frontend-page .hero-visual {
        display: none !important;
    }

    body.frontend-page .hero-description {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.frontend-page .hero-actions {
        justify-content: center !important;
    }

    body.frontend-page .hero-stats {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    body.frontend-page .features-grid,
    body.frontend-page .categories-grid,
    body.frontend-page .courses-grid,
    body.frontend-page .steps-grid {
        grid-template-columns: 1fr !important;
    }

    body.frontend-page .filters-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    body.frontend-page .hero-title {
        font-size: 2.25rem !important;
    }

    body.frontend-page .hero-stats {
        gap: 1.25rem !important;
    }

    body.frontend-page .hero-stats .stat-number {
        font-size: 1.35rem !important;
    }

    body.frontend-page .section-header .section-title,
    body.frontend-page h2.section-title {
        font-size: 1.7rem !important;
    }

    body.frontend-page .navbar .navbar-brand,
    body.frontend-page .navbar-brand {
        font-size: 1.15rem !important;
    }
}

@media (max-width: 480px) {
    body.frontend-page .hero-section {
        min-height: auto !important;
        padding: 5rem 0 3rem !important;
    }

    body.frontend-page .hero-title {
        font-size: 1.85rem !important;
    }
}