*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,sans-serif;background:#0f1419;color:#e4e6ea;min-height:100vh;padding:40px 20px;line-height:1.6}.container{max-width:1400px;margin:0 auto}.header{text-align:center;margin-bottom:80px;animation:fadeInUp .8s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.badge{display:inline-flex;align-items:center;gap:8px;background:#4a90e21a;border:1px solid rgba(74,144,226,.2);padding:8px 20px;border-radius:30px;margin-bottom:40px;font-size:14px;color:#4a90e2}.badge:before{content:"";width:8px;height:8px;background:#4a90e2;border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;letter-spacing:-1px;margin-bottom:20px;background:linear-gradient(135deg,#fff,#8b92a1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:1.25rem;color:#8b92a1;font-weight:400}.videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:30px;margin-top:60px;position:relative}.video-card{position:relative;background:#ffffff05;border:1px solid rgba(255,255,255,.05);border-radius:20px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;animation:cardFadeIn .6s ease-out backwards;text-decoration:none}.video-card:nth-child(1){animation:cardFadeIn .6s ease-out backwards,float1 15s ease-in-out infinite;animation-delay:.05s,0s}.video-card:nth-child(2){animation:cardFadeIn .6s ease-out backwards,float2 13s ease-in-out infinite;animation-delay:.1s,1s}.video-card:nth-child(3){animation:cardFadeIn .6s ease-out backwards,float3 17s ease-in-out infinite;animation-delay:.15s,2s}.video-card:nth-child(4){animation:cardFadeIn .6s ease-out backwards,float4 14s ease-in-out infinite;animation-delay:.2s,.5s}.video-card:nth-child(5){animation:cardFadeIn .6s ease-out backwards,float5 16s ease-in-out infinite;animation-delay:.25s,1.5s}.video-card:nth-child(6){animation:cardFadeIn .6s ease-out backwards,float6 12s ease-in-out infinite;animation-delay:.3s,3s}.video-card:nth-child(7){animation:cardFadeIn .6s ease-out backwards,float1 18s ease-in-out infinite;animation-delay:.35s,2.5s}.video-card:nth-child(8){animation:cardFadeIn .6s ease-out backwards,float2 15s ease-in-out infinite;animation-delay:.4s,1.2s}.video-card:nth-child(9){animation:cardFadeIn .6s ease-out backwards,float3 13s ease-in-out infinite;animation-delay:.45s,.8s}.video-card:nth-child(10){animation:cardFadeIn .6s ease-out backwards,float4 19s ease-in-out infinite;animation-delay:.5s,2.2s}.video-card:nth-child(11){animation:cardFadeIn .6s ease-out backwards,float5 14s ease-in-out infinite;animation-delay:.55s,1.8s}.video-card:nth-child(12){animation:cardFadeIn .6s ease-out backwards,float6 17s ease-in-out infinite;animation-delay:.6s,.3s}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.video-card:hover{transform:translateY(-5px) scale(1.02)!important;background:#ffffff0a;border-color:#4a90e24d;box-shadow:0 20px 40px #0000004d;animation-play-state:paused!important}.video-thumbnail{position:relative;width:100%;padding-bottom:56.25%;background:linear-gradient(135deg,#1a1f2e,#2a3441);overflow:hidden}.video-thumbnail img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease,opacity .4s ease;opacity:.85}.video-card:hover .video-thumbnail img{transform:scale(1.05);opacity:1}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;background:#4a90e2e6;backdrop-filter:blur(10px);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease;opacity:0}.video-card:hover .play-button{opacity:1;transform:translate(-50%,-50%) scale(1.1)}.play-icon{width:0;height:0;border-left:18px solid white;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}.video-info{padding:24px}.video-title{font-size:1.1rem;font-weight:600;color:#e4e6ea;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s ease}.video-card:hover .video-title{color:#4a90e2}.loading{text-align:center;padding:60px;font-size:1.2rem;color:#8b92a1}.loading:after{content:"";display:inline-block;width:20px;height:20px;margin-left:10px;border:2px solid #4a90e2;border-radius:50%;border-top-color:transparent;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error{background:#ef44441a;border:1px solid rgba(239,68,68,.2);padding:20px;border-radius:12px;color:#ef4444;text-align:center;margin-top:40px}@keyframes float1{0%,to{transform:translateY(0) translate(0) rotate(0)}25%{transform:translateY(-15px) translate(8px) rotate(1.5deg)}50%{transform:translateY(8px) translate(-6px) rotate(-1deg)}75%{transform:translateY(-10px) translate(4px) rotate(.8deg)}}@keyframes float2{0%,to{transform:translateY(0) translate(0) rotate(0)}33%{transform:translateY(12px) translate(-10px) rotate(-1.2deg)}66%{transform:translateY(-14px) translate(7px) rotate(1deg)}}@keyframes float3{0%,to{transform:translateY(0) translate(0) rotate(0)}20%{transform:translateY(-10px) translate(-8px) rotate(.8deg)}40%{transform:translateY(13px) translate(9px) rotate(-1.5deg)}60%{transform:translateY(-16px) translate(-5px) rotate(1.2deg)}80%{transform:translateY(8px) translate(6px) rotate(-.7deg)}}@keyframes float4{0%,to{transform:translateY(0) translate(0) rotate(0)}30%{transform:translateY(14px) translate(7px) rotate(1.3deg)}60%{transform:translateY(-12px) translate(-9px) rotate(-1.1deg)}90%{transform:translateY(6px) translate(5px) rotate(.6deg)}}@keyframes float5{0%,to{transform:translateY(0) translate(0) rotate(0)}25%{transform:translateY(-13px) translate(-6px) rotate(-.9deg)}50%{transform:translateY(10px) translate(8px) rotate(1.4deg)}75%{transform:translateY(-8px) translate(-7px) rotate(-1.3deg)}}@keyframes float6{0%,to{transform:translateY(0) translate(0) rotate(0)}35%{transform:translateY(11px) translate(-8px) rotate(1.1deg)}70%{transform:translateY(-15px) translate(10px) rotate(-.8deg)}}@media (max-width: 768px){body{padding:20px 15px}.header{margin-bottom:50px}h1{font-size:2rem}.videos-grid{grid-template-columns:1fr;gap:20px}.video-info{padding:18px}.video-card{animation:cardFadeIn .6s ease-out backwards!important}}