/* ============================================
   KASHACADEMY - ENHANCED STYLESHEET
   With Advanced Animations & Effects
   ============================================ */

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

:root {
    --primary: #6366f1;
    --primary-light: #818cf8;
    --primary-dark: #4f46e5;
    --secondary: #f6ad55;
    --accent: #ed8936;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-card: #ffffff;
    --bg-input: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --success: #22c55e;
    --error: #ef4444;
    --warning: #f59e0b;
    --shadow-sm: 0 1px 2px 0 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.1);
    --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    --bg-primary: #0f0f1a;
    --bg-secondary: #13131f;
    --bg-tertiary: #1a1a2e;
    --bg-card: #1a1a2e;
    --bg-input: #252540;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border: #2d2d44;
    --shadow-glow: 0 0 60px rgba(99, 102, 241, 0.2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
    background: var(--bg-secondary);
    line-height: 1.6;
    transition: background-color var(--transition-base), color var(--transition-base);
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ============================================
   ENHANCED ANIMATIONS
   ============================================ */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes floatReverse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(15px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes slideInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } 50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.6); } }
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ripple { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(4); opacity: 0; } }
@keyframes confetti { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(-500px) rotate(720deg); opacity: 0; } }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.1); } 28% { transform: scale(1); } 42% { transform: scale(1.1); } 70% { transform: scale(1); } }
@keyframes morphBg { 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } }

/* Reveal Animations */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-60px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal-left.active { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(60px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal-right.active { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.8); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal-scale.active { opacity: 1; transform: scale(1); }

/* Stagger Animation Delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
header { 
    position: fixed; top: 0; left: 0; right: 0; z-index: 300; 
    background: rgba(255, 255, 255, 0.8); 
    border-bottom: 1px solid var(--border); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    transition: all var(--transition-base);
}
[data-theme="dark"] header { background: rgba(15, 15, 26, 0.85); }
header.scrolled { box-shadow: var(--shadow-lg), var(--shadow-glow); }
nav { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; gap: 32px; }
.logo { display: flex; align-items: center; gap: 12px; transition: transform var(--transition-base); }
.logo:hover { transform: scale(1.02); }
.logo-img { height: 42px; width: auto; object-fit: contain; border-radius: 10px; }
.logo-text { 
    font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; 
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7); 
    background-size: 200% 200%;
    animation: gradientFlow 3s ease infinite;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
}
.logo-icon { 
    width: 46px; height: 46px; 
    background: linear-gradient(135deg, #6366f1, #8b5cf6); 
    border-radius: var(--radius-lg); 
    display: flex; align-items: center; justify-content: center; 
    animation: pulse 3s ease-in-out infinite;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}
.logo-icon svg { width: 26px; height: 26px; fill: white; }
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links a { 
    color: var(--text-secondary); font-weight: 500; font-size: 0.95rem; 
    position: relative; padding: 8px 0;
    transition: color var(--transition-base);
}
.nav-links a::after { 
    content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; 
    background: linear-gradient(90deg, #6366f1, #a855f7); 
    transition: all var(--transition-base); 
    transform: translateX(-50%);
    border-radius: 2px;
}
.nav-links a:hover { color: var(--primary); }
.nav-links a:hover::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-actions > .cart-btn { order: 0; } /* Cart comes first */
.nav-actions > .theme-toggle { order: 1; }
.nav-actions > .btn-outline { order: 2; }
.nav-actions > .btn-primary { order: 3; }
.nav-actions > .user-menu-container { order: 4; }

/* Buttons */
.btn { 
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; 
    padding: 12px 28px; border-radius: var(--radius-full); 
    font-weight: 600; font-size: 0.95rem; cursor: pointer; 
    transition: all var(--transition-base); border: 2px solid transparent;
    position: relative; overflow: hidden;
}
.btn::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 0; height: 0; background: rgba(255, 255, 255, 0.2);
    border-radius: 50%; transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}
.btn:active::before { width: 300px; height: 300px; }
.btn-primary { 
    background: linear-gradient(135deg, #6366f1, #8b5cf6); 
    color: white !important; 
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); 
}
.btn-primary:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5);
    color: white !important;
    background: linear-gradient(135deg, #818cf8, #a78bfa);
}
.btn-primary:active {
    transform: translateY(-1px);
    color: white !important;
}
.btn-secondary { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-secondary:hover { background: var(--primary); color: white !important; transform: translateY(-2px); }
.btn-outline { 
    background: var(--bg-tertiary); 
    color: var(--text-primary); 
    border: 1px solid var(--border);
    padding: 12px 20px; 
}
.btn-outline:hover { 
    color: var(--text-primary); 
    background: var(--bg-input); 
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}
[data-theme="dark"] .btn-outline:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}
.btn svg { width: 18px; height: 18px; fill: currentColor; transition: transform var(--transition-base); }
.btn:hover svg { transform: translateX(3px); }

/* Theme Toggle & Cart */
.theme-toggle, .cart-btn { 
    width: 44px; height: 44px; border-radius: var(--radius-full); 
    background: var(--bg-tertiary); border: 1px solid var(--border); 
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
}
.theme-toggle:hover, .cart-btn:hover { 
    border-color: var(--primary); 
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}
.theme-toggle svg { width: 20px; height: 20px; fill: var(--text-secondary); transition: all var(--transition-base); }

/* Cart button specific - larger icon for visual balance */
.cart-btn {
    padding: 0;
    overflow: visible;
}
.cart-btn svg {
    width: 24px;
    height: 24px;
    fill: var(--text-secondary);
    transition: all var(--transition-base);
    display: block;
}

.theme-toggle .moon-icon { display: none; }
[data-theme="dark"] .theme-toggle .sun-icon { display: none; }
[data-theme="dark"] .theme-toggle .moon-icon { display: block; }

/* Cart count badge - auto-sizing for any count */
.cart-count { 
    position: absolute; 
    top: -6px; 
    right: -6px; 
    min-width: 18px; 
    height: 18px; 
    padding: 0 5px;
    background: linear-gradient(135deg, #ef4444, #f97316); 
    color: white; 
    font-size: 0.65rem; 
    font-weight: 700; 
    line-height: 18px;
    text-align: center;
    border-radius: 9999px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    opacity: 0; 
    transform: scale(0); 
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    border: 2px solid var(--bg-primary);
    box-sizing: content-box;
    z-index: 1;
    white-space: nowrap;
}
.cart-count.show { 
    opacity: 1; 
    transform: scale(1); 
}

@keyframes cartBadgePop {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Mobile Menu */
.mobile-menu-btn { 
    display: none; flex-direction: column; justify-content: space-between; 
    width: 28px; height: 20px; background: transparent; padding: 0; z-index: 999; 
}
.mobile-menu-btn span { 
    display: block; width: 100%; height: 2.5px; 
    background: var(--text-primary); border-radius: 2px; 
    transition: all var(--transition-base); 
}
.mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; transform: translateX(-20px); }
.mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }
.mobile-menu { 
    position: fixed; inset: 0; background: var(--bg-primary); z-index: 500; 
    opacity: 0; visibility: hidden; transition: all var(--transition-base); padding-top: 80px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mobile-menu.active { opacity: 1; visibility: visible; }

/* Mobile Menu Close Button */
.mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 501;
    transition: all var(--transition-base);
}
.mobile-menu-close svg {
    width: 24px;
    height: 24px;
    fill: var(--text-primary);
    transition: all var(--transition-base);
}
.mobile-menu-close:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: rotate(90deg);
}
.mobile-menu-close:hover svg {
    fill: white;
}
.mobile-menu-close:active {
    transform: rotate(90deg) scale(0.9);
}

.mobile-menu-content { padding: 32px 24px; display: flex; flex-direction: column; gap: 24px; }
.mobile-nav-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mobile-nav-links li a { 
    display: block; 
    font-size: 1.15rem; 
    font-weight: 600; 
    padding: 16px 20px; 
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}
.mobile-nav-links li a:hover,
.mobile-nav-links li a:active {
    background: var(--bg-tertiary);
    color: var(--primary);
}
.mobile-menu-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.mobile-menu-actions .btn { width: 100%; justify-content: center; min-height: 52px; font-size: 1rem; }

