:root{--ink: #19171c;--ink-2: #3d3d3f;--ink-3: #6b6b6e;--paper: #f4f2ed;--paper-2: #eae7df;--rule: #d9d6cd;--rule-dark: #2a272d;--accent: #98bf0e;--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}html{scroll-behavior:smooth;overflow-x:hidden;max-width:100vw}body{overflow-x:hidden}body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}::selection{background:var(--accent);color:var(--ink)}.wrap{max-width:1240px;margin:0 auto;padding:0 32px}@media(max-width:640px){.wrap{padding:0 20px}}.mono{font-family:var(--mono);font-weight:400}.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-3);text-transform:uppercase}.accent-dot{display:inline-block;width:8px;height:8px;background:var(--accent);border-radius:50%;vertical-align:middle;margin-right:8px;transform:translateY(-1px)}.nav{position:sticky;top:0;z-index:40;background:#f4f2ede0;backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--rule)}.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}.brand{font-family:var(--mono);font-weight:600;font-size:18px;letter-spacing:.04em;display:flex;align-items:center;gap:10px;line-height:1}.brand-mark{width:1em;height:1em;background:url(/assets/tokom-mark.jpg) center / cover no-repeat;flex-shrink:0}.foot-brand .brand-mark{mix-blend-mode:screen;border-radius:0}.nav-links{display:flex;gap:28px;font-family:var(--mono);font-size:13px}.nav-links a{color:var(--ink-2);transition:color .15s ease;position:relative;padding:4px 0}.nav-links a:hover,.nav-links a.is-active{color:var(--ink)}.nav-links a.is-active:before{content:"";position:absolute;left:-12px;top:50%;width:6px;height:6px;background:var(--accent);border-radius:50%;transform:translateY(-50%)}.nav-cta{font-family:var(--mono);font-size:13px;padding:9px 16px;border:1px solid var(--ink);color:var(--ink);transition:all .15s ease}.nav-cta:hover{background:var(--ink);color:var(--paper)}@media(max-width:900px){.nav-links{display:none}}@media(max-width:400px){.nav-cta{font-size:11px;padding:7px 10px}.svc-toolbar{flex-direction:column;align-items:flex-start;gap:8px}}.lang-desktop{display:flex;gap:8px;font-family:var(--mono);font-size:12px}.lang-desktop a{color:var(--ink-3);padding:2px 6px;transition:color .15s ease}.lang-desktop a:hover{color:var(--ink)}.lang-desktop a.is-current{color:var(--ink);border-bottom:2px solid var(--accent)}.lang-mobile{display:none;justify-content:center;gap:16px;font-family:var(--mono);font-size:12px;padding:8px 0;border-bottom:1px solid var(--rule);background:var(--paper)}.lang-mobile a{color:var(--ink-3);padding:4px 10px;transition:color .15s ease}.lang-mobile a:hover{color:var(--ink)}.lang-mobile a.is-current{color:var(--ink);border-bottom:2px solid var(--accent)}@media(max-width:900px){.lang-desktop{display:none}.lang-mobile{display:flex}}.hero{padding:120px 0 100px;border-bottom:1px solid var(--rule);position:relative;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr;gap:48px;position:relative;z-index:1}.hero h1{font-family:var(--mono);font-weight:500;font-size:clamp(36px,5.4vw,68px);line-height:1.05;letter-spacing:-.01em;margin:24px 0 0;max-width:16ch;text-wrap:balance}.hero h1 .hl{color:var(--ink);background-image:linear-gradient(var(--accent),var(--accent));background-position:0 88%;background-size:100% .12em;background-repeat:no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}.hero-sub{margin-top:28px;max-width:56ch;font-size:18px;line-height:1.55;color:var(--ink-2)}.hero-meta{margin-top:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-top:24px;border-top:1px solid var(--rule);font-family:var(--mono)}.hero-meta .k{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}.hero-meta .v{font-size:15px;color:var(--ink)}.hero-meta .v strong{font-family:var(--mono);font-weight:600}@media(max-width:780px){.hero-meta{grid-template-columns:repeat(2,1fr)}}.cta-row{margin-top:36px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:14px;padding:14px 22px;transition:transform .15s ease,background .15s ease,color .15s ease;cursor:pointer;border:none}.btn-primary{background:var(--ink);color:var(--paper)}.btn-primary:hover{background:var(--accent);color:var(--ink)}.btn-ghost{border:1px solid var(--ink-2);color:var(--ink);background:transparent}.btn-ghost:hover{border-color:var(--ink)}.btn .arrow{display:inline-block;transition:transform .2s ease}.btn:hover .arrow{transform:translate(3px)}.hero-ruler{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--rule) 1px,transparent 1px);background-size:100% 80px;opacity:.35;mask-image:linear-gradient(180deg,transparent 0,black 40%,black 80%,transparent 100%)}section{position:relative}.section-head{display:grid;grid-template-columns:160px 1fr;gap:40px;padding:72px 0 40px;align-items:baseline}.section-head .idx{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.08em}.section-head h2{font-family:var(--mono);font-weight:500;font-size:clamp(26px,3.2vw,40px);line-height:1.1;margin:0;letter-spacing:-.01em}.section-head .lead{margin-top:16px;max-width:62ch;color:var(--ink-2);font-size:16px}@media(max-width:760px){.section-head{grid-template-columns:1fr;gap:8px;padding:56px 0 28px}}@media(max-width:620px){.hero{padding:24px 0 40px}}@media(max-width:400px){.hero h1{font-size:clamp(28px,8vw,36px)}.contact-list li{grid-template-columns:1fr;gap:4px}}.services{border-top:1px solid var(--rule)}.svc-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 0 20px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}.svc-filter{display:inline-flex;gap:0;border:1px solid var(--rule)}.svc-filter button{font-family:var(--mono);font-size:12px;padding:8px 14px;background:transparent;border:none;color:var(--ink-2);cursor:pointer;letter-spacing:.04em;border-right:1px solid var(--rule)}.svc-filter button:last-child{border-right:none}.svc-filter button.active{background:var(--ink);color:var(--paper)}.svc-filter button:hover:not(.active){background:var(--paper-2)}.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}@media(max-width:980px){.svc-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.svc-grid{grid-template-columns:1fr}}.svc{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:28px 28px 32px;background:var(--paper);transition:background .2s ease;position:relative;display:flex;flex-direction:column;cursor:pointer;min-height:300px}.svc:hover{background:var(--paper-2)}.svc.is-open{background:var(--ink);color:var(--paper)}.svc.is-open .svc-desc,.svc.is-open .svc-num,.svc.is-open .svc-more{color:var(--paper)}.svc.is-open .svc-short{color:#f4f2edb3}.svc.is-open .svc-media{background:var(--rule-dark);border-color:#36343a;aspect-ratio:2 / 1}.svc.is-open .svc-media .svc-media-label{color:#f4f2ed80}.svc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.svc-num{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.06em}.svc-toggle{font-family:var(--mono);font-size:18px;color:var(--ink-2);line-height:1;transition:transform .2s ease}.svc.is-open .svc-toggle{transform:rotate(45deg);color:var(--accent)}.svc h3{font-family:var(--mono);font-weight:500;font-size:19px;line-height:1.25;margin:4px 0 10px;letter-spacing:-.005em}.svc-short{font-size:14px;color:var(--ink-2);line-height:1.5;margin-bottom:18px}.svc-media{margin-top:12px;aspect-ratio:3 / 1;height:auto;background:var(--paper-2);border:1px solid var(--rule);position:relative;overflow:hidden;transition:aspect-ratio .3s ease;background-image:repeating-linear-gradient(135deg,transparent 0 8px,rgba(25,23,28,.04) 8px 9px)}.svc-media-real{background-image:none!important}.svc-media-real img{width:100%;height:100%;object-fit:cover;display:block}.svc-media .svc-media-label{position:absolute;bottom:8px;left:10px;font-family:var(--mono);font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}.svc-media .svc-icon{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em}.svc-desc{font-size:14px;line-height:1.55;color:var(--ink-2);max-height:0;overflow:hidden;transition:max-height .3s ease,margin .3s ease,padding .3s ease}.svc.is-open .svc-desc{max-height:800px;margin-top:18px;padding-top:18px;border-top:1px solid rgba(244,242,237,.15)}.svc-more{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-top:14px;display:inline-flex;align-items:center;gap:8px}.svc-more:before{content:"";width:18px;height:1px;background:currentColor}.clients{border-top:1px solid var(--rule);background:var(--paper-2);padding:80px 0;overflow:hidden}.clients-track-wrap{margin-top:40px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}.clients-track{display:flex;gap:40px;align-items:center;width:max-content;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}.clients-track-wrap{cursor:grab}.clients-track-wrap.is-dragging{cursor:grabbing}.client{padding:16px 28px;border:1px solid var(--rule);background:var(--paper);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;height:72px;flex-shrink:0}.client img{height:36px;width:auto;object-fit:contain;display:block}@media(max-width:620px){.clients-track{gap:20px}.client{height:60px;padding:12px 20px}.client img{height:28px}}.process{background:var(--ink);color:var(--paper);padding:100px 0 120px}.process .section-head h2,.process .section-head .idx,.process .section-head .lead{color:var(--paper)}.process .section-head .idx,.process .section-head .lead{color:#f4f2eda6}.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid rgba(244,242,237,.15);margin-top:16px}@media(max-width:980px){.process-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.process-grid{grid-template-columns:1fr}}.p-item{padding:28px 24px 36px;border-right:1px solid rgba(244,242,237,.15);border-bottom:1px solid rgba(244,242,237,.15);position:relative}.p-item:last-child{border-right:none}.p-item .p-num{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.08em}.p-item h4{font-family:var(--mono);font-weight:500;font-size:17px;line-height:1.25;margin:20px 0 12px;color:var(--paper)}.p-item p{font-size:14px;color:#f4f2edbf;line-height:1.55;margin:0}.modes{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:24px}@media(max-width:720px){.modes{grid-template-columns:1fr}}.mode{padding:28px;border:1px solid rgba(244,242,237,.2)}.mode h5{margin:0 0 10px;font-family:var(--mono);font-weight:500;font-size:15px;color:var(--paper)}.mode h5 .dot{color:var(--accent);margin-right:8px}.mode p{margin:0;font-size:14px;color:#f4f2edb8;line-height:1.55}.about{border-top:1px solid var(--rule);padding-bottom:100px}.about-grid{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:start}@media(max-width:820px){.about-grid{grid-template-columns:1fr;gap:32px}}.portrait{aspect-ratio:4/5;background:var(--paper-2);border:1px solid var(--rule);position:relative;overflow:hidden;background-image:repeating-linear-gradient(135deg,transparent 0 8px,rgba(25,23,28,.05) 8px 9px)}.portrait img{width:100%;height:100%;object-fit:cover;display:block}.about-body h3{font-family:var(--mono);font-weight:500;font-size:22px;margin:0 0 8px}.about-body .sub{color:var(--ink-3);font-family:var(--mono);font-size:13px;margin-bottom:24px}.about-body p{margin:0 0 18px;color:var(--ink-2);max-width:62ch}.about-meta{margin-top:28px;border-top:1px solid var(--rule);padding-top:20px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;font-family:var(--mono);font-size:13px}.about-meta .k{color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}.about-meta a{border-bottom:1px solid var(--rule);padding-bottom:2px}.about-meta a:hover{border-color:var(--ink)}.contact{border-top:1px solid var(--rule);background:var(--ink);color:var(--paper);padding:100px 0}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:40px}}.contact h2{font-family:var(--mono);font-weight:500;font-size:clamp(32px,4vw,52px);line-height:1.05;margin:0 0 24px;color:var(--paper);letter-spacing:-.01em}.contact h2 .accent{color:var(--accent)}.contact .lead{color:#f4f2edb3;max-width:46ch;margin-bottom:40px}.contact-list{list-style:none;padding:0;margin:0}.contact-list li{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid rgba(244,242,237,.15);font-family:var(--mono)}.contact-list .k{font-size:12px;color:#f4f2ed8c;text-transform:uppercase;letter-spacing:.08em;align-self:center}.contact-list .v{font-size:16px;color:var(--paper)}.contact-list .v a{border-bottom:1px solid rgba(244,242,237,.2);padding-bottom:2px}.contact-list .v a:hover{border-bottom-color:var(--accent);color:var(--accent)}.contact-card{border:1px solid rgba(244,242,237,.2);padding:32px}.contact-card .avail{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:#f4f2edb3;margin-bottom:20px}.contact-card .avail .pulse{width:8px;height:8px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 0 var(--accent);animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #98bf0e99}70%{box-shadow:0 0 0 10px #98bf0e00}to{box-shadow:0 0 #98bf0e00}}.contact-card p{color:#f4f2edbf;margin:0 0 24px}.contact-card .btn-primary{background:var(--accent);color:var(--ink)}.contact-card .btn-primary:hover{background:var(--paper)}footer{background:var(--ink);color:#f4f2eda6;border-top:1px solid rgba(244,242,237,.12);padding:40px 0 32px;font-family:var(--mono);font-size:12px;letter-spacing:.02em}.foot{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center}@media(max-width:780px){.foot{grid-template-columns:1fr;gap:16px}}.foot-legal{line-height:1.7}.foot-links{display:flex;gap:20px}.foot-links a:hover{color:var(--accent)}.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}.reveal.in{opacity:1;transform:none}.only-open{display:none}.svc.is-open .only-open{display:block}