@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap";
:root{--ink:#151c27;--muted:#667085;--blue:#00236f;--blue2:#1e3a8a;--pale:#e7eefe;--bg:#f9f9ff;--green:#087443;--line:#dfe4ef;--orange:#b26a00}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);margin:0;font-family:DM Sans,Arial,sans-serif}a{color:inherit;text-decoration:none}.nav{z-index:10;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#f9f9ffe6;border-bottom:1px solid #e7eaf2;justify-content:space-between;align-items:center;width:min(1240px,100%);height:72px;padding:0 28px;display:flex;position:fixed;top:0;left:50%;transform:translate(-50%)}.brand{letter-spacing:-.05em;font-family:Plus Jakarta Sans;font-size:19px;font-weight:800}.brand span{color:var(--blue)}.nav-links{color:var(--muted);gap:32px;font-size:13px;font-weight:600;display:flex}.nav-links a:hover,.login:hover{color:var(--blue)}.nav-actions{align-items:center;gap:18px;font-size:13px;font-weight:700;display:flex}.login{color:var(--blue)}.button{background:var(--blue);color:#fff;border-radius:10px;justify-content:center;align-items:center;gap:13px;padding:14px 20px;font-size:13px;font-weight:700;transition:all .2s;display:inline-flex;box-shadow:0 9px 20px #00236f24}.button:hover{transform:translateY(-2px);box-shadow:0 12px 24px #00236f30}.button.small{padding:10px 16px}.button.outline{color:var(--blue);box-shadow:none;background:#fff;border:1px solid #cbd4e5}.button.light{color:var(--blue);box-shadow:none;background:#fff}.menu{background:0 0;border:0;font-size:22px;display:none}.hero{background:linear-gradient(135deg,#e7eefeaa,#f9f9ff 70%);padding:150px 28px 95px;position:relative;overflow:hidden}.hero:before{content:"";opacity:.24;background-image:linear-gradient(#4059aa18 1px,#0000 1px),linear-gradient(90deg,#4059aa18 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0}.hero-grid{grid-template-columns:1fr 1.1fr;align-items:center;gap:65px;max-width:1180px;margin:auto;display:grid;position:relative}.hero-copy{max-width:575px}.eyebrow{color:var(--blue2);letter-spacing:.12em;text-transform:uppercase;align-items:center;gap:8px;font-size:11px;font-weight:800;display:inline-flex}.eyebrow i{background:#34b77a;border-radius:50%;width:7px;height:7px;display:block}.hero h1,.section-heading h2,.audience h2,.workflow h2,.security h2,.final-cta h2{letter-spacing:-.055em;margin:19px 0 18px;font-family:Plus Jakarta Sans;font-size:clamp(38px,5vw,64px);line-height:1.12}em{color:var(--blue2);font-style:normal}.hero-copy>p,.section-heading>p,.audience-text>p,.security p,.final-cta p{color:var(--muted);max-width:560px;font-size:16px;line-height:1.75}.hero-actions{align-items:center;gap:24px;margin-top:31px;display:flex}.text-button{color:var(--blue);font-size:13px;font-weight:700}.trust{color:#8a93a5;margin-top:28px;font-size:11px}.trust strong{color:var(--green)}.trust span{padding:0 7px}.product-shot{padding:18px;position:relative}.glow{filter:blur(45px);opacity:.5;background:#b6c4ff;border-radius:50%;position:absolute;inset:8% -10%}.mock-window{background:#fff;border:1px solid #ccd4e5;border-radius:18px;transition:all .4s;position:relative;overflow:hidden;transform:rotate(2deg);box-shadow:0 22px 48px #00236f20}.mock-window:hover{transform:rotate(0)}.mock-top{color:#778096;border-bottom:1px solid #e4e8f2;justify-content:space-between;align-items:center;height:38px;padding:0 15px;font-size:9px;display:flex}.dots{color:#d0d8e6;letter-spacing:2px}.mock-body{grid-template-columns:115px 1fr;min-height:380px;display:grid}.mock-sidebar{color:#8290a8;background:#f5f7fc;align-content:start;gap:17px;padding:22px 13px;font-size:9px;display:grid}.mock-sidebar b{color:var(--blue);margin-bottom:14px;font-size:15px}.mock-sidebar .active{color:var(--blue);background:#e5ebff;border-radius:6px;padding:9px}.mock-main{padding:24px}.mock-main>small{color:#8d98aa;letter-spacing:.1em;font-size:8px}.mock-main h3{margin:7px 0 18px;font-family:Plus Jakarta Sans;font-size:21px}.mock-stats{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.mock-stats div,.mock-card{border:1px solid #e2e7f0;border-radius:9px;padding:13px}.mock-stats b{font-size:18px;display:block}.mock-stats small{color:#8791a3;font-size:8px}.mock-stats .green b{color:var(--green)}.mock-card{margin-top:13px}.chart-title{justify-content:space-between;font-size:10px;display:flex}.chart-title span{color:#8b96a8}.bars{align-items:end;gap:11px;height:108px;padding:14px 7px 0;display:flex}.bars i{background:linear-gradient(#5577dc,var(--blue));border-radius:5px 5px 2px 2px;flex:1;min-height:10px}.list{font-size:10px}.list p{color:#58657b;align-items:center;gap:7px;display:flex}.avatar{width:21px;height:21px;color:var(--blue);background:#dce5ff;border-radius:50%;place-items:center;font-size:8px;font-weight:800;display:inline-grid}.avatar.purple{color:#7440a2;background:#f1e1ff}.list mark{color:var(--green);background:#dff8ea;border-radius:4px;margin-left:auto;padding:4px 6px;font-size:8px}.stats{border-bottom:1px solid var(--line);grid-template-columns:repeat(4,1fr);max-width:1180px;margin:auto;padding:34px 28px;display:grid}.stats div{text-align:center;border-right:1px solid var(--line)}.stats div:last-child{border:0}.stats strong{color:var(--blue);font-family:Plus Jakarta Sans;font-size:23px;display:block}.stats span{color:var(--muted);margin-top:5px;font-size:11px;display:block}.section{max-width:1180px;margin:auto;padding:110px 28px}.section-heading{text-align:center;max-width:700px;margin:0 auto 55px}.section-heading h2,.audience h2,.workflow h2,.security h2,.final-cta h2{font-size:38px}.section-heading>p{margin:0 auto}.feature-grid{grid-template-columns:repeat(4,1fr);gap:15px;display:grid}.feature{border:1px solid var(--line);background:#fff;border-radius:14px;padding:25px 21px;transition:all .2s}.feature:hover{transform:translateY(-4px);box-shadow:0 14px 30px #1e3a8a10}.feature-icon{width:42px;height:42px;color:var(--blue);background:var(--pale);border-radius:11px;place-items:center;font-size:24px;display:grid}.feature h3{margin:22px 0 10px;font-family:Plus Jakarta Sans;font-size:15px}.feature p{color:var(--muted);min-height:60px;font-size:12px;line-height:1.65}.feature a{color:var(--blue);font-size:11px;font-weight:700}.audience{background:#e7eefe55;padding:90px 28px}.audience-inner{max-width:1180px;margin:auto}.audience h2{margin-top:17px}.tabs{background:#dce2f3;border-radius:10px;gap:6px;width:max-content;margin:30px 0;padding:5px;display:flex}.tabs button{color:#6d778c;cursor:pointer;background:0 0;border:0;border-radius:7px;padding:11px 17px;font:600 12px DM Sans}.tabs .selected{color:var(--blue);background:#fff;box-shadow:0 2px 7px #00236f12}.audience-content{grid-template-columns:1fr 1fr;align-items:center;gap:70px;display:grid}.big-icon{color:var(--blue);font-size:32px}.audience-text h3{letter-spacing:-.04em;margin:14px 0;font:700 24px Plus Jakarta Sans}.check-list{color:#426078;gap:11px;font-size:13px;font-weight:600;display:grid}.check-list span:first-child{color:var(--green)}.mini-dashboard{background:#fff;border:1px solid #d9e0ee;border-radius:16px;padding:28px;box-shadow:0 18px 36px #27498a14}.mini-header{border-bottom:1px solid var(--line);justify-content:space-between;padding-bottom:18px;font-size:13px;font-weight:700;display:flex}.mini-header b{color:var(--muted);font-size:10px;font-weight:500}.ring{border:12px solid #d9f4e7;border-right-color:var(--green);border-radius:50%;align-content:center;place-items:center;width:145px;height:145px;margin:25px auto;display:grid}.ring strong{color:var(--blue);font:800 27px Plus Jakarta Sans}.ring span{color:var(--muted);font-size:10px}.mini-row{color:#56647a;justify-content:space-between;padding:13px 0;font-size:12px;display:flex;position:relative}.mini-row b{color:var(--ink)}.mini-row i{background:var(--green);border-radius:4px;height:3px;position:absolute;bottom:0;left:0}.mini-row.orange i{background:#eda337}.mini-row.red i{background:#d85b5b}.pricing{padding-top:115px}.pricing-toggle{border:1px solid var(--line);width:max-content;color:var(--muted);border-radius:30px;align-items:center;gap:12px;margin:0 auto 35px;padding:5px 6px 5px 14px;font-size:11px;display:flex}.pricing-toggle b{color:var(--green);background:#dff8ea;border-radius:12px;padding:5px 8px;font-size:10px}.toggle-dot{background:var(--blue);color:#fff;border-radius:20px;padding:7px 11px}.pricing-grid{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.price-card{border:1px solid var(--line);background:#fff;border-radius:14px;padding:26px 20px;position:relative}.price-card.popular{border:2px solid var(--blue);padding:25px 19px;box-shadow:0 14px 30px #00236f12}.popular-label{background:var(--blue);color:#fff;border-radius:12px;padding:5px 10px;font-size:10px;font-weight:700;position:absolute;top:-12px;left:20px}.price-card h3{margin:0 0 17px;font:700 17px Plus Jakarta Sans}.price{margin:0}.price strong{color:var(--blue);letter-spacing:-.05em;font:800 32px Plus Jakarta Sans}.price span{color:var(--muted);font-size:11px}.users{color:var(--muted);margin:4px 0 20px;font-size:11px}.price-card .button{width:100%;font-size:12px}.price-card hr{border:0;border-top:1px solid var(--line);margin:24px 0 17px}.plan-feature{color:#56647a;margin:10px 0;font-size:11px;display:block}.plan-feature:first-letter{color:var(--green)}.workflow{background:#f0f3ff;padding:105px 28px}.workflow>.section-heading{margin-bottom:48px}.steps{grid-template-columns:repeat(4,1fr);gap:0;max-width:1180px;margin:auto;display:grid}.step{border-top:2px solid #bdc9e8;padding:0 26px 0 0;position:relative}.step:after{content:"→";color:var(--blue);font-size:22px;position:absolute;top:-15px;right:12px}.step:last-child:after{display:none}.step span{color:var(--blue);margin:18px 0;font:800 12px Plus Jakarta Sans;display:block}.step h3{margin:0 0 9px;font:700 15px Plus Jakarta Sans}.step p{color:var(--muted);margin:0;font-size:12px;line-height:1.6}.security{color:#fff;background:#00236f;border-radius:18px;grid-template-columns:100px 1fr 1fr;align-items:center;gap:30px;max-width:1125px;margin:100px auto;padding:50px;display:grid}.security h2{margin:15px 0}.security p{color:#c0ccef}.security .eyebrow{color:#b6c4ff}.security-icon{background:#1e3a8a;border-radius:50%;place-items:center;width:72px;height:72px;font-size:38px;display:grid}.security-points{color:#d5dcf6;gap:15px;font-size:12px;display:grid}.faq{padding-top:30px}.faq-grid{grid-template-columns:1fr 1fr;gap:12px;max-width:900px;margin:auto;display:grid}.faq details{border:1px solid var(--line);background:#fff;border-radius:10px;padding:19px 21px}.faq summary{cursor:pointer;justify-content:space-between;font-size:13px;font-weight:700;list-style:none;display:flex}.faq summary::-webkit-details-marker{display:none}.faq summary b{color:var(--blue);font-size:18px}.faq details p{color:var(--muted);margin:15px 0 0;font-size:12px;line-height:1.6}.final-cta{text-align:center;background:linear-gradient(135deg,#dce2f3,#e7eefe);border-radius:18px;margin:70px 28px 0;padding:85px 20px}.final-cta h2{margin:18px 0 14px}.final-cta p{margin:0 auto 27px}.final-cta .eyebrow{color:var(--blue2)}footer{grid-template-columns:1.3fr 1fr 1fr;align-items:start;gap:30px;max-width:1180px;margin:auto;padding:55px 28px 28px;display:grid}footer p{max-width:240px;color:var(--muted);font-size:12px;line-height:1.6}footer>div{color:var(--muted);gap:20px;font-size:12px;display:flex}footer small{border-top:1px solid var(--line);color:#9aa3b4;grid-column:1/-1;padding-top:24px;font-size:10px}@media (max-width:900px){.nav-links{display:none}.nav-actions{margin-left:auto;margin-right:14px}.menu{display:block}.hero-grid{grid-template-columns:1fr}.hero-copy{text-align:center;margin:auto}.hero-copy>p{margin:auto}.hero-actions{justify-content:center}.product-shot{max-width:680px;margin:auto}.feature-grid,.pricing-grid{grid-template-columns:repeat(2,1fr)}.security{grid-template-columns:75px 1fr;margin:70px 28px}.security-points{grid-column:1/-1;grid-template-columns:1fr 1fr}.audience-content{gap:30px}}@media (max-width:600px){.nav{padding:0 17px}.brand{font-size:16px}.nav-actions{display:none}.hero{padding:125px 17px 60px}.hero h1{font-size:38px}.hero-copy>p{font-size:14px}.hero-actions{flex-direction:column;gap:18px}.trust{font-size:10px}.mock-body{grid-template-columns:74px 1fr}.mock-sidebar{padding:18px 8px;font-size:7px}.mock-sidebar b{font-size:12px}.mock-main{padding:15px}.mock-main h3{font-size:15px}.mock-stats b{font-size:13px}.stats{grid-template-columns:1fr 1fr;gap:18px;padding:28px 17px}.stats div:nth-child(2){border:0}.stats strong{font-size:17px}.stats span{font-size:9px}.section{padding:72px 17px}.section-heading h2,.audience h2,.workflow h2,.security h2,.final-cta h2{font-size:29px}.feature-grid,.pricing-grid,.audience-content,.faq-grid{grid-template-columns:1fr}.audience{padding:65px 17px}.tabs{width:100%}.tabs button{flex:1;padding:11px 5px;font-size:11px}.pricing-grid{gap:25px}.price-card{padding:24px}.steps{grid-template-columns:1fr;gap:28px}.step{border-top:0;border-left:2px solid #bdc9e8;padding:0 0 22px 17px}.step:after{content:"↓";inset:auto auto -16px -9px}.step:last-child{padding-bottom:0}.security{grid-template-columns:1fr;gap:20px;margin:45px 17px;padding:28px 22px}.security-points{grid-template-columns:1fr}.final-cta{margin:45px 17px 0;padding:60px 17px}footer{grid-template-columns:1fr;padding:42px 17px 24px}footer>div{flex-wrap:wrap}footer small{grid-column:auto}}
.pricing-audience-tabs{margin:0 auto 22px}.feature-links{gap:8px;display:grid}.hardware-plan-link{color:var(--blue);font-weight:800}.mobile-menu{display:none}.brand{background:url(/branding/arci-absensi.png) 50%/contain no-repeat;width:138px;height:40px;font-size:0;display:block}.brand span{display:none}.hero{background-image:linear-gradient(90deg,#f9f9fffa 0%,#f9f9ffe0 35%,#f9f9ff2e 72%,#f9f9ff0d 100%),url(/images/hero-attendance-indonesia.png);background-position:50%;background-size:cover}.hero:before{opacity:.08}.hero-grid{display:block}.hero-copy{max-width:575px}.product-shot{display:none}@media (max-width:600px){.brand{width:112px;height:34px}.hero{background-image:linear-gradient(90deg,#f9f9fffa 0%,#f9f9ffd1 58%,#f9f9ff38 100%),url(/images/hero-attendance-indonesia.png);background-position:68%}body{overflow-x:hidden}.nav{height:62px;padding:0 16px}.hero{align-items:center;min-height:650px;padding:110px 18px 58px;display:flex}.hero-copy{max-width:100%}.hero h1{font-size:clamp(34px,10vw,44px)}.hero-copy>p{font-size:14px;line-height:1.65}.hero-actions{gap:14px;width:100%}.hero-actions .button{width:100%}.trust{line-height:1.8}.section-heading{margin-bottom:35px}.pricing-toggle{gap:6px;max-width:100%;padding-left:8px;font-size:10px}.pricing-toggle .toggle-dot{padding:7px 8px}.price-card{width:100%}.hardware-plan-link{line-height:1.5}.feature-links a{min-height:24px}.mobile-menu{z-index:9;border:1px solid var(--line);background:#fffffffa;border-top:0;border-right:0;border-radius:16px 0 0 16px;align-content:start;gap:4px;width:min(82vw,340px);padding:18px 14px;animation:.24s ease-out both slide-menu-right;display:grid;position:fixed;inset:62px 0 0 auto;box-shadow:-16px 0 30px #00236f26}.mobile-menu a{color:var(--blue);padding:12px 10px;font-size:13px;font-weight:800}.mobile-menu .button{color:#fff;text-align:center}}@keyframes slide-menu-right{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.pricing-grid{grid-template-columns:repeat(3,minmax(0,350px));justify-content:center}@media (max-width:900px){.pricing-grid{grid-template-columns:repeat(2,minmax(0,350px))}}@media (max-width:600px){.pricing-grid{grid-template-columns:minmax(0,380px)}}.workflow{background:linear-gradient(135deg,#eef2ff 0%,#f8f9ff 58%,#e6edff 100%);position:relative;overflow:hidden}.workflow:before,.workflow:after{content:"";opacity:.45;border:1px solid #b8c7ef;border-radius:50%;width:240px;height:240px;position:absolute}.workflow:before{top:-135px;left:-100px}.workflow:after{bottom:-150px;right:-110px}.workflow>.section-heading,.workflow .steps{z-index:1;position:relative}.workflow .steps{gap:18px}.workflow .step{background:#ffffffd1;border:1px solid #d2dcf4;border-top:3px solid #9fb4ea;border-radius:15px;min-height:240px;padding:24px 23px 20px;transition:transform .2s,box-shadow .2s,border-color .2s;box-shadow:0 12px 25px #23408512}.workflow .step:hover{border-color:#5477d1;transform:translateY(-7px);box-shadow:0 20px 34px #23408524}.workflow .step:after{content:"→";z-index:2;width:36px;height:36px;color:var(--blue);background:#eef2ff;border:1px solid #b7c7ee;border-radius:50%;place-items:center;font-size:18px;display:grid;top:50%;right:-27px;transform:translateY(-50%)}.workflow .step:last-child:after{display:none}.step-top{justify-content:space-between;align-items:center;display:flex}.workflow .step-number{color:var(--blue);letter-spacing:.08em;margin:0;font:800 12px Plus Jakarta Sans}.step-icon{width:58px;height:58px;color:var(--blue);background:#e3eaff;border-radius:16px;flex:0 0 58px;justify-content:center;align-items:center;font-size:27px;line-height:1;display:flex}.step-icon svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:29px;height:29px;margin:0;display:block}.step-icon-users svg{stroke-width:1.65px;width:34px;height:34px}.step-icon.step-icon-users{justify-content:center;place-items:center;display:flex}.step-icon.step-icon-users svg{align-self:center;margin:0;display:block;position:static;transform:none}.step-icon:not(.step-icon-users){text-align:center;justify-content:center;place-items:center;line-height:1;display:flex}.workflow .step h3{margin:28px 0 10px;font-size:16px}.workflow .step p{min-height:58px}.step-link{color:var(--blue);align-items:center;gap:8px;margin-top:20px;font-size:11px;font-weight:800;display:inline-flex}.step-link b{font-size:15px}@media (max-width:900px){.workflow .steps{gap:18px}.workflow .step:after{width:29px;height:29px;right:-20px}}@media (max-width:600px){.workflow .steps{gap:14px}.workflow .step{min-height:0;padding:22px}.workflow .step:after{content:"↓";inset:auto auto -22px 50%;transform:translate(-50%)}.workflow .step:last-child:after{display:none}.workflow .step p{min-height:0}}