/* User Menu */
.user-menu-container { position: relative; }
.user-avatar-btn { 
    width: 44px; height: 44px; border-radius: var(--radius-full); 
    background: linear-gradient(135deg, #6366f1, #8b5cf6); 
    color: white; font-weight: 700; font-size: 0.9rem; 
    display: flex; align-items: center; justify-content: center; cursor: pointer; 
    border: 2px solid transparent;
    transition: all var(--transition-base);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}
.user-avatar-btn:hover { transform: scale(1.1); border-color: var(--primary-light); }
.user-menu { 
    position: absolute; top: calc(100% + 12px); right: 0; width: 280px; 
    background: var(--bg-card); border: 1px solid var(--border); 
    border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); 
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.95); 
    transition: all var(--transition-base); z-index: 100; overflow: hidden; 
}
.user-menu.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.user-menu-header { padding: 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; }
.user-menu-avatar { 
    width: 48px; height: 48px; border-radius: var(--radius-full); 
    background: linear-gradient(135deg, #6366f1, #8b5cf6); 
    color: white; font-weight: 700; display: flex; align-items: center; justify-content: center; 
}
.user-menu-info h4 { font-size: 1rem; margin-bottom: 2px; }
.user-menu-info p { font-size: 0.85rem; color: var(--text-muted); }
.user-menu-links { padding: 12px; }
.user-menu-link { 
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; 
    border-radius: var(--radius-md); color: var(--text-secondary); font-weight: 500;
    transition: all var(--transition-base);
}
.user-menu-link:hover { background: var(--bg-tertiary); color: var(--primary); transform: translateX(5px); }
.user-menu-link svg { width: 20px; height: 20px; fill: currentColor; }
.user-menu-link.logout { color: var(--error); }
.user-menu-link.logout:hover { background: rgba(239, 68, 68, 0.1); }

/* ============================================
   HERO SECTION
   ============================================ */
.hero { 
    padding: 140px 0 100px; 
    background: var(--bg-secondary); 
    position: relative; overflow: hidden; 
}
.hero::before { 
    content: ''; position: absolute; inset: 0; 
    background: 
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 50%), 
        radial-gradient(circle at 80% 80%, rgba(246, 173, 85, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.05) 0%, transparent 70%);
    animation: morphBg 20s ease-in-out infinite;
}
.hero::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
}

/* Floating Particles */
.hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.particle { 
    position: absolute; width: 6px; height: 6px; 
    background: linear-gradient(135deg, #6366f1, #a855f7); 
    border-radius: 50%; opacity: 0.4;
}
.particle:nth-child(1) { top: 20%; left: 10%; animation: float 6s ease-in-out infinite; }
.particle:nth-child(2) { top: 60%; left: 20%; animation: floatReverse 8s ease-in-out infinite; animation-delay: 1s; }
.particle:nth-child(3) { top: 30%; right: 15%; animation: float 7s ease-in-out infinite; animation-delay: 2s; }
.particle:nth-child(4) { top: 70%; right: 25%; animation: floatReverse 9s ease-in-out infinite; animation-delay: 0.5s; }
.particle:nth-child(5) { top: 40%; left: 50%; animation: float 5s ease-in-out infinite; animation-delay: 1.5s; }

.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.hero-content { max-width: 600px; }
.hero-badge { 
    display: inline-flex; align-items: center; gap: 8px; 
    padding: 8px 16px; background: var(--bg-card); 
    border: 1px solid var(--border); border-radius: var(--radius-full); 
    font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); 
    margin-bottom: 24px;
    animation: slideInDown 0.8s ease;
    box-shadow: var(--shadow-md);
}
.hero-badge svg { width: 18px; height: 18px; fill: var(--success); animation: pulse 2s ease-in-out infinite; }
.hero h1 { 
    font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 24px; 
    animation: slideInUp 0.8s ease;
    animation-delay: 0.2s;
    animation-fill-mode: both;
}
.hero h1 span { 
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7); 
    background-size: 200% 200%;
    animation: gradientFlow 3s ease infinite;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
    position: relative;
}
.hero h1 span::after {
    content: ''; position: absolute; bottom: 5px; left: 0; right: 0; height: 8px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.3));
    border-radius: 4px; z-index: -1;
}
.hero-text { 
    font-size: 1.15rem; color: var(--text-secondary); margin-bottom: 36px; line-height: 1.7; 
    animation: slideInUp 0.8s ease;
    animation-delay: 0.4s;
    animation-fill-mode: both;
}
.hero-cta { 
    display: flex; align-items: center; gap: 16px; margin-bottom: 48px; 
    animation: slideInUp 0.8s ease;
    animation-delay: 0.6s;
    animation-fill-mode: both;
}
.hero-stats { 
    display: flex; gap: 48px; 
    animation: slideInUp 0.8s ease;
    animation-delay: 0.8s;
    animation-fill-mode: both;
}
.stat-item { text-align: center; }
.stat-number { 
    font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700; 
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 4px; 
}
.stat-label { font-size: 0.9rem; color: var(--text-muted); }

.hero-visual { position: relative; display: flex; justify-content: center; animation: slideInRight 1s ease; }
.hero-image-wrapper { position: relative; width: 100%; max-width: 500px; }
.hero-image { 
    width: 100%; height: 500px; 
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7); 
    background-size: 200% 200%;
    animation: gradientFlow 5s ease infinite;
    border-radius: 28px; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.35); 
    position: relative; overflow: hidden; 
}
.hero-image::before { 
    content: ''; position: absolute; inset: 0; 
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 
}
.hero-image-content { text-align: center; color: white; position: relative; z-index: 1; }
.hero-image-content svg { width: 100px; height: 100px; fill: white; margin-bottom: -10px; opacity: 0.9; animation: bounce 2s ease-in-out infinite; }
.hero-image-content h3 { font-size: 1.75rem; color: white; margin-bottom: 8px; }
.hero-image-content p { opacity: 0.8; font-size: 1rem; }

.floating-card { 
    position: absolute; background: var(--bg-card); border-radius: var(--radius-lg); 
    padding: 16px 20px; box-shadow: var(--shadow-xl); 
    display: flex; align-items: center; gap: 12px; 
    animation: float 4s ease-in-out infinite; 
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
}
.floating-card-1 { top: 20px; left: 16px; animation-delay: 2s; }
.floating-card-2 { bottom: 20px; right: 16px; animation-delay: 0s; }
.floating-card .icon { 
    width: 36px; height: 36px; border-radius: var(--radius-md); 
    background: linear-gradient(135deg, #6366f1, #8b5cf6); 
    display: flex; align-items: center; justify-content: center; 
}
.floating-card .icon svg { width: 22px; height: 22px; fill: white; }
.floating-card .info h4 { font-size: 0.9rem; margin-bottom: 2px; }
.floating-card .info p { font-size: 0.8rem; color: var(--text-muted); }
.floating-card .students { display: flex; }
.student-avatar { 
    width: 36px; height: 36px; border-radius: var(--radius-full); 
    display: flex; align-items: center; justify-content: center; 
    font-size: 0.75rem; font-weight: 700; color: white; 
    margin-left: -10px; border: 2px solid var(--bg-card);
    transition: transform var(--transition-base);
}
.student-avatar:first-child { margin-left: 0; }
.student-avatar:hover { transform: scale(1.1); z-index: 10; }
.floating-card-2 p { font-size: 0.85rem; margin-left: 8px; color: var(--text-secondary); }

/* ============================================
   SECTION STYLES
   ============================================ */
section { padding: 100px 0; position: relative; }
section::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 100px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0.3;
}
.section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; }
.section-badge { 
    display: inline-block; padding: 8px 20px; 
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1)); 
    color: var(--primary); font-size: 0.85rem; font-weight: 600; 
    border-radius: var(--radius-full); margin-bottom: 16px; 
    border: 1px solid rgba(99, 102, 241, 0.2);
    animation: pulse 3s ease-in-out infinite;
}
.section-header h2 { font-size: 2.5rem; margin-bottom: 16px; }
.section-header p { color: var(--text-secondary); font-size: 1.1rem; }

/* ============================================
   FEATURES SECTION
   ============================================ */
