.interactive-demo{background:#0f172a;justify-content:flex-start;padding:0;position:relative}.status-bar{box-sizing:border-box;z-index:10;color:#fff;justify-content:space-between;align-items:center;width:100%;height:44px;padding:0 24px;font-size:13px;font-weight:600;display:flex;position:absolute;top:0;left:0}.status-icons{align-items:center;gap:6px;display:flex}.status-icons svg{height:12px}.mock-screen{box-sizing:border-box;opacity:0;pointer-events:none;text-align:left;flex-direction:column;width:100%;height:calc(100% - 44px);padding:0 24px 24px;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:44px;left:0;transform:translate(100%)}.mock-screen.active{opacity:1;pointer-events:auto;transform:translate(0)}.mock-screen.exit-left{opacity:0;transform:translate(-100%)}.mock-screen.exit-right{opacity:0;transform:translate(100%)}.screen-login{text-align:center;justify-content:center;align-items:center}.mock-logo{background:var(--color-teal);border-radius:16px;justify-content:center;align-items:center;width:64px;height:64px;margin-bottom:24px;font-size:24px;font-weight:900;display:flex}.mock-input-group{flex-direction:column;gap:12px;width:100%;margin-bottom:24px;display:flex}.mock-input-group input{color:#fff;box-sizing:border-box;background:#1e293b;border:1px solid #334155;border-radius:12px;width:100%;padding:14px;font-family:inherit;font-size:14px}.mock-input-group input:focus{border-color:var(--color-teal);outline:none}.interactive-demo .mock-btn{background:var(--color-teal);color:#fff;cursor:pointer;text-align:center;box-sizing:border-box;border-radius:12px;width:100%;margin:0;padding:14px;font-weight:700;transition:all .2s}.interactive-demo .mock-btn:active{transform:scale(.96)}.interactive-demo .mock-btn.hidden{opacity:0;pointer-events:none;transform:translateY(10px)}.mock-header{text-align:center;border-bottom:1px solid #1e293b;margin-top:12px;margin-bottom:24px;padding-bottom:16px;font-size:18px;font-weight:800}.mock-grid{flex:1;grid-template-columns:1fr 1fr;align-content:flex-start;gap:12px;display:grid}.mock-card{text-align:center;cursor:pointer;background:#1e293b;border:1px solid #334155;border-radius:16px;flex-direction:column;align-items:center;gap:8px;padding:24px 12px;font-size:14px;font-weight:600;transition:all .2s;display:flex}.card-icon{font-size:24px}.mock-card:hover,.mock-card:active{border-color:var(--color-teal);background:#334155;transform:translateY(-2px)}.bottom-nav{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-sizing:border-box;z-index:10;background:#0f172af2;border-top:1px solid #334155;justify-content:space-around;align-items:center;width:100%;height:70px;padding:0 10px;display:flex;position:absolute;bottom:0;left:0}.nav-item{color:#64748b;cursor:pointer;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:600;display:flex}.nav-item svg{width:22px;height:22px}.nav-item.active{color:var(--color-teal)}.test-top{border-bottom:1px solid #1e293b;justify-content:space-between;align-items:center;margin-top:12px;margin-bottom:24px;padding-bottom:16px;display:flex}.timer{font-variant-numeric:tabular-nums;color:#ef4444;background:#ef44441a;border-radius:6px;padding:4px 8px;font-size:14px;font-weight:700}.mock-progress{background:#1e293b;border-radius:4px;width:100%;height:4px;margin-bottom:24px;overflow:hidden}.progress-bar{background:var(--color-teal);width:25%;height:100%}.mock-q{margin-bottom:24px;font-size:16px;font-weight:600;line-height:1.5}.q-num{color:var(--color-teal);margin-right:4px}.mock-options{flex-direction:column;gap:12px;display:flex}.mock-opt{cursor:pointer;background:0 0;border:2px solid #1e293b;border-radius:12px;padding:14px 16px;font-size:15px;transition:all .2s}.mock-opt.selected{border-color:var(--color-teal);background:#14b8a61a}.bottom-btn{margin-top:auto!important}.screen-score{text-align:center;justify-content:center;align-items:center}.score-ring{width:140px;height:140px;margin-bottom:24px;position:relative}.circular-chart{max-width:100%;max-height:250px;margin:0 auto;display:block}.circle-bg{fill:none;stroke:#1e293b;stroke-width:2.5px}.circle{fill:none;stroke-width:2.5px;stroke-linecap:round;stroke:var(--color-teal);transition:stroke-dasharray 1.5s ease-out}.score-text{width:100%;height:100%;color:var(--color-teal);justify-content:center;align-items:center;font-size:32px;font-weight:900;display:flex;position:absolute;top:0;left:0}.stats-row{gap:16px;width:100%;margin-bottom:32px;display:flex}.stat-box{background:#1e293b;border:1px solid #334155;border-radius:12px;flex:1;padding:16px 8px}.stat-lbl{color:#94a3b8;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;font-size:12px;font-weight:600}.stat-val{color:#fff;font-variant-numeric:tabular-nums;font-size:20px;font-weight:800}.screen-hub{flex-direction:column;padding:12px;display:flex;overflow-y:auto}.hub-header{text-align:center;margin-bottom:12px}.hub-header .mock-logo{border-radius:12px;width:44px;height:44px;margin:0 auto 8px;font-size:18px}.hub-header h3{color:#fff;margin:0 0 2px;font-size:17px;font-weight:800}.hub-grid{grid-template-columns:1fr 1fr;gap:8px;width:100%;display:grid}.hub-card{text-align:center;cursor:pointer;background:#1e293b;border:1px solid #334155;border-radius:14px;flex-direction:column;align-items:center;padding:10px 8px;transition:all .2s;display:flex}.hub-card:hover,.hub-card:active{border-color:var(--color-teal);background:#283548;transform:translateY(-2px);box-shadow:0 6px 20px #14b8a633}.hub-card-icon{margin-bottom:4px;font-size:22px}.hub-card-name{color:#fff;font-size:12px;font-weight:700;line-height:1.2}.hub-card-tag{color:#94a3b8;margin-top:2px;font-size:9px}.screen-viewer{flex-direction:column;display:flex;overflow:hidden;padding:0!important}.in-app-bar{z-index:20;box-sizing:border-box;background:#0f172af2;border-bottom:1px solid #334155;flex-shrink:0;justify-content:space-between;align-items:center;height:38px;padding:0 10px;display:flex}.in-app-back{color:var(--color-teal);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 6px;font-family:inherit;font-size:13px;font-weight:700;transition:background .2s}.in-app-back:hover{background:#14b8a626}.in-app-title{color:#fff;white-space:nowrap;text-overflow:ellipsis;margin-left:8px;margin-right:auto;font-size:13px;font-weight:700;overflow:hidden}.hero-demo-iframe{transform-origin:0 0;box-sizing:border-box;background:#0f172a;border:none;flex-shrink:0;width:375px;height:704px;display:block;transform:scale(.736)}.edtech-app-wrapper{flex:1;width:100%;position:relative;overflow:hidden}.edtech-app-wrapper .mock-screen{height:100%;top:0}.edtech-app-wrapper.hidden,.hidden{display:none!important}
