*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{color:#0f172a;background:linear-gradient(135deg,#667eea 0%,#fff 50%,#4facfe 100%) 0 0/400% 400%;font-family:Outfit,sans-serif;animation:15s infinite gradientAnimation;overflow-x:hidden}@keyframes gradientAnimation{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.glow-orb{filter:blur(100px);opacity:.12;pointer-events:none;z-index:-1;border-radius:50%;position:fixed}.orb-1{background:#667eea;width:600px;height:600px;animation:10s infinite float;top:-200px;left:-200px}.orb-2{background:#fa709a;width:500px;height:500px;animation:12s infinite reverse float;bottom:-150px;right:-150px}@keyframes float{0%,to{transform:translate(0)}50%{transform:translate(30px,-30px)}}.menu-bar{-webkit-backdrop-filter:blur(15px);z-index:1000;background:#ffffffd9;border:1px solid #fff6;border-radius:50px;justify-content:space-between;align-items:center;width:90%;max-width:1100px;padding:12px 30px;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .4s;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #00000014}.nav-hidden{opacity:0;visibility:hidden;transform:translate(-50%)translateY(-20px)}.menu-links{gap:25px;list-style:none;display:flex}.menu-links a{color:#334155;align-items:center;font-size:15px;font-weight:500;text-decoration:none;transition:all .3s;display:flex}.menu-links a:hover{color:#667eea}.menu-logo{color:#54689e;padding-bottom:4px;font-size:22px;font-weight:900;line-height:1;text-decoration:none;position:relative}.menu-logo:after{content:"";background:#d1242a;width:100%;height:3px;position:absolute;bottom:0;left:0}.menu-btn{color:#fff;background:linear-gradient(135deg,#0043f6,#b800eb,#0043f6) 0 0/200%;border-radius:30px;padding:10px 22px;font-size:14px;font-weight:700;text-decoration:none;transition:all .3s;animation:4s linear infinite shine;box-shadow:0 8px 20px #b800eb4d}.menu-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.dropdown{opacity:0;visibility:hidden;background:#fff;border-radius:12px;min-width:250px;margin-top:15px;padding:10px 0;transition:all .3s;position:absolute;top:100%;left:0;box-shadow:0 10px 30px #0000001a}.menu-links li:hover .dropdown{opacity:1;visibility:visible}.dropdown a{padding:10px 20px;font-size:14px;display:block;color:#333!important}.container{text-align:center;max-width:1200px;margin:0 auto;padding:160px 20px 60px}.hero-label-hrm{background:linear-gradient(135deg,#572dff,#9d4dff);-webkit-text-fill-color:transparent;text-transform:uppercase;letter-spacing:2px;-webkit-background-clip:text;background-clip:text;margin-bottom:20px;font-size:20px;font-weight:800;display:block}.hero-h1{color:#1e293b;letter-spacing:-1px;margin-bottom:20px;font-size:56px;font-weight:900;line-height:1.2}.hero-sub{color:#475569;max-width:900px;margin:0 auto 50px;font-size:18px;font-weight:500;line-height:1.6}.cta-group{justify-content:center;gap:20px;margin-bottom:80px;display:flex}.btn-outline{color:#667eea;background:#fff;border:2px solid #667eea;border-radius:30px;padding:10px 26px;font-weight:700;text-decoration:none;transition:all .3s}.btn-outline:hover{background:#f8fafc;transform:translateY(-2px)}.bento-section{max-width:1200px;margin:0 auto 100px;padding:20px}.section-title{text-align:center;color:#1e293b;margin-bottom:50px;font-size:36px;font-weight:900}.bento-grid{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.bento-card{background:#fff;border:1px solid #f1f5f9;border-radius:30px;flex-direction:column;justify-content:flex-start;height:100%;min-height:280px;padding:25px;transition:transform .3s;display:flex;overflow:hidden;box-shadow:0 10px 30px #00000008}.bento-card:hover{transform:translateY(-5px)}.card-title{color:#1e293b;margin-bottom:6px;font-size:18px;font-weight:800;display:block}.card-desc{color:#64748b;margin-bottom:15px;font-size:13px;line-height:1.5}.visual-card{border-radius:15px;flex-direction:column;flex:1;width:100%;margin-top:auto;display:flex;position:relative}.claim-card{background:#f8fafc;border-radius:15px;flex-direction:column;flex:1;gap:10px;padding:10px;display:flex}.claim-stats{gap:10px;display:flex}.claim-stat{background:#fff;border-radius:12px;flex:1;padding:12px}.claim-stat-header{letter-spacing:.3px;align-items:center;gap:5px;margin-bottom:10px;font-size:10px;font-weight:800;display:flex}.claim-pending{color:#d97706}.claim-drafts{color:#ef4444}.claim-stat-amount{color:#0f172a;font-size:18px;font-weight:800}.claim-record{background:#fff;border-radius:12px;flex:1;justify-content:space-between;align-items:center;padding:14px;display:flex}.claim-record-info{flex-direction:column;gap:5px;display:flex}.claim-record-date{color:#0f172a;font-size:13px;font-weight:800}.claim-record-type{color:#94a3b8;font-size:11px}.claim-record-right{flex-direction:column;align-items:flex-end;gap:8px;display:flex}.claim-record-amount{color:#0f172a;font-size:15px;font-weight:800}.claim-record-pending{color:#d97706;background:#fef3c7;border-radius:20px;padding:4px 10px;font-size:9px;font-weight:800}.perf-container{background:#f8fafc;border-radius:15px;padding:15px}.chart-wrapper{border-bottom:1px solid #cbd5e1;justify-content:space-between;align-items:flex-end;height:80px;padding-bottom:5px;display:flex;position:relative}.bar{background:linear-gradient(#764ba2,#667eea);border-radius:4px 4px 0 0;width:12%;position:relative}.bar:first-child{height:40%}.bar:nth-child(2){height:60%}.bar:nth-child(3){height:50%}.bar:nth-child(4){height:80%}.bar:nth-child(5){height:70%}.trend-line{pointer-events:none;position:absolute;inset:0}.trend-svg{fill:none;stroke:#ef4444;stroke-width:2px;width:100%;height:100%}.chart-labels{color:#64748b;justify-content:space-between;margin-top:5px;font-size:10px;font-weight:600;display:flex}.chart-legend{justify-content:center;gap:10px;margin-top:10px;font-size:10px;display:flex}.legend-item{align-items:center;gap:4px;display:flex}.dot-bar{background:#667eea;border-radius:2px;width:8px;height:8px}.dot-line{background:#ef4444;width:8px;height:2px}.attend-card{background:#fff;border:1px solid #f1f5f9;border-radius:15px;flex-direction:column;flex:1;display:flex;overflow:hidden}.attend-header{border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;padding:12px 14px;display:flex}.attend-title{color:#0f172a;font-size:12px;font-weight:800}.attend-summary{color:#64748b;background:#f1f5f9;border-radius:20px;padding:4px 8px;font-size:9px;font-weight:700}.attend-body{flex-direction:column;flex:1;justify-content:center;gap:8px;padding:12px 14px;display:flex}.attend-day{background:#f8fafc;border-radius:12px;align-items:center;gap:12px;padding:8px 10px;display:flex}.date-box{background:#fff;border-radius:10px;flex-direction:column;align-items:center;min-width:42px;padding:8px 10px;display:flex}.date-dow{letter-spacing:.5px;color:#94a3b8;font-size:8px;font-weight:700}.date-num{color:#0f172a;font-size:16px;font-weight:800}.attend-info{flex-direction:column;flex:1;display:flex}.attend-status{color:#0f172a;font-size:12px;font-weight:800}.attend-time{color:#94a3b8;font-size:10px}.attend-dot{border-radius:50%;width:10px;height:10px}.dot-green{background:#22c55e}.dot-yellow{background:#eab308}.recruit-card{background:#fff;border:1px solid #f1f5f9;border-radius:15px;flex-direction:column;flex:1;padding:14px;display:flex}.recruit-top{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.cand-name{color:#1e293b;font-size:14px;font-weight:800}.recruit-checkbox{border:1.5px solid #cbd5e1;border-radius:4px;width:14px;height:14px;display:inline-block}.recruit-label{letter-spacing:.5px;text-transform:uppercase;color:#94a3b8;margin-bottom:6px;font-size:9px;font-weight:700}.recruit-exp-box{background:#eef2ff;border-left:3px solid #6366f1;border-radius:6px;margin-bottom:10px;padding:8px 10px}.recruit-exp-title{color:#1e293b;font-size:12px;font-weight:800}.recruit-exp-sub{color:#64748b;font-size:10px}.recruit-education{color:#334155;margin-bottom:10px;font-size:11px}.skill-tags{flex-wrap:wrap;gap:6px;margin-bottom:10px;display:flex}.skill-tag{color:#475569;background:#f1f5f9;border-radius:20px;padding:4px 10px;font-size:9px;font-weight:600}.recruit-divider{border-top:1px solid #f1f5f9;margin-top:auto;margin-bottom:10px}.recruit-actions{align-items:center;gap:8px;display:flex}.icon-btn{cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;min-width:28px;height:28px;font-size:12px;display:flex}.icon-btn-delete{color:#fff;background:#ef4444}.icon-btn-edit{color:#475569;background:#e2e8f0}.btn-schedule{color:#fff;cursor:pointer;background:#6366f1;border:none;border-radius:8px;flex:1;padding:8px;font-size:11px;font-weight:700}.leave-card{background:#fff;border:1px solid #f1f5f9;border-radius:15px;padding:15px}.leave-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.leave-type{color:#1e293b;font-size:13px;font-weight:800}.leave-status{color:#d97706;background:#fef3c7;border-radius:6px;padding:3px 8px;font-size:9px;font-weight:800}.leave-dates{gap:5px;margin-bottom:15px;display:flex}.date-box{text-align:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;flex:1;padding:8px}.date-label{color:#94a3b8;margin-bottom:2px;font-size:9px;display:block}.date-val{color:#334155;font-size:11px;font-weight:700}.leave-actions{gap:8px;display:flex}.btn-approve{color:#166534;cursor:pointer;background:#dcfce7;border:1px solid #86efac;border-radius:6px;flex:1;padding:8px;font-size:10px;font-weight:700}.btn-reject{color:#991b1b;cursor:pointer;background:#fee2e2;border:1px solid #fca5a5;border-radius:6px;flex:1;padding:8px;font-size:10px;font-weight:700}.payroll-card{background:#fff;border:1px solid #f1f5f9;border-radius:15px;flex-direction:column;flex:1;padding:0;font-family:Outfit,sans-serif;display:flex;overflow:hidden}.pay-header{color:#0f172a;background:#fff;border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;padding:12px 14px;display:flex}.pay-title{color:#0f172a;font-size:12px;font-weight:800}.pay-download{color:#fff;white-space:nowrap;background:#2563eb;border-radius:20px;padding:5px 10px;font-size:9px;font-weight:700}.pay-body{color:#334155;padding:12px 14px;font-size:10px}.pay-section-label{color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #f1f5f9;margin:10px 0 6px;padding-bottom:6px;font-size:9px;font-weight:600}.pay-section-label:first-child{margin-top:0}.pay-row{color:#64748b;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:10px;display:flex}.pay-amount{color:#0f172a;font-size:11px;font-weight:800}.pay-row.deduct span:last-child{color:#ef4444;font-weight:700}.pay-total{background:#eef5f2;border-radius:10px;justify-content:space-between;align-items:center;margin:auto 14px 14px;padding:10px 12px;display:flex}.net-label,.net-amount{color:#1d4d43;font-family:Outfit,sans-serif;font-size:11px;font-weight:800}.dash-grid{color:#fff;background:#1e293b;border-radius:20px;flex-direction:column;gap:10px;padding:15px;font-size:11px;display:flex}.dash-col h5{text-transform:uppercase;color:#94a3b8;letter-spacing:.5px;margin-bottom:6px;font-size:10px}.int-item{background:#ffffff0d;border-left:3px solid #667eea;border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:4px;padding:6px 10px;display:flex}.int-item.yellow{border-left-color:#f59e0b}.int-name{font-size:11px;font-weight:600}.int-stat{color:#cbd5e1;font-size:9px}.status-bar{background:#0000004d;border-radius:8px;justify-content:space-between;align-items:center;margin-top:5px;padding:8px;display:flex}.stat-text{color:#94a3b8;align-items:center;gap:4px;font-size:9px;display:flex}.stat-live{background:#22c55e;border-radius:50%;width:6px;height:6px;box-shadow:0 0 5px #22c55e}.hero-card{box-shadow:none;background:0 0;border:none;grid-area:2/3/4;justify-content:center;align-items:center;margin-bottom:0;display:flex}.mobile-app-img{-o-object-fit:contain;object-fit:contain;border-radius:30px;max-width:100%;height:100%;max-height:100%;transition:transform .3s}.mobile-app-img:hover{transform:translateY(-10px)}.icon-3d{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:16px;justify-content:center;align-items:center;width:58px;height:58px;margin-bottom:15px;font-size:28px;transition:all .3s;display:flex;box-shadow:0 10px 20px #667eea4d}.bento-card:hover .icon-3d{transform:scale(1.1)rotate(-5deg);box-shadow:0 15px 30px #667eea66}.footer-section{color:#fff;background:linear-gradient(#0f172a 0%,#1e293b 100%);margin-top:50px;padding:80px 20px 30px;font-family:Outfit,sans-serif;position:relative;overflow:hidden}.footer-section:before{content:"";pointer-events:none;background:radial-gradient(circle at 20%,#667eea1a 0%,#0000 50%),radial-gradient(circle at 80% 80%,#84fab014 0%,#0000 50%);animation:15s ease-in-out infinite bgShift;position:absolute;inset:0}@keyframes bgShift{0%,to{opacity:.5}50%{opacity:.8}}.footer-container{text-align:center;z-index:1;flex-direction:column;align-items:center;max-width:1100px;margin:0 auto;display:flex;position:relative}.footer-logo{color:#54689e;margin-bottom:24px;padding-bottom:8px;font-size:36px;font-weight:900;display:inline-block;position:relative}.footer-logo:after{content:"";background:#d1242a;width:100%;height:5px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.footer-info p{color:#cbd5e1;max-width:600px;margin-bottom:20px;font-size:15px;line-height:1.8}.footer-contact{flex-wrap:wrap;justify-content:center;gap:30px;margin-top:20px;display:flex}.footer-contact-item{color:#cbd5e1;cursor:default;align-items:center;gap:8px;margin-bottom:14px;font-size:14px;transition:all .3s;display:flex}.footer-contact-item:hover{color:#fff;transform:translateY(-2px)}.footer-contact-item span{color:#667eea;font-size:18px}.cert-logos{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px;display:flex}.cert-badge{background:#fffffff2;border:1px solid #fff3;border-radius:8px;justify-content:center;align-items:center;width:140px;height:60px;padding:8px 12px;transition:all .3s;display:flex}.cert-badge:hover{background:#fff;transform:translateY(-5px);box-shadow:0 5px 15px #0003}.cert-badge img{-o-object-fit:contain;object-fit:contain;max-width:120px;max-height:40px}.footer-bottom{color:#94a3b8;border-top:1px solid #ffffff1a;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-top:60px;padding-top:30px;font-size:13px;display:flex}.footer-links{gap:20px;display:flex}.footer-links a{color:#cbd5e1;background:0 0;font-size:13px;font-weight:600;text-decoration:none;transition:all .3s;position:relative}.footer-links a:after{content:"";background:linear-gradient(90deg,#667eea,#84fab0);width:0;height:2px;transition:width .3s;position:absolute;bottom:-4px;left:0}.footer-links a:hover{color:#fff;transform:translateY(-2px)}.footer-links a:hover:after{width:100%}.bento-row{display:contents}@media (max-width:1024px){.bento-grid{grid-template-columns:repeat(2,1fr);gap:20px;display:grid}.bento-card{height:440px}.hero-card{order:99;grid-area:auto/1/auto/-1;margin-top:20px;margin-bottom:30px}.mobile-app-img{width:auto;max-height:450px}.footer-container{grid-template-columns:1fr}.menu-links{display:none}}@media (max-width:768px){.footer-bottom{text-align:center;flex-direction:column;justify-content:center;gap:16px}.footer-links{justify-content:center}}@media (max-width:600px){.bento-grid{flex-direction:column;gap:20px;display:flex}.bento-row{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:15px;padding-bottom:10px;display:flex;overflow-x:auto}.bento-row::-webkit-scrollbar{display:none}.bento-card{scroll-snap-align:start;flex:0 0 85%;height:400px}.hero-card{justify-content:center;width:100%;margin-top:10px;display:flex}.mobile-app-img{max-height:400px}.wide-card{flex-direction:column}}@keyframes shine{to{background-position:200%}}@media (max-width:768px){.menu-bar{justify-content:space-between;align-items:center;gap:10px;display:flex;flex-wrap:wrap!important;padding:10px 15px!important}.menu-links{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#fffffffa;border-radius:15px;flex-direction:column;order:3;width:100%;margin-top:10px;padding:15px;box-shadow:0 10px 30px #0000001a;display:none!important}.menu-links.active{display:flex!important}.menu-links li{text-align:left;width:100%}.menu-links>li>a{border-bottom:1px solid #0000000d;justify-content:space-between;padding:12px 10px;display:flex}.dropdown{display:none;opacity:1!important;visibility:visible!important;box-shadow:none!important;background:0 0!important;margin-top:5px!important;padding-left:20px!important;position:static!important}.dropdown.active{display:block}.dropdown a{border-bottom:1px solid #00000005;padding:10px!important}.mobile-menu-btn{cursor:pointer;color:#334155;background:0 0;border:none;order:1;justify-content:center;align-items:center;font-size:24px;display:flex!important}#main-nav>div{flex:1;order:2;justify-content:flex-end;gap:10px;display:flex}.menu-logo{font-size:20px!important}}@media (min-width:769px){.mobile-menu-btn{display:none!important}}