.blob,.carousel-slide,.hero-content,.animate-on-scroll{will-change:transform,opacity;transform:translateZ(0)}.hero{min-height:60vh;display:flex;flex-direction:column;justify-content:center;position:relative}.hero-bg-image{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.hero-bg-image img{width:100%;height:100%;object-fit:cover}.section-header{min-height:80px}.live-badge{background-color:#c62828;color:#fff}.skip-link{position:absolute;top:-40px;left:10px;background:#8e44ad;color:#fff;padding:8px 15px;z-index:10001;transition:top .3s;font-weight:600;text-decoration:none;border-radius:0 0 5px 5px}.skip-link:focus{top:0;outline:3px solid #f1c40f}.programs-toggle-wrap{margin-top:1.25rem;text-align:center}.more-programs{display:none;margin-top:1rem}.more-programs.open{display:grid}body.dark-mode .chapter-card,body.dark-mode .class-card{background:#1f2937cc;border-color:#ffffff14}body.dark-mode .chapter-card:hover,body.dark-mode .class-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px #be93d426;border-color:#be93d44d}body.dark-mode .chap-info h2,body.dark-mode .card-content h3{color:#ecf0f1}body.dark-mode .chap-info span,body.dark-mode .card-content p{color:#bdc3c7}body.dark-mode .arrow-icon,body.dark-mode .card-action i{background:#1f2937e6;color:#be93d4}body.dark-mode .chapter-card:hover .arrow-icon,body.dark-mode .class-card:hover .card-action i{background:#be93d4;color:#fff}body.dark-mode .chap-number{color:#be93d433}body.dark-mode .chapter-card:hover .chap-number{color:#be93d44d}.class-card,.feature-card{background:#ffffff73;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 32px #1f268712;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}body.dark-mode .class-card,body.dark-mode .feature-card{background:#0f172a99;border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 32px #0006}.class-card:hover,.feature-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 20px 40px #6f42c126;border-color:#6f42c166;background:var(--primary)}.class-card h3,.class-card p,.class-card .card-action,.class-card .card-action *,.feature-card h3,.feature-card p,.feature-card .feature-link,.feature-card .feature-link *{transition:color .3s ease}.class-card:hover h3,.class-card:hover p,.class-card:hover .card-action,.class-card:hover .card-action *,.feature-card:hover h3,.feature-card:hover p,.feature-card:hover .feature-link,.feature-card:hover .feature-link *{color:#fff}.class-card:hover .class-badge,.feature-card:hover .class-badge{background:#fff3;color:#fff}.class-card:hover .card-bg-icon{color:#ffffff26}body.dark-mode .class-card:hover,body.dark-mode .feature-card:hover{box-shadow:0 20px 40px #be93d433;border-color:#be93d466}.btn-primary{position:relative;overflow:hidden;z-index:1}.btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s ease;z-index:-1}.btn-primary:hover:before{left:100%}.hero-content{background:#ffffffb3;border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}body.dark-mode .hero-content{background:#0f172aa6;border:1px solid rgba(255,255,255,.1)}.feature-grid .feature-card{opacity:0;transform:translateY(20px);animation:floatUp .8s forwards}.feature-grid .feature-card:nth-child(1){animation-delay:.1s}.feature-grid .feature-card:nth-child(2){animation-delay:.3s}.feature-grid .feature-card:nth-child(3){animation-delay:.5s}.glass-header{background:#ffffffb3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.3);box-shadow:0 4px 20px #0000000d;transition:all .3s ease}body.dark-mode .glass-header{background:#0f172acc;border-bottom:1px solid rgba(255,255,255,.1)}.desktop-nav a{position:relative;font-weight:600;transition:color .3s}.desktop-nav a:after{content:"";position:absolute;width:0;height:2px;bottom:-2px;left:50%;background:var(--primary-500);transition:all .3s ease;transform:translate(-50%)}.desktop-nav a:hover:after,.desktop-nav a.active:after{width:80%}@media(max-width:768px){.hero-content{padding:2rem 1rem}.hero h1{font-size:2.5rem}}