.features { background: var(--bg-primary); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card { 
    background: var(--bg-card); border: 1px solid var(--border); 
    border-radius: var(--radius-xl); padding: 32px; 
    transition: all var(--transition-base);
    position: relative; overflow: hidden;
}
.feature-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    transform: scaleX(0); transition: transform var(--transition-base);
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-card:hover { 
    transform: translateY(-8px); 
    box-shadow: var(--shadow-xl), var(--shadow-glow); 
    border-color: var(--primary); 
}
.feature-icon { 
    width: 60px; height: 60px; 
    background: linear-gradient(135deg, #6366f1, #8b5cf6); 
    border-radius: var(--radius-lg); 
    display: flex; align-items: center; justify-content: center; 
    margin-bottom: 20px;
    transition: all var(--transition-base);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}
.feature-card:hover .feature-icon { 
    transform: scale(1.1) rotate(5deg); 
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}
.feature-icon svg { width: 28px; height: 28px; fill: white; }
.feature-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.feature-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; }

/* ============================================
   COURSES SECTION
   ============================================ */
.courses { background: var(--bg-secondary); }
.course-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 40px; }
.search-box { 
    flex: 1; min-width: 280px; max-width: 400px; 
    display: flex; align-items: center; 
    background: var(--bg-card); border: 1px solid var(--border); 
    border-radius: var(--radius-full); padding: 0 20px;
    transition: all var(--transition-base);
}
.search-box:focus-within { 
    border-color: var(--primary); 
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1), var(--shadow-glow); 
}
.search-box svg { width: 20px; height: 20px; fill: var(--text-muted); }
.search-box input { 
    flex: 1; background: transparent; border: none; 
    padding: 14px 12px; color: var(--text-primary); font-size: 0.95rem; 
}
.search-box input::placeholder { color: var(--text-muted); }
.filter-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-btn { 
    padding: 10px 20px; background: var(--bg-card); 
    border: 1px solid var(--border); border-radius: var(--radius-full); 
    color: var(--text-secondary); font-weight: 500; font-size: 0.9rem; cursor: pointer;
    transition: all var(--transition-base);
}
.filter-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.filter-btn.active { 
    background: linear-gradient(135deg, #6366f1, #8b5cf6); 
    color: white; border-color: transparent; 
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}
.sort-dropdown { margin-left: auto; }
.sort-dropdown select { 
    padding: 12px 40px 12px 16px; background: var(--bg-card); 
    border: 1px solid var(--border); border-radius: var(--radius-md); 
    color: var(--text-primary); cursor: pointer; appearance: none; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23718096'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); 
    background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
    transition: all var(--transition-base);
}
.sort-dropdown select:hover { border-color: var(--primary); }

.courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.course-card { 
    background: var(--bg-card); border: 1px solid var(--border); 
    border-radius: var(--radius-xl); overflow: hidden; cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
}
.course-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(168, 85, 247, 0.05));
    opacity: 0; transition: opacity var(--transition-base);
}
.course-card:hover::after { opacity: 1; }
.course-card:hover { 
    transform: translateY(-10px) scale(1.02); 
    box-shadow: var(--shadow-xl), var(--shadow-glow); 
    border-color: var(--primary); 
}
.course-image { position: relative; height: 180px; overflow: hidden; }
.course-image-bg { 
    width: 100%; height: 100%; 
    display: flex; align-items: center; justify-content: center; 
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
}
.course-card:hover .course-image-bg { transform: scale(1.1); }
.course-image-bg svg { width: 64px; height: 64px; fill: white; opacity: 0.8; }
.course-badge { 
    position: absolute; top: 16px; left: 16px; 
    padding: 6px 14px; background: rgba(0, 0, 0, 0.7); 
    backdrop-filter: blur(10px); color: white; 
    font-size: 0.75rem; font-weight: 600; 
    border-radius: var(--radius-full); text-transform: uppercase;
    animation: pulse 2s ease-in-out infinite;
}
.course-content { padding: 24px; position: relative; z-index: 1; }
.course-meta { display: flex; gap: 16px; margin-bottom: 14px; }
.course-meta span { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-muted); }
.course-meta svg { width: 16px; height: 16px; fill: currentColor; }
.course-content h3 { 
    font-size: 1.15rem; margin-bottom: 10px; line-height: 1.4; 
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; 
}
.course-content p { 
    color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 16px; 
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; 
}
.course-footer { 
    display: flex; justify-content: space-between; align-items: center; 
    padding-top: 16px; border-top: 1px solid var(--border); 
}
.course-price { font-size: 1.25rem; font-weight: 700; color: var(--primary); }
.course-price span { 
    font-size: 0.9rem; color: var(--text-muted); 
    text-decoration: line-through; margin-left: 8px; font-weight: 400; 
}
.course-rating { display: flex; align-items: center; gap: 4px; }
.course-rating svg { width: 18px; height: 18px; fill: #fbbf24; }
.course-rating span { font-weight: 600; }
.no-results { text-align: center; padding: 80px 20px; }
.no-results svg { width: 80px; height: 80px; fill: var(--text-muted); margin-bottom: 20px; }
.no-results h3 { font-size: 1.5rem; margin-bottom: 10px; }
.no-results p { color: var(--text-secondary); }
.view-all-wrapper { text-align: center; margin-top: 48px; }

/* ============================================
   INSTRUCTORS SECTION
   ============================================ */
.instructors { background: var(--bg-primary); }
.instructors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.instructor-card { 
    background: var(--bg-card); border: 1px solid var(--border); 
    border-radius: var(--radius-xl); padding: 32px; text-align: center;
    transition: all var(--transition-base);
}
.instructor-card:hover { 
    transform: translateY(-8px); 
    box-shadow: var(--shadow-xl), var(--shadow-glow); 
    border-color: var(--primary); 
}
.instructor-avatar { 
    width: 100px; height: 100px; border-radius: var(--radius-full); 
    margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; 
    font-size: 2rem; font-weight: 700; color: white; position: relative;
    transition: all var(--transition-base);
}
.instructor-card:hover .instructor-avatar { transform: scale(1.1); }
.instructor-verified { 
    position: absolute; bottom: 0; right: 0; 
    width: 28px; height: 28px; background: var(--success); 
    border-radius: var(--radius-full); 
    display: flex; align-items: center; justify-content: center; 
    border: 3px solid var(--bg-card);
    animation: pulse 2s ease-in-out infinite;
}
.instructor-verified svg { width: 14px; height: 14px; fill: white; }
.instructor-card h3 { font-size: 1.2rem; margin-bottom: 6px; }
.instructor-card .role { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 8px; }
.instructor-bio { color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; margin-bottom: 16px; }
.instructor-stats { display: flex; justify-content: center; gap: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.instructor-stats .stat { text-align: center; }
.instructor-stats .stat-value { font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 4px; justify-content: center; }
.instructor-stats svg { width: 16px; height: 16px; fill: currentColor; }
.instructor-stats .stat-label { font-size: 0.8rem; color: var(--text-muted); }

/* ============================================
   TESTIMONIALS SECTION
   ============================================ */
.testimonials { background: var(--bg-secondary); overflow: hidden; }
.testimonials-carousel { position: relative; }
.testimonials-track { display: flex; gap: 24px; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.testimonial-card { 
    flex: 0 0 calc(33.333% - 16px); min-width: 340px; 
    background: var(--bg-card); border: 1px solid var(--border); 
    border-radius: var(--radius-xl); padding: 32px;
    transition: all var(--transition-base);
}
.testimonial-card:hover { 
    transform: translateY(-5px); 
    box-shadow: var(--shadow-xl); 
    border-color: var(--primary); 
}
.testimonial-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.testimonial-avatar { 
    width: 56px; height: 56px; border-radius: var(--radius-full); 
    display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; 
}
.testimonial-info h4 { font-size: 1rem; margin-bottom: 4px; }
.testimonial-info p { font-size: 0.85rem; color: var(--text-muted); }
.testimonial-rating { display: flex; gap: 2px; margin-bottom: 16px; }
.testimonial-rating svg { width: 18px; height: 18px; fill: #fbbf24; }
.testimonial-card blockquote { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; font-style: italic; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; }
.carousel-btn { 
    width: 48px; height: 48px; border-radius: var(--radius-full); 
    background: var(--bg-card); border: 1px solid var(--border); 
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all var(--transition-base);
}
.carousel-btn:hover { 
    background: var(--primary); border-color: var(--primary); 
    transform: scale(1.1);
}
.carousel-btn:hover svg { fill: white; }
.carousel-btn svg { width: 24px; height: 24px; fill: var(--text-secondary); transition: fill var(--transition-base); }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dot { 
    width: 10px; height: 10px; border-radius: var(--radius-full); 
    background: var(--border); cursor: pointer;
    transition: all var(--transition-base);
}
.carousel-dot:hover { background: var(--text-muted); }
.carousel-dot.active { width: 32px; background: var(--primary); }

/* ============================================
   FAQ SECTION
   ============================================ */
.faq { background: var(--bg-primary); }
.faq-grid { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.faq-item { 
    background: var(--bg-card); border: 1px solid var(--border); 
    border-radius: var(--radius-lg); overflow: hidden;
    transition: all var(--transition-base);
}
.faq-item:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.faq-question { 
    display: flex; align-items: center; justify-content: space-between; 
    padding: 24px; cursor: pointer; gap: 16px; 
}
.faq-question h3 { font-size: 1.05rem; font-weight: 600; }
.faq-question svg { 
    width: 24px; height: 24px; fill: var(--text-muted); flex-shrink: 0; 
    transition: transform var(--transition-base); 
}
.faq-item.active .faq-question svg { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-smooth); }
.faq-item.active .faq-answer { max-height: 300px; }
.faq-answer p { padding: 0 24px 24px; color: var(--text-secondary); line-height: 1.7; }

/* ============================================
   NEWSLETTER SECTION
   ============================================ */
.newsletter { background: var(--bg-secondary); padding: 80px 0; }
.newsletter-card { 
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7); 
    background-size: 200% 200%;
    animation: gradientFlow 5s ease infinite;
    border-radius: 28px; padding: 60px; 
    display: flex; align-items: center; justify-content: space-between; gap: 40px; 
    position: relative; overflow: hidden;
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
}
.newsletter-card::before { 
    content: ''; position: absolute; inset: 0; 
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 
}
.newsletter-content { position: relative; z-index: 1; }
.newsletter-content h2 { font-size: 2rem; color: white; margin-bottom: 12px; }
.newsletter-content p { color: rgba(255, 255, 255, 0.8); font-size: 1.05rem; max-width: 400px; }
.newsletter-form { 
    display: flex; flex-direction: column; gap: 12px; 
    position: relative; z-index: 1; min-width: 380px; 
}
.newsletter-form .form-group { display: flex; gap: 12px; }
.newsletter-form input { 
    flex: 1; padding: 16px 20px; 
    background: rgba(255, 255, 255, 0.95); border: none; 
    border-radius: var(--radius-full); font-size: 1rem; color: var(--text-primary);
    transition: all var(--transition-base);
}
.newsletter-form input:focus { 
    outline: none; 
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3); 
}
.newsletter-form input::placeholder { color: var(--text-muted); }
.newsletter-form .btn { 
    background: linear-gradient(135deg, #f6ad55, #ed8936); 
    color: white; padding: 16px 32px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
}
.newsletter-form .btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); }
.form-note { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); text-align: center; }

