:root{--ink:#071c25;--teal:#087f75;--mint:#61d2ba;--paper:#f4faf8;--line:rgba(7,28,37,.12);--gold:#f2b44b}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Inter,"Segoe UI",Arial,sans-serif;background:#061b22;color:var(--ink)}button,a{font:inherit}.promo{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 15% 20%,rgba(34,167,145,.22),transparent 35%),linear-gradient(145deg,#061b22,#0b3136 60%,#0e5148)}.ambient{position:absolute;border-radius:50%;filter:blur(3px);opacity:.35;animation:float 9s ease-in-out infinite}.ambient-one{width:34vw;height:34vw;background:#25c4a8;right:-12vw;top:-14vw}.ambient-two{width:24vw;height:24vw;background:#e6ae4b;left:-12vw;bottom:-14vw;animation-delay:-4s}.promo-top{height:70px;padding:0 4vw;display:flex;align-items:center;gap:24px;color:#fff;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;letter-spacing:.06em}.brand span{width:36px;height:36px;border-radius:11px;background:linear-gradient(145deg,var(--mint),#0c8c7f);display:grid;place-items:center;font-size:12px;font-weight:900}.promo-progress{height:4px;background:rgba(255,255,255,.16);border-radius:99px;flex:1;overflow:hidden}.promo-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--mint),var(--gold));transition:width .2s linear}.promo-top time{font-variant-numeric:tabular-nums;font-size:12px;color:#cbe5df}.promo-stage{position:absolute;inset:70px 3vw 118px;display:grid;place-items:center;perspective:1500px}.scene{width:min(1180px,92vw);height:min(650px,68vh);animation:sceneIn .8s cubic-bezier(.2,.8,.2,1) both}.hero-scene{display:grid;place-items:center;text-align:center;color:#fff}.hero-mark{font-size:clamp(60px,11vw,150px);line-height:.8;font-weight:950;letter-spacing:-.07em;text-shadow:0 18px 70px rgba(0,0,0,.32)}.hero-mark em{display:block;color:var(--mint);font-style:normal}.hero-scene p{font-size:clamp(18px,2vw,28px);color:#cce7e1;letter-spacing:.08em}.window{height:100%;border:1px solid rgba(255,255,255,.28);border-radius:24px;background:rgba(244,250,248,.96);box-shadow:0 34px 100px rgba(0,0,0,.36);overflow:hidden;transform:rotateX(2deg);animation:windowFloat 5s ease-in-out infinite}.window-bar{height:48px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 18px;gap:7px}.window-bar i{width:9px;height:9px;border-radius:50%;background:#d6e2df}.window-bar strong{margin-left:14px;font-size:11px;letter-spacing:.12em;color:#53716d}.app-shell{display:grid;grid-template-columns:210px 1fr;height:calc(100% - 48px)}.side{background:#092d32;color:#cae2dd;padding:22px 15px}.side h3{color:#fff;margin:0 8px 22px;font-size:15px}.side span{display:block;padding:9px 10px;margin:4px 0;border-radius:8px;font-size:10px}.side .active{background:#118577;color:#fff}.canvas{padding:24px;overflow:hidden}.canvas-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.canvas-head small{font-size:9px;letter-spacing:.13em;color:#647d79}.canvas-head h2{margin:4px 0 0;font-size:22px}.pill{padding:7px 11px;border-radius:99px;background:#dbf2eb;color:#087363;font-size:9px;font-weight:900}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.kpi,.panel{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 24px rgba(22,62,61,.06)}.kpi{padding:16px;animation:rise .65s both}.kpi:nth-child(2){animation-delay:.1s}.kpi:nth-child(3){animation-delay:.2s}.kpi:nth-child(4){animation-delay:.3s}.kpi span{font-size:8px;color:#718682;text-transform:uppercase;font-weight:800}.kpi b{display:block;font-size:21px;margin-top:9px}.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:14px}.panel{padding:16px;min-height:190px}.panel h4{margin:0 0 14px;font-size:11px}.bars{display:grid;gap:11px}.bar{display:grid;grid-template-columns:70px 1fr 55px;gap:8px;align-items:center;font-size:8px;color:#607571}.bar i{height:7px;background:#e4efec;border-radius:99px;overflow:hidden}.bar i:after{content:"";display:block;height:100%;width:var(--w);background:linear-gradient(90deg,#0b7e73,#66ceb8);border-radius:inherit;animation:grow 1.1s .3s both}.donut{width:130px;height:130px;margin:auto;border-radius:50%;background:conic-gradient(#0c887b 0 63%,#f2b44b 63% 78%,#c5ded8 78%);display:grid;place-items:center}.donut:after{content:attr(data-value);width:76px;height:76px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:16px;font-weight:900}.records{display:grid;gap:8px}.record{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;padding:8px}.avatar{width:30px;height:30px;border-radius:9px;background:#d9eee9;display:grid;place-items:center;font-size:8px;font-weight:900;color:#087568}.record b{font-size:9px}.record small{display:block;font-size:7px;color:#778b87;margin-top:3px}.status{font-size:7px;padding:5px 7px;border-radius:99px;background:#daf1e8;color:#08705f;font-weight:900}.workflow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:30px 0}.step{flex:1;text-align:center;position:relative}.step:not(:last-child):after{content:"";height:2px;background:#cce3de;position:absolute;left:60%;right:-40%;top:16px}.step b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#0b8578;color:#fff;margin:0 auto 8px;font-size:10px}.step span{font-size:8px;font-weight:800}.attendance{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.attendance .kpi b{color:#0c8075}.line-chart{height:150px;position:relative;border-left:1px solid #d9e5e2;border-bottom:1px solid #d9e5e2}.line-chart svg{width:100%;height:100%}.line-chart polyline{fill:none;stroke:#0b897b;stroke-width:4}.line-chart circle{fill:#fff;stroke:#0b897b;stroke-width:3}.module-cloud{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:14px;height:100%}.module{padding:18px 22px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);backdrop-filter:blur(12px);border-radius:16px;color:#fff;font-weight:800;animation:rise .6s both}.closing{display:grid;place-items:center;text-align:center;color:#fff}.closing h1{font-size:clamp(56px,9vw,120px);margin:0;letter-spacing:-.06em}.closing h1 span{color:var(--mint)}.closing h2{font-weight:400;letter-spacing:.14em;color:#d3e8e3}.closing p{margin-top:70px;color:#9cc9c0}.promo-caption{position:absolute;left:4vw;right:4vw;bottom:62px;color:#fff;z-index:6;pointer-events:none}.promo-caption span{font-size:9px;font-weight:900;color:var(--mint);letter-spacing:.18em}.promo-caption p{font-size:clamp(13px,1.4vw,20px);line-height:1.4;margin:5px 0;max-width:900px;text-shadow:0 2px 12px #000}.promo-controls{position:absolute;right:4vw;bottom:18px;display:flex;gap:7px;z-index:8}.promo-controls button{border:1px solid rgba(255,255,255,.24);background:rgba(5,24,29,.68);color:#d8ebe7;border-radius:99px;padding:7px 11px;font-size:9px;cursor:pointer}.promo-controls button:hover{background:#118577}.scene-tag{display:inline-block;padding:7px 12px;background:#dff2ed;color:#08776b;border-radius:99px;font-size:8px;font-weight:900}@keyframes sceneIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes grow{from{width:0}to{width:var(--w)}}@keyframes windowFloat{50%{transform:rotateX(2deg) translateY(-5px)}}@keyframes float{50%{transform:translate(20px,16px) scale(1.08)}}@media(max-width:750px){.promo-stage{inset:70px 2vw 145px}.scene{height:64vh}.app-shell{grid-template-columns:110px 1fr}.side{padding:12px 7px}.side span{font-size:7px;padding:7px}.canvas{padding:12px}.kpis{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}.grid .panel:last-child{display:none}.promo-caption{bottom:85px}.promo-controls{left:4vw;right:auto;bottom:18px}.promo-controls button{padding:7px 8px}}