.onboarding-section{border-radius:40px;max-width:1140px;margin:0 auto;padding:16px 48px 100px;position:relative;overflow:hidden}.onboarding-section-wrapper{background:var(--flu-bg-primary)}.onboarding-header{text-align:center;opacity:0;margin-bottom:24px;transition:all .35s cubic-bezier(.16,1,.3,1);transform:translateY(24px)}.onboarding-header.visible{opacity:1;transform:translateY(0)}:root.dark .onboarding-title{color:#ccc;text-shadow:0 0 8px #ffffff14,0 2px 6px #0000004d;letter-spacing:.04em;line-height:1}:root:not(.dark) .onboarding-title{color:#111;text-shadow:none;letter-spacing:.04em;margin-top:32px;line-height:1}.onboarding-cards-row{justify-content:center;align-items:center;gap:24px;padding:20px 0;display:flex}.onboarding-card{cursor:default;opacity:0;border-radius:28px;flex:1;max-width:340px;transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1),flex .25s cubic-bezier(.16,1,.3,1),max-width .25s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;position:relative;overflow:hidden}:root.dark .onboarding-card{-webkit-backdrop-filter:blur(40px)saturate(1.2);background:linear-gradient(135deg,#785adc05 0%,#3c288c03 50%,#1e145008 100%);border:1px solid #a082ff14;box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff0f,inset 0 -1px #0000001a}:root:not(.dark) .onboarding-card{-webkit-backdrop-filter:blur(40px)saturate(1.2);background:linear-gradient(135deg,#240a49 0%,#240a49d9 40%,#240a4999 100%);border:1px solid #a082ff14;box-shadow:0 8px 32px #0000004d}:root.dark .onboarding-card:first-child{background:linear-gradient(135deg,#8c64ff05 0%,#5032b403 50%,#140f3c08 100%);border-color:#8c64ff1a}:root.dark .onboarding-card:nth-child(2){background:linear-gradient(135deg,#50c8b405 0%,#288c7803 50%,#0f322d08 100%);border-color:#50c8b41a}:root.dark .onboarding-card:nth-child(3){background:linear-gradient(135deg,#dc64a005 0%,#96326e03 50%,#3c142d08 100%);border-color:#dc64a01a}:root:not(.dark) .onboarding-card:first-child{border-color:#8c64ff1a}:root:not(.dark) .onboarding-card:nth-child(2){border-color:#50c8b41a}:root:not(.dark) .onboarding-card:nth-child(3){border-color:#dc64a01a}.onboarding-card:after{content:"";z-index:2;background:linear-gradient(90deg,#0000,#ffffff47,#0000);height:1px;position:absolute;top:0;left:10%;right:10%}.onboarding-card.revealed{opacity:1}.onboarding-card:first-child.revealed{z-index:5;transform:translateY(0)rotate(-2deg)scale(1.05)}.onboarding-card:nth-child(2).revealed{transform:translate(7px)translateY(40px)rotate(1deg)scale(1)}.onboarding-card:nth-child(3).revealed{transform:translateY(10px)rotate(-1.5deg)scale(1)}.onboarding-card:hover{z-index:10;transform:scale(1.2)!important}.onboarding-card:first-child:hover{border:1.5px solid #8c64ff47;box-shadow:0 16px 60px #00000059,0 0 50px #8c64ff1f,inset 0 1px #ffffff14}.onboarding-card:nth-child(2):hover{border:1.5px solid #50c8b447;box-shadow:0 16px 60px #00000059,0 0 50px #50c8b41f,inset 0 1px #ffffff14}.onboarding-card:nth-child(3):hover{border:1.5px solid #dc64a047;box-shadow:0 16px 60px #00000059,0 0 50px #dc64a01f,inset 0 1px #ffffff14}.onboarding-card-number{color:#8c64ff1f;z-index:3;letter-spacing:-1px;font-family:Inter,sans-serif;font-size:20px;font-weight:900;line-height:1;position:absolute;top:16px;right:20px}.onboarding-card-content{z-index:3;padding:36px 28px 16px;position:relative}.onboarding-card-title{letter-spacing:-2px;color:#fff;font-family:Inter,sans-serif;font-size:52px;font-weight:900;line-height:1;transition:font-size .35s cubic-bezier(.16,1,.3,1),letter-spacing .35s cubic-bezier(.16,1,.3,1);display:inline-block;position:relative}.onboarding-card-title .title-icon{color:#8c64ff40;font-size:.5em;transition:font-size .35s cubic-bezier(.16,1,.3,1);position:absolute;top:50%;left:-32px;transform:translateY(-50%)}.onboarding-card:hover .title-icon{font-size:.7em}.onboarding-card.text-shrink .onboarding-card-title{letter-spacing:-.5px;font-size:32px}.onboarding-card-title:after{content:"";background:linear-gradient(90deg,#8c64ff40,#8c64ff05);border-radius:2px;width:0;height:2px;transition:width .3s cubic-bezier(.16,1,.3,1) .1s;position:absolute;bottom:-10px;left:0;box-shadow:0 0 6px #8c64ff26}.onboarding-card.text-shrink .onboarding-card-title:after{width:120%}.onboarding-card-desc{color:#eee;opacity:0;margin-top:20px;font-family:Inter,sans-serif;font-size:14px;font-weight:700;line-height:1.6;transition:all .3s cubic-bezier(.16,1,.3,1);transform:translateY(10px)}.onboarding-card.text-shrink .onboarding-card-desc{opacity:1;transform:translateY(0)}.onboarding-card-desc span.obc{opacity:0;transition:opacity 20ms,color .4s .1s,text-shadow .4s .1s;display:inline}.onboarding-card-desc span.obc.visible{opacity:1}.onboarding-card:first-child .onboarding-card-desc span.obc.visible{color:#a78bfa;text-shadow:0 0 12px #a78bfa80}.onboarding-card:nth-child(2) .onboarding-card-desc span.obc.visible{color:#beff50;text-shadow:0 0 12px #beff5080}.onboarding-card:nth-child(3) .onboarding-card-desc span.obc.visible{color:#ff8fab;text-shadow:0 0 12px #ff8fab80}.onboarding-card-desc span.obc.settled{color:inherit!important;text-shadow:none!important}.ob-type-cursor{vertical-align:text-bottom;background:currentColor;width:2px;height:1em;margin-left:2px;animation:.6s step-end infinite obCursorBlink;display:inline-block}@keyframes obCursorBlink{0%,to{opacity:1}50%{opacity:0}}.ob-highlight{font-family:"Montserrat Alternates", var(--font-montserrat-alt), sans-serif;color:inherit;white-space:nowrap;background:linear-gradient(90deg,#beff50 100%,#0000 100%) 0/0% 100% no-repeat;border-radius:4px;padding:1px 2px 3px;font-style:normal;font-weight:800;transition:background-size .5s,color .3s;display:inline}.ob-highlight.active{color:#111;background-size:100% 100%}.ob-highlight.active span.obc.settled{color:#111!important;text-shadow:none!important}.onboarding-card-visual{z-index:3;opacity:0;padding:8px 18px 22px;transition:all .35s cubic-bezier(.16,1,.3,1);position:relative;transform:translateY(24px)}.onboarding-card.screenshot-in .onboarding-card-visual{opacity:1;transform:translateY(0)}.ob-visual-inner{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0a0b0e99;border:1px solid #ffffff12;border-radius:18px;overflow:hidden}.ob-visual-placeholder{aspect-ratio:16/9;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex;position:relative;overflow:hidden}.ob-quiz-container{z-index:3;opacity:0;padding:8px 18px 22px;transition:all .35s cubic-bezier(.16,1,.3,1);position:relative;transform:translateY(24px)}.onboarding-card.screenshot-in .ob-quiz-container{opacity:1;transform:translateY(0)}.ob-quiz-inner{background:#0c0d10e0;border:1px solid #ffffff12;border-radius:18px;padding:24px}.ob-quiz-question{color:#ffffffe6;margin-bottom:16px;font-size:13px;font-weight:600;line-height:1.5}.ob-quiz-options{flex-direction:column;gap:8px;transition:filter .4s,opacity .4s;display:flex}.ob-quiz-options.blurred{filter:blur(3px);opacity:.5;pointer-events:none}.ob-quiz-option{text-align:left;cursor:pointer;color:#ffffffbf;background:#ffffff05;border:1px solid #ffffff12;border-radius:14px;width:100%;padding:12px 16px;font-family:Inter,sans-serif;font-size:12px;font-weight:500;transition:all .3s;display:block}.ob-quiz-option:hover{color:#fffc;background:#ffffff0a;border-color:#ffffff26}.ob-quiz-result{opacity:0;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:14px;transition:all .4s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;top:0;bottom:0;left:0;right:0;transform:scale(.95)}.ob-quiz-result.show{opacity:1;pointer-events:auto;transform:scale(1)}.ob-result-card{text-align:center;border-radius:16px;max-width:280px;padding:18px 20px;font-size:12px;font-weight:500;line-height:1.6}.ob-result-card.correct{color:#beff50d9;background:#beff500f;border:1px solid #beff5033}.ob-result-card.wrong{color:#ff9696d9;background:#ef44440f;border:1px solid #ef444433}.ob-quiz-reset{cursor:pointer;color:#eee;background:#ffffff08;border:1px solid #ffffff1a;border-radius:10px;padding:8px 18px;font-family:Inter,sans-serif;font-size:11px;font-weight:600;transition:all .3s}.ob-quiz-reset:hover{color:#fff;border-color:#fff3}.ob-live-badge{color:#fffc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;background:#0006;border-radius:20px;align-items:center;gap:5px;padding:4px 10px;font-size:8px;font-weight:600;transition:opacity .5s .3s;display:flex;position:absolute;top:14px;right:14px}.onboarding-card.screenshot-in .ob-live-badge{opacity:1}.ob-live-badge:before{content:"";background:#ef4444;border-radius:50%;flex-shrink:0;width:6px;height:6px;animation:1.5s infinite obLivePulse}@keyframes obLivePulse{0%,to{box-shadow:0 0 #ef444480}50%{box-shadow:0 0 0 5px #ef444400}}.ob-hand-raise{color:#fffc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;opacity:0;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:20px;align-items:center;gap:4px;padding:4px 10px;font-size:8px;font-weight:600;transition:all .3s;display:flex;position:absolute;bottom:12px;right:12px}.onboarding-card.screenshot-in .ob-hand-raise{opacity:1;transition:opacity .5s .8s,background .3s,transform .3s}.ob-hand-raise.raised{color:#c4b5fd;background:#a78bfa40;border-color:#a78bfa66;transform:scale(1.05)}.ob-glow-bg{filter:blur(130px);pointer-events:none;opacity:0;border-radius:50%;transition:opacity 2s;position:absolute}.ob-glow-bg.visible{opacity:1}:root:not(.dark) .ob-glow-bg{opacity:0!important}.ob-glow-1{background:#783cdc40;width:800px;height:400px;bottom:-10%;left:10%}.ob-glow-2{background:#b43cc826;width:500px;height:300px;bottom:-5%;right:10%}.ob-lesson-selector{z-index:10;scrollbar-width:none;background:linear-gradient(160deg,#12141a,#0c0e14);flex-direction:column;gap:0;padding:12px 14px;transition:opacity .5s;display:flex;position:absolute;top:0;bottom:0;left:0;right:0;overflow-y:auto}.ob-lesson-selector::-webkit-scrollbar{display:none}.ob-lesson-selector.hidden{opacity:0;pointer-events:none}.ob-lesson-item{cursor:default;border-bottom:1px solid #ffffff0f;border-radius:6px;justify-content:space-between;align-items:center;padding:7px 10px;transition:all .3s;display:flex}.ob-lesson-item.active{background:#a78bfa26;border-color:#a78bfa33}.ob-lesson-item-left{align-items:center;gap:8px;display:flex}.ob-lesson-circle{border:1.5px solid #fff3;border-radius:50%;flex-shrink:0;width:14px;height:14px}.ob-lesson-item.active .ob-lesson-circle{background:#a78bfa4d;border-color:#a78bfa}.ob-lesson-name{letter-spacing:.3px;color:#fffc;font-size:9px;font-weight:600}.ob-lesson-item.active .ob-lesson-name{color:#a78bfa}.ob-lesson-count{color:#fffc;font-size:8px;font-weight:500}.ob-lesson-header{border-bottom:1px solid #ffffff14;margin-bottom:2px;padding:4px 10px 8px}.ob-lesson-header span{letter-spacing:.5px;color:#ffffffe6;font-size:10px;font-weight:700}.ob-video-overlay{z-index:5;cursor:pointer;justify-content:center;align-items:center;display:none;position:absolute;top:0;bottom:0;left:0;right:0}.ob-video-play-btn{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;z-index:6;background:#ffffff1f;border:1.5px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:16px;transition:all .3s;display:flex}.ob-video-play-btn:hover{background:#fff3;transform:scale(1.08)}.ob-video-progress-track{z-index:6;background:#ffffff1f;width:100%;height:5px;position:absolute;bottom:0;left:0;right:0}.ob-video-progress-fill{background:linear-gradient(90deg,#a78bfa,#c4b5fd);border-radius:0 3px 3px 0;width:0%;height:100%;transition:width .1s linear;box-shadow:0 0 8px #a78bfa80,0 0 16px #a78bfa33}@media (max-width:768px){.onboarding-section{padding:40px 16px 60px}.onboarding-cards-row{flex-direction:column;gap:32px}.onboarding-card{max-width:100%}.onboarding-card.revealed,.onboarding-card:first-child.revealed,.onboarding-card:nth-child(2).revealed,.onboarding-card:nth-child(3).revealed{transform:none!important}.onboarding-card:hover{transform:scale(1.02)!important}.onboarding-card-title{font-size:40px}.onboarding-card.text-shrink .onboarding-card-title{font-size:28px}}