/* ============================================
   CTA SECTION
   ============================================ */
.cta { background: var(--bg-primary); padding: 80px 0; }
.cta-card { 
    background: var(--bg-tertiary); border-radius: 28px; 
    padding: 80px 60px; text-align: center; 
    position: relative; overflow: hidden;
    border: 1px solid var(--border);
}
.cta-card::before { 
    content: ''; position: absolute; top: -50%; left: -50%; 
    width: 200%; height: 200%; 
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 50%); 
    animation: rotate 20s linear infinite; 
}
.cta-card h2 { font-size: 2.5rem; margin-bottom: 16px; position: relative; z-index: 1; }
.cta-card p { 
    color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 32px; 
    max-width: 500px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; 
}
.cta-card .btn { position: relative; z-index: 1; }

/* ============================================
   FOOTER
   ============================================ */
footer { background: var(--bg-primary); border-top: 1px solid var(--border); padding: 80px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 48px; margin-bottom: 48px; }
.footer-brand { max-width: 320px; }
.footer-brand .logo { margin-bottom: 20px; }
.footer-brand p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; margin-bottom: 24px; }
.social-links { display: flex; gap: 12px; }
.social-link { 
    width: 42px; height: 42px; border-radius: var(--radius-full); 
    background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-base);
}
.social-link:hover { 
    background: var(--primary); transform: translateY(-3px); 
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}
.social-link:hover svg { fill: white; }
.social-link svg { width: 20px; height: 20px; fill: var(--text-secondary); transition: fill var(--transition-base); }
.footer-column h4 { font-size: 1rem; margin-bottom: 20px; }
.footer-column ul { list-style: none; }
.footer-column li { margin-bottom: 12px; }
.footer-column a { 
    color: var(--text-secondary); font-size: 0.95rem;
    transition: all var(--transition-base);
}
.footer-column a:hover { color: var(--primary); transform: translateX(5px); display: inline-block; }
.footer-bottom { 
    padding-top: 32px; border-top: 1px solid var(--border); 
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; 
}
.footer-bottom p { color: var(--text-muted); font-size: 0.9rem; }
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a { color: var(--text-muted); font-size: 0.9rem; transition: color var(--transition-base); }
.footer-bottom-links a:hover { color: var(--primary); }

/* ============================================
   MODALS
   ============================================ */
