.feature-grid-container{padding:2rem 0}.feature-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;display:grid}.feature-card{color:inherit;background-color:#fff;border-radius:1rem;flex-direction:column;text-decoration:none;transition:transform .3s,box-shadow .3s;display:flex;overflow:hidden;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.feature-card:hover{transform:translateY(-10px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.feature-card-icon{color:#fff;justify-content:center;align-items:center;padding:2rem;font-size:2.5rem;display:flex}.feature-card-content{text-align:center;padding:1.5rem}.feature-card-content h3{color:#000;margin-bottom:.5rem;font-size:1.25rem;font-weight:700}.feature-card-content p{color:#6b7280;font-size:.9rem}
.onboarding-backdrop{z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#0009;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0;overflow:hidden}.dust{pointer-events:none;background:url("data:image/svg+xml;utf8,<svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"10\" cy=\"10\" r=\"1\" fill=\"white\" opacity=\"0.2\"/><circle cx=\"30\" cy=\"50\" r=\"0.5\" fill=\"white\" opacity=\"0.3\"/><circle cx=\"70\" cy=\"20\" r=\"1.2\" fill=\"white\" opacity=\"0.15\"/><circle cx=\"90\" cy=\"80\" r=\"0.8\" fill=\"white\" opacity=\"0.25\"/><circle cx=\"50\" cy=\"90\" r=\"1\" fill=\"white\" opacity=\"0.2\"/><circle cx=\"20\" cy=\"70\" r=\"0.6\" fill=\"white\" opacity=\"0.3\"/></svg>");width:100%;height:100%;animation:20s linear infinite dust-animation;position:absolute;top:0;left:0}@keyframes dust-animation{0%{transform:translate(0)}to{transform:translate(100px,100px)}}.onboarding-modal{color:#f0f0f0;text-align:center;background-color:#2d2d2d;border:1px solid #444;border-radius:15px;flex-direction:column;justify-content:space-between;width:90%;max-width:600px;min-height:500px;padding:30px;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000080}.onboarding-modal:before{content:"";z-index:0;background:radial-gradient(at bottom,#ffffff26 0%,#fff0 70%);width:250%;height:100%;animation:8s ease-in-out infinite bottom-light-animation;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@keyframes bottom-light-animation{0%{opacity:.7;transform:translate(-50%)scaleY(1)}50%{opacity:1;transform:translate(-50%)scaleY(1.2)}to{opacity:.7;transform:translate(-50%)scaleY(1)}}.close-btn{color:#aaa;cursor:pointer;z-index:2;background:0 0;border:none;font-size:1.5rem;transition:color .3s;position:absolute;top:15px;right:15px}.close-btn:hover{color:#fff}.onboarding-content{opacity:1;z-index:1;flex-direction:column;flex-grow:1;justify-content:center;transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:flex;position:relative}.onboarding-content.slide-out-left{opacity:0;transform:translate(-100%)}.onboarding-content.slide-in-right{opacity:1;animation:.3s forwards slideInFromRight;transform:translate(0)}.onboarding-content.slide-out-right{opacity:0;transform:translate(100%)}.onboarding-content.slide-in-left{opacity:1;animation:.3s forwards slideInFromLeft;transform:translate(0)}@keyframes slideInFromRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}.animation-container{width:50%;height:100%;margin:0 auto 10px}.animation-container iframe{border-radius:10px;width:100%;height:100%}.onboarding-title{margin-bottom:15px;font-size:1.8rem;font-weight:600}.onboarding-description{color:#ccc;max-width:80%;margin:0 auto;font-size:1.1rem;line-height:1.6}.onboarding-navigation{z-index:1;justify-content:space-between;align-items:center;margin-top:30px;padding:0 20px;display:flex;position:relative}.nav-btn{color:#fff;cursor:pointer;background-color:#4a4a4a;border:none;border-radius:20px;align-items:center;gap:8px;padding:10px 20px;font-size:1rem;transition:background-color .3s;display:flex}.nav-btn:hover{background-color:#5a5a5a}.prev-btn{visibility:visible}.dots{gap:10px;display:flex}.dot{background-color:#666;border-radius:50%;width:10px;height:10px;transition:background-color .3s}.dot.active{background-color:#0af}.finish-btn{background-color:#007bff}.finish-btn:hover{background-color:#0056b3}