.modal { 
    position: fixed; inset: 0; z-index: 500; 
    display: flex; align-items: center; justify-content: center; 
    opacity: 0; visibility: hidden; 
    -webkit-transition: opacity 0.25s ease, visibility 0.25s ease;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    /* GPU acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.modal.active { opacity: 1; visibility: visible; }
.modal-overlay { 
    position: absolute; inset: 0; 
    background: rgba(0, 0, 0, 0.6); 
    /* PERFORMANCE: backdrop-filter disabled for mobile - controlled in mobile-styles.css */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.modal-content { 
    position: relative; background: var(--bg-card); 
    border-radius: var(--radius-xl); padding: 40px; 
    max-width: 480px; width: 90%; max-height: 90vh; overflow-y: auto; 
    /* GPU ACCELERATED transforms */
    -webkit-transform: translate3d(0, 20px, 0) scale(0.95);
    transform: translate3d(0, 20px, 0) scale(0.95);
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    box-shadow: var(--shadow-xl);
}
.modal.active .modal-content { 
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
}
.modal-close { 
    position: absolute; top: 20px; right: 20px; 
    width: 40px; height: 40px; border-radius: var(--radius-full); 
    background: var(--bg-tertiary); border: none; 
    display: flex; align-items: center; justify-content: center; 
    cursor: pointer; font-size: 1.5rem; color: var(--text-muted);
    transition: all var(--transition-base);
}
.modal-close:hover { background: var(--error); color: white; transform: rotate(90deg); }
.modal-header { text-align: center; margin-bottom: 32px; }
.modal-header h2 { font-size: 1.75rem; margin-bottom: 8px; }
.modal-header p { color: var(--text-secondary); }

/* Auth Forms */
.auth-form { display: flex; flex-direction: column; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-weight: 500; font-size: 0.9rem; color: var(--text-secondary); }
.form-group input, .form-group select { 
    padding: 14px 16px; background: var(--bg-input); 
    border: 1px solid var(--border); border-radius: var(--radius-md); 
    color: var(--text-primary); font-size: 1rem;
    transition: all var(--transition-base);
}
.form-group input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Password Input with Eye Toggle */
.password-input { 
    position: relative; 
    display: flex;
    align-items: center;
    width: 100%;
}
.password-input input { 
    width: 100%; 
    padding-right: 52px; /* Space for the toggle button */
    flex: 1;
}
.toggle-password { 
    position: absolute; 
    right: 4px; 
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: transparent; 
    border: none; 
    cursor: pointer; 
    padding: 0;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
    outline: none;
}
.toggle-password:hover {
    background: var(--bg-tertiary);
}
.toggle-password:focus {
    background: var(--bg-tertiary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.toggle-password:hover svg,
.toggle-password:focus svg {
    fill: var(--primary);
}
.toggle-password:active {
    transform: translateY(-50%) scale(0.95);
}
.toggle-password svg { 
    width: 20px; 
    height: 20px; 
    fill: var(--text-muted); 
    transition: fill 0.2s ease;
    pointer-events: none;
}

/* Eye icon states - show/hide icons */
.toggle-password .eye-open { display: block; }
.toggle-password .eye-closed { display: none; }
.toggle-password.showing .eye-open { display: none; }
.toggle-password.showing .eye-closed { display: block; }

.form-options { display: flex; justify-content: space-between; align-items: center; }
.checkbox-label { 
    display: flex; align-items: center; gap: 8px; 
    font-size: 0.9rem; color: var(--text-secondary); cursor: pointer; 
}
.checkbox-label input { width: 18px; height: 18px; accent-color: var(--primary); }
.forgot-password { font-size: 0.9rem; color: var(--primary); font-weight: 500; }
.auth-form .btn { width: 100%; padding: 16px; font-size: 1rem; }
.auth-divider { display: flex; align-items: center; gap: 16px; color: var(--text-muted); font-size: 0.9rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-switch { text-align: center; font-size: 0.95rem; color: var(--text-secondary); }
.auth-switch a { color: var(--primary); font-weight: 600; }

/* Social Login Buttons */
.social-login-buttons { display: flex; flex-direction: column; gap: 12px; }
.social-login-btn {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; padding: 14px 20px;
    background: var(--bg-tertiary); border: 1px solid var(--border);
    border-radius: var(--radius-md); font-weight: 500; font-size: 0.95rem;
    color: var(--text-primary); cursor: pointer;
    transition: all var(--transition-base);
}
.social-login-btn:hover { 
    border-color: var(--primary); 
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.social-login-btn svg { width: 20px; height: 20px; }
.social-login-btn.google svg { fill: #4285f4; }
.social-login-btn.facebook { background: #1877f2; color: white; border-color: #1877f2; }
.social-login-btn.facebook:hover { background: #166fe5; }
.social-login-btn.facebook svg { fill: white; }

/* Course Detail Modal */
.course-detail-modal .modal-content { max-width: 700px; padding: 0; }
.course-detail-header { 
    position: relative; height: 200px; 
    display: flex; align-items: center; justify-content: center; 
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; overflow: hidden; 
}
.course-detail-header svg { width: 80px; height: 80px; fill: white; opacity: 0.9; }
.course-detail-header .modal-close { top: 16px; right: 16px; background: rgba(0, 0, 0, 0.3); color: white; }
.course-detail-body { padding: 32px; }
.course-detail-body h2 { font-size: 1.5rem; margin-bottom: 16px; }
.course-detail-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.course-detail-meta span { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--text-secondary); }
.course-detail-meta svg { width: 18px; height: 18px; fill: currentColor; }
.course-detail-body > p { color: var(--text-secondary); margin-bottom: 24px; line-height: 1.7; }
.course-features { margin-bottom: 24px; }
.course-features h4 { margin-bottom: 16px; font-size: 1rem; }
.course-features ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.course-features li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-secondary); }
.course-features li svg { width: 18px; height: 18px; fill: var(--success); flex-shrink: 0; }
.course-detail-actions { display: flex; gap: 16px; padding-top: 24px; border-top: 1px solid var(--border); }
.course-detail-actions .btn { flex: 1; justify-content: center; }
.course-detail-price { font-size: 1.75rem; font-weight: 700; color: var(--primary); }
.course-detail-price span { font-size: 1rem; color: var(--text-muted); text-decoration: line-through; margin-left: 12px; font-weight: 400; }

/* Cart Modal */
.cart-modal .modal-content { max-width: 500px; }
.cart-items { max-height: 300px; overflow-y: auto; margin-bottom: 24px; }
.cart-item { 
    display: flex; align-items: center; gap: 16px; 
    padding: 16px; background: var(--bg-tertiary); 
    border-radius: var(--radius-md); margin-bottom: 12px;
    transition: all var(--transition-base);
    animation: slideInLeft 0.3s ease;
}
.cart-item:hover { transform: translateX(5px); }
.cart-item-image { 
    width: 60px; height: 60px; border-radius: var(--radius-sm); 
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; 
}
.cart-item-image svg { width: 28px; height: 28px; fill: white; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info h4 { font-size: 0.95rem; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-info p { font-size: 1rem; font-weight: 600; color: var(--primary); }

/* Cart item remove button - enhanced for better click handling */
.cart-item-remove { 
    width: 36px; 
    height: 36px; 
    min-width: 36px;
    border-radius: var(--radius-full); 
    background: var(--bg-input); 
    border: 1px solid var(--border); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer;
    transition: all var(--transition-base);
    flex-shrink: 0;
    padding: 0;
    outline: none;
}
.cart-item-remove:hover { 
    background: var(--error); 
    border-color: var(--error); 
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.cart-item-remove:active {
    transform: rotate(90deg) scale(0.95);
}
.cart-item-remove:hover svg { fill: white; }
.cart-item-remove svg { 
    width: 18px; 
    height: 18px; 
    fill: var(--text-muted); 
    transition: fill var(--transition-base);
    pointer-events: none; /* Ensure clicks go to button, not SVG */
}

.cart-empty { text-align: center; padding: 40px 20px; animation: fadeIn 0.5s ease; }
.cart-empty svg { width: 64px; height: 64px; fill: var(--text-muted); margin-bottom: 16px; }
.cart-empty h3 { font-size: 1.25rem; margin-bottom: 8px; }
.cart-empty p { color: var(--text-secondary); margin-bottom: 20px; }
.cart-total { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 16px 0; border-top: 1px solid var(--border); margin-bottom: 20px; 
}
.cart-total span { font-size: 1rem; color: var(--text-secondary); }
.cart-total strong { font-size: 1.5rem; color: var(--primary); }

/* ============================================
   ENHANCED TOAST NOTIFICATIONS
   ============================================ */
.toast-container { 
    position: fixed; bottom: 24px; right: 24px; z-index: 9999; 
    display: flex; flex-direction: column; gap: 12px; 
}
.toast { 
    display: flex; align-items: center; gap: 14px; 
    padding: 18px 24px; background: var(--bg-card); 
    border-radius: var(--radius-lg); 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), var(--shadow-glow); 
    min-width: 340px; max-width: 420px; 
    animation: toastSlideIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    border: 1px solid var(--border);
    position: relative; overflow: hidden;
}
.toast::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
}
.toast.success::before { background: linear-gradient(180deg, #22c55e, #16a34a); }
.toast.error::before { background: linear-gradient(180deg, #ef4444, #dc2626); }
.toast.warning::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.toast.info::before { background: linear-gradient(180deg, #3b82f6, #2563eb); }

.toast-emoji {
    font-size: 1.75rem;
    animation: bounce 0.5s ease;
}
.toast-icon { 
    width: 26px; height: 26px; flex-shrink: 0;
    animation: scaleIn 0.3s ease;
}
.toast.success .toast-icon { fill: var(--success); }
.toast.error .toast-icon { fill: var(--error); }
.toast.warning .toast-icon { fill: var(--warning); }
.toast.info .toast-icon { fill: #3b82f6; }
.toast-content { flex: 1; }
.toast-content h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 3px; }
.toast-content p { font-size: 0.85rem; color: var(--text-secondary); }
.toast-close { 
    background: none; border: none; cursor: pointer; 
    padding: 4px; color: var(--text-muted);
    transition: all var(--transition-base);
}
.toast-close:hover { color: var(--text-primary); transform: rotate(90deg); }
.toast-close svg { width: 18px; height: 18px; fill: currentColor; }
.toast-progress {
    position: absolute; bottom: 0; left: 0; height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    animation: toastProgress 4s linear forwards;
}
.toast.removing { animation: toastSlideOut 0.4s ease forwards; }

@keyframes toastSlideIn { 
    from { opacity: 0; transform: translateX(100%) scale(0.8); } 
    to { opacity: 1; transform: translateX(0) scale(1); } 
}
@keyframes toastSlideOut { 
    from { opacity: 1; transform: translateX(0) scale(1); } 
    to { opacity: 0; transform: translateX(100%) scale(0.8); } 
}
@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* ============================================
   LOADING OVERLAY
   ============================================ */
.loading-overlay { 
    position: fixed; inset: 0; 
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px);
    display: none; flex-direction: column; 
    align-items: center; justify-content: center; z-index: 9999; color: white; 
}
.loading-overlay.active { display: flex; }
.loading-spinner { 
    width: 60px; height: 60px; 
    border: 4px solid rgba(255, 255, 255, 0.2); 
    border-top-color: var(--primary); border-radius: 50%; 
    animation: spin 0.8s linear infinite; margin-bottom: 24px; 
}
.loading-overlay p { font-size: 1.125rem; font-weight: 500; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
    .hero h1 { font-size: 2.75rem; }
    .hero-grid { gap: 40px; }
    .features-grid, .courses-grid { grid-template-columns: repeat(2, 1fr); }
    .instructors-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonial-card { flex: 0 0 calc(50% - 12px); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
    .newsletter-card { flex-direction: column; text-align: center; }
    .newsletter-form { min-width: 100%; max-width: 100%; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-actions .btn-outline, .nav-actions .btn-primary { display: none; }
    .mobile-menu-btn { display: flex; }
    .hero { padding: 120px 0 80px; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 2.25rem; }
    .hero-visual { order: -1; }
    .hero-image { height: 300px; }
    .floating-card { display: none; }
    .hero-stats { gap: 32px; }
    section::before { display: none; }
    .section-header h2 { font-size: 2rem; }
    .features-grid, .courses-grid, .instructors-grid { grid-template-columns: 1fr; }
    .testimonial-card { flex: 0 0 100%; min-width: 300px; }
    .course-filters { flex-direction: column; align-items: stretch; }
    .search-box { max-width: 100%; }
    .sort-dropdown { width: 100%; margin-left: 0; }
    .sort-dropdown select { width: 100%; }
    .cta-card { padding: 50px 24px; }
    .cta-card h2 { font-size: 1.75rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .modal-content { padding: 32px 24px; margin: 16px; }
    .form-row { grid-template-columns: 1fr; }
    .toast-container { left: 16px; right: 16px; bottom: 16px; }
    .toast { min-width: auto; max-width: 100%; }
    .user-menu { top: auto; bottom: 0; right: 0; left: 0; width: 100%; border-radius: 20px 20px 0 0; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 1.875rem; }
    .hero-text { font-size: 1rem; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { justify-content: center; }
    .hero-stats { flex-direction: column; gap: 24px; }
    .stat-item { text-align: center; }
    .newsletter-card { padding: 40px 24px; }
    .newsletter-form .form-group { flex-direction: column; }
    .newsletter-form .btn { width: 100%; }
    .course-detail-actions { flex-direction: column; }
    .course-features ul { grid-template-columns: 1fr; }
}
/* ============================================
   KASHACADEMY - ENHANCED UI/UX POLISH
   Phase 5 - Additional Animations & Effects
   ============================================ */

/* Smooth Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Enhanced Loading States */
.skeleton {
    background: linear-gradient(90deg, var(--bg-input) 25%, var(--bg-card) 50%, var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Enhanced Button Hover Effects */
.btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::after {
    width: 300px;
    height: 300px;
}

.btn:active {
    transform: scale(0.98);
}

/* Card Hover Enhancement */
.course-card, .stat-card, .feature-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.course-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25);
}

/* Enhanced Input Focus */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
    transition: all 0.3s ease;
}

/* Smooth Page Transitions */
.content-section {
    animation: pageSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pageSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Modal Animations */
.modal.active .modal-content {
    animation: modalBounceIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes modalBounceIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Toast Notifications Enhancement */
.toast {
    animation: toastSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Gradient Text Animation */
.gradient-text-animated {
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899, #6366f1);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 5s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Pulse Animation for Notifications */
.pulse-dot {
    position: relative;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: var(--error);
    border-radius: 50%;
    animation: pulse-ring 1.5s infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Floating Animation */
.float {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Progress Bar Animation */
.progress-fill {
    position: relative;
    overflow: hidden;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Enhanced Table Row Hover */
.data-table tr {
    transition: all 0.2s ease;
}

.data-table tr:hover {
    background: var(--bg-input);
    transform: scale(1.01);
}

/* Badge Shine Effect */
.course-badge, .status-badge {
    position: relative;
    overflow: hidden;
}

.course-badge::before, .status-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* Staggered Animation for Lists */
.stagger-item {
    opacity: 0;
    animation: staggerFadeIn 0.5s forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }
.stagger-item:nth-child(6) { animation-delay: 0.6s; }

@keyframes staggerFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Icon Rotation on Hover */
.icon-rotate:hover svg {
    transform: rotate(360deg);
    transition: transform 0.5s ease;
}

/* Glassmorphism Effect */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Success State Animation */
.success-check {
    animation: checkmark 0.5s ease-in-out;
}

@keyframes checkmark {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Error Shake Animation */
.shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Loading Dots */
.loading-dots {
    display: inline-flex;
    gap: 4px;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    animation: loadingDot 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes loadingDot {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Smooth Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-input);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
}

/* Selection Color */
::selection {
    background: var(--primary);
    color: #fff;
}

/* Focus Visible for Accessibility */
:focus-visible {
    outline: 2px dashed var(--primary);
    outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   PHASE 5 - ENHANCED ANIMATIONS & UI POLISH
   ============================================ */

/* Page Load Animation */
body {
    animation: pageLoad 0.4s ease-out;
}
@keyframes pageLoad {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Card Hover Animations */
.course-card, .stat-card, .feature-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.course-card:hover, .stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.2);
}

/* Button Click Effect */
.btn, button {
    transition: all 0.2s ease;
}
.btn:active, button:active {
    transform: scale(0.97);
}

/* Button Glow on Hover */
.btn-primary:hover {
    box-shadow: 0 0 25px rgba(99, 102, 241, 0.4);
}

/* Stagger Animation for Cards */
.course-card { animation: cardFadeIn 0.5s ease both; }
.course-card:nth-child(1) { animation-delay: 0.05s; }
.course-card:nth-child(2) { animation-delay: 0.1s; }
.course-card:nth-child(3) { animation-delay: 0.15s; }
.course-card:nth-child(4) { animation-delay: 0.2s; }
.course-card:nth-child(5) { animation-delay: 0.25s; }
.course-card:nth-child(6) { animation-delay: 0.3s; }

@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Section Transition */
.content-section {
    animation: sectionSlideIn 0.4s ease-out;
}
@keyframes sectionSlideIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Spinner Animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Modal Animation */
.modal-overlay.active .modal-content,
.modal.active .modal-content {
    animation: modalBounce 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes modalBounce {
    0% { opacity: 0; transform: scale(0.9) translateY(-20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Toast Animation */
.toast {
    animation: toastSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

/* Input Focus Animation */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    transition: all 0.2s ease;
}

/* Nav Item Hover */
.nav-item {
    transition: all 0.2s ease;
}
.nav-item:hover {
    transform: translateX(4px);
}

/* Badge Shine Effect */
.course-badge, .admin-badge, .status-badge {
    position: relative;
    overflow: hidden;
}
.course-badge::after, .admin-badge::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shine 3s infinite;
}
@keyframes shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* Progress Bar Animation */
.progress-fill {
    animation: progressGrow 0.8s ease-out;
}
@keyframes progressGrow {
    from { width: 0; }
}

/* Table Row Hover */
.data-table tr {
    transition: all 0.2s ease;
}
.data-table tr:hover {
    background: var(--bg-input);
}

/* Chart Card Animation */
.chart-card {
    animation: chartFadeIn 0.5s ease-out;
}
@keyframes chartFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Comment Like Animation */
.comment-action.liked svg {
    fill: var(--primary);
    animation: likePopAnimation 0.3s ease;
}
@keyframes likePopAnimation {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* Slide Up Animation */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Success Animation */
.success-animation {
    animation: successPop 0.4s ease;
}
@keyframes successPop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   COMPREHENSIVE ANIMATIONS - ALL PAGES
   KashAcademy Animation System v2.0
   ============================================ */

/* === GLOBAL SMOOTH TRANSITIONS === */
*, *::before, *::after {
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, 
                border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

/* === PAGE LOAD ANIMATION === */
body {
    animation: pageLoad 0.5s ease-out;
}
@keyframes pageLoad {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* === BUTTON ANIMATIONS === */
button, .btn, [type="submit"], [type="button"] {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
button:hover, .btn:hover {
    transform: translateY(-2px);
}
button:active, .btn:active {
    transform: translateY(0) scale(0.97);
}
.btn-primary:hover {
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
}
.btn-secondary:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Ripple Effect */
button::before, .btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}
button:active::before, .btn:active::before {
    width: 300px;
    height: 300px;
}

/* === CARD ANIMATIONS === */
.course-card, .stat-card, .feature-card, .instructor-card, 
.testimonial-card, .social-card, .faq-item, .chart-card {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.course-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 30px 60px rgba(99, 102, 241, 0.25);
}

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

.feature-card:hover, .social-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.2);
}

.instructor-card:hover {
    transform: translateY(-10px) rotate(1deg);
}

/* Staggered Card Entrance */
.course-card, .stat-card, .feature-card, .social-card {
    animation: cardEntrance 0.6s ease-out both;
}
.course-card:nth-child(1), .stat-card:nth-child(1) { animation-delay: 0.05s; }
.course-card:nth-child(2), .stat-card:nth-child(2) { animation-delay: 0.1s; }
.course-card:nth-child(3), .stat-card:nth-child(3) { animation-delay: 0.15s; }
.course-card:nth-child(4), .stat-card:nth-child(4) { animation-delay: 0.2s; }
.course-card:nth-child(5) { animation-delay: 0.25s; }
.course-card:nth-child(6) { animation-delay: 0.3s; }
.course-card:nth-child(7) { animation-delay: 0.35s; }
.course-card:nth-child(8) { animation-delay: 0.4s; }

@keyframes cardEntrance {
    from { 
        opacity: 0; 
        transform: translateY(40px) scale(0.95); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* === INPUT ANIMATIONS === */
input, textarea, select {
    transition: all 0.3s ease;
}
input:hover, textarea:hover, select:hover {
    border-color: rgba(99, 102, 241, 0.5);
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 5px 20px rgba(99, 102, 241, 0.1);
    transform: translateY(-1px);
}

/* === MODAL ANIMATIONS === */
.modal-overlay, .modal, [class*="modal"] {
    animation: fadeIn 0.3s ease;
}
.modal-content, .modal-overlay > div:first-child {
    animation: modalBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalBounce {
    0% { opacity: 0; transform: scale(0.7) translateY(-50px); }
    50% { transform: scale(1.02) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* === TOAST ANIMATIONS === */
.toast {
    animation: toastSlide 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes toastSlide {
    from { opacity: 0; transform: translateX(100%) scale(0.8); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

/* === NAV & SIDEBAR ANIMATIONS === */
.nav-item, .nav-link, .sidebar-link, .menu-item {
    transition: all 0.25s ease;
    position: relative;
}
.nav-item:hover, .sidebar-link:hover {
    transform: translateX(5px);
    background: rgba(99, 102, 241, 0.1);
}
.nav-item::after, .sidebar-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.3s ease;
}
.nav-item:hover::after, .sidebar-link:hover::after {
    width: 100%;
}

/* === BADGE ANIMATIONS === */
.course-badge, .admin-badge, .status-badge, .cart-count, .badge {
    animation: badgePop 0.3s ease;
}
.course-badge, .admin-badge, .status-badge, .badge {
    position: relative;
    overflow: hidden;
}
@keyframes badgePop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
/* Shine effect */
.course-badge::after, .admin-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: badgeShine 3s infinite;
}
@keyframes badgeShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* === PROGRESS BAR ANIMATIONS === */
.progress-fill, .progress-bar-fill, [class*="progress"] > div {
    animation: progressGrow 1s ease-out;
    position: relative;
    overflow: hidden;
}
@keyframes progressGrow {
    from { width: 0 !important; }
}
.progress-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s infinite;
}
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* === TABLE ANIMATIONS === */
.data-table tbody tr, table tbody tr {
    transition: all 0.25s ease;
}
.data-table tbody tr:hover, table tbody tr:hover {
    background: rgba(99, 102, 241, 0.05);
    transform: scale(1.01);
}
.table-action-btn:hover {
    transform: scale(1.2);
}
.table-action-btn:active {
    transform: scale(0.9);
}

/* === ICON ANIMATIONS === */
svg, .icon {
    transition: all 0.3s ease;
}
button:hover svg, .btn:hover svg, a:hover svg {
    transform: scale(1.15);
}
.icon-spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* === LOADING ANIMATIONS === */
.loading, .spinner, .loader {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(99, 102, 241, 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.skeleton, .loading-skeleton {
    background: linear-gradient(90deg, var(--bg-input) 25%, var(--bg-card) 50%, var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s ease-in-out infinite;
}
@keyframes skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === SECTION ANIMATIONS === */
section, .content-section, .section {
    animation: sectionFadeIn 0.6s ease-out;
}
@keyframes sectionFadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === COMMENT ANIMATIONS === */
.comment-item, .comment {
    animation: commentSlide 0.4s ease-out;
}
@keyframes commentSlide {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}
.comment-action:hover {
    transform: scale(1.15);
    color: var(--primary);
}
.comment-action.liked svg, .liked svg {
    animation: likeHeart 0.4s ease;
    fill: var(--primary);
}
@keyframes likeHeart {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(0.9); }
    75% { transform: scale(1.15); }
}

/* === CHAPTER/LESSON ANIMATIONS === */
.chapter-item, .lesson-item {
    transition: all 0.25s ease;
}
.chapter-item:hover, .lesson-item:hover {
    background: rgba(99, 102, 241, 0.1);
    transform: translateX(8px);
    border-left: 3px solid var(--primary);
}
.chapter-item.completed .check, .completed svg {
    animation: checkPop 0.4s ease;
}
@keyframes checkPop {
    0% { transform: scale(0) rotate(-45deg); }
    50% { transform: scale(1.3) rotate(10deg); }
    100% { transform: scale(1) rotate(0); }
}

/* === AVATAR ANIMATIONS === */
.avatar, .user-avatar, .comment-avatar, .profile-avatar {
    transition: all 0.3s ease;
}
.avatar:hover, .user-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

/* === FAQ ANIMATIONS === */
.faq-item {
    transition: all 0.3s ease;
}
.faq-item:hover {
    background: rgba(99, 102, 241, 0.05);
    transform: translateX(5px);
}
.faq-answer {
    transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
}
.faq-item.active .faq-question svg {
    transform: rotate(180deg);
}

/* === FLOATING & BOUNCE === */
.float, .floating {
    animation: float 3s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
.bounce {
    animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* === PULSE EFFECTS === */
.pulse {
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
    50% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); }
}

/* === GRADIENT TEXT ANIMATION === */
.gradient-text, .animated-gradient {
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899, #6366f1);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 4s ease infinite;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* === SCROLL REVEAL === */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* === SUCCESS & ERROR === */
.success {
    animation: successPop 0.5s ease;
}
@keyframes successPop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}
.error, .shake {
    animation: shake 0.5s ease;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

/* === TOOLTIP ANIMATIONS === */
[data-tooltip]:hover::after {
    animation: tooltipFade 0.3s ease;
}
@keyframes tooltipFade {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === DROPDOWN ANIMATIONS === */
.dropdown-menu, .menu-dropdown {
    animation: dropdownSlide 0.3s ease;
}
@keyframes dropdownSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === CUSTOM SCROLLBAR === */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-input, #1a1a2e);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary, #6366f1), #a855f7);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #7c7ff2, #b76ef5);
}

/* === SELECTION === */
::selection {
    background: var(--primary, #6366f1);
    color: white;
}

/* === FOCUS VISIBLE === */
:focus-visible {
    outline: 2px dashed var(--primary, #6366f1);
    outline-offset: 3px;
}

/* === LINK HOVER === */
a {
    transition: all 0.25s ease;
}
a:hover {
    color: var(--primary, #6366f1);
}

/* === IMAGE HOVER === */
img {
    transition: all 0.4s ease;
}
img:hover {
    transform: scale(1.02);
}

/* === CHECKBOX/RADIO ANIMATIONS === */
input[type="checkbox"], input[type="radio"] {
    transition: all 0.2s ease;
}
input[type="checkbox"]:checked, input[type="radio"]:checked {
    animation: checkboxPop 0.3s ease;
}
@keyframes checkboxPop {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* === ACCESSIBILITY: REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === PRINT: NO ANIMATIONS === */
@media print {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   PURCHASED COURSE CARD STYLES
   ============================================ */

/* Purchased course card styling */
.course-card.purchased {
    border-color: var(--success);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(34, 197, 94, 0.02));
}

.course-card.purchased:hover {
    border-color: var(--success);
    box-shadow: 0 15px 40px rgba(34, 197, 94, 0.15);
}

/* Owned badge styling */
.course-card.purchased .course-badge {
    background: linear-gradient(135deg, var(--success), #16a34a);
    color: white;
}

/* Purchased course footer */
.course-footer-purchased {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--success);
    gap: 12px;
}

/* Enrolled badge */
.purchased-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--success);
    font-weight: 600;
    font-size: 0.9rem;
}

.purchased-badge svg {
    width: 18px;
    height: 18px;
    fill: var(--success);
}

/* Go to Course button */
.btn-go-to-course {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--success), #16a34a);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.btn-go-to-course:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
}

.btn-go-to-course:active {
    transform: translateY(0);
}

/* Mobile responsive adjustments for purchased cards */
@media (max-width: 768px) {
    .course-footer-purchased {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .purchased-badge {
        justify-content: center;
    }
    
    .btn-go-to-course {
        width: 100%;
    }
}

/* ============================================
   GLOBAL UI CONSISTENCY SYSTEM
   Apply to ALL pages: dashboard, course-player, 
   support, downloads, etc.
   ============================================ */

/* Global Link & Button Hover Fix - READABLE TEXT ALWAYS */
a.btn-primary,
button.btn-primary,
.btn-primary {
    color: white !important;
}
a.btn-primary:hover,
button.btn-primary:hover,
.btn-primary:hover,
a.btn-primary:focus,
button.btn-primary:focus,
.btn-primary:focus {
    color: white !important;
}

/* Global Interactive Elements */
.ka-interactive {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}
.ka-interactive:hover {
    transform: translateY(-2px);
}
.ka-interactive:active {
    transform: translateY(0) scale(0.98);
}

/* Global Card Hover Effect */
.ka-card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ka-card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .ka-card-hover:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(99, 102, 241, 0.1);
}

/* Global Button System - Consistent across all pages */
.ka-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.ka-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}
.ka-btn:active::before {
    width: 300px;
    height: 300px;
}
.ka-btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}
.ka-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5);
    color: white !important;
    background: linear-gradient(135deg, #818cf8, #a78bfa);
}
.ka-btn-secondary {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.ka-btn-secondary:hover {
    background: var(--primary);
    color: white !important;
    transform: translateY(-2px);
}
.ka-btn-outline {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.ka-btn-outline:hover {
    background: var(--bg-input);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}
.ka-btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white !important;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}
.ka-btn-success:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(34, 197, 94, 0.5);
    color: white !important;
}
.ka-btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}
.ka-btn-danger:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(239, 68, 68, 0.5);
    color: white !important;
}
.ka-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform 0.3s ease;
}
.ka-btn:hover svg {
    transform: translateX(3px);
}

/* Global Link System */
.ka-link {
    color: var(--primary);
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
}
.ka-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    transition: width 0.3s ease;
}
.ka-link:hover {
    color: var(--primary-light, #818cf8);
}
.ka-link:hover::after {
    width: 100%;
}

/* Global Animation Classes */
.ka-fade-in {
    animation: fadeIn 0.5s ease both;
}
.ka-slide-up {
    animation: slideInUp 0.5s ease both;
}
.ka-slide-down {
    animation: slideInDown 0.5s ease both;
}
.ka-slide-left {
    animation: slideInLeft 0.5s ease both;
}
.ka-slide-right {
    animation: slideInRight 0.5s ease both;
}
.ka-scale-in {
    animation: scaleIn 0.4s ease both;
}
.ka-bounce {
    animation: bounce 1s ease infinite;
}
.ka-pulse {
    animation: pulse 2s ease-in-out infinite;
}
.ka-float {
    animation: float 3s ease-in-out infinite;
}

/* Animation Delays */
.ka-delay-1 { animation-delay: 0.1s; }
.ka-delay-2 { animation-delay: 0.2s; }
.ka-delay-3 { animation-delay: 0.3s; }
.ka-delay-4 { animation-delay: 0.4s; }
.ka-delay-5 { animation-delay: 0.5s; }

/* Global Reveal Animation */
.ka-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ka-reveal.active,
.ka-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.ka-reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ka-reveal-left.active,
.ka-reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}
.ka-reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ka-reveal-right.active,
.ka-reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}
.ka-reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ka-reveal-scale.active,
.ka-reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Global Glow Effects */
.ka-glow {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}
.ka-glow:hover {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.5);
}
.ka-glow-success {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}
.ka-glow-success:hover {
    box-shadow: 0 0 40px rgba(34, 197, 94, 0.5);
}

/* Global Input Focus States */
.ka-input {
    transition: all 0.3s ease;
    border: 1px solid var(--border);
}
.ka-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    outline: none;
}

/* Mobile Touch States - No hover-only interactions */
@media (hover: none) and (pointer: coarse) {
    .ka-btn:hover,
    .ka-card-hover:hover,
    .ka-interactive:hover {
        transform: none;
    }
    .ka-btn:active {
        transform: scale(0.98);
    }
    .ka-card-hover:active {
        transform: scale(0.99);
    }
}

/* Global Skeleton Loading */
.ka-skeleton {
    background: linear-gradient(90deg, 
        var(--bg-input) 25%, 
        var(--bg-tertiary) 50%, 
        var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm, 8px);
}

/* Global Toast Animation */
.ka-toast-enter {
    animation: slideInRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ka-toast-exit {
    animation: slideInRight 0.3s ease reverse;
}

/* Accessibility - Focus Visible */
.ka-btn:focus-visible,
.ka-link:focus-visible,
.ka-interactive:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .ka-btn,
    .ka-interactive,
    .ka-reveal,
    .ka-animation {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================
   COMPREHENSIVE MOBILE RESPONSIVE - INDEX.HTML
   ============================================ */

/* Touch Target Sizing - Minimum 44px */
@media (max-width: 768px) {
    a, button, input, select, textarea,
    .btn, .nav-links a, .filter-tab, .category-btn {
        min-height: 44px;
    }
    
    /* Prevent zoom on input focus (iOS) */
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Mobile Menu Touch Optimizations */
@media (hover: none) and (pointer: coarse) {
    .mobile-menu-close:hover {
        transform: none;
        background: var(--bg-tertiary);
    }
    .mobile-menu-close:active {
        transform: scale(0.9);
        background: var(--primary);
    }
    .mobile-menu-close:active svg {
        fill: white;
    }
    .mobile-nav-links li a:hover {
        background: transparent;
    }
    .mobile-nav-links li a:active {
        background: var(--bg-tertiary);
        color: var(--primary);
    }
}

/* Safe Area Insets for Notched Phones */
@supports (padding: max(0px)) {
    .mobile-menu {
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
    .mobile-menu-close {
        right: max(20px, env(safe-area-inset-right));
    }
    header {
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
    }
    .toast-container {
        bottom: max(24px, env(safe-area-inset-bottom));
        left: max(24px, env(safe-area-inset-left));
        right: max(24px, env(safe-area-inset-right));
    }
    footer {
        padding-bottom: max(60px, env(safe-area-inset-bottom));
    }
}

/* Prevent Horizontal Scroll */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Small Mobile Refinements */
@media (max-width: 380px) {
    .mobile-menu-content {
        padding: 24px 16px;
    }
    .mobile-nav-links li a {
        font-size: 1rem;
        padding: 14px 16px;
    }
    .mobile-menu-actions .btn {
        min-height: 48px;
        font-size: 0.95rem;
    }
    .mobile-menu-close {
        width: 44px;
        height: 44px;
        top: 16px;
        right: 16px;
    }
    .mobile-menu-close svg {
        width: 20px;
        height: 20px;
    }
}

/* ============================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   GPU acceleration for smooth 60fps animations
   ============================================ */

/* Force GPU layer for animated elements */
@media (max-width: 768px) {
    .modal,
    .modal-content,
    .modal-overlay,
    .mobile-menu,
    .sidebar,
    .toast,
    .floating-card {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* Disable backdrop blur on mobile - too expensive */
    .modal-overlay {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.7) !important;
    }
    
    /* Simplify transitions on mobile */
    .btn,
    .course-card,
    .feature-card,
    .nav-links a {
        -webkit-transition-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Disable hover transforms on touch devices */
    @media (hover: none) {
        .course-card:hover,
        .feature-card:hover,
        .btn:hover {
            -webkit-transform: none !important;
            transform: none !important;
        }
        
        .course-card:active,
        .feature-card:active {
            -webkit-transform: scale(0.98) !important;
            transform: scale(0.98) !important;
        }
    }
    
    /* Optimize touch response */
    button, a, .btn {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* Reduce paint areas */
    .hero,
    section,
    footer {
        contain: content;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}